Aeroporto di Bologna - Design System

Orientation 

<div class="c-orientation ">
    <div class="c-orientation__inner">
        <ul class="c-site-areas " aria-hidden="true">
            <li>
                <a href="/components/preview/page-home-travel--default.html" class="is-active">Viaggiare</a>
            </li>

            <li>
                <a href="/components/preview/page-society-home.html">Società</a>
            </li>

            <li>
                <a href="/components/preview/page-investor-home.html">Investor relations</a>
            </li>

            <li>
                <a href="/components/preview/papage-innovability-home.html">Innovability</a>
            </li>

        </ul>

        <div class="c-orientation__utilities">
            <a class="c-orientation__assistance " href="../preview/page-home-customer-care.html">
                Hai bisogno di aiuto?
            </a>
            <div class="c-menu">
                <input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
                <label for="toggle" data-opens-menu>
                    <span>Accedi a MyBLQ</span>
                    <img src="../../images/svgs/stk_generic-user.svg" alt="" role="presentation" aria-hidden="true" width="24">

                    <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">
                    <div class="c-menu__img">
                        <img src="../../images/svgs/stk_generic-user.svg" alt="Accedi alla MyBLQ" aria-hidden="true" width="80">
                    </div>
                    <p class="c-menu__title">Accedi alla tua area MyBLQ</p>
                    <form action="" class="c-form c-form--menu">
                        <label for="login_email" class="" aria-label="">

                            e-mail

                            <input id="login_email" type="email" class="" placeholder="Inserisci il tuo indirizzo e-mail" value="" aria-describedby="email-login-note">

                            <p class="c-field__note u-visuallyhidden" id="email-login-note">
                                Compila il campo inserendo il tuo indirizzo e-mail
                            </p>

                        </label>

                        <label for="login-psw" class="has-password-button" aria-label="">

                            password

                            <input id="login-psw" type="password" class="" placeholder="Inserisci la tua password" value="" aria-describedby="psw-login-note" autocomplete="current-password">

                            <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>

                            <p class="c-field__note u-visuallyhidden" id="psw-login-note">
                                Compila il campo inserendo la password del tuo account
                            </p>

                        </label>

                        <a href="/components/preview/insert-email" class="forgetful">Non ricordi la tua password?</a>
                        <button type="button" class="c-button c-button--submit">

                            Accedi

                        </button>
                    </form>
                    <a href="/components/preview/page-choice-profile" class="c-menu__invite">Non hai un profilo MyBLQ? Registrati ora</a>
                </div>
            </div>
            <a class="c-orientation__assistance " href="../preview/page-home-assistenze.html">
                <span class="u-visuallyhidden">Assistenze speciali</span>
                <img src="../../images/svgs/icon_ special_assistance_24px.svg" class="prm-icon" alt="">
            </a>
            <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">
    {{ render "@site-areas" site-areas merge=true }}
    
    <div class="c-orientation__utilities">
      <a class="c-orientation__assistance {{ assistance_modifier }}"
        href="{{ path '/components/preview/page-home-customer-care' }}">
        Hai bisogno di aiuto?
      </a>
      {{ render "@menu--anonymous-user" }}
      <a class="c-orientation__assistance {{ assistance_modifier }}" href="{{ path '/components/preview/page-home-assistenze' }}">
        <span class="u-visuallyhidden">Assistenze speciali</span>
        <img src="{{ path '/images/svgs/icon_ special_assistance_24px.svg' }}" class="prm-icon" alt="">
      </a>
      {{> @languages--dropdown dropdown-orientation }}
    </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.