Контрастность элемента
filter-contrast
sm
md
lg
xl
hover
В SIMAI Framework с помощью модификатора можно управлять контрастностью элемента.
Классы
| Класс | Значение |
|---|---|
contrast-0 |
filter: contrast(0) |
contrast-1 |
filter: contrast(0.5) |
contrast-2 |
filter: contrast(0.75) |
contrast-3 |
filter: contrast(1) |
contrast-4 |
filter: contrast(1.25) |
contrast-5 |
filter: contrast(1.5) |
contrast-6 |
filter: contrast(1.75) |
contrast-7 |
filter: contrast(2) |
contrast-8 |
filter: contrast(2.25) |
contrast-9 |
filter: contrast(2.5) |
Описание
Адаптивный модификатор. Позволяет управлять контрастностью элемента, в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
-
contrast-0...contrast-9- уровень контрастности элемента.
-
Пример
<div class="contrast-0"><!-- ... --></div>
<div class="contrast-1"><!-- ... --></div>
<div class="contrast-2"><!-- ... --></div>
<div class="contrast-3"><!-- ... --></div>
<div class="contrast-4"><!-- ... --></div>
<div class="contrast-5"><!-- ... --></div>
<div class="contrast-6"><!-- ... --></div>
<div class="contrast-7"><!-- ... --></div>
<div class="contrast-8"><!-- ... --></div>
<div class="contrast-9"><!-- ... --></div>
Адаптивность
Для установки контрастности элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору контрастности.
Например, используйте модификатор md:contrast-3 для установки контрастности элементов для экранов размером Medium и больше.
<div class="md:contrast-3"></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.