<div class="c-search-filters ">
<div class="c-search-filters__title">Migliora la ricerca filtrando per:</div>
<div class="c-search-filters--desktop c-form ">
<div class="c-search-filters__filter">
<input type="checkbox" id="chk_parcheggi" name="chk_parcheggi" class="u-visuallyhidden " role="group" aria-label="chk_parcheggi">
<label for="chk_parcheggi" class="">
Parcheggi
</label>
</div>
<div class="c-search-filters__filter">
<input type="checkbox" id="chk_servizi" name="chk_servizi" class="u-visuallyhidden " role="group" aria-label="chk_servizi">
<label for="chk_servizi" class="">
Servizi in aeroporto
</label>
</div>
<div class="c-search-filters__filter">
<input type="checkbox" id="chk_guida_passeggero" name="chk_guida_passeggero" class="u-visuallyhidden " role="group" aria-label="chk_guida_passeggero">
<label for="chk_guida_passeggero" class="">
Guida al passeggero
</label>
</div>
<div class="c-search-filters__filter">
<input type="checkbox" id="chk_guida_passeggero" name="chk_guida_passeggero" class="u-visuallyhidden " role="group" aria-label="chk_guida_passeggero">
<label for="chk_guida_passeggero" class="">
COVID 19 | Ultimi aggiornamenti
</label>
</div>
<div class="c-search-filters__filter">
<input type="checkbox" id="chk_trasporti" name="chk_trasporti" class="u-visuallyhidden " role="group" aria-label="chk_trasporti">
<label for="chk_trasporti" class="">
Trasporti
</label>
</div>
<div class="c-search-filters__filter">
<input type="checkbox" id="chk_notizie" name="chk_notizie" class="u-visuallyhidden " role="group" aria-label="chk_notizie">
<label for="chk_notizie" class="">
Notizie
</label>
</div>
</div>
<div class="c-search-filters--mobile">
<div class="c-multiselect c-form ">
<button type="button" class="c-multiselect__button js-toggleMultiSelectBtn" aria-expanded="false" aria-label="Filtra i risultati selezionando l'area tematica" aria-controls="aria-MultiSelectOptions">
<span>Migliora la ricerca filtrando per</span>
<img src="../../images/svgs/arrow-down-blue.svg" aria-hidden="true" alt="">
</button>
<div class="c-multiselect__options js-multiselectOptions" role="region" aria-live="polite" id="aria-MultiSelectOptions">
<input type="checkbox" id="chk_mob_parcheggi" name="chk_mob_parcheggi" class="u-visuallyhidden " role="group" aria-label="chk_mob_parcheggi">
<label for="chk_mob_parcheggi" class="">
Parcheggi
</label> <input type="checkbox" id="chk_mob_servizi" name="chk_mob_servizi" class="u-visuallyhidden " role="group" aria-label="chk_mob_servizi">
<label for="chk_mob_servizi" class="">
Servizi in aeroporto
</label> <input type="checkbox" id="chk_mob_guida_passeggero" name="chk_mob_guida_passeggero" class="u-visuallyhidden " role="group" aria-label="chk_mob_guida_passeggero">
<label for="chk_mob_guida_passeggero" class="">
Guida al passeggero
</label> <input type="checkbox" id="chk_mob_trasporti" name="chk_mob_trasporti" class="u-visuallyhidden " role="group" aria-label="chk_mob_trasporti">
<label for="chk_mob_trasporti" class="">
Trasporti
</label> <input type="checkbox" id="chk_mob_notizie" name="chk_mob_notizie" class="u-visuallyhidden " role="group" aria-label="chk_mob_notizie">
<label for="chk_mob_notizie" class="">
Notizie
</label> <input type="checkbox" id="chk_mob_necessita_particolari" name="chk_mob_necessita_particolari" class="u-visuallyhidden " role="group" aria-label="chk_mob_necessita_particolari">
<label for="chk_mob_necessita_particolari" class="">
Necessità particolari
</label>
</div>
</div>
</div>
</div>
<div class="c-search-filters {{ modifier }}">
<div class="c-search-filters__title">Migliora la ricerca filtrando per:</div>
<div class="c-search-filters--desktop c-form ">
{{#each items}}
<div class="c-search-filters__filter">
{{> @checkbox }}
</div>
{{/each}}
</div>
<div class="c-search-filters--mobile">
{{> @multiselect multiselect-filters }}
</div>
</div>
{
"items": [
{
"id": "chk_parcheggi",
"name": "chk_parcheggi",
"text": "Parcheggi"
},
{
"id": "chk_servizi",
"name": "chk_servizi",
"text": "Servizi in aeroporto"
},
{
"id": "chk_guida_passeggero",
"name": "chk_guida_passeggero",
"text": "Guida al passeggero"
},
{
"id": "chk_guida_passeggero",
"name": "chk_guida_passeggero",
"text": "COVID 19 | Ultimi aggiornamenti"
},
{
"id": "chk_trasporti",
"name": "chk_trasporti",
"text": "Trasporti"
},
{
"id": "chk_notizie",
"name": "chk_notizie",
"text": "Notizie"
}
],
"multiselect-filters": {
"exposed-text": "Migliora la ricerca filtrando per",
"aria-label": "Filtra i risultati selezionando l'area tematica",
"options": [
{
"id": "chk_mob_parcheggi",
"name": "chk_mob_parcheggi",
"text": "Parcheggi"
},
{
"id": "chk_mob_servizi",
"name": "chk_mob_servizi",
"text": "Servizi in aeroporto"
},
{
"id": "chk_mob_guida_passeggero",
"name": "chk_mob_guida_passeggero",
"text": "Guida al passeggero"
},
{
"id": "chk_mob_trasporti",
"name": "chk_mob_trasporti",
"text": "Trasporti"
},
{
"id": "chk_mob_notizie",
"name": "chk_mob_notizie",
"text": "Notizie"
},
{
"id": "chk_mob_necessita_particolari",
"name": "chk_mob_necessita_particolari",
"text": "Necessità particolari"
}
]
}
}
.c-search-filters {
padding: remify(48px) 0 0;
.c-search-filters__title {
color: primary(night,100);
padding-bottom: remify(40px);
display: none;
@include min-screen(bp(tablet-p)) {
display: block;
}
}
.c-search-filters--desktop {
display: none;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
@include min-screen(bp(tablet-p)) {
display: flex;
}
.c-search-filters__filter {
flex: 0 1 33%;
padding-bottom: remify(24px);
}
}
.c-search-filters--mobile {
display: block;
@include min-screen(bp(tablet-p)) {
display: none;
}
}
}
No notes defined.