CSS: mask ​

.instui-mask — Sisävirtauksen peite, joka täyttää sijoitetun vanhempansa ja keskittää sisältönsä — esim. pyörivä latauskuvake kortin päällä. Modalin tapauksessa suositellaan mieluummin natiivia <dialog> (sen ::backdrop on maski). Jokainen näistä modifikaattoreista on myös saatavilla globaalisti (paljaana tai ketjutettuna mihin tahansa muuhun komponenttiin) — katso mask globaalista utilista.

Source: mask.css

Käyttö ​

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

Esimerkit ​

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

Muokkaajat ​

MuokkaajaKuvaus
.-blurSumeuta maskin takana oleva backdrop-filterillä.
.-fullscreenKiinnitetty viewportiin, peittäen sen korkealla z-indexillä.

Käytetyt tokenit ​

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