<header class="c-header c-header--progress">
<div class="c-header__inner">
<div class="c-header__toolbar">
<div class='c-toolbar c-toolbar--minimal c-toolbar--progress'>
<div class='c-toolbar__inner'>
<div class='c-toolbar__left'>
<a href="" class='c-toolbar__logo'>
<img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
</a>
</div>
<div class='c-toolbar__center'>
<ol class="c-progress" tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="Step 3 di 5: ">
<li class="c-progress__step " data-step-complete>
<a href="" data-extra-text="">Risultati</a>
</li>
<li class="c-progress__step " data-step-complete>
<a href="" data-extra-text="">I tuoi dati</a>
</li>
<li class="c-progress__step " data-step-current>
<a href="" data-extra-text="">Prenotato</a>
</li>
<li class="c-progress__step " data-step-incomplete>
<a href="" data-extra-text="">Paga</a>
</li>
<li class="c-progress__step " data-step-incomplete>
<a href="" data-extra-text="">Pagato</a>
</li>
</ol>
</div>
<div class='c-toolbar__right'>
<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>
</div>
</div>
</div>
</div>
</div>
</header>
<div class='c-overlay'></div>
<header class="c-header c-header--progress">
<div class="c-header__inner">
<div class="c-header__toolbar">
{{> @toolbar--progress toolbarProgress merge=true }}
</div>
</div>
</header>
<div class='c-overlay'></div>
{
"name": "default",
"dropdown-toolbar": {
"site-areas": {
"areas": [
{
"text": "Viaggiare",
"class": "is-active",
"link": "/components/preview/page-home-travel--default"
},
{
"text": "Società",
"link": "/components/preview/page-society-home"
},
{
"text": "Investor relations",
"link": "/components/preview/page-investor-home"
},
{
"text": "Innovability",
"link": "/components/preview/page-innovability-home"
}
],
"work-with-us": true
},
"dropdown-orientation": {
"main-language": {
"text": "ita",
"url": "#",
"aria-label": "Italiano"
},
"sub-languages": [
{
"text": "eng",
"url": "#",
"aria-label": "Inglese"
},
{
"text": "zh",
"url": "#",
"aria-label": "Cinese"
}
]
}
},
"slim-alert": {
"items": [
{
"anchor-text": false,
"text": "<a href=\"#\">Lavori infrastrutturali</a>"
}
]
},
"toolbarProgress": {
"showUser": true,
"moleculeProgress": {
"current-step": 3,
"steps": [
{
"text": "Risultati",
"status": "data-step-complete"
},
{
"text": "I tuoi dati",
"status": "data-step-complete"
},
{
"text": "Prenotato",
"status": "data-step-current"
},
{
"text": "Paga",
"status": "data-step-incomplete"
},
{
"text": "Pagato",
"status": "data-step-incomplete"
}
]
}
}
}
$header-bg: secondary(soft, 100);
.c-header {
position: relative;
background-color: $header-bg;
z-index: $zIndex-header;
@include shadow(medium);
}
.c-header__switch:has(input[type="checkbox"]:focus) {
@include outline;
}
.c-header__shortcuts+.c-header__switch {
position: absolute;
z-index: $zIndex-hamburgerMenu;
right: remify(8px);
bottom: remify(-36px);
@include min-screen(bp(tablet-p)) {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.c-header--chinese & {
right: remify(8px);
top: remify(8px);
@include min-screen(bp(tablet-p)) {
right: remify(16px);
top: remify(24px);
}
}
}
.c-header__primary-navigation {
position: relative;
}
/*------------------------------------*\
Modifier c-header--host
\*------------------------------------*/
.c-header--host {
@include min-screen(bp(tablet-p)) {
// padding-bottom: remify(100px);
}
}
/*------------------------------------*\
Modifier c-header--stepbar
\*------------------------------------*/
// .c-header--progress {
// padding-bottom: remify(8px);
// }
/*------------------------------------*\
Modifier c-header--withSub
\*------------------------------------*/
.c-header--withSub {
.c-header__shortcuts+.c-header__switch {
bottom: remify(-92px);
}
}
/*------------------------------------*\
Emergency modifier
\*------------------------------------*/
.c-header--emergency {
background-color: primary(emergency, 120);
color: #fff;
a {
color: #fff;
}
& .c-toolbar a,
& .c-orientation a,
& .c-orientation__utilities,
& .c-orientation__utilities a,
.c-navigation-shortcuts a {
color: #fff;
}
}
/*------------------------------------*
Modifier: c-header--minimal
*------------------------------------*/
.c-header--minimal {
.c-header__inner:has(.c-header__toolbar + *) {
display: flex;
align-items: center;
justify-content: space-between;
max-width: remify($base-page-width);
margin-inline: auto;
}
}
/*------------------------------------*\
overlay
\*------------------------------------*/
.c-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
z-index: $z-Index-overlay;
display: none;
&.is-visible {
display: block;
}
}
No notes defined.