Aeroporto di Bologna - Design System

Scelta lingua 

<ul class="c-languages" aria-label="Seleziona la lingua del sito">
    <li>
        <a href="#" aria-label="ita">
            <img src="../../images/svgs/flag_it.svg" class="c-language__img" alt="Lingua italiana" aria-hidden="true" />
            ita
        </a>
    </li>
    <li>
        <a href="#" aria-label="eng">
            <img src="../../images/svgs/flag_en.svg" class="c-language__img" alt="English language" aria-hidden="true" />
            eng
        </a>
    </li>
</ul>
 
<ul class="c-languages" aria-label="Seleziona la lingua del sito">
  {{#each languages}}
    <li>
      <a href="{{ this.url }}" aria-label="{{ this.aria-label }}">
        {{#if this.img-path}}
        <img src="{{ path this.img-path }}" class="c-language__img" alt="{{ this.img-alt }}" aria-hidden="true" />
        {{/if}}
        {{ this.text }}
      </a>
    </li>
  {{/each}}
</ul>
 
{
  "languages": [
    {
      "text": "ita",
      "url": "#",
      "aria-label": "ita",
      "img-path": "/images/svgs/flag_it.svg",
      "img-alt": "Lingua italiana"
    },
    {
      "text": "eng",
      "url": "#",
      "aria-label": "eng",
      "img-path": "/images/svgs/flag_en.svg",
      "img-alt": "English language"
    }
  ]
}
  • Content: 
    .c-languages {
  li {
    display: inline-block;
    margin-right: remify(16px);

    &:last-child {
      margin-right: 0;
    }
  }

  a {
    text-transform: uppercase;
    text-decoration: none;
    font-size: remify(14px);

    img {
      vertical-align: middle;
      position: relative;
      top: remify(-2px);
    }
  }
}

.c-languages__dropdown {
  display: none;
  position: relative;

  @include min-screen(bp(tablet-p)) {
    display: inline-block;
  }

  input,
  ul {
    display: none;
  }
  
  label {
    display: flex;
    align-items: center;
  }

  ul.c-languages__dropdown-content {
    background: primary(sky, 20);
    padding: remify(12px) remify(12px);
    border-radius: remify(12px);
    line-height: 2;
    position: absolute;
    z-index: $z-Index-dropdown-lang;
    left: remify(2px);
    top: remify(32px);
  }

  input[type="checkbox"]:checked ~ label ul {
    display: block;
  }

  a,
  label {
    text-transform: uppercase;
    color: inherit;
  }

  input[type="checkbox"]:checked ~ label .chevron--down,
  .chevron--up {
    display: none;
  }

  input[type="checkbox"]:checked ~ label .chevron--up,
  .chevron--down {
    display: inline-block;
  }

  svg {
    fill: currentColor;
    // position: relative;
    // top: remify(6px);
    // right: remify(6px);
  }
}
  • URL: /components/raw/languages/_languages.scss
  • Filesystem Path: src/views/01-atoms/languages/_languages.scss
  • Size: 1.3 KB

No notes defined.