Акцентный цвет

accent-color
hover
focus
active

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

Классы

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

Описание

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

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

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

Пример

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

<label>
    <input type="checkbox" checked> Браузер по умолчанию
</label>
<label>
    <input type="checkbox" class="accent-red-6" checked> Кастомизированный
</label>

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