Размер полосок
stripe-width
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно задать паттерны фона.
Классы
| Класс | Значение |
|---|---|
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). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
Пример
Используйте модификатор stripe-size-{1...4} для установки размера полосок.
stripe-size-1
stripe-size-1
stripe-size-2
stripe-size-2
stripe-size-3
stripe-size-3
stripe-size-4
stripe-size-4
<div class="stripe-size-1 ...">...</div>
<div class="stripe-size-2 ...">...</div>
<div class="stripe-size-3 ...">...</div>
<div class="stripe-size-4 ...">...</div>
Адаптивность
Для создания градиента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:stripe-size-2 для создания линейного градиента с двумя цвевтами для экранов размером Medium и больше.
<div class="md:stripe-size-2 ..."></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.