CSS: mask ​

.instui-mask — 배치된 부모 요소를 가득 채우고 내용을 중앙에 배치하는 인플로우 오버레이입니다 — 예: 카드 위의 스피너. 모달의 경우 네이티브 <dialog>(그의 ::backdrop가 마스크입니다)를 사용하는 것이 권장됩니다. 이 모디파이어들은 각각 전역에서도 사용 가능(단독 또는 다른 컴포넌트에 체인)합니다 — mask 전역 유틸리티를 참조하세요.

Source: mask.css

사용법 ​

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

예제들 ​

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

수정자 ​

수정자설명
.-blur마스크 뒤의 내용을 backdrop-filter로 흐리게 처리합니다.
.-fullscreen뷰포트에 고정되어 높은 z-index로 화면을 덮습니다.

사용된 토큰 ​

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