<label class="c-pax-number" aria-label="Seleziona il numero di passeggeri">N° passeggeri: <span aria-hidden="true">*</span>
<div class="c-pax-number__items" role="radiogroup" aria-label="Scegli il numero dei passeggeri">
<div class="c-pax-number__item">
<label for="pax-1">
<input type="radio" name="passengers" id="pax-1" class="u-visuallyhidden">
<span>
1
</span>
</label>
</div>
<div class="c-pax-number__item">
<label for="pax-2">
<input type="radio" name="passengers" id="pax-2" class="u-visuallyhidden">
<span>
2
</span>
</label>
</div>
<div class="c-pax-number__item">
<label for="pax-3">
<input type="radio" name="passengers" id="pax-3" class="u-visuallyhidden">
<span>
3
</span>
</label>
</div>
<div class="c-pax-number__item">
<label for="pax-4">
<input type="radio" name="passengers" id="pax-4" class="u-visuallyhidden">
<span>
4
</span>
</label>
</div>
<div class="c-pax-number__item">
<label for="pax-5">
<input type="radio" name="passengers" id="pax-5" class="u-visuallyhidden">
<span>
5
</span>
</label>
</div>
<div class="c-pax-number__item">
<label for="pax-6">
<input type="radio" name="passengers" id="pax-6" class="u-visuallyhidden">
<span>
6
</span>
</label>
</div>
</div>
</label>
<label class="c-pax-number" aria-label="Seleziona il numero di passeggeri">N° passeggeri: <span aria-hidden="true">*</span>
<div class="c-pax-number__items" role="radiogroup" aria-label="Scegli il numero dei passeggeri">
{{#each passengers}}
<div class="c-pax-number__item">
<label for="{{ id }}">
<input type="radio" name="passengers" id="{{ id }}" class="u-visuallyhidden">
<span>
{{ this.text }}
</span>
</label>
</div>
{{/each}}
</div>
</label>
{
"passengers": [
{
"id": "pax-1",
"text": "1"
},
{
"id": "pax-2",
"text": "2"
},
{
"id": "pax-3",
"text": "3"
},
{
"id": "pax-4",
"text": "4"
},
{
"id": "pax-5",
"text": "5"
},
{
"id": "pax-6",
"text": "6"
}
]
}
.c-pax-number {
height: remify(78px);
.c-form & {
margin-bottom: remify(24px);
}
label {
padding: 0;
text-transform: initial;
font-weight: initial;
box-shadow: initial;
margin-bottom: 0;
border: none;
&:focus-within {
border: none;
}
}
}
.c-pax-number__items {
display: flex;
flex-wrap: wrap;
margin: remify(-4px);
position: absolute;
}
.c-pax-number__item {
margin: remify(4px);
span {
width: remify(44px);
height: remify(44px);
display: block;
border-radius: remify(4px);
border: remify(1px) solid #ccc;
line-height: remify(42px);
text-align: center;
font-weight: fw(bold);
@include shadow(small);
@include min-screen(bp(tablet-p)) {
width: remify(56px);
height: remify(56px);
line-height: remify(53px);
}
}
}
.c-pax-number input[type="radio"]:checked ~ span {
border: remify(2px) solid primary(sky, 100);
}
No notes defined.