Skip to content

CSS: maskglobal

.--mask-overlay — Ein global, dobbel kopi av mask-komponenten sine overlay-modifikatorar — --mask-overlay, --mask-fullscreen, --mask-blur — kan brukast åleine eller kjetta på ein vilkårleg komponent, utan å pakka inn i eit .instui-mask-element.

Source: index.ts

Bruk

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

Døme

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

Modifikatorar

ModifikatorSkildring
.--mask-blurGjer det som er bak maska uskarpt med backdrop-filter.
.--mask-fullscreenFesta til viewporten, og dekker han ved høg z-index.
.--mask-overlayFullt maske-overlegg (posisjon, sentrering, bakgrunn).

Token brukt

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