<div class="c-list-search c-list-search--inline c-form">
<div class="c-list-search__input">
<label for="text-field" class=" " aria-label="">
Cerca
<input id="text-field" type="text" class="js-combobox " placeholder="" value="" aria-describedby="text-note" list="search-destinations" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
<datalist id="search-destinations">
<option value="Dubai (EMIRATI ARABI)">
<option value="Roma (ITALIA)">
<option value="New York Ny (STATI UNITI)">
<option value="Parigi (FRANCIA)">
<option value="Berlino (GERMANIA)">
<option value="Londra (REGNO UNITO)">
</datalist>
<p class="c-field__note u-visuallyhidden" id="text-note">
Cerca per città, compagnia aerea, nazione
</p>
</label>
</div>
<p class="middle-text">oppure consulta</p>
<div class="c-list-search__extras">
<div class="c-list-search__extra">
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="PDF orari voli estate 2018" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
</div>
</div>
</div>
<div class="c-list-search__extra">
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="PDF orari voli estate 2018" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
</div>
</div>
</div>
</div>
</div>
<div class="c-list-search {{ modifier }} c-form">
<div class="c-list-search__input">
{{ render inputComponentName inputComponentInstance merge=true }}
{{#if hasSubmitButton}}
<div>
<br>
<button type="submit" class="c-button c-button--submit c-button--icon-round {{submitButtonModifier}}"
aria-label="Avvia la ricerca">
{{> @icon search-icon }}
</button>
<p class="c-field__note "> </p>
</div>
{{/if}}
</div>
{{#if middle-text }}
<p class="middle-text">{{ middle-text }}</p>
{{/if}}
<div class="c-list-search__extras">
{{#if hasExtra}}
<div class="c-list-search__extra">
{{ render componentName componentInstance merge=true }}
</div>
{{/if}}
{{#if hasExtra}}
<div class="c-list-search__extra">
{{ render componentName componentInstance merge=true }}
</div>
{{/if}}
</div>
</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)"
}
]
},
"modifier": "c-list-search--inline",
"inputComponentName": "@autocomplete",
"inputComponentInstance": {
"label_id": "text-field",
"label_message": "Cerca",
"label_class": null,
"atom-input": {
"id": "text-field",
"type": "text",
"class": null,
"placeholder": "",
"required": false,
"hasNote": true,
"describedby": "text-note"
},
"autocomplete": {
"datalist-id": "search-destinations",
"prefix-class": "combobox",
"case-sensitive": "no",
"search-option": "containing",
"help-text": "Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti.",
"options": [
{
"value": "Dubai (EMIRATI ARABI)"
},
{
"value": "Roma (ITALIA)"
},
{
"value": "New York Ny (STATI UNITI)"
},
{
"value": "Parigi (FRANCIA)"
},
{
"value": "Berlino (GERMANIA)"
},
{
"value": "Londra (REGNO UNITO)"
}
]
},
"note_id": "text-note",
"note_message": "Cerca per città, compagnia aerea, nazione",
"note_class": "u-visuallyhidden"
},
"middle-text": "oppure consulta",
"hasExtra": true,
"componentName": "@media",
"componentInstance": {
"img-src": "/images/svgs/pdf.svg",
"img-alt": "PDF orari voli estate 2018",
"img-width": "32",
"body": "<a href=\"#\"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb"
}
}
.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.