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))