Цвет разделителя

divider-color

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

Классы

Цвет Класс Значение
divider-transparent>
:not([hidden])~
:not([hidden])		 border-color:
var(--sf-transparent);
divider-current>
:not([hidden])~
:not([hidden])		 border-color:
border-color: currentColor;
divider-white>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-white-r),
var(--sf-white-g),
var(--sf-white-b),
var(--sf-divider--alfa));
divider-black>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-black-r),
var(--sf-black-g),
var(--sf-black-b),
var(--sf-divider--alfa));
divider-gray-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-1r),
var(--sf-gray-1g),
var(--sf-gray-1b),
var(--sf-divider--alfa));
divider-gray-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-2r),
var(--sf-gray-2g),
var(--sf-gray-2b),
var(--sf-divider--alfa));
divider-gray-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-3r),
var(--sf-gray-3g),
var(--sf-gray-3b),
var(--sf-divider--alfa));
divider-gray-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-4r),
var(--sf-gray-4g),
var(--sf-gray-4b),
var(--sf-divider--alfa));
divider-gray-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-5r),
var(--sf-gray-5g),
var(--sf-gray-5b),
var(--sf-divider--alfa));
divider-gray-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-6r),
var(--sf-gray-6g),
var(--sf-gray-6b),
var(--sf-divider--alfa));
divider-gray-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-7r),
var(--sf-gray-7g),
var(--sf-gray-7b),
var(--sf-divider--alfa));
divider-gray-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-8r),
var(--sf-gray-8g),
var(--sf-gray-8b),
var(--sf-divider--alfa));
divider-gray-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-gray-9r),
var(--sf-gray-9g),
var(--sf-gray-9b),
var(--sf-divider--alfa));
divider-red-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-1r),
var(--sf-red-1g),
var(--sf-red-1b),
var(--sf-divider--alfa));
divider-red-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-2r),
var(--sf-red-2g),
var(--sf-red-2b),
var(--sf-divider--alfa));
divider-red-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-3r),
var(--sf-red-3g),
var(--sf-red-3b),
var(--sf-divider--alfa));
divider-red-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-4r),
var(--sf-red-4g),
var(--sf-red-4b),
var(--sf-divider--alfa));
divider-red-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-5r),
var(--sf-red-5g),
var(--sf-red-5b),
var(--sf-divider--alfa));
divider-red-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-6r),
var(--sf-red-6g),
var(--sf-red-6b),
var(--sf-divider--alfa));
divider-red-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-7r),
var(--sf-red-7g),
var(--sf-red-7b),
var(--sf-divider--alfa));
divider-red-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-8r),
var(--sf-red-8g),
var(--sf-red-8b),
var(--sf-divider--alfa));
divider-red-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-red-9r),
var(--sf-red-9g),
var(--sf-red-9b),
var(--sf-divider--alfa));
divider-orange-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-1r),
var(--sf-orange-1g),
var(--sf-orange-1b),
var(--sf-divider--alfa));
divider-orange-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-2r),
var(--sf-orange-2g),
var(--sf-orange-2b),
var(--sf-divider--alfa));
divider-orange-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-3r),
var(--sf-orange-3g),
var(--sf-orange-3b),
var(--sf-divider--alfa));
divider-orange-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-4r),
var(--sf-orange-4g),
var(--sf-orange-4b),
var(--sf-divider--alfa));
divider-orange-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-5r),
var(--sf-orange-5g),
var(--sf-orange-5b),
var(--sf-divider--alfa));
divider-orange-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-6r),
var(--sf-orange-6g),
var(--sf-orange-6b),
var(--sf-divider--alfa));
divider-orange-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-7r),
var(--sf-orange-7g),
var(--sf-orange-7b),
var(--sf-divider--alfa));
divider-orange-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-8r),
var(--sf-orange-8g),
var(--sf-orange-8b),
var(--sf-divider--alfa));
divider-orange-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-orange-9r),
var(--sf-orange-9g),
var(--sf-orange-9b),
var(--sf-divider--alfa));
divider-yellow-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-1r),
var(--sf-yellow-1g),
var(--sf-yellow-1b),
var(--sf-divider--alfa));
divider-yellow-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-2r),
var(--sf-yellow-2g),
var(--sf-yellow-2b),
var(--sf-divider--alfa));
divider-yellow-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-3r),
var(--sf-yellow-3g),
var(--sf-yellow-3b),
var(--sf-divider--alfa));
divider-yellow-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-4r),
var(--sf-yellow-4g),
var(--sf-yellow-4b),
var(--sf-divider--alfa));
divider-yellow-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-5r),
var(--sf-yellow-5g),
var(--sf-yellow-5b),
var(--sf-divider--alfa));
divider-yellow-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-6r),
var(--sf-yellow-6g),
var(--sf-yellow-6b),
var(--sf-divider--alfa));
divider-yellow-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-7r),
var(--sf-yellow-7g),
var(--sf-yellow-7b),
var(--sf-divider--alfa));
divider-yellow-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-8r),
var(--sf-yellow-8g),
var(--sf-yellow-8b),
var(--sf-divider--alfa));
divider-yellow-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-yellow-9r),
var(--sf-yellow-9g),
var(--sf-yellow-9b),
var(--sf-divider--alfa));
divider-green-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-1r),
var(--sf-green-1g),
var(--sf-green-1b),
var(--sf-divider--alfa));
divider-green-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-2r),
var(--sf-green-2g),
var(--sf-green-2b),
var(--sf-divider--alfa));
divider-green-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-3r),
var(--sf-green-3g),
var(--sf-green-3b),
var(--sf-divider--alfa));
divider-green-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-4r),
var(--sf-green-4g),
var(--sf-green-4b),
var(--sf-divider--alfa));
divider-green-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-5r),
var(--sf-green-5g),
var(--sf-green-5b),
var(--sf-divider--alfa));
divider-green-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-6r),
var(--sf-green-6g),
var(--sf-green-6b),
var(--sf-divider--alfa));
divider-green-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-7r),
var(--sf-green-7g),
var(--sf-green-7b),
var(--sf-divider--alfa));
divider-green-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-8r),
var(--sf-green-8g),
var(--sf-green-8b),
var(--sf-divider--alfa));
divider-green-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-green-9r),
var(--sf-green-9g),
var(--sf-green-9b),
var(--sf-divider--alfa));
divider-blue-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-1r),
var(--sf-blue-1g),
var(--sf-blue-1b),
var(--sf-divider--alfa));
divider-blue-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-2r),
var(--sf-blue-2g),
var(--sf-blue-2b),
var(--sf-divider--alfa));
divider-blue-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-3r),
var(--sf-blue-3g),
var(--sf-blue-3b),
var(--sf-divider--alfa));
divider-blue-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-4r),
var(--sf-blue-4g),
var(--sf-blue-4b),
var(--sf-divider--alfa));
divider-blue-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-5r),
var(--sf-blue-5g),
var(--sf-blue-5b),
var(--sf-divider--alfa));
divider-blue-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-6r),
var(--sf-blue-6g),
var(--sf-blue-6b),
var(--sf-divider--alfa));
divider-blue-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-7r),
var(--sf-blue-7g),
var(--sf-blue-7b),
var(--sf-divider--alfa));
divider-blue-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-8r),
var(--sf-blue-8g),
var(--sf-blue-8b),
var(--sf-divider--alfa));
divider-blue-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-blue-9r),
var(--sf-blue-9g),
var(--sf-blue-9b),
var(--sf-divider--alfa));
divider-purple-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-1r),
var(--sf-purple-1g),
var(--sf-purple-1b),
var(--sf-divider--alfa));
divider-purple-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-2r),
var(--sf-purple-2g),
var(--sf-purple-2b),
var(--sf-divider--alfa));
divider-purple-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-3r),
var(--sf-purple-3g),
var(--sf-purple-3b),
var(--sf-divider--alfa));
divider-purple-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-4r),
var(--sf-purple-4g),
var(--sf-purple-4b),
var(--sf-divider--alfa));
divider-purple-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-5r),
var(--sf-purple-5g),
var(--sf-purple-5b),
var(--sf-divider--alfa));
divider-purple-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-6r),
var(--sf-purple-6g),
var(--sf-purple-6b),
var(--sf-divider--alfa));
divider-purple-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-7r),
var(--sf-purple-7g),
var(--sf-purple-7b),
var(--sf-divider--alfa));
divider-purple-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-8r),
var(--sf-purple-8g),
var(--sf-purple-8b),
var(--sf-divider--alfa));
divider-purple-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-purple-9r),
var(--sf-purple-9g),
var(--sf-purple-9b),
var(--sf-divider--alfa));
divider-pink-1>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-1r),
var(--sf-pink-1g),
var(--sf-pink-1b),
var(--sf-divider--alfa));
divider-pink-2>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-2r),
var(--sf-pink-2g),
var(--sf-pink-2b),
var(--sf-divider--alfa));
divider-pink-3>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-3r),
var(--sf-pink-3g),
var(--sf-pink-3b),
var(--sf-divider--alfa));
divider-pink-4>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-4r),
var(--sf-pink-4g),
var(--sf-pink-4b),
var(--sf-divider--alfa));
divider-pink-5>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-5r),
var(--sf-pink-5g),
var(--sf-pink-5b),
var(--sf-divider--alfa));
divider-pink-6>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-6r),
var(--sf-pink-6g),
var(--sf-pink-6b),
var(--sf-divider--alfa));
divider-pink-7>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-7r),
var(--sf-pink-7g),
var(--sf-pink-7b),
var(--sf-divider--alfa));
divider-pink-8>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-8r),
var(--sf-pink-8g),
var(--sf-pink-8b),
var(--sf-divider--alfa));
divider-pink-9>
:not([hidden])~
:not([hidden])		 border-color:
rgba(var(--sf-pink-9r),
var(--sf-pink-9g),
var(--sf-pink-9b),
var(--sf-divider--alfa));

Описание

Адаптивный модификатор. Задает цвет разделителя элемента в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Цвет. Обязательный параметр. Может принимать значения:
    • divider-transparent - прозрачный;
    • divider-current - текущйи цвет заданный с помощью стиля color;
    • divider-{black, white, gray, red, orange, yellow, green, blue, purple, pink} - цвет из палитры цветов;
  • Тон цвета. Не обязательный параметр. Принимает значение от 1 до 10.

Пример

Используйте модификатор divider-{color} для установки цвета разделителя.

1
2
3
<div class="grid grid-col-3 divider-y-1 divider-blue-3 ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
<div class="grid grid-col-3 divider-y-2 divider-spare hover:divider-blue-3 ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

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