Положение маски
mask-position
В SIMAI Framework с помощью модифкаторов можно управлять позицией относительно слоя положения маски.
Классы
| Класс | Значение |
|---|---|
mask-top |
mask-position: top; |
mask-right |
mask-position: right; |
mask-bottom |
mask-position: bottom; |
mask-left |
mask-position: left; |
mask-center |
mask-position: text-center; |
mask-left-top |
mask-position: left top; |
mask-left-bottom |
mask-position: left bottom; |
mask-right-top |
mask-position: right top; |
mask-right-bottom |
mask-position: right bottom; |
Описание
Адаптивный модификатор. Задаетобласть позиционирование фона в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
mask-top- для расположения маски сверху;mask-right- для расположения маски справа;mask-bottom- для расположения маски снизу;mask-left- для расположения маски слева;mask-center- для расположения маски в центре;mask-right-top- для расположения маски свправа сверху;mask-right-bottom- для расположения маски справа снизу;mask-left-top- для расположения маски слева сверху;mask-left-bottom- для расположения маски слева снизу;
mask-top
Используйте модификатор mask-top для расположения маски сверху.
<div class="mask-top"></div>mask-right
Используйте модификатор mask-right для расположения маски справа.
<div class="mask-right"></div>mask-bottom
Используйте модификатор mask-bottom для расположения маски снизу.
<div class="mask-bottom"></div>mask-left
Используйте модификатор mask-left для расположения маски слева.
<div class="mask-left"></div>mask-center
Используйте модификатор mask-center для расположения маски в центре.
<div class="mask-center"></div>mask-right-top
Используйте модификатор mask-right-top для расположения маски свправа сверху.
<div class="mask-right-top"></div>mask-right-bottom
Используйте модификатор mask-right-bottom для расположения маски справа снизу.
<div class="mask-right-bottom"></div>mask-left-top
Используйте модификатор mask-left-top для расположения маски слева сверху.
<div class="mask-left-top"></div>mask-left-bottom
Используйте модификатор mask-left-bottom для расположения маски слева снизу.
<div class="mask-left-bottom"></div>Адаптивность
Для управления положением маски, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:mask-center для расположения маски по центру для экранов размером Medium и больше.
<div class="md:mask-center"></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.