Толщина внешней границы
Классы outline-{n} задают outline-width — толщину внешнего контура.
Берите их вместе с классом outline или классом стиля, чтобы сделать контур
толще, и с префиксом focus-visible:, чтобы выделить элемент в фокусе.
Пример
Шкала
Под каждым образцом — класс толщины; цвет и отступ задают outline-primary outline-offset-2.
outline-0
outline-1
outline-2
outline-3
outline-4
Фокус
Контур толстеет только в фокусе. Щёлкните первую кнопку и переведите фокус
на вторую клавишей Tab: focus: срабатывает в обоих случаях,
focus-visible: — только при работе с клавиатуры.
focus:outline-4
focus-visible:outline-4
Классы
| Класс | CSS | Значения |
|---|---|---|
outline-1 |
outline-width: var(--sf-a1) |
— |
outline-2 |
outline-width: var(--sf-a2) |
— |
outline-3 |
outline-width: var(--sf-a3) |
— |
outline-4 |
outline-width: var(--sf-a4) |
— |
outline-0 |
outline-width: var(--sf-0) |
— |
Условия (что это): ширина экрана — нет; состояния — focus-visible:, focus:. Например: focus-visible:outline-1.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
| Переменная | Значение по умолчанию |
|---|---|
--sf-a1 |
0.0625rem |
--sf-a2 |
0.125rem |
--sf-a3 |
0.1875rem |
--sf-a4 |
0.25rem |
--sf-0 |
0 |
Применение
| Класс | Толщина при 1rem = 16px |
|---|---|
outline-0 |
0 |
outline-1 |
1px |
outline-2 |
2px |
outline-3 |
3px |
outline-4 |
4px |
Класс толщины контур не включает: у элемента по умолчанию стиль контура
none. Добавьте класс outline из ядра или класс
стиля.
Классы ядра outline и outline-none
| Класс | CSS |
|---|---|
outline |
outline: var(--sf-px) var(--sf-outline-variant) solid |
outline-none |
outline-width: var(--sf-0) |
outline включает сплошной контур в один пиксель цвета края области: он
задаёт сразу толщину, цвет и стиль, а классы толщины и цвета после него
уточняют одно своё свойство. outline-none снимает толщину контура.
Префиксов ширины экрана и состояния у этих классов нет.
Клавиатурный фокус рисуется не этими классами: ядро задаёт его правилом
:focus-visible из переменных фокуса, см.
«Фокус». outline-none на элементе, который
получает фокус, убирает и это кольцо. Класс outline в фокусе тоже заменяет
кольцо своим тонким контуром; чтобы фокус оставался заметным, добавьте
классы состояния, например focus-visible:outline-2 focus-visible:outline-primary.
<button class="outline outline-1 outline-primary outline-offset-2 focus-visible:outline-4">Отправить</button>
Ограничения
outline-0оставляет контур без толщины; на элементе в фокусе это убирает видимый фокус.- Префиксов ширины экрана у семейства нет; из состояний есть
focus:иfocus-visible:.