CSS: gap ​

.--gap-md — 간격 스케일의 Flex/grid gap 유틸리티로, 짧은 표기(--gap-sm) 또는 긴 표기(--gap-small)가 있습니다. 단독으로 사용하거나 모든 컴포넌트(.instui-view.--gap-sm)에 체인으로 적용할 수 있습니다 — 컴포넌트별 토큰으로 이미 자체 gap를 설정한 컴포넌트는 덮어써질 수 있습니다.

Source: index.ts

사용법 ​

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

데모 ​

예제들 ​

html
<div class="--display-flex --gap-sm">
  <span>One</span>
  <span>Two</span>
</div>

수정자 ​

수정자설명
.--gap-md중간 간격 토큰을 gap으로 적용합니다.
.--gap-*짧은 및 긴 간격 단계 표기법 전반의 gap 유틸리티.

사용된 토큰 ​

Token타입값
--instui-component-shared-tokens-spacing-general-space-none<length>0rem
--instui-spacing-space-lg<length>1rem
--instui-spacing-space-md<length>0.75rem
--instui-spacing-space-sm<length>0.5rem
--instui-spacing-space-xl<length>1.5rem
--instui-spacing-space-xs<length>0.25rem
--instui-spacing-space2xl<length>2rem
--instui-spacing-space2xs<length>0.125rem