Pattern Library by Cloudy knot

Utility 

<main class="main-wrapper">
    <h2 class="heading2">Shape</h2>
    <ul>
        <li>
            <span>・正円</span>
            <div class="circle-figure my24"></div>
        </li>
        <li class="mt32">
            <span>・三角形</span>
            <div class="my24">
                <div class="triangle-top"></div>
                <div class="triangle-right mt24"></div>
                <div class="triangle-bottom mt24"></div>
                <div class="triangle-left mt24"></div>
            </div>
        </li>
        <li class="mt32">
            <div>・棒なし矢印(インライン)</div>
            <div class="my24">
                <div class="shape-arrow-top"></div>
                <div class="shape-arrow-right mt24"></div>
                <div class="shape-arrow-bottom mt24"></div>
                <div class="shape-arrow-left mt24"></div>
            </div>
        </li>
        <li class="mt32">
            <span>・区切り線</span>
            <div class="divider my32" role="separator"></div>
        </li>
    </ul>
    <h2 class="heading2">Display</h2>
    <article class="display-sptb">
        <h3>
            画面幅0~1024pxでコンテンツ表示<br>
            スマートデバイス・タブレットを概ねカバー
        </h3>
    </article>
    <article class="display-dt">
        <h3>
            画面幅1024px以上でコンテンツ表示<br>
            デスクトップPC用モニターを概ねカバー
        </h3>
</main>
 
<main class="main-wrapper">
  <h2 class="heading2">Shape</h2>
  <ul>
    <li>
      <span>・正円</span>
      <div class="circle-figure my24"></div>
    </li>
    <li class="mt32">
      <span>・三角形</span>
      <div class="my24">
        <div class="triangle-top"></div>
        <div class="triangle-right mt24"></div>
        <div class="triangle-bottom mt24"></div>
        <div class="triangle-left mt24"></div>
      </div>
    </li>
    <li class="mt32">
      <div>・棒なし矢印(インライン)</div>
      <div class="my24">
        <div class="shape-arrow-top"></div>
        <div class="shape-arrow-right mt24"></div>
        <div class="shape-arrow-bottom mt24"></div>
        <div class="shape-arrow-left mt24"></div>
      </div>
    </li>
    <li class="mt32">
      <span>・区切り線</span>
      <div class="divider my32" role="separator"></div>
    </li>
  </ul>
  <h2 class="heading2">Display</h2>
  <article class="display-sptb">
    <h3>
      画面幅0~1024pxでコンテンツ表示<br>
      スマートデバイス・タブレットを概ねカバー
    </h3>
  </article>
  <article class="display-dt">
    <h3>
      画面幅1024px以上でコンテンツ表示<br>
      デスクトップPC用モニターを概ねカバー
    </h3>
</main>
 
/* No context defined. */
  • Content: 
    @media print, screen and (min-width:48em) {
  .display-sp {
    display: none;
  }
}
@media print, screen and (max-width:47.96875em) {
  .display-sp {
    display: inline-block;
  }
}

@media print, screen and (min-width:64.0625em) {
  .display-sptb {
    display: none;
  }
}
@media print, screen and (max-width:64em) {
  .display-sptb {
    display: inline-block;
  }
}

@media print, screen and (min-width:64.0625em) {
  .display-tbdt {
    display: block;
  }
}
@media print, screen and (min-width:48em) and (max-width:64em) {
  .display-tbdt {
    display: block;
  }
}
@media print, screen and (max-width:47.96875em) {
  .display-tbdt {
    display: none;
  }
}

@media print, screen and (min-width:64.0625em) {
  .display-dt {
    display: block;
  }
}
@media print, screen and (max-width:64em) {
  .display-dt {
    display: none;
  }
}
  • URL: /components/raw/utility/display-style.css
  • Filesystem Path: src/components/8-utility/utility/display-style.css
  • Size: 844 Bytes
  • Content: 
    .mt-4 {
  -webkit-margin-before: -4px !important;
  margin-block-start: -4px !important;
}

.mr-4 {
  -webkit-margin-end: -4px !important;
  margin-inline-end: -4px !important;
}

.mb-4 {
  -webkit-margin-after: -4px !important;
  margin-block-end: -4px !important;
}

.ml-4 {
  -webkit-margin-start: -4px !important;
  margin-inline-start: -4px !important;
}

.mt-2 {
  -webkit-margin-before: -2px !important;
  margin-block-start: -2px !important;
}

.mr-2 {
  -webkit-margin-end: -2px !important;
  margin-inline-end: -2px !important;
}

.mb-2 {
  -webkit-margin-after: -2px !important;
  margin-block-end: -2px !important;
}

