Aeroporto di Bologna - Design System

Scelta lingua: Dropdown language 

<div class="c-languages__dropdown">
    <input type="checkbox" id="checkbox_language_toggle" class="c-languages__switch">
    <label for="checkbox_language_toggle">
        ita
        <svg class="c-icon c-icon--24 chevron--up">
            <use xlink:href="#ic_arrow_drop_up_black_24px"></use>
        </svg> <svg class="c-icon c-icon--24 chevron--down">
            <use xlink:href="#ic_arrow_drop_down_black_24px"></use>
        </svg>
        <ul class="c-languages__dropdown-content" aria-label="Seleziona la lingua del sito">
            <li>
                <a href="#" aria-label="eng">eng</a>
            </li>
            <li>
                <a href="#" aria-label="zh">zh</a>
            </li>
        </ul>
    </label>
</div>
 
<div class="c-languages__dropdown">
  <input type="checkbox" id="checkbox_language_toggle" class="c-languages__switch">
  <label for="checkbox_language_toggle">
    {{ main-language.text }}
    {{> @icon symbol="ic_arrow_drop_up_black_24px" class="c-icon c-icon--24 chevron--up" }}
    {{> @icon symbol="ic_arrow_drop_down_black_24px" class="c-icon c-icon--24 chevron--down" }}
    <ul class="c-languages__dropdown-content" aria-label="Seleziona la lingua del sito">
      {{#each sub-languages}}
      <li>
        <a href="{{ this.url }}" aria-label="{{ this.aria-label }}">{{ this.text }}</a>
      </li>
      {{/each}}
    </ul>
  </label>
</div>
 
{
  "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"
    }
  ],
  "main-language": {
    "text": "ita",
    "url": "#",
    "aria-label": "ita"
  },
  "sub-languages": [
    {
      "text": "eng",
      "url": "#",
      "aria-label": "eng"
    },
    {
      "text": "zh",
      "url": "#",
      "aria-label": "zh"
    }
  ]
}
  • 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.