<div class="c-time-detail">
<span>
<svg class="c-icon">
<use xlink:href="#ic_drive_eta_black_24px"></use>
</svg> </span>
<div class="c-time-detail__el c-time-detail--desktop">
<label for="date-time-desktop" class="flatpickr-label" aria-label="Placeholder">
Label <span class="required-marker" aria-hidden="true">*</span>
<input id="date-time-desktop" type="date" class="js-flatpickr flatpickr-input" placeholder="Placeholder" value="00:00" aria-describedby="date-time-desktop-note">
<p class="c-field__note u-visuallyhidden" id="date-time-desktop-note">
Seleziona data e ora di entrata al parcheggio
</p>
</label>
</div>
<div class="c-time-detail__el c-time-detail--mobile">
<label for="exit-date-mobile" class="is-datepicker" aria-label="Data di uscita">
Uscita <span class="required-marker" aria-hidden="true">*</span>
<input id="exit-date-mobile" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="exit-date-mobile-note">
<p class="c-field__note u-visuallyhidden" id="exit-date-mobile-note">
Seleziona la data di uscita dal parcheggio
</p>
</label>
</div>
<div class="c-time-detail__el c-time-detail--mobile">
<label for="exit-time-mobile" class="" aria-label="">
Ore <span class="required-marker" aria-hidden="true">*</span>
<select id="exit-time-mobile" 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="">
</em>
</label>
</div>
</div>
<div class="c-time-detail">
<span>
{{> @icon symbol=time-detail-icon.symbol class=time-detail-icon.class }}
</span>
<div class="c-time-detail__el c-time-detail--desktop">
{{> @input date-time-desktop }}
</div>
<div class="c-time-detail__el c-time-detail--mobile">
{{> @input date-mobile }}
</div>
<div class="c-time-detail__el c-time-detail--mobile">
{{> @select time-mobile }}
</div>
</div>
{
"name": "static",
"time-detail-icon": {
"symbol": "ic_drive_eta_black_24px",
"class": "c-icon"
},
"datetime-label": "Entrata",
"datetime-day": "220",
"datetime-month": "04",
"datetime-year": "2018",
"time-label": "Ore",
"time-text": "20:30",
"date-time-desktop": {
"label_id": "date-time-desktop",
"label_message": "Label",
"label_class": "flatpickr-label",
"screen-reader-text": "Placeholder",
"atom-input": {
"id": "date-time-desktop",
"type": "date",
"class": "js-flatpickr flatpickr-input",
"required": true,
"hasNote": true,
"describedby": "date-time-desktop-note",
"placeholder": "Placeholder",
"value": "00:00"
},
"note_id": "date-time-desktop-note",
"note_message": "Seleziona data e ora di entrata al parcheggio",
"note_class": "u-visuallyhidden"
},
"date-mobile": {
"label_id": "exit-date-mobile",
"label_message": "Uscita",
"label_class": "is-datepicker",
"screen-reader-text": "Data di uscita",
"atom-input": {
"id": "exit-date-mobile",
"type": "date",
"class": "",
"required": true,
"hasNote": true,
"describedby": "exit-date-mobile-note",
"placeholder": "Scegli la data"
},
"note_id": "exit-date-mobile-note",
"note_message": "Seleziona la data di uscita dal parcheggio",
"note_class": "u-visuallyhidden"
},
"time-mobile": {
"label_id": "exit-time-mobile",
"label_message": "Ore",
"label_class": "",
"atom-select": {
"id": "exit-time-mobile",
"class": "",
"required": true,
"hasNote": true,
"describedby": "select-note",
"placeholder": "Scegli orario",
"options": [
{
"value": "00:00",
"text": "00:00"
},
{
"value": "00:15",
"text": "00:15"
},
{
"value": "00:30",
"text": "00:30"
},
{
"value": "00:45",
"text": "00:45"
},
{
"value": "01:00",
"text": "01:00"
},
{
"value": "01:15",
"text": "01:15"
},
{
"value": "01:30",
"text": "01:30"
},
{
"value": "01:45",
"text": "01:45"
},
{
"value": "02:00",
"text": "02:00"
},
{
"value": "02:15",
"text": "02:15"
},
{
"value": "02:30",
"text": "02:30"
},
{
"value": "02:45",
"text": "02:45"
},
{
"value": "03:00",
"text": "03:00"
}
]
}
},
"screen-reader-txt": {
"datetime": "Inserisci la data di arrivo",
"time": "Inserisci l'a ora di arrivo"
}
}
.c-time-detail {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
padding: remify(8px) 0;
justify-content: center;
width: 100%;
color: secondary(text, 100);
& + & {
@include min-screen(bp(phablet)) {
border-left: 1px solid primary(night, 40);
border-top: none;
}
}
& + & + & {
@include max-screen(bp(phablet)) {
border-top: 1px solid primary(night, 40);
}
}
@include min-screen(bp(phone-p)) {
width: 50%;
}
@include min-screen(bp(phablet)) {
width: 30%;
}
@include min-screen( $booking-info-breakpoint ) {
padding: 0 remify(16px);
width: auto;
}
.c-product__time & {
border: none;
padding-left: 0;
justify-content: initial;
}
.c-product--recap & {
flex: 1 1 50%;
}
.c-parkings & {
@include min-screen( $booking-info-breakpoint ) {
padding: 0 0 0 remify(16px);
}
&:first-of-type {
padding-left: 0;
}
}
svg {
position: relative;
top: remify(4px);
width: remify(32px);
height: remify(18px);
* {
fill: primary(night, 40);
}
@include min-screen( $booking-info-breakpoint ) {
width: remify(48px);
height: remify(32px);
.c-product__time--desktop & {
width: remify(36px);
height: remify(24px);
}
}
}
.c-time-detail__icon-placeholder {
width: remify(48px);
min-height: 2px;
@include min-screen( $booking-info-breakpoint ) { width: auto; }
}
> * {
margin-right: remify(16px);
&:last-child {
margin-right: 0;
}
.c-product__time & {
margin-right: remify(8px);
font-size: remify(12px);
@include min-screen( bp(phone-p) ) {
font-size: remify(14px);
}
}
}
.c-time-detail__el {
min-width: remify(48px);
@include min-screen( bp(phablet) ) {
min-width: auto;
}
}
strong, label {
@include font-scale(level-2, bold);
display: block;
}
label {
font-weight: fw(bold);
flex-grow: 2;
&.is-readonly {
width: remify(100px);
@include min-screen(bp(phablet)) {
width: auto;
}
}
}
input {
display: block;
margin-top: remify(4px);
font-size: remify(16px);
border-radius: remify(4px);
border: remify(1px) solid #fff; // For IE to avoid default browser border
color: secondary(text, 100);
background: transparent;
@include min-screen(bp(phablet)) {
width: remify(200px);
}
.o-spotlight__element--overlay & {
border: remify(1px) solid #ccc;
background-color: #fff;
padding: remify(4px);
}
}
input:-moz-read-only {
border: none;
padding: 0;
-webkit-appearance: none;
background-color: transparent;
}
input:read-only {
border: none;
padding: 0;
-webkit-appearance: none;
background-color: transparent;
}
select {
display: block;
font-size: remify(16px);
height: remify(24px);
margin-top: remify(0px);
border: none;
color: secondary(text, 100);
background-color: transparent;
appearance: none;
opacity: 1;
@include min-screen(bp(phablet)) {
font-size: remify(16px);
}
}
}
.c-time-detail--desktop {
display: none;
@include min-screen( bp(tablet-p)) {
display: block;
}
}
.c-time-detail--mobile {
display: block;
@include min-screen( bp(tablet-p)) {
display: none;
}
}
/*------------------------------------*\
PRODUCT modifier
\*------------------------------------*/
.c-time-detail.c-time-detail--product {
display: block;
strong {
display: inline-block;
}
.c-time-detail__span {
flex-grow: 1;
}
.c-time-detail__span {
margin-right: remify(16px);
background-image: url('../images/svgs/caret.svg');
background-repeat: no-repeat;
background-position: center right;
background-size: contain;
}
&:last-of-type,
&:nth-of-type(2) {
.c-time-detail__span {
margin-right: 0;
background-image: none;
}
}
}
/*------------------------------------*
Modifier: Raw
*------------------------------------*/
.c-time-detail--raw {
justify-content: initial;
padding: 0;
}
No notes defined.