.form-item label.form-label Комментарий textarea.textarea
поле высотой в 46 пикс: класс- input-slim
.form-item label.form-label Логин input.input-slim(type="text" name="user_name" )
поле высотой в 60 пикс: класс -input
.has-placeholder span.input-icon svg.svg-user use(href='../img/sprite.svg#svg-user') input.input(type="text" name="user_name" placeholder=" ") span.fake-placeholder Логин или E-mail
.form-item input.input-slim(type="search" name="search" placeholder="Поиск по артикулу") button.btn-square.btn-search(type="submit") svg.svg-search use(href='../img/sprite.svg#svg-search')
Когда инпут для пароля в фокусе и впечатан хоть один символ, то к иконке-глазик show-passw добавляется класс show-passw-visible. По клику на иконку глазик, у .form-item переключается класс .form-passw-active , меняющий вид иконки
.form-item.form-item-passw.has-placeholder span.input-icon svg.svg-lock use(href='../img/sprite.svg#svg-lock') input.input(type="password" name="user_password" placeholder=" ") span.fake-placeholder Пароль span.show-passw.btn-square
.error-tooltip span Неверный логин или пароль. Попробуйте еще раз
Custom checkbox
label.radio-label input(type="radio" name="radio_name" checked) span.fake-radio span.radio-name Запомнить меня
label.checkbox-label input(type="checkbox" name="chbx_name") span.fake-checkbox span.checkbox-name Запомнить меня
button.generate-btn(type="button") Сгенерировать