Толщина границы
border-width
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно задать толщину границы.
Классы
| Класс | Значение |
|---|---|
border-0 |
border-width: var(--sf-0); |
border-x-0 |
border-left-width: var(--sf-0); |
border-y-0 |
border-top-width: var(--sf-0); |
border-left-0 |
border-left-width: var(--sf-0); |
border-right-0 |
border-right-width: var(--sf-0); |
border-top-0 |
border-top-width: var(--sf-0); |
border-bottom-0 |
border-bottom-width: var(--sf-0); |
border-1 |
border-width: var(--sf-a1); |
border-x-1 |
border-left-width: var(--sf-a1); |
border-y-1 |
border-top-width: var(--sf-a1); |
border-left-1 |
border-left-width: var(--sf-a1); |
border-right-1 |
border-right-width: var(--sf-a1); |
border-top-1 |
border-top-width: var(--sf-a1); |
border-bottom-1 |
border-bottom-width: var(--sf-a1); |
border-2 |
border-width: var(--sf-a2); |
border-x-2 |
border-left-width: var(--sf-a2); |
border-y-2 |
border-top-width: var(--sf-a2); |
border-left-2 |
border-left-width: var(--sf-a2); |
border-right-2 |
border-right-width: var(--sf-a2); |
border-top-2 |
border-top-width: var(--sf-a2); |
border-bottom-2 |
border-bottom-width: var(--sf-a2); |
border-3 |
border-width: var(--sf-a3); |
border-x-3 |
border-left-width: var(--sf-a3); |
border-y-3 |
border-top-width: var(--sf-a3); |
border-left-3 |
border-left-width: var(--sf-a3); |
border-right-3 |
border-right-width: var(--sf-a3); |
border-top-3 |
border-top-width: var(--sf-a3); |
border-bottom-3 |
border-bottom-width: var(--sf-a3); |
border-4 |
border-width: var(--sf-a4); |
border-x-4 |
border-left-width: var(--sf-a4); |
border-y-4 |
border-top-width: var(--sf-a4); |
border-left-4 |
border-left-width: var(--sf-a4); |
border-right-4 |
border-right-width: var(--sf-a4); |
border-top-4 |
border-top-width: var(--sf-a4); |
border-bottom-4 |
border-bottom-width: var(--sf-a4); |
Описание
Адаптивный модификатор. Задает толщину границы в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
border-{0...9}- толщина границы всех сторон,border-{top|bottom|left|right}-{0...9}- толщина границы отдельных сторон,border-{x|y}-{0...9}- толщина границы по горизонтали или вертикали
Толщина границ со всех сторон
Используйте модификатор border-{1...9} чтобы задать толщину границы для всех сторон. Чтобы убрать границу задайте толщину равной 0..
border-0
border-1
border-2
border-3
border-4
<div class="border-0 ...">border-0</div>
<div class="border-1 ...">border-1</div>
<div class="border-2 ...">border-2</div>
<div class="border-3 ...">border-3</div>
<div class="border-4 ...">border-4</div>
Толщина границы по горизонтали или вертикали
Используйте модификатор border-{x|y}-{1...9} чтобы задать толщину границы по горизонтали или вертикали.
border-x-4
border-y-4
<div class="border-x-2 ...">border-x-2</div>
<div class="border-y-2 ...">border-y-2</div>
Толщина границы с одной из сторон
Используйте модификатор border-{left|right|top|bottom}-{1...9} для установки толщины границы с одной из сторон.
border-left-4
border-rright-4
border-top-4
border-bottom-4
<div class="border-left-2 ...">border-left-2</div>
<div class="border-right-2 ...">border-rright-2</div>
<div class="border-top-2 ...">border-top-2</div>
<div class="border-bottom-2 ...">border-bottom-2</div>
Адаптивность
Для установки толщины границы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:border-2 для второй толщины для экранов размером Medium и больше.
<div class="md:border-2 ..."></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.