Прозрачность полосок
stripe-opacity
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно задать паттерны фона.
Классы
| Класс | Значение |
|---|---|
stripe-opacity-0 |
--sf-stripe--alfa: 0; |
stripe-opacity-1 |
--sf-stripe--alfa: 0.1; |
stripe-opacity-2 |
--sf-stripe--alfa: 0.2; |
stripe-opacity-3 |
--sf-stripe--alfa: 0.3; |
stripe-opacity-4 |
--sf-stripe--alfa: 0.4; |
stripe-opacity-5 |
--sf-stripe--alfa: 0.5; |
stripe-opacity-6 |
--sf-stripe--alfa: 0.6; |
stripe-opacity-7 |
--sf-stripe--alfa: 0.7; |
stripe-opacity-8 |
--sf-stripe--alfa: 0.8; |
stripe-opacity-9 |
--sf-stripe--alfa: 0.9; |
stripe-opacity-full |
--sf-stripe--alfa: 1; |
Описание
Адаптивный модификатор. Задает размер фона в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
Пример
Используйте модификатор stripe-opacity-{1...9} для установки паттерна фона.
stripe-opacity-0
stripe-opacity-1
stripe-opacity-2
stripe-opacity-3
stripe-opacity-4
stripe-opacity-5
stripe-opacity-6
stripe-opacity-7
stripe-opacity-8
stripe-opacity-9
stripe-opacity-full
<div class="stripe-opacity-0 ...">...</div>
<div class="stripe-opacity-1 ...">...</div>
<div class="stripe-opacity-2 ...">...</div>
<div class="stripe-opacity-3 ...">...</div>
<div class="stripe-opacity-4 ...">...</div>
<div class="stripe-opacity-5 ...">...</div>
<div class="stripe-opacity-6 ...">...</div>
<div class="stripe-opacity-7 ...">...</div>
<div class="stripe-opacity-8 ...">...</div>
<div class="stripe-opacity-9 ...">...</div>
<div class="stripe-opacity-full ...">...</div>
Адаптивность
Для создания градиента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:stripe-opacity-2 для создания линейного градиента с двумя цвевтами для экранов размером Medium и больше.
<div class="md:stripe-opacity-2 ..."></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.