Aeroporto di Bologna - Design System

Estimate: Switch 

<div class="c-estimate c-estimate--switch">
    <h2>Un parcheggio per ogni esigenza</h2>
    <div class="c-estimate__switch">
        <ul class="c-switcher" aria-label="Cerca tra le seguenti sezioni">

            <li>
                <a href="#">Fino a 4 ore </a>
            </li>
            <li>
                <a href="#">Fino a 4 giorni </a>
            </li>
            <li class="is-active">
                <a href="#">5 giorni e oltre </a>
            </li>

        </ul>
    </div>
</div>
 
<div class="c-estimate c-estimate--switch">
  <h2>{{ h2 }}</h2>
  <div class="c-estimate__switch">
    {{> @switcher switcher }}
  </div>
</div>
 
{
  "h2": "Un parcheggio per ogni esigenza",
  "aria-label-form": "Compila il form per calcolare le tariffe dei parcheggi",
  "form": {
    "entrance-date-time-desktop": {
      "label_id": "estimate-entrance-date-time-desktop",
      "atom-input": {
        "id": "estimate-entrance-date-time-desktop",
        "describedby": "estimate-entrance-date-time-desktop-note"
      },
      "note_id": "estimate-entrance-date-time-desktop-note"
    },
    "exit-date-time-desktop": {
      "label_id": "estimate-exit-date-time-desktop",
      "atom-input": {
        "id": "estimate-exit-date-time-desktop",
        "describedby": "estimate-exit-date-time-desktop-note"
      },
      "note_id": "estimate-exit-date-time-desktop-note"
    },
    "entrance-date": {
      "label_id": "estimate-entrance-date",
      "atom-input": {
        "id": "estimate-entrance-date",
        "describedby": "estimate-entrance-date-note"
      },
      "note_id": "estimate-entrance-date-note"
    },
    "entrance-date-mobile": {
      "label_id": "estimate-entrance-date-mobile",
      "atom-input": {
        "id": "estimate-entrance-date-mobile",
        "describedby": "estimate-entrance-date-mobile-note"
      },
      "note_id": "estimate-entrance-date-mobile-note"
    },
    "entrance-time-mobile": {
      "label_id": "estimate-entrance-time-mobile",
      "atom-select": {
        "id": "estimate-entrance-time-mobile"
      },
      "note_id": "estimate-entrance-time-mobile-note"
    },
    "exit-date-mobile": {
      "label_id": "estimate-exit-date-mobile",
      "atom-input": {
        "id": "estimate-exit-date-mobile",
        "describedby": "estimate-exit-date-mobile-note"
      },
      "note_id": "estimate-exit-date-mobile-note"
    },
    "exit-time-mobile": {
      "label_id": "estimate-exit-time-mobile",
      "atom-select": {
        "id": "estimate-exit-time-mobile"
      },
      "note_id": "estimate-exit-time-mobile-note"
    },
    "submit": {
      "name": "submit",
      "type": "submit",
      "text": "Calcola tariffe",
      "modifier": "c-button--adding c-button--large"
    }
  },
  "switcher": {
    "aria-label": "Cerca tra le seguenti sezioni",
    "items": [
      {
        "section": "Fino a 4 ore"
      },
      {
        "section": "Fino a 4 giorni"
      },
      {
        "section": "5 giorni e oltre",
        "class": "is-active"
      }
    ]
  }
}
  • Content: 
    .c-estimate {
  margin-top: remify(48px);
  margin-bottom: remify(32px);

  .c-main--parking-info-home & {
    display: none;
    @include min-screen( bp(tablet-p) ) {
      display: block;
    }
    @include min-screen( bp(tablet-l) ) {
      display: flex;
    }
  }

  @include min-screen( bp(tablet) ) {
    margin-top: remify(144px);
  } 

  main & {
    grid-column: main;
  }

  @include min-screen( bp(tablet-l) ) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  h2 {
    font-weight: fw(regular);
    margin-bottom: remify(16px);

    @include min-screen( bp(tablet-l) ) {
      padding-right: remify(16px);
      font-size: 200%;
      line-height: 1.25;
    }
  }

}

.c-estimate__form {
  flex: 1;
}

/*------------------------------------*\
  Switch modifier
\*------------------------------------*/

.c-estimate--switch {

  h2 {
    text-align: center;
  }

  @include min-screen( bp(tablet-l) ) {
    display: block;
    align-items: initial;
    justify-content: initial;
  }

}
  • URL: /components/raw/estimate/_estimate.scss
  • Filesystem Path: src/views/03-organisms/estimate/_estimate.scss
  • Size: 1 KB

No notes defined.