Прозрачность внешней границы
outline-opacity
hover
focus
active
В SIMAI Framework с помощью модификаторов можно задать прозрачность внешней границы.
Классы
| Класс | Значение |
|---|---|
outline-opacity-0 |
--sf-outline--alfa: 0; |
outline-opacity-1 |
--sf-outline--alfa: 1; |
outline-opacity-2 |
--sf-outline--alfa: 2; |
outline-opacity-3 |
--sf-outline--alfa: 3; |
outline-opacity-4 |
--sf-outline--alfa: 4; |
outline-opacity-5 |
--sf-outline--alfa: 5; |
outline-opacity-6 |
--sf-outline--alfa: 6; |
outline-opacity-7 |
--sf-outline--alfa: 7; |
outline-opacity-8 |
--sf-outline--alfa: 8; |
outline-opacity-9 |
--sf-outline--alfa: 9; |
outline-opacity-full |
--sf-outline--alfa: full; |
Описание
Адаптивный модификатор. Изменяет прозрачность внешней границы в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Принимает значения
outline-opacity-{0-9}иoutline-opacity-full.
Пример
Для того чтобы модификатор прозрачности внешней границы работал, вместе с модификатором прозрачности нужно использовать модификатор цвета разделителя, например outline-black outline-opacity-2
<button class="outline-2 outline-solid outline-red-6 outline-offset-2 outline-opacity-2 ...">Кнопка 1</button>
<button class="outline-2 outline-solid outline-red-6 outline-offset-2 outline-opacity-4 ...">Кнопка 2</button>
<button class="outline-2 outline-solid outline-red-6 outline-offset-2 outline-opacity-6 ...">Кнопка 3</button>
<button class="outline-2 outline-solid outline-red-6 outline-offset-2 outline-opacity-8 ...">Кнопка 3</button>