CSS: mask ​

.instui-mask — nakładka w przepływie, która wypełnia pozycjonowanego rodzica i centruje swoją zawartość — np. spinner nad kartą. Dla modala preferuj natywny <dialog> (jego ::backdrop to maska). Każdy z tych modyfikatorów jest też dostępny globalnie (samodzielnie lub łańcuchowo na dowolnym innym komponencie) — zobacz globalną pomocnicę mask.

Source: mask.css

Użycie ​

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

Przykłady ​

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

Modyfikatory ​

ModyfikatorOpis
.-blurRozmyj to, co znajduje się za maską, przy użyciu backdrop-filter.
.-fullscreenPrzypięty do viewportu, pokrywa go przy wysokim z-indexie.

Zużyte tokeny ​

TokenTypWartość
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))