Цвет фона

stripe-color

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

Классы

Класс Значение Цвет
stripe-transparent background-color:
var(--sf-transparent);
stripe-current background-color:
background-color: currentColor;
stripe-white background-color: r
gba(var(--sf-white-r),
var(--sf-white-g),
var(--sf-white-b),
var(--sf-stripe--alfa));
stripe-black background-color:
rgba(var(--sf-black-r),
var(--sf-black-g),
var(--sf-black-b),
var(--sf-stripe--alfa));
stripe-gray-1 background-color:
rgba(var(--sf-gray-1-r),
var(--sf-gray-1-g),
var(--sf-gray-1-b),
var(--sf-stripe--alfa));
stripe-gray-2 background-color:
rgba(var(--sf-gray-2-r),
var(--sf-gray-2-g),
var(--sf-gray-2-b),
var(--sf-stripe--alfa));
stripe-gray-3 background-color:
rgba(var(--sf-gray-3-r),
var(--sf-gray-3-g),
var(--sf-gray-3-b),
var(--sf-stripe--alfa));
stripe-gray-4 background-color:
rgba(var(--sf-gray-4-r),
var(--sf-gray-4-g),
var(--sf-gray-4-b),
var(--sf-stripe--alfa));
stripe-gray-5 background-color:
rgba(var(--sf-gray-5-r),
var(--sf-gray-5-g),
var(--sf-gray-5-b),
var(--sf-stripe--alfa));
stripe-gray-6 background-color:
rgba(var(--sf-gray-6-r),
var(--sf-gray-6-g),
var(--sf-gray-6-b),
var(--sf-stripe--alfa));
stripe-gray-7 background-color:
rgba(var(--sf-gray-7-r),
var(--sf-gray-7-g),
var(--sf-gray-7-b),
var(--sf-stripe--alfa));
stripe-gray-8 background-color:
rgba(var(--sf-gray-8-r),
var(--sf-gray-8-g),
var(--sf-gray-8-b),
var(--sf-stripe--alfa));
stripe-gray-9 background-color:
rgba(var(--sf-gray-9-r),
var(--sf-gray-9-g),
var(--sf-gray-9-b),
var(--sf-stripe--alfa));
stripe-red-1 background-color:
rgba(var(--sf-red-1-r),
var(--sf-red-1-g),
var(--sf-red-1-b),
var(--sf-stripe--alfa));
stripe-red-2 background-color:
rgba(var(--sf-red-2-r),
var(--sf-red-2-g),
var(--sf-red-2-b),
var(--sf-stripe--alfa));
stripe-red-3 background-color:
rgba(var(--sf-red-3-r),
var(--sf-red-3-g),
var(--sf-red-3-b),
var(--sf-stripe--alfa));
stripe-red-4 background-color:
rgba(var(--sf-red-4-r),
var(--sf-red-4-g),
var(--sf-red-4-b),
var(--sf-stripe--alfa));
stripe-red-5 background-color:
rgba(var(--sf-red-5-r),
var(--sf-red-5-g),
var(--sf-red-5-b),
var(--sf-stripe--alfa));
stripe-red-6 background-color:
rgba(var(--sf-red-6-r),
var(--sf-red-6-g),
var(--sf-red-6-b),
var(--sf-stripe--alfa));
stripe-red-7 background-color:
rgba(var(--sf-red-7-r),
var(--sf-red-7-g),
var(--sf-red-7-b),
var(--sf-stripe--alfa));
stripe-red-8 background-color:
rgba(var(--sf-red-8-r),
var(--sf-red-8-g),
var(--sf-red-8-b),
var(--sf-stripe--alfa));
stripe-red-9 background-color:
rgba(var(--sf-red-9-r),
var(--sf-red-9-g),
var(--sf-red-9-b),
var(--sf-stripe--alfa));
stripe-orange-1 background-color:
rgba(var(--sf-orange-1-r),
var(--sf-orange-1-g),
var(--sf-orange-1-b),
var(--sf-stripe--alfa));
stripe-orange-2 background-color:
rgba(var(--sf-orange-2-r),
var(--sf-orange-2-g),
var(--sf-orange-2-b),
var(--sf-stripe--alfa));
stripe-orange-3 background-color:
rgba(var(--sf-orange-3-r),
var(--sf-orange-3-g),
var(--sf-orange-3-b),
var(--sf-stripe--alfa));
stripe-orange-4 background-color:
rgba(var(--sf-orange-4-r),
var(--sf-orange-4-g),
var(--sf-orange-4-b),
var(--sf-stripe--alfa));
stripe-orange-5 background-color:
rgba(var(--sf-orange-5-r),
var(--sf-orange-5-g),
var(--sf-orange-5-b),
var(--sf-stripe--alfa));
stripe-orange-6 background-color:
rgba(var(--sf-orange-6-r),
var(--sf-orange-6-g),
var(--sf-orange-6-b),
var(--sf-stripe--alfa));
stripe-orange-7 background-color:
rgba(var(--sf-orange-7-r),
var(--sf-orange-7-g),
var(--sf-orange-7-b),
var(--sf-stripe--alfa));
stripe-orange-8 background-color:
rgba(var(--sf-orange-8-r),
var(--sf-orange-8-g),
var(--sf-orange-8-b),
var(--sf-stripe--alfa));
stripe-orange-9 background-color:
rgba(var(--sf-orange-9-r),
var(--sf-orange-9-g),
var(--sf-orange-9-b),
var(--sf-stripe--alfa));
stripe-yellow-1 background-color:
rgba(var(--sf-yellow-1-r),
var(--sf-yellow-1-g),
var(--sf-yellow-1-b),
var(--sf-stripe--alfa));
stripe-yellow-2 background-color:
rgba(var(--sf-yellow-2-r),
var(--sf-yellow-2-g),
var(--sf-yellow-2-b),
var(--sf-stripe--alfa));
stripe-yellow-3 background-color:
rgba(var(--sf-yellow-3-r),
var(--sf-yellow-3-g),
var(--sf-yellow-3-b),
var(--sf-stripe--alfa));
stripe-yellow-4 background-color:
rgba(var(--sf-yellow-4-r),
var(--sf-yellow-4-g),
var(--sf-yellow-4-b),
var(--sf-stripe--alfa));
stripe-yellow-5 background-color:
rgba(var(--sf-yellow-5-r),
var(--sf-yellow-5-g),
var(--sf-yellow-5-b),
var(--sf-stripe--alfa));
stripe-yellow-6 background-color:
rgba(var(--sf-yellow-6-r),
var(--sf-yellow-6-g),
var(--sf-yellow-6-b),
var(--sf-stripe--alfa));
stripe-yellow-7 background-color:
rgba(var(--sf-yellow-7-r),
var(--sf-yellow-7-g),
var(--sf-yellow-7-b),
var(--sf-stripe--alfa));
stripe-yellow-8 background-color:
rgba(var(--sf-yellow-8-r),
var(--sf-yellow-8-g),
var(--sf-yellow-8-b),
var(--sf-stripe--alfa));
stripe-yellow-9 background-color:
rgba(var(--sf-yellow-9-r),
var(--sf-yellow-9-g),
var(--sf-yellow-9-b),
var(--sf-stripe--alfa));
stripe-green-1 background-color:
rgba(var(--sf-green-1-r),
var(--sf-green-1-g),
var(--sf-green-1-b),
var(--sf-stripe--alfa));
stripe-green-2 background-color:
rgba(var(--sf-green-2-r),
var(--sf-green-2-g),
var(--sf-green-2-b),
var(--sf-stripe--alfa));
stripe-green-3 background-color:
rgba(var(--sf-green-3-r),
var(--sf-green-3-g),
var(--sf-green-3-b),
var(--sf-stripe--alfa));
stripe-green-4 background-color:
rgba(var(--sf-green-4-r),
var(--sf-green-4-g),
var(--sf-green-4-b),
var(--sf-stripe--alfa));
stripe-green-5 background-color:
rgba(var(--sf-green-5-r),
var(--sf-green-5-g),
var(--sf-green-5-b),
var(--sf-stripe--alfa));
stripe-green-6 background-color:
rgba(var(--sf-green-6-r),
var(--sf-green-6-g),
var(--sf-green-6-b),
var(--sf-stripe--alfa));
stripe-green-7 background-color:
rgba(var(--sf-green-7-r),
var(--sf-green-7-g),
var(--sf-green-7-b),
var(--sf-stripe--alfa));
stripe-green-8 background-color:
rgba(var(--sf-green-8-r),
var(--sf-green-8-g),
var(--sf-green-8-b),
var(--sf-stripe--alfa));
stripe-green-9 background-color:
rgba(var(--sf-green-9-r),
var(--sf-green-9-g),
var(--sf-green-9-b),
var(--sf-stripe--alfa));
stripe-blue-1 background-color:
rgba(var(--sf-blue-1-r),
var(--sf-blue-1-g),
var(--sf-blue-1-b),
var(--sf-stripe--alfa));
stripe-blue-2 background-color:
rgba(var(--sf-blue-2-r),
var(--sf-blue-2-g),
var(--sf-blue-2-b),
var(--sf-stripe--alfa));
stripe-blue-3 background-color:
rgba(var(--sf-blue-3-r),
var(--sf-blue-3-g),
var(--sf-blue-3-b),
var(--sf-stripe--alfa));
stripe-blue-4 background-color:
rgba(var(--sf-blue-4-r),
var(--sf-blue-4-g),
var(--sf-blue-4-b),
var(--sf-stripe--alfa));
stripe-blue-5 background-color:
rgba(var(--sf-blue-5-r),
var(--sf-blue-5-g),
var(--sf-blue-5-b),
var(--sf-stripe--alfa));
stripe-blue-6 background-color:
rgba(var(--sf-blue-6-r),
var(--sf-blue-6-g),
var(--sf-blue-6-b),
var(--sf-stripe--alfa));
stripe-blue-7 background-color:
rgba(var(--sf-blue-7-r),
var(--sf-blue-7-g),
var(--sf-blue-7-b),
var(--sf-stripe--alfa));
stripe-blue-8 background-color:
rgba(var(--sf-blue-8-r),
var(--sf-blue-8-g),
var(--sf-blue-8-b),
var(--sf-stripe--alfa));
stripe-blue-9 background-color:
rgba(var(--sf-blue-9-r),
var(--sf-blue-9-g),
var(--sf-blue-9-b),
var(--sf-stripe--alfa));
stripe-purple-1 background-color:
rgba(var(--sf-purple-1-r),
var(--sf-purple-1-g),
var(--sf-purple-1-b),
var(--sf-stripe--alfa));
stripe-purple-2 background-color:
rgba(var(--sf-purple-2-r),
var(--sf-purple-2-g),
var(--sf-purple-2-b),
var(--sf-stripe--alfa));
stripe-purple-3 background-color:
rgba(var(--sf-purple-3-r),
var(--sf-purple-3-g),
var(--sf-purple-3-b),
var(--sf-stripe--alfa));
stripe-purple-4 background-color:
rgba(var(--sf-purple-4-r),
var(--sf-purple-4-g),
var(--sf-purple-4-b),
var(--sf-stripe--alfa));
stripe-purple-5 background-color:
rgba(var(--sf-purple-5-r),
var(--sf-purple-5-g),
var(--sf-purple-5-b),
var(--sf-stripe--alfa));
stripe-purple-6 background-color:
rgba(var(--sf-purple-6-r),
var(--sf-purple-6-g),
var(--sf-purple-6-b),
var(--sf-stripe--alfa));
stripe-purple-7 background-color:
rgba(var(--sf-purple-7-r),
var(--sf-purple-7-g),
var(--sf-purple-7-b),
var(--sf-stripe--alfa));
stripe-purple-8 background-color:
rgba(var(--sf-purple-8-r),
var(--sf-purple-8-g),
var(--sf-purple-8-b),
var(--sf-stripe--alfa));
stripe-purple-9 background-color:
rgba(var(--sf-purple-9-r),
var(--sf-purple-9-g),
var(--sf-purple-9-b),
var(--sf-stripe--alfa));
stripe-pink-1 background-color:
rgba(var(--sf-pink-1-r),
var(--sf-pink-1-g),
var(--sf-pink-1-b),
var(--sf-stripe--alfa));
stripe-pink-2 background-color:
rgba(var(--sf-pink-2-r),
var(--sf-pink-2-g),
var(--sf-pink-2-b),
var(--sf-stripe--alfa));
stripe-pink-3 background-color:
rgba(var(--sf-pink-3-r),
var(--sf-pink-3-g),
var(--sf-pink-3-b),
var(--sf-stripe--alfa));
stripe-pink-4 background-color:
rgba(var(--sf-pink-4-r),
var(--sf-pink-4-g),
var(--sf-pink-4-b),
var(--sf-stripe--alfa));
stripe-pink-5 background-color:
rgba(var(--sf-pink-5-r),
var(--sf-pink-5-g),
var(--sf-pink-5-b),
var(--sf-stripe--alfa));
stripe-pink-6 background-color:
rgba(var(--sf-pink-6-r),
var(--sf-pink-6-g),
var(--sf-pink-6-b),
var(--sf-stripe--alfa));
stripe-pink-7 background-color:
rgba(var(--sf-pink-7-r),
var(--sf-pink-7-g),
var(--sf-pink-7-b),
var(--sf-stripe--alfa));
stripe-pink-8 background-color:
rgba(var(--sf-pink-8-r),
var(--sf-pink-8-g),
var(--sf-pink-8-b),
var(--sf-stripe--alfa));
stripe-pink-9 background-color:
rgba(var(--sf-pink-9-r),
var(--sf-pink-9-g),
var(--sf-pink-9-b),
var(--sf-stripe--alfa));

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Цвет. Обязательный параметр. Может принимать значения:
    • stripe-transparent - прозрачный;
    • stripe-current - текущйи цвет заданный с помощью стиля color;
    • stripe-{black, white, gray, red, orange, yellow, green, blue, purple, pink} - цвет из палитры цветов;
  • Тон цвета. Не обязательный параметр. Принимает значение от 1 до 10.

Пример

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

stripe-red-6
stripe-blue-3
stripe-gray-4 
<div class="stripe-red-6..."></div>

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