Aeroporto di Bologna - Design System

Orientation: Emergency 

<div class="c-orientation ">
    <div class="c-orientation__inner">
        <div class="c-orientation__utilities">
            <div class="c-menu c-menu--download-app">
                <input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
                <label for="toggle" data-opens-menu>
                    <span>Entra in MyBLQ</span>
                    <img src="../../images/svgs/stk_generic-user.svg" alt="" role="presentation" aria-hidden="true" width="32">
                    <svg class="expanded-text c-icon c-icon--24">
                        <use xlink:href="#ic_arrow_drop_up_black_24px"></use>
                    </svg> <svg class="collapsed-text c-icon c-icon--24">
                        <use xlink:href="#ic_arrow_drop_down_black_24px"></use>
                    </svg>
                    <span class="u-visuallyhidden expanded-text">Menù aperto</span>
                    <span class="u-visuallyhidden collapsed-text">Menù chiuso</span>
                </label>
                <div role="menu" data-menu-origin="right">
                    <p class="c-menu__title">Accedi alla tua area riservata</p>
                    <p class="c-menu__paragraph">Ci scusiamo, in questo momento l'Aeroporto di Bologna è in stato di emergenza e non è possibile accedere alla MyBLQ dal sito web</p>
                    <strong class="c-menu__invite">Accedi a MyBLQ scaricando l'app ufficiale</strong>
                    <div class="c-menu__img">
                        <a href="#">
                            <img src="../../images/svgs/badge_appstore_it.svg" height="40" alt="Scarica su App Store">
                        </a>
                        <a href="#">
                            <img src="../../images/svgs/Google_Play_Store_badge_IT.svg" height="40" alt="Disponibile su Google Play">
                        </a>
                    </div>
                    <p class="c-menu__notice"><strong>Stai cercando una prenotazione?</strong>Se non puoi scaricare l'app ufficiale, prova a controllare nella tua casella di posta, tra le mail in entrata troverai sicuramente la mail di conferma prenotazione che ti abbiamo inviato il giorno in cui hai effettuato la prenotazione.</p>
                </div>
            </div>
            <div class="c-languages__dropdown">
                <input type="checkbox" id="checkbox_language_toggle" class="c-languages__switch">
                <label for="checkbox_language_toggle">

                    <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">
                    </ul>
                </label>
            </div>
        </div>
    </div>
</div>
 
<div class="c-orientation {{ modifier }}">
  <div class="c-orientation__inner">
    <div class="c-orientation__utilities">
      {{ render "@menu--download-app" }}
      {{> @languages--dropdown orientation-emergency }}
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .c-orientation {
  background-color: primary(sky, 20);
  padding: remify(4px) remify(16px);
  display: none;
  font-size: remify(12px);
  @include min-screen(bp(tablet-p)) {
    display: block;
  }

  .c-orientation__inner {
    position: relative;
    max-width: remify(1360px);
    margin: 0 auto;
    @include min-screen(bp(tablet-p)) {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .c-header--chinese & {
    justify-content: flex-end;
  }

  .c-header--emergency & {
    background-color: primary(emergency, 120);
  }
}

.c-orientation__utilities {
  margin-right: 0;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .c-menu,
  .c-languages__dropdown,
  .c-orientation__assistance {
    // height: 24px;
    display: inline-block;
  }
  
  .c-orientation__assistance {
    color: primary(night, 120);
    padding: remify(2px) remify(8px);
    text-decoration: none;

    svg {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      background-color: transparent;
      border-radius: remify(4px);
    }

    .prm-icon {
      padding: 0;
    }

    &.is-active {
      background-color: primary(night, 120);
      border-radius: remify(4px);
      color: #fff;

    }
  }
}

.c-orientation__utilities,
.c-orientation__utilities a {
  color: primary(night, 100);

  svg {
    // vertical-align: sub;
    * {
      fill: currentColor;
    }
  }

  & > * {
    padding: 0 remify(10px);
    border-right: remify(1px) solid primary(night, 40);

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
      border-right: none;
    }
  }
}
  • URL: /components/raw/orientation/_orientation.scss
  • Filesystem Path: src/views/02-molecules/orientation/_orientation.scss
  • Size: 1.7 KB

No notes defined.