UTILITY

Box 정렬

• .is-clearfix

• .is-float-left

• .is-float-right

• .is-clipped

• .is-vertical-middle

• .is-align-items-center

• .is-align-self-center

<div class="gn-box is-clearfix">
  <div class="is-float-left">
    <div class="gn-control has-arrange">
      <button type="button" class="gn-button">
        <span class="gn-icon">
          <i class="fas fa-subway"></i>
        </span>
        Subway
      </button>
      <button type="button" class="gn-button">
        <span class="gn-icon">
          <i class="fas fa-laptop-code"></i>
        </span>
        Code
      </button>
      <button type="button" class="gn-button">
        <span class="gn-icon">
          <i class="fas fa-images"></i>
        </span>
        Images
      </button>
    </div>
  </div>
  <div class="is-float-right">
    <div class="gn-control has-icon-right">
      <span class="gn-icon is-right">
        <i class="fas fa-search"></i>
      </span>
      <input type="text" class="gn-input" placeholder="input text">
    </div>
  </div>
</div>

Text 정렬

• .has-text-{alignment}

  <div class="gn-box has-text-left">
    <h4 class="gn-title is-size4">Left</h4>
    Aliquip nisi sint cupidatat excepteur deserunt mollit deserunt ea reprehenderit cupidatat sunt. Irure excepteur irure consequat nisi proident qui dolore ex sunt. Fugiat excepteur dolor occaecat adipisicing aliqua reprehenderit excepteur nostrud anim aute in ipsum et. Culpa sint officia elit veniam laborum enim excepteur sint ullamco aliquip commodo voluptate. Magna est qui sunt adipisicing irure anim ipsum exercitation ipsum sint.
  </div>
  <div class="gn-box has-text-center">
    <h4 class="gn-title is-size4">Center</h4>
    Irure excepteur culpa laborum nulla ullamco velit consequat ut voluptate nisi Lorem. Pariatur sunt ipsum non sunt est fugiat do veniam duis sunt. Magna reprehenderit commodo eiusmod incididunt sunt minim eu nostrud. Ut dolor nostrud ullamco non commodo sit adipisicing dolore proident fugiat eu veniam. Nostrud consectetur do amet enim proident in nisi ullamco aliquip excepteur do. Officia ullamco voluptate tempor veniam proident ea duis laborum id incididunt.
  </div>
  <div class="gn-box has-text-right">
    <h4 class="gn-title is-size4">Right</h4>
    Veniam pariatur nulla eu eiusmod. Veniam anim dolor labore tempor proident ad cillum. Sint laboris officia aliqua proident aute. Consequat cupidatat officia ad veniam pariatur do. Ullamco duis pariatur aliqua sit cupidatat laborum laboris eu magna. Laboris non duis occaecat esse laboris ex do. Nisi cupidatat veniam voluptate fugiat elit labore aute et excepteur.
  </div>
  <div class="gn-box has-text-justify">
    <h4 class="gn-title is-size4">Justify</h4>
    Commodo reprehenderit cillum Lorem culpa do consectetur ullamco irure eu. Magna officia sit nisi in deserunt non duis eu duis enim quis. Eu proident pariatur aliquip anim est Lorem quis. Aliquip magna excepteur sint sint commodo nisi magna. Velit ea sint esse aliquip magna amet consequat eiusmod ex ad.
  </div>

Text 변환

