<header class="c-header c-header--progress">
<div class="c-header__inner">
<div class="c-header_orientation">
<div class="c-orientation ">
<div class="c-orientation__inner">
<div class="c-orientation__utilities">
<div class="c-menu">
<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
<label for="toggle" data-opens-menu>
<span>Ciao</span><strong>Mario Rossi</strong>
<div class="c-menu__icon">
<img src="../../images/svgs/stk_profile_man.svg" alt="" aria-hidden="true" width="24">
<p class="c-menu__notify" aria-hidden="true">2</p>
</div>
<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__booked-item c-menu__booked-item--multiple ">
<a href="../preview/page-reservation-detail.html" class="clickable-item">
<div class="c-media o-media c-media--booked-item">
<img class="c-media__figure o-media__figure" src="../../images/svgs/p1-2.svg" alt="Parcheggio P1 P2" height="" width="40">
<div class="c-media__body o-media__body">
Oggi hai un parcheggio prenotato al P1-2 <strong>alle ore 13:45</strong>
</div>
</div>
</a>
<a href="../preview/page-reservations-list.html">Vedi le altre prenotazioni di oggi</a>
</div>
<div class="c-menu__section">
<div class="image">
<img src="../../images/svgs/stk_prenotazioni.svg" alt="Prenotazioni" aria-hidden="true" width="60">
</div>
<ul aria-label="Prenotazioni">
<strong aria-hidden="true" class="title">Prenotazioni</strong>
<li><a href="../preview/page-dashboard.html">Dashboard</a></li>
<li><a href="../preview/page-reservations-list.html">Le tue prenotazioni</a></li>
<li><a href="../preview/page-orders-list.html">I tuoi ordini</a></li>
<li><a href="#">I tuoi voucher digitali (130€)</a></li>
<li><a href="#">I tuoi crediti agenzia (110€)</a></li>
</ul>
</div>
<div class="c-menu__section">
<div class="image">
<img src="../../images/svgs/stk_avatar.svg" alt="Profilo" aria-hidden="true" width="60">
</div>
<ul aria-label="Profilo">
<strong aria-hidden="true" class="title">Profilo</strong>
<li><a href="../preview/page-profile--default.html">Il tuo account</a></li>
<li><a href="../preview/page-billing-info.html">I tuoi dati di fatturazione</a></li>
<li><a href="#">Le mie auto</a></li>
<li><a href="../preview/page-privacy-settings.html">Le tue impostazioni privacy</a></li>
<li><a href="../preview/page-newsletter-sub.html">Le tue impostazioni newsletter</a></li>
</ul>
</div>
<div class="c-menu__section">
<div class="image">
<img src="../../images/svgs/stk_assistenza.svg" alt="Supporto" aria-hidden="true" width="60">
</div>
<ul aria-label="Supporto">
<strong aria-hidden="true" class="title">Supporto</strong>
<li><a href="#">Richiedi assistenza</a></li>
<li><a href="../preview/page-reclaims-list.html">I tuoi suggerimenti e reclami</a></li>
<li><a href="#">Richiedi assistenza</a></li>
</ul>
</div>
<a href="#" class="c-menu__invite">Esci</a>
</div>
</div>
</div>
</div>
</div>
</div>
<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="3" aria-valuenow="2" aria-valuetext="Step 2 di 3: ">
<li class="c-progress__step " data-step-complete>
<a href="" data-extra-text="">Scegli parcheggio</a>
</li>
<li class="c-progress__step " data-step-current>
<a href="" data-extra-text="">Intestazione</a>
</li>
<li class="c-progress__step " data-step-incomplete>
<a href="" data-extra-text="">Checkout</a>
</li>
</ol>
</div>
<div class='c-toolbar__right'>
<div class="c-toolbar__user">
</div>
<a href="#" class="c-link c-link--cart c-link--cart-large">
<p class="u-visuallyhidden">Carrello</p>
<span class="c-link__cart-icon">
<svg class="c-icon c-icon--cart">
<use xlink:href="#ic-shopping-cart-24px"></use>
</svg> <span class="c-link__cart-badge">5</span>
</span>
<span class="c-link__cart-content">
<span class="c-link__cart-label">Tempo residuo</span>
<span class="c-link__cart-timer">19:59</span>
</span>
</a>
</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_orientation">
{{> @orientation--nomenu orientation }}
</div>
<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>"
}
]
},
"orientation": {
"logged-user": true,
"recognized-user": false,
"anonymous-user": false,
"dropdown-orientation": false
},
"toolbarProgress": {
"showUser": true,
"moleculeProgress": {
"current-step": 2,
"steps": [
{
"text": "Scegli parcheggio",
"status": "data-step-complete"
},
{
"text": "Intestazione",
"status": "data-step-current"
},
{
"text": "Checkout",
"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.