Цвет внешней границы

outline-color
hover
focus
active

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

Классы

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

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Цвет. Обязательный параметр. Может принимать значения:
    • outline-transparent - прозрачный;
    • outline-current - текущйи цвет заданный с помощью стиля color;
    • outline-{black, white, gray, red, orange, yellow, green, blue, purple, pink} - цвет из палитры цветов;

Пример

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

<button class="outline-2 outline-solid outline-danger-default outline-offset-2 ...">Кнопка 1</button>
<button class="outline-2 outline-solid outline-primary outline-offset-2 ...">Кнопка 2</button>
<button class="outline-2 outline-solid outline-warning outline-offset-2 ...">Кнопка 3</button>

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