Цвет каретки

caret-color
hover
focus
active

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

Классы

Класс Значение
caret-transparent caret-color: var(--sf-transparent);
caret-current caret-color: currentColor;
caret-white caret-color:
rgba(var(--sf-white-r),
var(--sf-white-g),
var(--sf-white-b),
var(--sf-border--alfa));
caret-black caret-color:
rgba(var(--sf-black-r),
var(--sf-black-g),
var(--sf-black-b),
var(--sf-border--alfa));
caret-gray-1 caret-color:
rgba(var(--sf-gray-1-r),
var(--sf-gray-1-g),
var(--sf-gray-1-b),
var(--sf-border--alfa));
caret-gray-2 caret-color:
rgba(var(--sf-gray-2-r),
var(--sf-gray-2-g),
var(--sf-gray-2-b),
var(--sf-border--alfa));
caret-gray-3 caret-color:
rgba(var(--sf-gray-3-r),
var(--sf-gray-3-g),
var(--sf-gray-3-b),
var(--sf-border--alfa));
caret-gray-4 caret-color:
rgba(var(--sf-gray-4-r),
var(--sf-gray-4-g),
var(--sf-gray-4-b),
var(--sf-border--alfa));
caret-gray-5 caret-color:
rgba(var(--sf-gray-5-r),
var(--sf-gray-5-g),
var(--sf-gray-5-b),
var(--sf-border--alfa));
caret-gray-6 caret-color:
rgba(var(--sf-gray-6-r),
var(--sf-gray-6-g),
var(--sf-gray-6-b),
var(--sf-border--alfa));
caret-gray-7 caret-color:
rgba(var(--sf-gray-7-r),
var(--sf-gray-7-g),
var(--sf-gray-7-b),
var(--sf-border--alfa));
caret-gray-8 caret-color:
rgba(var(--sf-gray-8-r),
var(--sf-gray-8-g),
var(--sf-gray-8-b),
var(--sf-border--alfa));
caret-gray-9 caret-color:
rgba(var(--sf-gray-9-r),
var(--sf-gray-9-g),
var(--sf-gray-9-b),
var(--sf-border--alfa));
caret-red-1 caret-color:
rgba(var(--sf-red-1-r),
var(--sf-red-1-g),
var(--sf-red-1-b),
var(--sf-border--alfa));
caret-red-2 caret-color:
rgba(var(--sf-red-2-r),
var(--sf-red-2-g),
var(--sf-red-2-b),
var(--sf-border--alfa));
caret-red-3 caret-color:
rgba(var(--sf-red-3-r),
var(--sf-red-3-g),
var(--sf-red-3-b),
var(--sf-border--alfa));
caret-red-4 caret-color:
rgba(var(--sf-red-4-r),
var(--sf-red-4-g),
var(--sf-red-4-b),
var(--sf-border--alfa));
caret-red-5 caret-color:
rgba(var(--sf-red-5-r),
var(--sf-red-5-g),
var(--sf-red-5-b),
var(--sf-border--alfa));
caret-red-6 caret-color:
rgba(var(--sf-red-6-r),
var(--sf-red-6-g),
var(--sf-red-6-b),
var(--sf-border--alfa));
caret-red-7 caret-color:
rgba(var(--sf-red-7-r),
var(--sf-red-7-g),
var(--sf-red-7-b),
var(--sf-border--alfa));
caret-red-8 caret-color:
rgba(var(--sf-red-8-r),
var(--sf-red-8-g),
var(--sf-red-8-b),
var(--sf-border--alfa));
caret-red-9 caret-color:
rgba(var(--sf-red-9-r),
var(--sf-red-9-g),
var(--sf-red-9-b),
var(--sf-border--alfa));
caret-orange-1 caret-color:
rgba(var(--sf-orange-1-r),
var(--sf-orange-1-g),
var(--sf-orange-1-b),
var(--sf-border--alfa));
caret-orange-2 caret-color:
rgba(var(--sf-orange-2-r),
var(--sf-orange-2-g),
var(--sf-orange-2-b),
var(--sf-border--alfa));
caret-orange-3 caret-color:
rgba(var(--sf-orange-3-r),
var(--sf-orange-3-g),
var(--sf-orange-3-b),
var(--sf-border--alfa));
caret-orange-4 caret-color:
rgba(var(--sf-orange-4-r),
var(--sf-orange-4-g),
var(--sf-orange-4-b),
var(--sf-border--alfa));
caret-orange-5 caret-color:
rgba(var(--sf-orange-5-r),
var(--sf-orange-5-g),
var(--sf-orange-5-b),
var(--sf-border--alfa));
caret-orange-6 caret-color:
rgba(var(--sf-orange-6-r),
var(--sf-orange-6-g),
var(--sf-orange-6-b),
var(--sf-border--alfa));
caret-orange-7 caret-color:
rgba(var(--sf-orange-7-r),
var(--sf-orange-7-g),
var(--sf-orange-7-b),
var(--sf-border--alfa));
caret-orange-8 caret-color:
rgba(var(--sf-orange-8-r),
var(--sf-orange-8-g),
var(--sf-orange-8-b),
var(--sf-border--alfa));
caret-orange-9 caret-color:
rgba(var(--sf-orange-9-r),
var(--sf-orange-9-g),
var(--sf-orange-9-b),
var(--sf-border--alfa));
caret-yellow-1 caret-color:
rgba(var(--sf-yellow-1-r),
var(--sf-yellow-1-g),
var(--sf-yellow-1-b),
var(--sf-border--alfa));
caret-yellow-2 caret-color:
rgba(var(--sf-yellow-2-r),
var(--sf-yellow-2-g),
var(--sf-yellow-2-b),
var(--sf-border--alfa));
caret-yellow-3 caret-color:
rgba(var(--sf-yellow-3-r),
var(--sf-yellow-3-g),
var(--sf-yellow-3-b),
var(--sf-border--alfa));
caret-yellow-4 caret-color:
rgba(var(--sf-yellow-4-r),
var(--sf-yellow-4-g),
var(--sf-yellow-4-b),
var(--sf-border--alfa));
caret-yellow-5 caret-color:
rgba(var(--sf-yellow-5-r),
var(--sf-yellow-5-g),
var(--sf-yellow-5-b),
var(--sf-border--alfa));
caret-yellow-6 caret-color:
rgba(var(--sf-yellow-6-r),
var(--sf-yellow-6-g),
var(--sf-yellow-6-b),
var(--sf-border--alfa));
caret-yellow-7 caret-color:
rgba(var(--sf-yellow-7-r),
var(--sf-yellow-7-g),
var(--sf-yellow-7-b),
var(--sf-border--alfa));
caret-yellow-8 caret-color:
rgba(var(--sf-yellow-8-r),
var(--sf-yellow-8-g),
var(--sf-yellow-8-b),
var(--sf-border--alfa));
caret-yellow-9 caret-color:
rgba(var(--sf-yellow-9-r),
var(--sf-yellow-9-g),
var(--sf-yellow-9-b),
var(--sf-border--alfa));
caret-green-1 caret-color:
rgba(var(--sf-green-1-r),
var(--sf-green-1-g),
var(--sf-green-1-b),
var(--sf-border--alfa));
caret-green-2 caret-color:
rgba(var(--sf-green-2-r),
var(--sf-green-2-g),
var(--sf-green-2-b),
var(--sf-border--alfa));
caret-green-3 caret-color:
rgba(var(--sf-green-3-r),
var(--sf-green-3-g),
var(--sf-green-3-b),
var(--sf-border--alfa));
caret-green-4 caret-color:
rgba(var(--sf-green-4-r),
var(--sf-green-4-g),
var(--sf-green-4-b),
var(--sf-border--alfa));
caret-green-5 caret-color:
rgba(var(--sf-green-5-r),
var(--sf-green-5-g),
var(--sf-green-5-b),
var(--sf-border--alfa));
caret-green-6 caret-color:
rgba(var(--sf-green-6-r),
var(--sf-green-6-g),
var(--sf-green-6-b),
var(--sf-border--alfa));
caret-green-7 caret-color:
rgba(var(--sf-green-7-r),
var(--sf-green-7-g),
var(--sf-green-7-b),
var(--sf-border--alfa));
caret-green-8 caret-color:
rgba(var(--sf-green-8-r),
var(--sf-green-8-g),
var(--sf-green-8-b),
var(--sf-border--alfa));
caret-green-9 caret-color:
rgba(var(--sf-green-9-r),
var(--sf-green-9-g),
var(--sf-green-9-b),
var(--sf-border--alfa));
caret-blue-1 caret-color:
rgba(var(--sf-blue-1-r),
var(--sf-blue-1-g),
var(--sf-blue-1-b),
var(--sf-border--alfa));
caret-blue-2 caret-color:
rgba(var(--sf-blue-2-r),
var(--sf-blue-2-g),
var(--sf-blue-2-b),
var(--sf-border--alfa));
caret-blue-3 caret-color:
rgba(var(--sf-blue-3-r),
var(--sf-blue-3-g),
var(--sf-blue-3-b),
var(--sf-border--alfa));
caret-blue-4 caret-color:
rgba(var(--sf-blue-4-r),
var(--sf-blue-4-g),
var(--sf-blue-4-b),
var(--sf-border--alfa));
caret-blue-5 caret-color:
rgba(var(--sf-blue-5-r),
var(--sf-blue-5-g),
var(--sf-blue-5-b),
var(--sf-border--alfa));
caret-blue-6 caret-color:
rgba(var(--sf-blue-6-r),
var(--sf-blue-6-g),
var(--sf-blue-6-b),
var(--sf-border--alfa));
caret-blue-7 caret-color:
rgba(var(--sf-blue-7-r),
var(--sf-blue-7-g),
var(--sf-blue-7-b),
var(--sf-border--alfa));
caret-blue-8 caret-color:
rgba(var(--sf-blue-8-r),
var(--sf-blue-8-g),
var(--sf-blue-8-b),
var(--sf-border--alfa));
caret-blue-9 caret-color:
rgba(var(--sf-blue-9-r),
var(--sf-blue-9-g),
var(--sf-blue-9-b),
var(--sf-border--alfa));
caret-purple-1 caret-color:
rgba(var(--sf-purple-1-r),
var(--sf-purple-1-g),
var(--sf-purple-1-b),
var(--sf-border--alfa));
caret-purple-2 caret-color:
rgba(var(--sf-purple-2-r),
var(--sf-purple-2-g),
var(--sf-purple-2-b),
var(--sf-border--alfa));
caret-purple-3 caret-color:
rgba(var(--sf-purple-3-r),
var(--sf-purple-3-g),
var(--sf-purple-3-b),
var(--sf-border--alfa));
caret-purple-4 caret-color:
rgba(var(--sf-purple-4-r),
var(--sf-purple-4-g),
var(--sf-purple-4-b),
var(--sf-border--alfa));
caret-purple-5 caret-color:
rgba(var(--sf-purple-5-r),
var(--sf-purple-5-g),
var(--sf-purple-5-b),
var(--sf-border--alfa));
caret-purple-6 caret-color:
rgba(var(--sf-purple-6-r),
var(--sf-purple-6-g),
var(--sf-purple-6-b),
var(--sf-border--alfa));
caret-purple-7 caret-color:
rgba(var(--sf-purple-7-r),
var(--sf-purple-7-g),
var(--sf-purple-7-b),
var(--sf-border--alfa));
caret-purple-8 caret-color:
rgba(var(--sf-purple-8-r),
var(--sf-purple-8-g),
var(--sf-purple-8-b),
var(--sf-border--alfa));
caret-purple-9 caret-color:
rgba(var(--sf-purple-9-r),
var(--sf-purple-9-g),
var(--sf-purple-9-b),
var(--sf-border--alfa));
caret-pink-1 caret-color:
rgba(var(--sf-pink-1-r),
var(--sf-pink-1-g),
var(--sf-pink-1-b),
var(--sf-border--alfa));
caret-pink-2 caret-color:
rgba(var(--sf-pink-2-r),
var(--sf-pink-2-g),
var(--sf-pink-2-b),
var(--sf-border--alfa));
caret-pink-3 caret-color:
rgba(var(--sf-pink-3-r),
var(--sf-pink-3-g),
var(--sf-pink-3-b),
var(--sf-border--alfa));
caret-pink-4 caret-color:
rgba(var(--sf-pink-4-r),
var(--sf-pink-4-g),
var(--sf-pink-4-b),
var(--sf-border--alfa));
caret-pink-5 caret-color:
rgba(var(--sf-pink-5-r),
var(--sf-pink-5-g),
var(--sf-pink-5-b),
var(--sf-border--alfa));
caret-pink-6 caret-color:
rgba(var(--sf-pink-6-r),
var(--sf-pink-6-g),
var(--sf-pink-6-b),
var(--sf-border--alfa));
caret-pink-7 caret-color:
rgba(var(--sf-pink-7-r),
var(--sf-pink-7-g),
var(--sf-pink-7-b),
var(--sf-border--alfa));
caret-pink-8 caret-color:
rgba(var(--sf-pink-8-r),
var(--sf-pink-8-g),
var(--sf-pink-8-b),
var(--sf-border--alfa));
caret-pink-9 caret-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). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр.

Пример

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

<textarea class="caret-red-6 ..."></textarea>

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