Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Lang Nav 

<div class=" lang-nav ">
    <span class="lang-nav__selection -next">
        <span class="lang-nav__text">Deutsch</span>
    </span>
    <ul class="lang-nav__list">
        <li class="lang-nav__item ">
            <a class="lang-nav__link" href="#">
                <span class="lang-nav__text">English</span>
            </a>
        </li>
        <li class="lang-nav__item ">
            <a class="lang-nav__link" href="#">
                <span class="lang-nav__text">Français</span>
            </a>
        </li>
        <li class="lang-nav__item ">
            <a class="lang-nav__link" href="#">
                <span class="lang-nav__text">Netherlands</span>
            </a>
        </li>
    </ul>
</div>
 
<div class="{{mixes}} lang-nav {{modifiers}}">
  {{#selected}}
    <span class="lang-nav__selection -next">
      <span class="lang-nav__text">{{{language}}}</span>
    </span>
  {{/selected}}
  <ul class="lang-nav__list">
    {{#each items}}
      <li class="lang-nav__item ">
        <a class="lang-nav__link" href="#">
          <span class="lang-nav__text">{{{language}}}</span>
        </a>
      </li>
    {{/each}}
  </ul>
</div>
 
{
  "selected": {
    "language": "Deutsch"
  },
  "items": [
    {
      "language": "English"
    },
    {
      "language": "Français"
    },
    {
      "language": "Netherlands"
    }
  ]
}
  • Content: 
    .lang-nav {
  $root: &;
  $link-height: 2 * $header-lang-nav-padding-top + 2rem;

  position: relative;
  display: block;
  align-self: flex-start;

  &.-active {
    #{$root}__list {
      display: block;
      padding-top: $link-height;
      border: 1px solid $gray;
    }
  }

  &__list {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: none;
    min-width: 100%;
    margin: 0;
    padding: 0;
    background-color: $white;
    list-style-type: none;
  }

  &__item {
    display: block;
    margin: 0;

    &:hover,
    &:active {
      background: $secondary;
      color: $white;
    }
  }

  &__link,
  &__selection {
    @include typography-level('font-family-inherited');
    display: block;
    padding: $header-lang-nav-padding-top 3 * $base-padding $base-padding $base-padding;
    color: inherit;

    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  &__link {
    &:active {
      color: $white;
    }
  }

  &__selection {
    position: relative;
    z-index: 20;
    padding: (rem-calc(2px) + $header-lang-nav-padding-top) (3 * $base-padding)
      (rem-calc(2px) + $header-lang-nav-padding-top) $base-padding;

    text-decoration: none;
    cursor: pointer;

    &::after {
      $symbol: map-get($icons, 'chevron-down');
      @include icon-content-extended($symbol);

      position: absolute;
      top: (0.375rem + rem-calc(2px) + $header-lang-nav-padding-top);
      right: $base-padding;
      display: block;
    }
  }

  &__text {
    display: block;
    white-space: nowrap;
  }
}
  • URL: /components/raw/molecules-lang-nav/_lang-nav.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/07-lang-nav/_lang-nav.scss
  • Size: 1.6 KB

There are no notes for this item.