Aeroporto di Bologna - Design System

Switcher: Extended 

<div class="switcher-stage">
    <ul class="c-switcher c-switcher--extended" aria-label="Area geografica">

        <li class="is-active">
            <a href="#">Tutte <strong>(99)</strong></a>
        </li>
        <li>
            <a href="#">Nazionali <strong>(12)</strong></a>
        </li>
        <li>
            <a href="#">Internazionali <strong>(84)</strong></a>
        </li>
        <li>
            <a href="#">Intercontinentali <strong>(3)</strong></a>
        </li>

    </ul>

    <div class="c-switcher__select">
        <label for="filter-by-type">Area geografica</label>
        <select type="text" id="filter-by-type">
            <option value="Tutte">Tutte (99)</option>
            <option value="Nazionali">Nazionali (12)</option>
            <option value="Internazionali">Internazionali (84)</option>
            <option value="Intercontinentali">Intercontinentali (3)</option>
        </select>
    </div>

</div>
 
<div class="switcher-stage">
  <ul class="c-switcher c-switcher--extended" 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>
  
  <div class="c-switcher__select">
    <label for="filter-by-type">{{ aria-label }}</label>
    <select type="text" id="filter-by-type">
      {{#each items}}
        <option value="{{ this.section }}">{{ this.section }} {{ this.number }}</option>
      {{/each}}
    </select>
  </div>
  
  {{#if chkbx}}
  <div class="o-flexgrid o-flexgrid--center u-mt-space-12 u-mb-space-24">
    <div class="checkbox u-mx-space-12">
      <input type="checkbox" id="novelty" name="novelty">
      <label for="novelty">  Guarda le <strong>novità</strong></label>
    </div>
    <div class="checkbox u-mx-space-12">
      <input type="checkbox" id="cmpny-otm" name="cmpny-otm">
      <label for="cmpny-otm">Destinazioni della <strong>compagnia del mese</strong></label>
    </div>
  </div>
  {{/if}}

</div>
 
{
  "aria-label": "Area geografica",
  "items": [
    {
      "section": "Tutte",
      "number": "(99)",
      "class": "is-active"
    },
    {
      "section": "Nazionali",
      "number": "(12)"
    },
    {
      "section": "Internazionali",
      "number": "(84)"
    },
    {
      "section": "Intercontinentali",
      "number": "(3)"
    }
  ],
  "chkbx-novelty": true
}
  • 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.