Параметры по умолчанию (для границ)link

https://dev.ru.simai.io/ru/ui/utility/border/border-default.php

Для упрощения работы с границами элементов предусмотрены два модификатора,
которые добавляют или убирают границу с параметрами по умолчанию. Эти модификаторы загружаются до остальных модификаторов границ, что позволяет впоследствии переопределять их стили при необходимости.

Таблица классовlink

Класс Значение
.border border: var(--sf-a1) var(--sf-outline-variant) solid;
.border-none border: var(--sf-a1) var(--sf-transparent) solid;

Описаниеlink

Модификатор border позволяет быстро добавить базовую границу с цветом и
толщиной по умолчанию, что удобно для большинства случаев. Если же граница
не нужна, модификатор border-none уберёт её, оставив элемент без обводки.

Оба модификатора поддерживают адаптивное применение (через контрольные точки)
и реагирование на состояние элемента при наведении (hover), что позволяет
динамически изменять отображение границ в зависимости от размера экрана
или взаимодействия пользователя при наведении курсора.

Синтаксисlink

Использование:

  • {модификатор} — применение модификатора для всех размеров экрана.
  • {контрольная точка}:{модификатор} — адаптивное применение модификатора
    начиная с заданного размера экрана (например, md:border).
  • hover:{модификатор} — применение модификатора при наведении.

Пример использованияlink

<!-- Базовая граница для всех размеров экрана -->
<div class="border ...">Контент</div>

<!-- Удаление границы при наведении -->
<div class="hover:border-none ...">Наведи на меня</div>

<!-- Адаптивное применение: убрать границу начиная с размера экрана md -->
<div class="md:border-none ...">Контент без границы на больших экранах</div>