.ml-2 {
  -webkit-margin-start: -2px !important;
  margin-inline-start: -2px !important;
}

.mt0 {
  -webkit-margin-before: 0px !important;
  margin-block-start: 0px !important;
}

.mr0 {
  -webkit-margin-end: 0px !important;
  margin-inline-end: 0px !important;
}

.mb0 {
  -webkit-margin-after: 0px !important;
  margin-block-end: 0px !important;
}

.ml0 {
  -webkit-margin-start: 0px !important;
  margin-inline-start: 0px !important;
}

.mt2 {
  -webkit-margin-before: 2px !important;
  margin-block-start: 2px !important;
}

.mr2 {
  -webkit-margin-end: 2px !important;
  margin-inline-end: 2px !important;
}

.mb2 {
  -webkit-margin-after: 2px !important;
  margin-block-end: 2px !important;
}

.ml2 {
  -webkit-margin-start: 2px !important;
  margin-inline-start: 2px !important;
}

.mt4 {
  -webkit-margin-before: 4px !important;
  margin-block-start: 4px !important;
}

.mr4 {
  -webkit-margin-end: 4px !important;
  margin-inline-end: 4px !important;
}

.mb4 {
  -webkit-margin-after: 4px !important;
  margin-block-end: 4px !important;
}

.ml4 {
  -webkit-margin-start: 4px !important;
  margin-inline-start: 4px !important;
}

.pt4 {
  -webkit-padding-before: 4px !important;
  padding-block-start: 4px !important;
}

.pr4 {
  -webkit-padding-end: 4px !important;
  padding-inline-end: 4px !important;
}

.pb4 {
  -webkit-padding-after: 4px !important;
  padding-block-end: 4px !important;
}

.pl4 {
  -webkit-padding-start: 4px !important;
  padding-inline-start: 4px !important;
}

.pt6 {
  -webkit-padding-before: 6px !important;
  padding-block-start: 6px !important;
}

.pr6 {
  -webkit-padding-end: 6px !important;
  padding-inline-end: 6px !important;
}

.pb6 {
  -webkit-padding-after: 6px !important;
  padding-block-end: 6px !important;
}

.pl6 {
  -webkit-padding-start: 6px !important;
  padding-inline-start: 6px !important;
}

.pt8 {
  -webkit-padding-before: 8px !important;
  padding-block-start: 8px !important;
}

.pr8 {
  -webkit-padding-end: 8px !important;
  padding-inline-end: 8px !important;
}

.pb8 {
  -webkit-padding-after: 8px !important;
  padding-block-end: 8px !important;
}

.pl8 {
  -webkit-padding-start: 8px !important;
  padding-inline-start: 8px !important;
}
  • URL: /components/raw/utility/helper-style.css
  • Filesystem Path: src/components/8-utility/utility/helper-style.css
  • Size: 2.8 KB
  • Content: 
    .circle-figure {
  width: 5rem;
  height: 5rem;
  background-color: #333;
  border-radius: 50%;
}

.divider {
  width: 100%;
  height: 1px;
  margin: 3rem auto;
  background-image: linear-gradient(to right, var(--contrast-limit-gray), var(--contrast-limit-gray) 3px, transparent 3px, transparent 8px);
  background-size: 5px 2px;
}

.shape-arrow-top::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 9px;
  height: 9px;
  margin-left: 0.5rem;
  border-top: 1.5px solid hsl(0deg, 0%, 20%);
  border-right: 1.5px solid hsl(0deg, 0%, 20%);
  transform: rotate(-45deg);
}

.shape-arrow-right::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 9px;
  height: 9px;
  margin-left: 0.5rem;
  border-top: 1.5px solid hsl(0deg, 0%, 20%);
  border-right: 1.5px solid hsl(0deg, 0%, 20%);
  transform: rotate(45deg);
}

.shape-arrow-bottom::after {
  content: "";
  display: inline-block;
  position: relative;
  top: -0.2em;
  width: 9px;
  height: 9px;
  margin-left: 0.5rem;
  border-top: 1.5px solid hsl(0deg, 0%, 20%);
  border-right: 1.5px solid hsl(0deg, 0%, 20%);
  transform: rotate(135deg);
}

.shape-arrow-left::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 9px;
  height: 9px;
  margin-left: 0.5rem;
  border-top: 1.5px solid hsl(0deg, 0%, 20%);
  border-right: 1.5px solid hsl(0deg, 0%, 20%);
  transform: rotate(-135deg);
}/*# sourceMappingURL=style.css.map */
  • URL: /components/raw/utility/shape-style.css
  • Filesystem Path: src/components/8-utility/utility/shape-style.css
  • Size: 1.5 KB

No notes defined.