<div class="c-list-search ">
<header data-centered>
<img src="../../images/svgs/stk_prenotazioni.svg" alt="Le tue prenotazioni" aria-hidden="true" width="48">
<h1>Le tue prenotazioni</h1>
<ul class="c-switcher" aria-label="Cerca tra le seguenti sezioni">
<li class="is-active">
<a href="#">Parcheggi <strong>(10)</strong></a>
</li>
<li>
<a href="#">Lounge <strong>(10)</strong></a>
</li>
<li>
<a href="#">Voli <strong>(10)</strong></a>
</li>
</ul>
<div class="c-datefinder c-form" aria-label="Seleziona il periodo di date in cui vuoi cercare">
<div class="c-datefinder__field">
<label for="input-search-code" class="" aria-label="">
Numero di prenotazione
<input id="input-search-code" type="text" class="" placeholder="" value="" aria-describedby="input-search-code-note">
<p class="c-field__note " id="input-search-code-note">
Cerca tramite il codice di prenotazione
</p>
</label>
</div>
<div class="u-px-space-16">
oppure
</div>
<div class="c-datefinder__field">
<label for="input-date-from" class="is-datepicker" aria-label="Inserisci una data">
Periodo dal
<input id="input-date-from" type="date" class="" placeholder="" value="" aria-describedby="input-date-from-note">
<p class="c-field__note " id="input-date-from-note">
Inserisci una data
</p>
</label>
</div>
<div class="c-datefinder__field">
<label for="input-date-to" class="is-datepicker" aria-label="Inserisci una data">
al
<input id="input-date-to" type="date" class="" placeholder="" value="" aria-describedby="input-date-to-note">
<p class="c-field__note " id="input-date-to-note">
Inserisci una data
</p>
</label>
</div>
<div class="c-datefinder__buttonCnt">
<button type="submit" class="c-button c-button--adding c-button--icon-round" aria-label="Esegui la ricerca">
<svg class="svg-24">
<use xlink:href="#ic_search_black_24px"></use>
</svg></button>
</div>
</div>
</header>
</div>
<div class="c-list-search {{ modifier }}">
<header data-centered>
<img src="{{ path img-path }}" alt="Le tue prenotazioni" aria-hidden="true" width="48">
<h1>{{ title }}</h1>
{{#if hasSwitcher}}
{{> @switcher switcher }}
{{/if}}
{{ render "@datefinder" }}
</header>
</div>
{
"img-path": "/images/svgs/stk_prenotazioni.svg",
"title": "Le tue prenotazioni",
"hasSwitcher": true,
"switcher": {
"aria-label": "Cerca tra le seguenti sezioni",
"items": [
{
"section": "Parcheggi",
"number": "(10)",
"class": "is-active"
},
{
"section": "Lounge",
"number": "(10)"
},
{
"section": "Voli",
"number": "(10)"
}
]
}
}
.c-list-search {
position: relative;
main & {
grid-column: main;
}
h1 {
margin-bottom: remify(24px);
}
.c-switcher {
max-width: remify(440px);
}
}
.c-list-search__input {
margin-bottom: remify(24px);
input,
select {
width: 100%;
max-width: remify(360px);
border: 0;
@include shadow(small);
background-color: #fff;
background-image: url('../../images/svgs/ic_search_blue_24px.svg');
background-repeat: no-repeat;
background-position: 96% center;
border-radius: remify(4px);
height: remify(48px);
padding: remify(16px);
@include placeholder {
// Heydon Pickering suggestion for placeholders
color: secondary(text, 100);
font-size: remify(16px);
font-style: italic;
font-weight: fw(regular);
}
@include min-screen ( remify(960px) ) {
width: remify(330px);
}
}
select {
background-image: url(../images/svgs/arrow-down-blue.svg);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0 remify(16px);
option:disabled {
font-weight: fw(regular);
font-style: italic;
}
&:-ms-expand {
display: none;
}
}
@include min-screen ( remify(960px) ) {
position: absolute;
margin-top: 0;
right: 0;
top: 0;
}
}
.c-list-search--orders {
margin-bottom: remify(24px);
}
/*------------------------------------*\
Inline modifier
\*------------------------------------*/
.c-list-search--inline {
padding: remify(16px);
label {
margin-bottom: 0;
}
input,
select {
width: auto;
max-width: initial;
border: 0;
box-shadow: none;
background-image: none;
border-radius: remify(4px);
height: auto;
padding: inherit;
text-align: left;
}
select {
padding: 0;
}
@include min-screen ( bp(tablet-p) ) {
display: flex;
align-items: center;
padding: remify(24px);
border-radius: remify(4px);
justify-content: space-between;
}
.c-list-search__input {
display: flex;
margin-bottom: remify(16px);
text-align: left;
position: relative;
@include min-screen ( bp(tablet-p) ) {
margin-top: 0;
margin-bottom: remify(8px);
right: initial;
top: initial;
flex: auto;
}
.c-button,
.c-button--submit {
margin-top: remify(4px);
margin-left: remify(16px);
}
}
.middle-text {
margin-bottom: remify(16px);
@include min-screen ( bp(tablet-p) ) {
margin: 0 remify(40px);
text-align: center;
display: block;
}
}
.c-list-search__extra {
@include min-screen ( bp(tablet-p) ) {
display: flex;
justify-content: flex-start;
text-align: left;
margin-left: auto;
margin-top: 0;
margin-bottom: remify(16px);
&:last-child {
margin-bottom: 0;
}
& img {
display: block;
}
}
.c-media {
justify-content: center;
.c-media__body {
flex-grow: 0;
}
}
}
}
.c-list-search--center {
.c-list-search__input {
justify-content: center;
}
.c-list-search__input label {
width: 100%;
max-width: remify(680px) ;
}
}
/*------------------------------------*\
Shifted top modifier
\*------------------------------------*/
// .c-list-search--shiftedTop {
// @include min-screen( bp(tablet-p) ) {
// margin-top: remify(-88px);
// }
// }
/*------------------------------------*
News Archive
*------------------------------------*/
.c-list-search--news-archive {
.c-list-search__input {
flex: 1;
display: block;
@include min-screen(bp(phone-p)) {
display: flex;
}
}
.c-list-search__input .c-button {
align-self: center;
}
.c-list-search__input .c-list-search__button-search-desktop {
margin-left: 0;
margin-top: remify(24px);
width: 100%;
@include min-screen(bp(phone-p)) {
display: none;
}
}
label {
width: 100%;
}
.c-list-search__button-search-mobile {
@include max-screen(bp(phone-p)) {
display: none;
}
}
.middle-text {
text-align: center;
}
}
/*------------------------------------*
Photogallery
*------------------------------------*/
.c-list-search--photogallery {
width: 100%;
label {
width: 100%;
}
select {
@include min-screen(bp(phablet)) {
min-width: remify(400px);
}
}
}
No notes defined.