CSS: mask ​

.instui-mask — En överlagring i flödet som fyller sin positionerade förälder och centrerar sitt innehåll — t.ex. en laddningsindikator över ett kort. För en modal, föredra en inbyggd <dialog> (dess ::backdrop är masken). Var och en av dessa modifikatorer är också tillgänglig globalt (fristående, eller kedjad på vilken annan komponent som helst) — se den mask globala hjälpfunktionen.

Source: mask.css

Användning ​

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

Exempel ​

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

Modifierare ​

ModifierareBeskrivning
.-blurGör det som ligger bakom masken oskarpt med backdrop-filter.
.-fullscreenFäst vid viewporten, täcker den med ett högt z-index.

Förbrukade tokens ​

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