You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
4.2 KiB
144 lines
4.2 KiB
---
|
|
title: UI Kit Page
|
|
---
|
|
extends layouts/_layout
|
|
block content
|
|
.center(style='padding-top: 50px; padding-bottom: 50px')
|
|
div(style='margin-bottom: 10px') Buttons
|
|
div(style='margin-bottom: 10px')
|
|
button.btn Button Default
|
|
div(style='margin-bottom: 10px')
|
|
button.btn.btn_dark Button Dark
|
|
div(style='margin-bottom: 10px')
|
|
button.btn.btn_light Button Light
|
|
div(style='margin-bottom: 10px')
|
|
button.btn.btn_stroke Button Stroke
|
|
div(style='margin-bottom: 10px')
|
|
button.btn.btn_gray Button Gray
|
|
div(style='margin-bottom: 10px')
|
|
button.btn.btn_md Button Medium
|
|
div(style='margin-bottom: 10px')
|
|
button.btn.btn_lg Button Large
|
|
div(style='margin-bottom: 10px')
|
|
.more
|
|
a.more__btn.btn.btn_light(href='#') УЗНАТЬ ПОДРОБНЕЕ
|
|
div(style='margin-bottom: 10px')
|
|
.load
|
|
button.load__btn.btn Подгрузить еще
|
|
div(style='margin-bottom: 10px')
|
|
.load
|
|
button.load__btn.btn.loading Подгрузить еще
|
|
br
|
|
br
|
|
br
|
|
div(style='margin-bottom: 10px') Inputs
|
|
.field
|
|
.field__label
|
|
.field__wrap
|
|
input.field__input(type='text' placeholder='Enter your Name')
|
|
.field.error
|
|
.field__label
|
|
.field__wrap
|
|
input.field__input(type='text' placeholder='Enter your Name')
|
|
.field__error Укажите корректно свои данные
|
|
.field.success
|
|
.field__label
|
|
.field__wrap
|
|
input.field__input(type='text' value='John')
|
|
.field
|
|
.field__label
|
|
.field__wrap
|
|
input.field__input.field__input_bg(type='text' placeholder='Enter your Name')
|
|
.field.error
|
|
.field__label
|
|
.field__wrap
|
|
input.field__input.field__input_bg(type='text' placeholder='Enter your Name')
|
|
.field__error Укажите корректно свои данные
|
|
.field.success
|
|
.field__label
|
|
.field__wrap
|
|
input.field__input.field__input_bg(type='text' value='John')
|
|
br
|
|
br
|
|
br
|
|
div(style='margin-bottom: 10px') Switches
|
|
div(style='margin-bottom: 10px')
|
|
label.switch
|
|
input.switch__input(type='checkbox')
|
|
span.switch__content Normal
|
|
label.switch
|
|
input.switch__input(type='checkbox' checked)
|
|
span.switch__content Selected
|
|
div(style='margin-bottom: 10px')
|
|
label.switch.switch_circle
|
|
input.switch__input(type='radio' name='radio')
|
|
span.switch__content Circle
|
|
label.switch.switch_circle
|
|
input.switch__input(type='radio' name='radio' checked)
|
|
span.switch__content Circle Selected
|
|
div(style='margin-bottom: 10px')
|
|
label.switch.switch_blue
|
|
input.switch__input(type='checkbox')
|
|
span.switch__content Blue
|
|
label.switch.switch_blue
|
|
input.switch__input(type='checkbox' checked)
|
|
span.switch__content Blue Selected
|
|
br
|
|
br
|
|
br
|
|
div(style='margin-bottom: 10px') Drop-down menu
|
|
.field
|
|
.field__wrap
|
|
.field__select.select.js-select
|
|
.select__head.js-select-head Категории
|
|
.select__drop.js-select-drop
|
|
.select__option.js-select-option
|
|
.select__title Персонаж
|
|
.select__option.js-select-option
|
|
.select__title Акварель
|
|
.select__option.js-select-option
|
|
.select__title Иллюстрация
|
|
.select__option.js-select-option
|
|
.select__title Анимация
|
|
.select__option.js-select-option
|
|
.select__title Пастель
|
|
.select__option.js-select-option
|
|
.select__title Пластилин
|
|
.select__option.js-select-option
|
|
.select__title Креативное мышление
|
|
.select__option.js-select-option
|
|
.select__title Моторика
|
|
.select__option.js-select-option
|
|
.select__title Живопись
|
|
input.select__input(type='hidden')
|
|
br
|
|
br
|
|
br
|
|
div(style='margin-bottom: 10px') Likes
|
|
div(style='margin-bottom: 10px')
|
|
a.likes(href='#')
|
|
.likes__counter 253
|
|
.likes__icon
|
|
+i('like')
|
|
+i('like-fill')
|
|
div(style='margin-bottom: 10px')
|
|
a.likes.active(href='#')
|
|
.likes__counter 253
|
|
.likes__icon
|
|
+i('like')
|
|
+i('like-fill')
|
|
div(style='margin-bottom: 10px')
|
|
a.likes(href='#')
|
|
.likes__counter 253
|
|
.likes__icon
|
|
+i('like-bold')
|
|
+i('like-fill-bold')
|
|
div(style='margin-bottom: 10px')
|
|
a.likes.active(href='#')
|
|
.likes__counter 253
|
|
.likes__icon
|
|
+i('like-bold')
|
|
+i('like-fill-bold')
|
|
|
|
|
|
|
|
|