Полосыlink

https://dev.ru.simai.io/ru/ui/utility/stripe/stripe.php

С помощью модификаторов stripe-{1...4} можно добавить к фону полосатый паттерн.

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

Класс Значение
.stripe-1 background: linear-gradient(90deg, var(--sf-stripe--color) 1%, transparent 1%, transparent 49%, var(--sf-stripe--color) 49%, var(--sf-stripe--color) 51%, transparent 51%, transparent 99%, var(--sf-stripe--color) 99%);
background-size: var(--sf-stripe--size) var(--sf-stripe--size);
.stripe-2 background: linear-gradient(0deg, var(--sf-stripe--color) 1%, transparent 1%, transparent 49%, var(--sf-stripe--color) 49%, var(--sf-stripe--color) 51%, transparent 51%, transparent 99%, var(--sf-stripe--color) 99%);
background-size: var(--sf-stripe--size) var(--sf-stripe--size);
.stripe-3 background: linear-gradient(0deg, var(--sf-stripe--color) 1%, transparent 1%, transparent 49%, var(--sf-stripe--color) 49%, var(--sf-stripe--color) 51%, transparent 51%, transparent 99%, var(--sf-stripe--color) 99%), linear-gradient(90deg, var(--sf-stripe--color) 1%, transparent 1%, transparent 49%, var(--sf-stripe--color) 49%, var(--sf-stripe--color) 51%, transparent 51%, transparent 99%, var(--sf-stripe--color) 99%);
background-size: var(--sf-stripe--size) var(--sf-stripe--size);
.stripe-4 background: linear-gradient(135deg, var(--sf-stripe--color) 1%, transparent 1%, transparent 49%, var(--sf-stripe--color) 49%, var(--sf-stripe--color) 51%, transparent 51%, transparent 99%, var(--sf-stripe--color) 99%);
background-size: var(--sf-stripe--size) var(--sf-stripe--size);

Описаниеlink

Модификаторы stripe-1, stripe-2, stripe-3, stripe-4 создают разные узоры полос. Сами цвета и размер полос определяются через переменные, такие как --sf-stripe--color и --sf-stripe--size.
Данные модификаторы добавляют к фону элемента полосатый паттерн в разных конфигурациях.

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


<div class="stripe-1 p-3">Полосы в стиле stripe-1</div>
<div class="stripe-2 p-3">Полосы в стиле stripe-2</div>
<div class="stripe-3 p-3">Полосы в стиле stripe-3</div>
<div class="stripe-4 p-3">Полосы в стиле stripe-4</div>