Прозрачность границы

border-opacity

В SIMAI Framework с помощью модификаторов можно задать прозрачность границы.

Классы

Класс Значение
border-opacity-0 --sf-border--alfa: 0;
border-opacity-1 --sf-border--alfa: 0.1;
border-opacity-2 --sf-border--alfa: 0.2;
border-opacity-3 --sf-border--alfa: 0.3;
border-opacity-4 --sf-border--alfa: 0.4;
border-opacity-5 --sf-border--alfa: 0.5;
border-opacity-6 --sf-border--alfa: 0.6;
border-opacity-7 --sf-border--alfa: 0.7;
border-opacity-8 --sf-border--alfa: 0.8;
border-opacity-9 --sf-border--alfa: 0.9;
border-opacity-full --sf-border--alfa: 1;

Описание

Адаптивный модификатор. Изменяет прозрачность границы в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Принимает значения от border-opacity-0 до border-opacity-9.

Пример

Для того чтобы модификатор прозрачности границы работал, вместе с модификатором прозрачности нужно использовать модификатор цвета границы, например border-black border-opacity-2

border-opacity-0
border-opacity-1
border-opacity-2
border-opacity-3
border-opacity-4
border-opacity-5
border-opacity-6
border-opacity-7
border-opacity-8
border-opacity-9
border-opacity-full
<div class="border-opacity-0 ... "></div>
<div class="border-opacity-1 ... "></div>
<div class="border-opacity-2 ... "></div>
<div class="border-opacity-3 ... "></div>
<div class="border-opacity-4 ... "></div>
<div class="border-opacity-5 ... "></div>
<div class="border-opacity-6 ... "></div>
<div class="border-opacity-7 ... "></div>
<div class="border-opacity-8 ... "></div>
<div class="border-opacity-9 ... "></div>
<div class="border-opacity-full ... "></div>

Изменить статью