• is-capitalize, is-lowercase, is-uppercase, is-italic, is-underline, is-strike, is-text-link
• 한글 description 사용 시 size6 이하 사용하지 않는다.

  <div class="gn-box is-capitalize">
    <h4 class="gn-title is-size4">capitalize</h4>
    Velit Lorem nisi aute enim exercitation.
  </div>
  <div class="gn-box is-lowercase">
    <h4 class="gn-title is-size4">lowercase</h4>
    Exercitation duis nulla id fugiat et laboris laborum aute.
  </div>
  <div class="gn-box is-uppercase">
    <h4 class="gn-title is-size4">uppercase</h4>
    Incididunt nulla anim ut ipsum.
  </div>
  <div class="gn-box is-italic">
    <h4 class="gn-title is-size4">italic</h4>
    Ad non deserunt veniam consectetur enim.
  </div>
  <div class="gn-box is-underline">
    <h4 class="gn-title is-size4">underline</h4>
    Ad non deserunt veniam consectetur enim.
  </div>
  <div class="gn-box is-strike">
    <h4 class="gn-title is-size4">strike</h4>
    Ad non deserunt veniam consectetur enim.
  </div>
  <div class="gn-box is-text-link">
    <h4 class="gn-title is-size4">text link</h4>
    Link style text (hover: underline + pointer)
  </div>
  <div class="gn-box">
    <h4 class="gn-title is-size4">Text Sizes</h4>
    <p class="has-text-size1">size1 : Fugiat cillum reprehenderit ullamco esse non cillum.</p>
    <p class="has-text-size2">size2 : Minim eu minim ea anim.</p>
    <p class="has-text-size3">size3 : Sit adipisicing eiusmod consectetur sit qui cupidatat.</p>
    <p class="has-text-size4">size4 : Enim qui do ullamco enim et non consectetur labore consectetur ipsum quis magna proident.</p>
    <p class="has-text-size5">size5 : Occaecat ex voluptate ea labore labore cillum veniam officia excepteur pariatur Lorem consectetur.</p>
    <p class="has-text-size6">size6 : In quis sunt esse esse aute ullamco laborum.</p>
    <!-- 한글 description 사용 시 size6 이하 사용하지 않는다. -->
    <p class="has-text-size6">size6 : 사용자 비밀번호 저장방식을 선택 합니다. RADIUS서버를 통한 MSCHAPv2 인증을 지원하기 위해서는 NT-Hash를 선택해야 합니다.</p>
    <p class="has-text-size7">size7 : Nostrud consectetur excepteur ut duis qui pariatur irure eiusmod non Lorem aliquip id eiusmod.</p>
  </div>

Text 두께

<p class="is-weight-light">Et irure non laborum dolor esse reprehenderit occaecat.</p>
<p class="is-weight-normal">Lorem quis quis proident eiusmod nostrud minim velit minim.</p>
<p class="is-weight-medium">Duis consectetur veniam deserunt amet commodo labore aute sunt amet qui minim nulla sunt labore.</p>
<p class="is-weight-semibold">Irure esse nulla qui nulla sint laboris qui labore.</p>
<p class="is-weight-bold">Amet ullamco mollit mollit qui velit quis dolore minim fugiat tempor ea labore.</p>

Text 색상

  <span class="has-text-primary">has-text-primary</span>
  <span class="has-color-primary">has-color-primary</span>
  <span class="has-text-success">has-text-success</span>
  <span class="has-color-success">has-color-success</span>
  <span class="has-text-warning">has-text-warning</span>
  <span class="has-color-warning">has-color-warning</span>
  <span class="has-text-danger">has-text-danger</span>
  <span class="has-color-danger">has-color-danger</span>
  <span class="has-text-info">has-text-info</span>
  <span class="has-color-info">has-color-info</span>
  <span class="has-text-dark">has-text-dark</span>
  <span class="has-color-dark">has-color-dark</span>
  <span class="has-text-light">has-text-light</span>
  <span class="has-color-light">has-color-light</span>

Border 색상

  <div class="gn-box has-border-primary">has-border-primary</div>
  <div class="gn-box has-border-success">has-border-success</div>
  <div class="gn-box has-border-warning">has-border-warning</div>
  <div class="gn-box has-border-danger">has-border-danger</div>
  <div class="gn-box has-border-info">has-border-info</div>
  <div class="gn-box has-border-dark">has-border-dark</div>
  <div class="gn-box has-border-light">has-border-light</div>

Display

• is-hidden, is-invisible, is-block, is-inline-block, is-inline, is-flex( + is-vertical ), is-space-between

LESS

• is-marginless, is-paddingless, is-radiusless, is-shadowless

HAS

• has-margin-top, has-margin-left, has-margin-bottom, has-margin-right

Position 정렬

• is-static, is-relative, is-absolute

Mouse Poninter

• is-help, is-wait, is-not-allowed, is-pointer

<span class="gn-tag is-help">help</span>
<span class="gn-tag is-wait">wait</span>
<span class="gn-tag is-not-allowed">not-allowed</span>
<span class="gn-tag is-pointer">pointer</span>
<span class="gn-tag is-move">move</span>
<span class="gn-tag is-text">text</span>

Scroll

• has-min-scroll

<div class="has-min-scroll" style="height: 200px; overflow: scroll;">
  <p>Content goes here...</p>
  <br />
  <br />
  <p>More content...</p>
  <p>More content...</p>
  <p>More content...</p>
  <p>More content...</p>
  <p>More content...</p>
  <br />
  <br />
  <br />
  <p>Even more content...</p>
  <p>Even more content...</p>
  <p>Even more content...</p>
  <p>Even more content...</p>
  <p>Even more content...</p>
</div>