Цвет смещения кольца
В SIMAI Framework с помощью модифкаторов можно задать цвет смещения кольца.
Классы
| Класс | Значение |
|---|---|
ring-offset-transparent |
--sf-ring-offset-color: |
ring-offset-current |
--sf-ring-offset-color: currentColor; |
ring-offset-white |
--sf-ring-offset-color: |
ring-offset-black |
--sf-ring-offset-color: |
ring-offset-gray |
--sf-ring-offset-color: |
ring-offset-gray-1 |
--sf-ring-offset-color: |
ring-offset-gray-2 |
--sf-ring-offset-color: |
ring-offset-gray-3 |
--sf-ring-offset-color: |
ring-offset-gray-4 |
--sf-ring-offset-color: |
ring-offset-gray-5 |
--sf-ring-offset-color: |
ring-offset-gray-6 |
--sf-ring-offset-color: |
ring-offset-gray-7 |
--sf-ring-offset-color: |
ring-offset-gray-8 |
--sf-ring-offset-color: |
ring-offset-gray-9 |
--sf-ring-offset-color: |
ring-offset-red |
--sf-ring-offset-color: |
ring-offset-red-1 |
--sf-ring-offset-color: |
ring-offset-red-2 |
--sf-ring-offset-color: |
ring-offset-red-3 |
--sf-ring-offset-color: |
ring-offset-red-4 |
--sf-ring-offset-color: |
ring-offset-red-5 |
--sf-ring-offset-color: |
ring-offset-red-6 |
--sf-ring-offset-color: |
ring-offset-red-7 |
--sf-ring-offset-color: |
ring-offset-red-8 |
--sf-ring-offset-color: |
ring-offset-red-9 |
--sf-ring-offset-color: |
ring-offset-orange |
--sf-ring-offset-color: |
ring-offset-orange-1 |
--sf-ring-offset-color: |
ring-offset-orange-2 |
--sf-ring-offset-color: |
ring-offset-orange-3 |
--sf-ring-offset-color: |
ring-offset-orange-4 |
--sf-ring-offset-color: |
ring-offset-orange-5 |
--sf-ring-offset-color: |
ring-offset-orange-6 |
--sf-ring-offset-color: |
ring-offset-orange-7 |
--sf-ring-offset-color: |
ring-offset-orange-8 |
--sf-ring-offset-color: |
ring-offset-orange-9 |
--sf-ring-offset-color: |
ring-offset-yellow |
--sf-ring-offset-color: |
ring-offset-yellow-1 |
--sf-ring-offset-color: |
ring-offset-yellow-2 |
--sf-ring-offset-color: |
ring-offset-yellow-3 |
--sf-ring-offset-color: |
ring-offset-yellow-4 |
--sf-ring-offset-color: |
ring-offset-yellow-5 |
--sf-ring-offset-color: |
ring-offset-yellow-6 |
--sf-ring-offset-color: |
ring-offset-yellow-7 |
--sf-ring-offset-color: |
ring-offset-yellow-8 |
--sf-ring-offset-color: |
ring-offset-yellow-9 |
--sf-ring-offset-color: |
ring-offset-green |
--sf-ring-offset-color: |
ring-offset-green-1 |
--sf-ring-offset-color: |
ring-offset-green-2 |
--sf-ring-offset-color: |
ring-offset-green-3 |
--sf-ring-offset-color: |
ring-offset-green-4 |
--sf-ring-offset-color: |
ring-offset-green-5 |
--sf-ring-offset-color: |
ring-offset-green-6 |
--sf-ring-offset-color: |
ring-offset-green-7 |
--sf-ring-offset-color: |
ring-offset-green-8 |
--sf-ring-offset-color: |
ring-offset-green-9 |
--sf-ring-offset-color: |
ring-offset-blue |
--sf-ring-offset-color: |
ring-offset-blue-1 |
--sf-ring-offset-color: |
ring-offset-blue-2 |
--sf-ring-offset-color: |
ring-offset-blue-3 |
--sf-ring-offset-color: |
ring-offset-blue-4 |
--sf-ring-offset-color: |
ring-offset-blue-5 |
--sf-ring-offset-color: |
ring-offset-blue-6 |
--sf-ring-offset-color: |
ring-offset-blue-7 |
--sf-ring-offset-color: |
ring-offset-blue-8 |
--sf-ring-offset-color: |
ring-offset-blue-9 |
--sf-ring-offset-color: |
ring-offset-purple |
--sf-ring-offset-color: |
ring-offset-purple-1 |
--sf-ring-offset-color: |
ring-offset-purple-2 |
--sf-ring-offset-color: |
ring-offset-purple-3 |
--sf-ring-offset-color: |
ring-offset-purple-4 |
--sf-ring-offset-color: |
ring-offset-purple-5 |
--sf-ring-offset-color: |
ring-offset-purple-6 |
--sf-ring-offset-color: |
ring-offset-purple-7 |
--sf-ring-offset-color: |
ring-offset-purple-8 |
--sf-ring-offset-color: |
ring-offset-purple-9 |
--sf-ring-offset-color: |
ring-offset-pink |
--sf-ring-offset-color: |
ring-offset-pink-1 |
--sf-ring-offset-color: |
ring-offset-pink-2 |
--sf-ring-offset-color: |
ring-offset-pink-3 |
--sf-ring-offset-color: |
ring-offset-pink-4 |
--sf-ring-offset-color: |
ring-offset-pink-5 |
--sf-ring-offset-color: |
ring-offset-pink-6 |
--sf-ring-offset-color: |
ring-offset-pink-7 |
--sf-ring-offset-color: |
ring-offset-pink-8 |
--sf-ring-offset-color: |
ring-offset-pink-9 |
--sf-ring-offset-color: |
Описание
Адаптивный модификатор. Задает цвет смещения кольца элемента в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{цвет}-{тон}
-
Контрольная точка. Необязательный параметр. Применяет
модификатор начиная с определенного размера области просмотра,
согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Цвет. Обязательный параметр. Может принимать значения:
ring-offset-transparent- прозрачный;ring-offset-current- текущйи цвет заданный с помощью стиляcolor;-
ring-offset-{black, white, gray, red, orange, yellow, green, blue, purple, pink- цвет из палитры цветов;
- Тон цвета. Не обязательный параметр. Принимает значение от 1 до 10.
Пример
Используйте модификатор ring-offset-{color} для установки
цвета смещения кольца.
ring-offset-blue
ring-offset-blue-1
ring-offset-blue-2
ring-offset-blue-3
<div class="ring-2 ring-offset-blue ... ">ring-offset-blue</div>
<div class="ring-2 ring-offset-blue-1 ... ">ring-offset-blue-1</div>
<div class="ring-2 ring-offset-blue-2 ... ">ring-offset-blue-2</div>
<div class="ring-2 ring-blue-3 ... ">ring-blue-3</div>
Кольцо при наведении
Используйте модификатор hover:ring-offset-{color} для установки
цвета смещения кольца при наведении.
<button class="ring-2 ring-gray-2 hover:ring-offset-gray-9 ...">Hover Me</button>
Кольцо при фокусе
Используйте модификатор focus:ring-offset-{color} для
установки цвета смещения кольца при фокусе на элемент.
<input class="ring-4 ring-gray-4 focus:ring-offset-gray-4 ...""Focus me">
Адаптивность
Для установки цвета кольца, начиная с определенного размера
области просмотра, добавьте префикс контрольной точки
(sm, md, lg, xl)
через двоеточие (:) к любому модификатору выравнивания
элементов флексбокса по основной оси.
Например, используйте модификатор md:hover:ring-offset-black
для установки черного цвета смещения кольца при наведении для экранов размером
Medium и больше
<div class="md:hover:ring-offset-black"></div>
Для получения дополнительной информации об адаптивности в SIMAI Framework ознакомьтесь с документацией.