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

accent-color
hover
focus
active

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

Классы

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

Описание

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

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

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

Пример

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

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

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