Skip to content

CSS: maskglobal

.--mask-overlay — глобальная, двойная копия модификаторов оверлея компонента mask--mask-overlay, --mask-fullscreen, --mask-blur — может использоваться напрямую или в виде цепочки на любом компоненте, без обёртывания в элемент .instui-mask.

Source: index.ts

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

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

Примеры

html
<button class="instui-button --mask-overlay">…</button>

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

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

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

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