Utilities

CSS 유틸리티 클래스

CSS: /ui/{mw,pc}/common/common.css
SCSS: @shared/style/_util.scss

시각적으로 감추기

스크린리더로의 접근은 허용되어야 하는 경우

<div class="v-visually-hidden">…</div>

스크롤바 숨김

브라우저의 스크롤바를 숨겨야하는 경우 사용

<div class="v-no-scrollbar">…</div>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia, modi maxime ipsum eos fugit quae rerum iure quaerat necessitatibus voluptatem optio quibusdam obcaecati. Laboriosam recusandae nesciunt provident dignissimos reprehenderit explicabo!

selector {
  @include hide-scrollbar;
}

말줄임 처리

<div class="v-truncate">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia, modi
  maxime ipsum eos fugit quae rerum iure quaerat necessitatibus voluptatem optio
  quibusdam obcaecati. Laboriosam recusandae nesciunt provident dignissimos
  reprehenderit explicabo!
</div>

<div class="v-line-clamp-2">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia, modi
  maxime ipsum eos fugit quae rerum iure quaerat necessitatibus voluptatem optio
  quibusdam obcaecati. Laboriosam recusandae nesciunt provident dignissimos
  reprehenderit explicabo!
</div>

selector {
  @include clamp-line(10);
}

Flexbox 컨테이너

<div class="v-flex-y v-gap-y-2">
  <div>…</div>
  <div>…</div>
  <div>…</div>
</div>

selector {
  @include flex-y(8px);
}