Scalable design system based on BEM
Patterns
.pt-table
Модификатор
Значение
Описание
view
default / ghost / inverse
Фона блока
border
all
Бордер блока
stripe
even / odd
Зебрирование таблицы
space-a / space-h / space-v
xs / s / m / l
Внутренние отступы ячеек
__row
Модификатор
Значение
Описание
border
top / bottom
Бордер строки
view
head
Применение стилей шапки
status
default / error / success / warning
Отображение статуса цветной полоской слева
__col
Модификатор
Значение
Описание
align
right
Горизонтальное выравнивание внутри ячейки
width
5 - 100 с шагом 5
Ширина ячейки
.pt-list
Модификатор
Значение
Описание
view
default / ghost / inverse
Фон блока
border
all
Круговой бордер блока
shadow
cloud
Тень
__item
Модификатор
Значение
Описание
border
top / bottom
Бордер строк
border
right / left
Бордер строк
distribute
default / between
Распределение контента по горизонтали
space-a / space-v / space-h / space-t / space-b / space-r / space-l
xs / s / m / l / xl / xxl
Внутренние отступы
space-a / space-v / space-h / space-t / space-b / space-r / space-l
xxs
Внутренние отступы
indent-a / indent-v / indent-h / indent-t / indent-b / indent-r / indent-l
xs / s / m / l / xl / xxl / xxxl
Внешние отступы
.pt-form
Модификатор
Значение
Описание
view
default / ghost / inverse
Фон блока
border
all
Круговой бордер блока
shadow
cloud
Тень
__item
Модификатор
Значение
Описание
border
top / bottom
Бордер строк
border
all
Бордер строк
distribute
default / between
Распределение контента по горизонтали
type
action
Отображение футера с активными действиями
space-a / space-h / space-v / space-t / space-r / space-b / space-l
xs / s / m / l / xl
Внутренние отступы
space-a / space-h / space-v / space-t / space-r / space-b / space-l
xxl / xxxl
Внутренние отступы
indent-a / indent-h / indent-v / indent-t / indent-r / indent-b / indent-l
xs / s / m / l / xl / xxl / xxxl
Внешние отступы
__event
__label
Модификатор
Значение
Описание
width
default / inverse
Ширина
.pt-informer
Модификатор
Значение
Описание
view
success / warning / alert
Фон блока
view
normal
Фон блока
border
all
Круговой бордер блока
__col
__content
Модификатор
Значение
Описание
space-a / space-v / space-h
m / l / xl / xxl
Внутренние отступы
distribute
default / between
Распределение контента по горизонтали
__action
Модификатор
Значение
Описание
space-a / space-v / space-h / space-b
m / l / xl / xxl
Внутренние отступы
.pt-icon-plus
Модификатор
Значение
Описание
vertical-align
center / top
Вертикальное выравнивание
indent
xxs / xs / s / m / l
Внешний отступ снизу
distribute
default / between
Распределение контента по горизонтали
__icon
indent-right
xxs / xs / s / m / l
Отступ между иконкой и контентом справа
indent-left
xxs / xs / s / m / l
Отступ между иконкой и контентом слева
__block
.pt-avatar
__photo
Модификатор
Значение
Описание
size
s / m / l
Размер
.pt-badge
Модификатор
Значение
Описание
view
default / success / warning / alert / inverse
Фон блока
.pt-surface
Модификатор
Значение
Описание
view
tone / soft
Фон подложки
__content
Модификатор
Значение
Описание
size
xs / s / m / full
Ширина модалки
view
default
Фон модалки
__close
Модификатор
Значение
Описание
view
desktop / mobile
Размер закрывающего элемента
__window