Размер полосок
Классы stripe-size-{n} задают шаг узора, который рисуют классы
полос: расстояние от линии до следующей
линии. Толщина линии остаётся 1px. Берите крупный шаг для заметной сетки и
мелкий — для плотной фактуры.
Пример
Шкала
Под каждым образцом — класс шага; узор и цвет задают stripe-1 stripe-primary.
stripe-size-1
stripe-size-2
stripe-size-3
stripe-size-4
Ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину
окна просмотра: с ширины md шаг сетки становится крупнее.
Классы
| Класс | CSS | Значения |
|---|---|---|
stripe-size-1 |
--sf-stripe--size: var(--sf-a2) |
— |
stripe-size-2 |
--sf-stripe--size: var(--sf-a3) |
— |
stripe-size-3 |
--sf-stripe--size: var(--sf-a4) |
— |
stripe-size-4 |
--sf-stripe--size: var(--sf-a5) |
— |
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:stripe-size-1.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
| Переменная | Значение по умолчанию |
|---|---|
--sf-a2 |
0.125rem |
--sf-a3 |
0.1875rem |
--sf-a4 |
0.25rem |
--sf-a5 |
0.3125rem |
Применение
| Класс | Шаг при 1rem = 16px |
|---|---|
stripe-size-1 |
2px |
stripe-size-2 |
3px |
stripe-size-3 |
4px |
stripe-size-4 |
5px |
Шаг задан в rem и растёт вместе с кеглем. Класс меняет переменную
--sf-stripe--size.
<div class="stripe-3 stripe-size-4 stripe-surface-transparent-overlay h-f0"></div>
Ограничения
- Без класса шаг равен толщине линии (1px), и полосы сливаются в сплошную заливку.
- У семейства нет префиксов состояния.