Цвет границы

border-color
hover
focus
active

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

Классы

Класс Значение Цвет
border-transparent border-color:
var(--sf-transparent);
border-current border-color:
var(--sf-current);
border-outline border-color:
var(--sf-outline);
border-outline-variant border-color:
var(--sf-outline-variant);
border-primary border-color:
var(--sf-outline-primary);
border-secondary border-color:
var(--sf-outline-secondary);
border-tertiary border-color:
var(--sf-outline-tertiary);
border-error border-color:
var(--sf-outline-error);
border-warning border-color:
var(--sf-outline-warning);
border-success border-color:
var(--sf-outline-success);

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Цвет. Обязательный параметр. Может принимать значения:
    • border-transparent - прозрачный;
    • border-current - текущйи цвет заданный с помощью стиля color;
  • Тон цвета. Не обязательный параметр. Принимает значение от 1 до 10.

Пример

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

border-outline
border-outline-variant
border-primary
border-secondary
<div class="border-4 border-info-default ... ">border-secondary</div>
<div class="border-4 border-info-tonal ... ">border-info-tonal</div>
<div class="border-4 border-info-inverse ... ">border-info-inverse</div>
<div class="border-4 border-info-contrast ... ">border-info-contrast</div>

Граница при наведении

Используйте модификатор hover:border-{color} для установки цвета границы при наведении.

<button class="border-1 border-surface-lowest hover:border-info-default ...">Hover Me</button>

Граница при фокусе

Используйте модификатор focus:border-{color} для установки цвета границы при фокусе на элемент.

<input class="border-1 border-surface-lowest focus:border-info-default ...""Focus me">

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