Вид градиента
gradient-type
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно задать вид градиента.
Классы
| Класс | Значение |
|---|---|
gr-line-2 |
background: linear-gradient(var(--sf-gradient--angle), var(--sf-gradient--color-1), var(--sf-gradient--color-2)); |
gr-line-3 |
background: linear-gradient(var(--sf-gradient--angle), var(--sf-gradient--color-1), var(--sf-gradient--color-2), var(--sf-gradient--color-3)); |
gr-radial-2 |
background: radial-gradient(var(--sf-gradient--color-1), var(--sf-gradient--color-2)); |
gr-radial-3 |
background: radial-gradient(var(--sf-gradient--color-1), var(--sf-gradient--color-2), var(--sf-gradient--color-3)); |
gr-conic-2 |
background: conic-gradient(var(--sf-gradient--color-1), var(--sf-gradient--color-2)); |
gr-conic-3 |
background: conic-gradient(var(--sf-gradient--color-1), var(--sf-gradient--color-2), var(--sf-gradient--color-3)); |
Описание
Адаптивный модификатор. Задает размер фона в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
gr-line-2- для линейного градиента с двумя цветами;gr-line-3- для линейного градиента с тремя цветами;gr-radial-2- для радиального градиента с двумя цветами;gr-radial-3- для радиального градиента с тремя цветами;gr-conic-2- для конического градиента с двумя цветами;gr-conic-3- для конического градиента с тремя цветами;
gr-line-2
Используйте модификатор gr-line-2 для линейного градиента с двумя цветами.
<div class="gr-line-2 gr1-red-5 gr2-purple-5 ..."></div>
gr-line-3
Используйте модификатор gr-line-3 для линейного градиента с тремя цветами.
<div class="gr-line-3 gr1-red-5 gr2-purple-5 gr3-blue-5 ..."></div>
gr-radial-2
Используйте модификатор gr-radial-2 для радиального градиента с двумя цветами.
<div class="gr-radial-2 gr1-red-5 gr2-purple-5 ..."></div>
gr-radial-3
Используйте модификатор gr-radial-3 для радиального градиента с тремя цветами.
<div class="gr-radial-3 gr1-red-5 gr2-purple-5 gr3-blue-5 ..."></div>
gr-conic-2
Используйте модификатор gr-conic-2 для конического градиента с двумя цветами.
<div class="gr-conic-2 gr1-red-5 gr2-purple-5 ..."></div>
gr-conic-3
Используйте модификатор gr-conic-3 для конического градиента с тремя цветами.
<div class="gr-conic-3 gr1-red-5 gr2-purple-5 gr3-blue-5 ..."></div>
Адаптивность
Для создания градиента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:gr-line-2 для создания линейного градиента с двумя цвевтами для экранов размером Medium и больше.
<div class="md:gr-line-2 ..."></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.