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