stylobate
Version:
Framework for writing really abstract CSS in Stylus
45 lines (23 loc) • 2.98 kB
Markdown
## Группа
«Группа» это набор разных элементов, соединённых в один элемент. Обычно такие элементы располагаются вплотную друг к другу, например, кнопка и тексовое поле ввода.
Базовый тип `group` почти ничего не задаёт кроме запрета переноса для внутренних элементов:
kind: group
### Элементы группы
Элементы группы можно разделить на три типа: абстрактные `group-item`, а также конкретные `group-start`, `group-middle` и `group-end`.
Абстрактные элементы `group-item`, по сути, являются шорткатами для конкретных, записанных через CSS-селекторы `:first-child` и `:last-child`. Их имеет смысл применять если список элементов однородный и унифицированный:
kind: group-item
Если же визуальный порядок элементов будет отличаться от их порядка в DOM, лучше применять конкретные обозначения начала, середины и конца группы:
kind: group-start
kind: group-middle
kind: group-end
Элементы группы можно настроить: по умолчанию таким элементам на стыках сбрасываются скругления и элементы сдвигаются внахлёст на один пиксель. Сброс скруглений можно отключить параметром `no-radius`, а нахлёст — `no-margin`.
Кроме того, если визуальное отображение элемента находится внутри айтема, можно переопределить селектор, на котором будут сбрасываться стили на стыках, в этом же селекторе можно сбрасывать стили на нескольких блоках, скажем, на псевдоэлементах:
kind: group-item '& > .complex-button-inner, & > .complex-button-inner:before'
### Вертикальная группа
По умолчанию группы считаются горизонтальными, и они получают соответствующие обнуления скруглений и маджинов слева и справа. Если нужно получить аналогичный эффект сверху и снизу, достаточно добавить параметр `vertical`:
kind: group-item vertical
kind: group-start vertical
kind: group-middle vertical
kind: group-end vertical