Контекст наложения

isolation
sm
md
lg
xl

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

Классы

Класс Значение
isolate isolation: isolate;
isolation-auto isolation: auto;

Описание

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

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

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

isolate

С помощью модификатора isolate создается новый контекст наложения. Это свойство особенно полезно при использовании совместно с эффектами наложения.

<div class="bg-success-tonal ... ">
    <div class="isolate ... ">
        <div class="mix-blend-multiply bg-warning-tonal ... "></div>
    </div>
</div>

isolation-auto

С помощью модификатора isolation-auto новый контекст наложения создается если это требуется для одного из свойств, применяемых к элементу.

<div class="bg-success-tonal ... ">
    <div class="isolation-auto ... ">
        <div class="mix-blend-multiply bg-warning-tonal ... "></div>
    </div>
</div>

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

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

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

<div class="md:isolation-isolate"></div>

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

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