Полосы

stripe
sm
md
lg
xl

В SIMAI Framework с помощью модифкаторов можно задать паттерны фона.

Классы

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

Описание

Адаптивный модификатор. Задает размер фона в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:

Пример

Используйте модификатор stripe-{1...4} для установки паттерна фона.

stripe-1
stripe-2
stripe-3
stripe-4 
<div class="stripe-1 ...">...</div>
<div class="stripe-2 ...">...</div>
<div class="stripe-3 ...">...</div>
<div class="stripe-4 ...">...</div>

Адаптивность

Для создания градиента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:stripe-2 для создания линейного градиента с двумя цвевтами для экранов размером Medium и больше.

<div class="md:stripe-2 ..."></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью