Pattern Library by Cloudy knot

Navigation 

<main class="main-wrapper">
    <h2 class="heading2">Regular Nav</h2>
    <nav class="regular-nav">
        <ul class="nav-list">
            <li>
                <span aria-current="page">
                    <span class="ja">ホーム</span>
                    <span class="en">home</span>
                </span>
            </li>
            <li>
                <a href="/" class="nav-link">
                    <span class="ja">ブログ</span>
                    <span class="en">blog</span>
                </a>
            </li>
            <li>
                <a href="/" class="nav-link">
                    <span class="ja">運営者</span>
                    <span class="en">about</span>
                </a>
            </li>
            <li>
                <a href="/" class="nav-link">
                    <span class="ja">問い合わせ</span>
                    <span class="en">contact</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="divider my32" role="separator"></div>
    <h2 class="heading2">Breadcrumb Nav</h2>
    <nav class="breadcrumb-container">
        <ul class="breadcrumb-list">
            <li>
                <a href="/" class="isActive breadcrumb-link">ホーム</a>
            </li>
            <li>
                <a href="/" class="isActive breadcrumb-link">ブログ</a>
            </li>
            <li>
                <span class="breadcrumb-current">記事タイトル</span>
            </li>
        </ul>
    </nav>
</main>
 
<main class="main-wrapper">
  <h2 class="heading2">Regular Nav</h2>
  <nav class="regular-nav">
    <ul class="nav-list">
      <li>
        <span aria-current="page">
          <span class="ja">ホーム</span>
          <span class="en">home</span>
        </span>
      </li>
      <li>
        <a href="/" class="nav-link">
          <span class="ja">ブログ</span>
          <span class="en">blog</span>
        </a>
      </li>
      <li>
        <a href="/" class="nav-link">
          <span class="ja">運営者</span>
          <span class="en">about</span>
        </a>
      </li>
      <li>
        <a href="/" class="nav-link">
          <span class="ja">問い合わせ</span>
          <span class="en">contact</span>
        </a>
      </li>
    </ul>
  </nav>
  <div class="divider my32" role="separator"></div>
  <h2 class="heading2">Breadcrumb Nav</h2>
  <nav class="breadcrumb-container">
    <ul class="breadcrumb-list">
      <li>
        <a href="/" class="isActive breadcrumb-link">ホーム</a>
      </li>
      <li>
        <a href="/" class="isActive breadcrumb-link">ブログ</a>
      </li>
      <li>
        <span class="breadcrumb-current">記事タイトル</span>
      </li>
    </ul>
  </nav>
</main>
 
