Прозрачность разделителя

divider-opacity

В SIMAI Framework с помощью модификаторов можно задать прозрачность разделителя.

Классы

Класс Значение
divider-opacity-0 --sf-divider--alfa: 0;
divider-opacity-1 --sf-divider--alfa: 1;
divider-opacity-2 --sf-divider--alfa: 2;
divider-opacity-3 --sf-divider--alfa: 3;
divider-opacity-4 --sf-divider--alfa: 4;
divider-opacity-5 --sf-divider--alfa: 5;
divider-opacity-6 --sf-divider--alfa: 6;
divider-opacity-7 --sf-divider--alfa: 7;
divider-opacity-8 --sf-divider--alfa: 8;
divider-opacity-9 --sf-divider--alfa: 9;
divider-opacity-full --sf-divider--alfa: full;

Описание

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

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

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

Пример

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

1
2
3
<div class="grid grid-col-3 divider-y-1 divider-gray-3 divider-opacity-2 ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

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