CSS: mask ​

.instui-mask — наложение в потоке, которое заполняет позиционированного родителя и центрирует его содержимое — например, индикатор загрузки поверх карточки. Для модального окна предпочтительнее нативный <dialog> (его ::backdrop — это маска). Каждый из этих модификаторов также доступен глобально (отдельно или в цепочке с любым другим компонентом) — см. глобальную утилиту mask.

Source: mask.css

Использование ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/mask.css";

Примеры ​

html
<div style="position: relative">
  <div class="instui-mask">
    <span class="instui-spinner"></span>
  </div>
</div>

Модификаторы ​

МодификаторОписание
.-blurРазмывает то, что находится за маской, используя backdrop-filter.
.-fullscreenЗафиксирован по отношению к области просмотра, покрывая её с высоким z-index.

Использованные токены ​

TokenТипЗначение
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))