<div class="c-estimate">
<h2>Un parcheggio per ogni esigenza</h2>
<div class="c-estimate__form" aria-label="Compila il form per calcolare le tariffe dei parcheggi">
<form action="/components/preview/page-parking-results" class="c-form c-form--parkings">
<div class="c-form__el c-form__el--cal">
<label for="estimate-entrance-date" class="" aria-label="Scegli data di ingresso">
Ingresso <span class="required-marker" aria-hidden="true">*</span>
<input id="estimate-entrance-date" type="date" class="" placeholder="Scegli data di ingresso" value="" aria-describedby="estimate-entrance-date-note">
<p class="c-field__note " id="estimate-entrance-date-note">
Inserisci data di entrata
</p>
</label>
</div>
<div class="c-form__el c-form__el--sel">
<label for="entrance-time" class="" aria-label="">
Orario <span class="required-marker" aria-hidden="true">*</span>
<select id="entrance-time" class="" aria-describedby="select-note">
<option value="" disabled selected>Scegli orario</option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
<option value="01:15">01:15</option>
<option value="01:30">01:30</option>
<option value="01:45">01:45</option>
<option value="02:00">02:00</option>
<option value="02:15">02:15</option>
<option value="02:30">02:30</option>
<option value="02:45">02:45</option>
<option value="03:00">03:00</option>
</select>
<em class="c-field__note " id="entrance-time-note">
Ora di ingresso
</em>
</label>
</div>
<div class="c-form__el c-form__el--cal">
<label for="exit-date" class="" aria-label="Scegli data di uscita">
Uscita <span class="required-marker" aria-hidden="true">*</span>
<input id="exit-date" type="date" class="" placeholder="" value="" aria-describedby="exit-date-note">
<p class="c-field__note " id="exit-date-note">
Inserisci data di entrata uscita
</p>
</label>
</div>
<div class="c-form__el c-form__el--sel">
<label for="exit-time" class="" aria-label="">
Orario <span class="required-marker" aria-hidden="true">*</span>
<select id="exit-time" class="" aria-describedby="select-note">
<option value="" disabled selected>Scegli orario</option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
<option value="01:15">01:15</option>
<option value="01:30">01:30</option>
<option value="01:45">01:45</option>
<option value="02:00">02:00</option>
<option value="02:15">02:15</option>
<option value="02:30">02:30</option>
<option value="02:45">02:45</option>
<option value="03:00">03:00</option>
</select>
<em class="c-field__note " id="exit-time-note">
Ora di uscita
</em>
</label>
</div>
<div class="c-form__el c-form__el--cta">
<button type="submit" class="c-button c-button--adding c-button--large">
Calcola tariffe
</button>
</div>
<div class="c-form__note is-negative u-visuallyhidden" id="parking-form-note">Inserisci una data e un orario di uscita successivi a quelli di entrata</div>
</form>
<div class="c-form--parkings-conventions"><a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-parking-form">Hai una convenzione?</a>
</div>
</div>
</div>
<div class="c-estimate">
<h2>{{ h2 }}</h2>
<div class="c-estimate__form" aria-label="{{ aria-label-form }}">
{{ render "@form--parkings" form merge=true }}
</div>
</div>
{
"h2": "Un parcheggio per ogni esigenza",
"aria-label-form": "Compila il form per calcolare le tariffe dei parcheggi",
"form": {
"entrance-date-time-desktop": {
"label_id": "estimate-entrance-date-time-desktop",
"atom-input": {
"id": "estimate-entrance-date-time-desktop",
"describedby": "estimate-entrance-date-time-desktop-note"
},
"note_id": "estimate-entrance-date-time-desktop-note"
},
"exit-date-time-desktop": {
"label_id": "estimate-exit-date-time-desktop",
"atom-input": {
"id": "estimate-exit-date-time-desktop",
"describedby": "estimate-exit-date-time-desktop-note"
},
"note_id": "estimate-exit-date-time-desktop-note"
},
"entrance-date": {
"label_id": "estimate-entrance-date",
"atom-input": {
"id": "estimate-entrance-date",
"describedby": "estimate-entrance-date-note"
},
"note_id": "estimate-entrance-date-note"
},
"entrance-date-mobile": {
"label_id": "estimate-entrance-date-mobile",
"atom-input": {
"id": "estimate-entrance-date-mobile",
"describedby": "estimate-entrance-date-mobile-note"
},
"note_id": "estimate-entrance-date-mobile-note"
},
"entrance-time-mobile": {
"label_id": "estimate-entrance-time-mobile",
"atom-select": {
"id": "estimate-entrance-time-mobile"
},
"note_id": "estimate-entrance-time-mobile-note"
},
"exit-date-mobile": {
"label_id": "estimate-exit-date-mobile",
"atom-input": {
"id": "estimate-exit-date-mobile",
"describedby": "estimate-exit-date-mobile-note"
},
"note_id": "estimate-exit-date-mobile-note"
},
"exit-time-mobile": {
"label_id": "estimate-exit-time-mobile",
"atom-select": {
"id": "estimate-exit-time-mobile"
},
"note_id": "estimate-exit-time-mobile-note"
},
"submit": {
"name": "submit",
"type": "submit",
"text": "Calcola tariffe",
"modifier": "c-button--adding c-button--large"
}
}
}
.c-estimate {
margin-top: remify(48px);
margin-bottom: remify(32px);
.c-main--parking-info-home & {
display: none;
@include min-screen( bp(tablet-p) ) {
display: block;
}
@include min-screen( bp(tablet-l) ) {
display: flex;
}
}
@include min-screen( bp(tablet) ) {
margin-top: remify(144px);
}
main & {
grid-column: main;
}
@include min-screen( bp(tablet-l) ) {
display: flex;
align-items: center;
justify-content: space-between;
}
h2 {
font-weight: fw(regular);
margin-bottom: remify(16px);
@include min-screen( bp(tablet-l) ) {
padding-right: remify(16px);
font-size: 200%;
line-height: 1.25;
}
}
}
.c-estimate__form {
flex: 1;
}
/*------------------------------------*\
Switch modifier
\*------------------------------------*/
.c-estimate--switch {
h2 {
text-align: center;
}
@include min-screen( bp(tablet-l) ) {
display: block;
align-items: initial;
justify-content: initial;
}
}
No notes defined.