Закругление границ
border-radius
В SIMAI Framework с помощью модифкаторов можно радиус закругления границ.
Классы
| Класс | Значение |
|---|---|
radius-0 |
border-radius: var(--sf-0); |
radius-top-0 |
border-top-left-radius: var(--sf-0); |
radius-bottom-0 |
border-bottom-left-radius: var(--sf-0); |
radius-left-0 |
border-top-left-radius: var(--sf-0); |
radius-right-0 |
border-top-right-radius: var(--sf-0); |
radius-top-left-0 |
border-top-left-radius: var(--sf-0); |
radius-top-right-0 |
border-top-right-radius: var(--sf-0); |
radius-bottom-left-0 |
border-bottom-left-radius: var(--sf-0); |
radius-bottom-right-0 |
border-bottom-right-radius: var(--sf-0); |
radius-1 |
border-radius: var(--sf-a2); |
radius-top-1 |
border-top-left-radius: var(--sf-a2); |
radius-bottom-1 |
border-bottom-left-radius: var(--sf-a2); |
radius-left-1 |
border-top-left-radius: var(--sf-a2); |
radius-right-1 |
border-top-right-radius: var(--sf-a2); |
radius-top-left-1 |
border-top-left-radius: var(--sf-a2); |
radius-top-right-1 |
border-top-right-radius: var(--sf-a2); |
radius-bottom-left-1 |
border-bottom-left-radius: var(--sf-a2); |
radius-bottom-right-1 |
border-bottom-right-radius: var(--sf-a2); |
radius-2 |
border-radius: var(--sf-a4); |
radius-top-2 |
border-top-left-radius: var(--sf-a4); |
radius-bottom-2 |
border-bottom-left-radius: var(--sf-a4); |
radius-left-2 |
border-top-left-radius: var(--sf-a4); |
radius-right-2 |
border-top-right-radius: var(--sf-a4); |
radius-top-left-2 |
border-top-left-radius: var(--sf-a4); |
radius-top-right-2 |
border-top-right-radius: var(--sf-a4); |
radius-bottom-left-2 |
border-bottom-left-radius: var(--sf-a4); |
radius-bottom-right-2 |
border-bottom-right-radius: var(--sf-a4); |
radius-3 |
border-radius: var(--sf-a6); |
radius-top-3 |
border-top-left-radius: var(--sf-a6); |
radius-bottom-3 |
border-bottom-left-radius: var(--sf-a6); |
radius-left-3 |
border-top-left-radius: var(--sf-a6); |
radius-right-3 |
border-top-right-radius: var(--sf-a6); |
radius-top-left-3 |
border-top-left-radius: var(--sf-a6); |
radius-top-right-3 |
border-top-right-radius: var(--sf-a6); |
radius-bottom-left-3 |
border-bottom-left-radius: var(--sf-a6); |
radius-bottom-right-3 |
border-bottom-right-radius: var(--sf-a6); |
radius-4 |
border-radius: var(--sf-a8); |
radius-top-4 |
border-top-left-radius: var(--sf-a8); |
radius-bottom-4 |
border-bottom-left-radius: var(--sf-a8); |
radius-left-4 |
border-top-left-radius: var(--sf-a8); |
radius-right-4 |
border-top-right-radius: var(--sf-a8); |
radius-top-left-4 |
border-top-left-radius: var(--sf-a8); |
radius-top-right-4 |
border-top-right-radius: var(--sf-a8); |
radius-bottom-left-4 |
border-bottom-left-radius: var(--sf-a8); |
radius-bottom-right-4 |
border-bottom-right-radius: var(--sf-a8); |
radius-5 |
border-radius: var(--sf-b2); |
radius-top-5 |
border-top-left-radius: var(--sf-b2); |
radius-bottom-5 |
border-bottom-left-radius: var(--sf-b2); |
radius-left-5 |
border-top-left-radius: var(--sf-b2); |
radius-right-5 |
border-top-right-radius: var(--sf-b2); |
radius-top-left-5 |
border-top-left-radius: var(--sf-b2); |
radius-top-right-5 |
border-top-right-radius: var(--sf-b2); |
radius-bottom-left-5 |
border-bottom-left-radius: var(--sf-b2); |
radius-bottom-right-5 |
border-bottom-right-radius: var(--sf-b2); |
radius-6 |
border-radius: var(--sf-b4); |
radius-top-6 |
border-top-left-radius: var(--sf-b4); |
radius-bottom-6 |
border-bottom-left-radius: var(--sf-b4); |
radius-left-6 |
border-top-left-radius: var(--sf-b4); |
radius-right-6 |
border-top-right-radius: var(--sf-b4); |
radius-top-left-6 |
border-top-left-radius: var(--sf-b4); |
radius-top-right-6 |
border-top-right-radius: var(--sf-b4); |
radius-bottom-left-6 |
border-bottom-left-radius: var(--sf-b4); |
radius-bottom-right-6 |
border-bottom-right-radius: var(--sf-b4); |
radius-7 |
border-radius: var(--sf-b8); |
radius-top-7 |
border-top-left-radius: var(--sf-b8); |
radius-bottom-7 |
border-bottom-left-radius: var(--sf-b8); |
radius-left-7 |
border-top-left-radius: var(--sf-b8); |
radius-right-7 |
border-top-right-radius: var(--sf-b8); |
radius-top-left-7 |
border-top-left-radius: var(--sf-b8); |
radius-top-right-7 |
border-top-right-radius: var(--sf-b8); |
radius-bottom-left-7 |
border-bottom-left-radius: var(--sf-b8); |
radius-bottom-right-7 |
border-bottom-right-radius: var(--sf-b8); |
radius-8 |
border-radius: var(--sf-c2); |
radius-top-8 |
border-top-left-radius: var(--sf-c2); |
radius-bottom-8 |
border-bottom-left-radius: var(--sf-c2); |
radius-left-8 |
border-top-left-radius: var(--sf-c2); |
radius-right-8 |
border-top-right-radius: var(--sf-c2); |
radius-top-left-8 |
border-top-left-radius: var(--sf-c2); |
radius-top-right-8 |
border-top-right-radius: var(--sf-c2); |
radius-bottom-left-8 |
border-bottom-left-radius: var(--sf-c2); |
radius-bottom-right-8 |
border-bottom-right-radius: var(--sf-c2); |
radius-9 |
border-radius: var(--sf-c6); |
radius-top-9 |
border-top-left-radius: var(--sf-c6); |
radius-bottom-9 |
border-bottom-left-radius: var(--sf-c6); |
radius-left-9 |
border-top-left-radius: var(--sf-c6); |
radius-right-9 |
border-top-right-radius: var(--sf-c6); |
radius-top-left-9 |
border-top-left-radius: var(--sf-c6); |
radius-top-right-9 |
border-top-right-radius: var(--sf-c6); |
radius-bottom-left-9 |
border-bottom-left-radius: var(--sf-c6); |
radius-bottom-right-9 |
border-bottom-right-radius: var(--sf-c6); |
radius-round |
border-radius: 9999px; |
radius-full |
border-radius: 100%; |
Описание
Адаптивный модификатор. Задает радиус закругления границ в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
radius-{0...9}- радиус закругления всех сторон,radius-{top|bottom|left|right}-{0...9}- радиус закругления отдельных сторон,radius-{top-left|top-right|bottom-left|border-right}-{0...9}- радиус закругления отдельных углов,radius-full- максимальный радиус закругления всех сторон (для квадрата - окружность).
Закругление со всех сторон
Используйте модификатор radius-{1...9} для закругления со всех сторон. Для полного закругления используйте модификатор radius-full. Чтобы убрать закругление используйте модификатор radius-0.
radius-0
radius-1/3
radius-1/2
radius-full
<div class="radius-0 ...">radius-0</div>
<div class="radius-1/3 ...">radius-1/3</div>
<div class="radius-1/2 ...">radius-1/2</div>
<div class="radius-full ...">radius-full</div>
Закругление кнопок
Используйте модификатор radius-full для полного закругления кнопок по оси X.
<button class="radius-full ...">Sample Button</button>
Кнопки без закругления
Используйте модификатор radius-0 чтобы убрать закругление у кнопок.
<button class="radius-0 ...">Sample Button</button>
Закругление с одной стороны
Используйте модификатор radius-{left|right|top|bottom}-{1...9} для закругления с одной стороны.
radius-left-1/2
radius-right-1/2
radius-top-1/2
radius-bottom-1/2
<div class="radius-left-1/2 ...">radius-left-1/2</div>
<div class="radius-right-1/2 ...">radius-right-1/2</div>
<div class="radius-top-1/2 ...">radius-top-1/2</div>
<div class="radius-bottom-1/2 ...">radius-bottom-1/2</div>
Закругление с одного угла
Используйте модификатор radius-{top-left|top-right|bottom-left|bottom-right}-{1...9} для закругления с одного угла.
radius-top-left-1/3
radius-top-right-1/3
radius-bottom-left-1/3
radius-bottom-right-1/2
<div class="radius-top-left-1/3 ...">radius-top-left-1/3</div>
<div class="radius-top-right-1/3 ...">radius-top-right-1/3</div>
<div class="radius-bottom-left-1/3 ...">radius-bottom-left-1/3</div>
<div class="radius-bottom-right-1/2 ...">radius-bottom-right-1/2</div>