Aeroporto di Bologna - Design System

Switcher: Default 

<ul class="c-switcher" aria-label="Cerca tra le seguenti sezioni">

    <li class="is-active">
        <a href="#">Parcheggi <strong>(10)</strong></a>
    </li>
    <li>
        <a href="#">Voli <strong>(10)</strong></a>
    </li>
    <li>
        <a href="#">Lounge <strong>(10)</strong></a>
    </li>

</ul>
 
<ul class="c-switcher" aria-label="{{ aria-label }}">

  {{#each items}}
    <li {{#if this.class}}class="{{ this.class }}"{{/if}}>
      <a href="#">{{ this.section }} {{#if this.number}}<strong>{{ this.number }}</strong>{{/if}}</a>
    </li>
  {{/each}}

</ul>
 
{
  "aria-label": "Cerca tra le seguenti sezioni",
  "items": [
    {
      "section": "Parcheggi",
      "number": "(10)",
      "class": "is-active"
    },
    {
      "section": "Voli",
      "number": "(10)"
    },
    {
      "section": "Lounge",
      "number": "(10)"
    }
  ]
}
  • Content: 
    .c-switcher {
  display: flex;
  border-radius: remify(16px);
  border: 4px solid primary(night, 20);
  background-color: primary(night, 20);

  header[data-centered] & {
    margin: 0 auto remify(24px);
  }

  .c-estimate--switch & {
    margin: 0 auto;
  }

  .c-skimming & {
    // max-width: remify(760px);
  }

  li {
    background-color: primary(night, 20);
    color: primary(night, 100);
    border-radius: remify(12px);
    flex: auto;
    font-size: 87.5%;

    @include min-screen (bp(tablet)) {
      font-size: 100%;
    }

    &.is-active a,
    & a[aria-current=true] {
      background-color: primary(night, 80);
      color: #fff;
    }

  }

  a {
    padding: remify(12px);
    color: inherit;
    display: block;
    text-decoration: none;
    text-align: center;
    border-radius: remify(12px);

    @include min-screen (bp(tablet)) {
      padding: remify(8px) remify(16px);
    }

  }

  strong {
    display: none;

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

}

/*------------------------------------*\
  Extended modifier
\*------------------------------------*/

.c-list-search~.switcher-stage {
  margin-top: remify(40px);
}

.c-switcher--extended {

  main & {
    grid-column: main;
  }

  max-width: none;
  display: none;

  @include min-screen (bp(tablet-p)) {
    display: flex;
    overflow: auto;
  }

}

.c-switcher__select {

  main & {
    grid-column: main;
  }

  display: block;

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

  label {
    font-weight: fw(bold);
    display: block;
    color: primary(night, 100);
    margin-bottom: remify(4px);
    text-transform: uppercase;

    .c-superhero--switcher & {
      color: #fff;
      text-shadow: remify(1px) remify(1px) primary(night, 100);
    }

  }

  select {
    width: 100%;
    border: 0;
    @include shadow(small);
    background-color: #fff;
    background-image: url(../images/svgs/arrow-down-blue.svg);
    background-repeat: no-repeat;
    background-position: 96% center;
    border-radius: remify(4px);
    height: remify(48px);
    padding: remify(16px);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

}

/*------------------------------------*\
  Switcher stage
\*------------------------------------*/

.switcher-stage {

  .checkbox {
    margin-top: remify(16px);
    text-align: center;
    color: primary(night, 100);
  }

  .c-superhero--switcher & {
    // max-width: remify(900px);
    margin: 0 auto;
  }

}
  • URL: /components/raw/switcher/_switcher.scss
  • Filesystem Path: src/views/02-molecules/switcher/_switcher.scss
  • Size: 2.5 KB

No notes defined.