Scalable design system based on BEM
Patterns/pt-form
Модификатор
Значение
Описание
default / ghost / inverse
Фон блока
all
Круговой бордер блока
cloud
Тень
__item
Модификатор
Значение
Описание
top / bottom / all
Бордер строк
default / between
Распределение контента по горизонтали
action
Отображение футера с активными действиями
xs / s / m / l / xl / xxl / xxxl
Внутренние отступы
xs / s / m / l / xl / xxl / xxxl
Внешние отступы
__label
Модификатор
Значение
Описание
default / inverse
Ширина
View
{
block: 'pt-form',
mods: { view: 'ghost' },
content: []
}
Free to join
Name
Position
E-mail
Borders
{
block: 'pt-form',
mods: { border: 'all' },
content: []
}
Free to join
Name
Position
E-mail
Shadow
{
block: 'pt-form',
mods: { shadow: 'cloud' },
content: []
}
Free to join
Name
Position
E-mail
elem: 'item'
Border
{
block: 'pt-form',
mods: { view: 'default' },
content: [
{
elem: 'item',
elemMods: { border: 'bottom' },
content: []
}]
}
Name
Position
E-mail
Distribute
{
block: 'pt-form',
mods: { view: 'default' },
content: [
{
elem: 'item',
elemMods: { distribute: 'between' },
content: []
}]
}
Name
Position
E-mail
Type
{
block: 'pt-form',
mods: { view: 'default' },
content: [
{
elem: 'item',
elemMods: { type: 'action' },
content: []
}]
}
Inside space
{
block: 'pt-form',
mods: { view: 'default' },
content: [
{
elem: 'item',
elemMods: {
'space-v': 's',
'space-h': 'xl'
}
content: []
}]
}
Name
Position
E-mail
Outside space
{
block: 'pt-form',
mods: { view: 'default' },
content: [
{
elem: 'item',
elemMods: { 'indent-b': 'l' },
content: []
}]
}
Name
Position
E-mail
elem: 'label'
Width
{
block: 'pt-form',
mods: { view: 'default' },
content: [
{
elem: 'item',
content: [
{
elem: 'label',
elemMods: { width: 'default' },
content: []
}]
}]
}
Name