Ширина смещения кольца
ring-offset-width
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно задать ширину смещения кольца.
Классы
| Класс | Значение |
|---|---|
ring-offset-0 |
box-shadow: var(--sf-ring-inset) 0 0 0 calc(0px + var(--sf-a2)) var(--sf-ring-color); |
ring-offset-1 |
box-shadow: var(--sf-ring-inset) 0 0 0 calc(1px + var(--sf-a2)) var(--sf-ring-color); |
ring-offset-2 |
box-shadow: var(--sf-ring-inset) 0 0 0 calc(2px + var(--sf-a2)) var(--sf-ring-color); |
ring-offset-3 |
box-shadow: var(--sf-ring-inset) 0 0 0 calc(3px + var(--sf-a2)) var(--sf-ring-color); |
ring-offset-4 |
box-shadow: var(--sf-ring-inset) 0 0 0 calc(4px + var(--sf-a2)) var(--sf-ring-color); |
Описание
Адаптивный модификатор. Задает ширину смещения кольца в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
-
Контрольная точка. Необязательный параметр. Применяет модификатор
начиная с определенного размера области просмотра, согласно контрольным
точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
ring-offset-{0...4}- толщина кольца всех сторон.
Пример
Используйте модификатор ring-offset-{1...5} чтобы задать толщину границы
для всех сторон. Чтобы убрать кольцо задайте толщину равной 0..
ring-offset-0
ring-offset-1
ring-offset-2
ring-offset-3
ring-offset-4
<div class="ring-offset-0 ...">ring-offset-0</div>
<div class="ring-offset-1 ...">ring-offset-1</div>
<div class="ring-offset-2 ...">ring-offset-2</div>
<div class="ring-offset-3 ...">ring-offset-3</div>
<div class="ring-offset-4 ...">ring-offset-4</div>