Параметры по умолчанию (для границ)
https://dev.ru.simai.io/ru/ui/utility/border/border-default.php
Для упрощения работы с границами элементов предусмотрены два модификатора,
которые добавляют или убирают границу с параметрами по умолчанию. Эти модификаторы загружаются до остальных
модификаторов границ, что позволяет впоследствии переопределять их стили при необходимости.
Таблица классов
| Класс | Значение |
|---|---|
| .border | border: var(--sf-a1) var(--sf-outline-variant) solid; |
| .border-none | border: var(--sf-a1) var(--sf-transparent) solid; |
Описание
Модификатор border позволяет быстро добавить базовую границу с цветом и
толщиной по умолчанию, что удобно для большинства случаев. Если же граница
не нужна, модификатор border-none уберёт её, оставив элемент без обводки.
Оба модификатора поддерживают адаптивное применение (через контрольные точки)
и реагирование на состояние элемента при наведении (hover), что позволяет
динамически изменять отображение границ в зависимости от размера экрана
или взаимодействия пользователя при наведении курсора.
Синтаксис
Использование:
{модификатор}— применение модификатора для всех размеров экрана.{контрольная точка}:{модификатор}— адаптивное применение модификатора
начиная с заданного размера экрана (например,md:border).hover:{модификатор}— применение модификатора при наведении.
Пример использования
<!-- Базовая граница для всех размеров экрана -->
<div class="border ...">Контент</div>
<!-- Удаление границы при наведении -->
<div class="hover:border-none ...">Наведи на меня</div>
<!-- Адаптивное применение: убрать границу начиная с размера экрана md -->
<div class="md:border-none ...">Контент без границы на больших экранах</div>