Цвет каретки

caret-color
hover
focus
active

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

Классы

Класс Значение
caret-main caret-color:
var(--sf-text-main);
caret-subordinate caret-color:
var(--sf-text-subordinate);
caret-additional caret-color:
var(--sf-text-additional);
caret-inverse caret-color:
var(--sf-text-inverse);
caret-primary-contrast caret-color:
var(--sf-primary-contrast);
caret-primary-default caret-color:
var(--sf-primary-default);
caret-primary-inverse caret-color:
var(--sf-primary-inverse);
caret-secondary-contrast caret-color:
var(--sf-secondary-contrast);
caret-secondary-default caret-color:
var(--sf-secondary-default);
caret-secondary-inverse caret-color:
var(--sf-secondary-inverse);
caret-tertiary-contrast caret-color:
var(--sf-tertiary-contrast);
caret-tertiary-default caret-color:
var(--sf-tertiary-default);
caret-tertiary-inverse caret-color:
var(--sf-tertiary-inverse);
caret-info-contrast caret-color:
var(--sf-info-contrast);
caret-info-default caret-color:
var(--sf-info-default);
caret-info-inverse caret-color:
var(--sf-info-inverse);
caret-success-contrast caret-color:
var(--sf-success-contrast);
caret-success-default caret-color:
var(--sf-success-default);
caret-success-inverse caret-color:
var(--sf-success-inverse);
caret-warning-contrast caret-color:
var(--sf-warning-contrast);
caret-warning-default caret-color:
var(--sf-warning-default);
caret-warning-inverse caret-color:
var(--sf-warning-inverse);
caret-danger-contrast caret-color:
var(--sf-danger-contrast);
caret-danger-default caret-color:
var(--sf-danger-default);
caret-danger-inverse caret-color:
var(--sf-danger-inverse);

Описание

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

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

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

Пример

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

<textarea class="caret-danger-default ..."></textarea>

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