/* No context defined. */
  • Content: 
    @media print, screen and (max-width:47.96875em) {
  .regular-nav {
    width: 100%;
    border-top: 1px solid var(--line-color);
    background-color: var(--white);
  }
}
.regular-nav .nav-list {
  display: flex;
  width: 100%;
}
@media print, screen and (max-width:47.96875em) {
  .regular-nav .nav-list {
    display: flex;
  }
}
.regular-nav .nav-list > li {
  width: 25%;
}
.regular-nav .nav-list > li:first-of-type {
  border: 1px solid var(--black);
}
.regular-nav .nav-list > li:not(:first-of-type) {
  border-top: 1px solid var(--black);
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}
.regular-nav .nav-link:after,
.regular-nav span[aria-current="page"]:after, .regular-nav .nav-link:before,
.regular-nav span[aria-current="page"]:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--logo-color);
  transition: transform .35s var(--ease-out-quad);
}
@media print, screen and (min-width:48em) {
  .regular-nav .nav-link:after,
  .regular-nav span[aria-current="page"]:after, .regular-nav .nav-link:before,
  .regular-nav span[aria-current="page"]:before {
    height: 3px;
  }
}
@media print, screen and (max-width:47.96875em) {
  .regular-nav .nav-link:after,
  .regular-nav span[aria-current="page"]:after, .regular-nav .nav-link:before,
  .regular-nav span[aria-current="page"]:before {
    height: 4px;
  }
}
.regular-nav .nav-link {
  text-decoration: underline;
}
.regular-nav .nav-link:hover, .regular-nav .nav-link:focus {
  text-decoration: none;
}
.regular-nav .nav-link,
.regular-nav span[aria-current="page"] {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  overflow: hidden;
}
@media print, screen and (min-width:100.0625em) {
  .regular-nav .nav-link,
  .regular-nav span[aria-current="page"] {
    min-width: 10rem;
    padding: .6rem 1.5rem .8rem;
  }
}
@media print, screen and (min-width:64.0625em) and (max-width:100em) {
  .regular-nav .nav-link,
  .regular-nav span[aria-current="page"] {
    min-width: 8.1rem;
    padding: .6rem 0 .8rem;
  }
}
@media print, screen and (min-width:64.0625em) {
  .regular-nav .nav-link:hover, .regular-nav .nav-link:focus,
  .regular-nav span[aria-current="page"]:hover,
  .regular-nav span[aria-current="page"]:focus {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
  }
}
@media print, screen and (min-width:48em) and (max-width:64em) {
  .regular-nav .nav-link,
  .regular-nav span[aria-current="page"] {
    min-width: 6.5rem;
    padding: .6rem 0 .8rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .regular-nav .nav-link,
  .regular-nav span[aria-current="page"] {
    padding: .3rem .2rem .4rem;
  }
}
.regular-nav .nav-link:before,
.regular-nav span[aria-current="page"]:before {
  top: 0;
  background-image: var(--globalnav-hover-gradient-r);
  transform: translateX(-101%);
}
.regular-nav .nav-link:after,
.regular-nav span[aria-current="page"]:after {
  bottom: 0;
  background-image: var(--globalnav-hover-gradient-l);
  transform: translateX(101%);
}
.regular-nav .nav-link > .ja,
.regular-nav span[aria-current="page"] > .ja {
  display: block;
  width: 100%;
  line-height: 1.85;
  font-family: var(--sentence-font);
  font-weight: bold;
}
@media print, screen and (min-width:64.0625em) {
  .regular-nav .nav-link > .ja,
  .regular-nav span[aria-current="page"] > .ja {
    font-size: calc(var(--font-size-m1) + .05rem);
  }
}
@media print, screen and (max-width:64em) {
  .regular-nav .nav-link > .ja,
  .regular-nav span[aria-current="page"] > .ja {
    vertical-align: baseline;
    font-size: calc(var(--font-size-s1));
  }
}
.regular-nav .nav-link > .en,
.regular-nav span[aria-current="page"] > .en {
  display: block;
  text-transform: uppercase;
}
@media print, screen and (min-width:64.0625em) {
  .regular-nav .nav-link > .en,
  .regular-nav span[aria-current="page"] > .en {
    font-size: calc(var(--font-size-s2) + .1rem);
    letter-spacing: .1rem;
  }
}
@media print, screen and (min-width:48em) {
  .regular-nav .nav-link > .en,
  .regular-nav span[aria-current="page"] > .en {
    padding-top: .5rem;
  }
}
@media print, screen and (min-width:48em) and (max-width:64em) {
  .regular-nav .nav-link > .en,
  .regular-nav span[aria-current="page"] > .en {
    font-size: calc(var(--font-size-s2));
    letter-spacing: .1rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .regular-nav .nav-link > .en,
  .regular-nav span[aria-current="page"] > .en {
    font-size: calc(var(--font-size-s2));
    letter-spacing: .05rem;
  }
}
.regular-nav span[aria-current="page"] {
  font-family: var(--sentence-font);
  pointer-events: none;
}

.breadcrumb-container {
  width: 100%;
  border-top: 1px solid var(--line-color);
  background-color: var(--white);
}

.breadcrumb-list {
  width: 100%;
  margin: auto;
  font-family: var(--sentence-font);
  overflow: auto;
}
@media print, screen and (min-width:64.0625em) {
  .breadcrumb-list {
    max-width: 90vw;
  }
}
@media print, screen and (max-width:64em) {
  .breadcrumb-list {
    max-width: 90vw;
    white-space: nowrap;
  }
}
.breadcrumb-list > li {
  display: inline-block;
}
.breadcrumb-list > li:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -.1em;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--text-normal-color);
  border-right: 1.5px solid var(--text-normal-color);
  transform: rotate(45deg);
}
.breadcrumb-list > li:last-of-type:after {
  content: none;
}

.breadcrumb-link {
  display: inline-block;
  text-decoration: underline;
}
@media print, screen and (min-width:64.0625em) {
  .breadcrumb-link {
    padding: .8rem 1.3rem;
  }
  .breadcrumb-link:hover, .breadcrumb-link:focus {
    text-decoration: none;
  }
}
@media print, screen and (max-width:64em) {
  .breadcrumb-link {
    padding: .7rem 1rem .65rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .breadcrumb-link {
    font-size: calc(var(--font-size-m1) - .08rem);
  }
}

.breadcrumb-current {
  display: inline-block;
  font-weight: bold;
}
@media print, screen and (min-width:64.0625em) {
  .breadcrumb-current {
    padding: .8rem 1.3rem;
  }
}
@media print, screen and (max-width:64em) {
  .breadcrumb-current {
    padding: .5rem 1rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .breadcrumb-current {
    font-size: calc(var(--font-size-m1) - .08rem);
  }
}
  • URL: /components/raw/navigation/style.css
  • Filesystem Path: src/components/1-static-ui/navigation/style.css
  • Size: 6.4 KB

No notes defined.