Skip to content

CSS: maskglobal

.--mask-overlaymask 컴포넌트의 오버레이 modifier들의 전역 이중 복사본 — --mask-overlay, --mask-fullscreen, --mask-blur.instui-mask 요소로 래핑하지 않고 어떤 컴포넌트에도 단독으로 또는 체인으로 사용할 수 있습니다.

Source: index.ts

사용법

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

예제들

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

수정자

수정자설명
.--mask-blur마스크 뒤의 내용을 backdrop-filter로 흐리게 처리합니다.
.--mask-fullscreen뷰포트에 고정되어 높은 z-index로 화면을 덮습니다.
.--mask-overlay전체 마스크 오버레이(위치, 중앙 정렬, 배경).

사용된 토큰

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