Вращение оттенка элемента

filter-hue-rotate
sm
md
lg
xl
hover

В SIMAI Framework с помощью модификатора можно управлять вращением оттенка элемента.

Классы

Класс Значение
hue-rotate-0 filter: hue-rotate(0deg)
hue-rotate-1 filter: hue-rotate(15deg)
hue-rotate-2 filter: hue-rotate(30deg)
hue-rotate-3 filter: hue-rotate(60deg)
hue-rotate-4 filter: hue-rotate(90deg)
hue-rotate-5 filter: hue-rotate(180deg)

Описание

Адаптивный модификатор. Позволяет управлять вращением оттенка элемента, в зависимости от размера области просмотра.

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

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

Пример

<div class="hue-rotate-0"><!-- ... --></div>
<div class="hue-rotate-1"><!-- ... --></div>
<div class="hue-rotate-2"><!-- ... --></div>
<div class="hue-rotate-3"><!-- ... --></div>
<div class="hue-rotate-4"><!-- ... --></div>
<div class="hue-rotate-5"><!-- ... --></div>

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

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

Например, используйте модификатор md:hue-rotate-3 для установки вращения оттенка элементов для экранов размером Medium и больше.

<div class="md:hue-rotate-30"></div>

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

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