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