<div class="c-calendar c-calendar--flights">
<ul class="airports">
<li><a href="#" class="is-active">Aeroporto - Atene Eleftherios (ATH)</a></li>
<li><a href="#">Aeroporto - Atene Eleftherios (ATH)</a></li>
</ul>
<div class="filters c-form">
<div class="filters__child route">
<div role="radiogroup" aria-label="Seleziona la tratta di andata o di ritorno">
<strong class="is-label">Tratta: <span class="required-marker" aria-hidden="true">*</span></strong>
<div><input type="radio" id="andata" name="round-trip-selection" value="andata" class=" u-visuallyhidden">
<label class="" for="andata">BLQ > ATH</label>
</div>
<div><input type="radio" id="ritorno" name="round-trip-selection" value="ritorno" class=" u-visuallyhidden">
<label class="" for="ritorno">ATH > BLQ</label>
</div>
</div>
</div>
<div class="filters__child companies">
<label for="select-flight-companies" class="" aria-label="">
Compagnie aeree: <span class="required-marker" aria-hidden="true">*</span>
<select id="select-flight-companies" class="" aria-describedby="select-flight-companies-note">
<option value="" disabled selected></option>
<option value="option-1" selected>Tutte le compagnie</option>
<option value="option-2">Alitalia</option>
<option value="option-3">Ryanair</option>
</select>
<em class="c-field__note u-visuallyhidden" id="select-flight-companies-note">
Seleziona le compagnie
</em>
</label>
</div>
<div class="filters__child news" role="radiogroup" aria-label="seleziona le novità del mese corrente o dei mesi successivi">
<input type="radio" id="current-month" name="choice" value="current-months" class="js-fr-dialogmodal-open u-visuallyhidden" aria-controls="dialog-button">
<label class="" for="current-month">★ Novità di questo mese</label> <input type="radio" id="next-months" name="choice" value="next-months" class=" u-visuallyhidden">
<label class="" for="next-months">★ Novità dei prossimi mesi</label>
</div>
<div class="filters__child months">
<a href="#"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_chevron_left_black_24px"></use>
</svg>
<p class="u-visuallyhidden">Mese precedente</p>
</a>
<p>Aprile</p>
<a href="#"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg>
<p class="u-visuallyhidden">Mese successivo</p>
</a>
</div>
</div>
<ul class="c-calendar__weekdays">
<li aria-label="Lunedì">Lun</li>
<li aria-label="Martedì">Mar</li>
<li aria-label="Mercoledì">Mer</li>
<li aria-label="Giovedì">Gio</li>
<li aria-label="Venerdì">Ven</li>
<li aria-label="Sabato">Sab</li>
<li aria-label="Domenica">Dom</li>
</ul>
<ul class="c-calendar__day-grid">
<li class="ghost-day">
<span>29</span>
</li>
<li class="ghost-day">
<span>30</span>
</li>
<li class="ghost-day">
<span>31</span>
</li>
<li class="">
<span>1</span>
</li>
<li class="">
<span>2</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>3</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>4</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>5</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>6</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>7</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>8</span>
</li>
<li class="">
<span>9</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>10</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>11</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>12</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>13</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>14</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>15</span>
</li>
<li class="">
<span>16</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>17</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>18</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>19</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>20</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>21</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>22</span>
</li>
<li class="">
<span>23</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>24</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>25</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>26</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>27</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>28</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>29</span>
</li>
<li class="">
<span>30</span>
</li>
<li class="ghost-day">
<span>1</span>
</li>
<li class="ghost-day">
<span>2</span>
</li>
</ul>
<small class="c-calendar__hint">
Clicca sui giorni evidenziati per vedere i voli disponibili in quel giorno.
</small>
</div>
<div class="c-dialog c-dialog--dayflight js-fr-dialogmodal " id="dialog-dayflight">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-dayflight-title">
<div role="document">
<p class="c-dialog__title" id="dialog-dayflight-title">Mercoledì <strong>25 Aprile 2018</strong> Andata BLQ > ATH</p>
<div class="flightDetail">
<p class="flightDetail__companyName">Alitalia</p>
<div class="flightDetail__list">
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
<span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
<span aria-hidden="true">★</span> <strong>Novità</strong>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
<span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
<span aria-hidden="true">★</span> <strong>Novità</strong>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
</div>
</div>
</div>
</div>
</div>
</div>
<p class="flightDetail__companyName">Ryanair</p>
<div class="flightDetail__list">
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
<div class="c-calendar c-calendar--flights">
<ul class="airports">
<li><a href="#" class="is-active">Aeroporto - Atene Eleftherios (ATH)</a></li>
<li><a href="#">Aeroporto - Atene Eleftherios (ATH)</a></li>
</ul>
<div class="filters c-form">
<div class="filters__child route">
<div role="radiogroup" aria-label="Seleziona la tratta di andata o di ritorno">
<strong class="is-label">Tratta: <span class="required-marker" aria-hidden="true">*</span></strong>
<div>{{> @radiobutton id="andata" name="round-trip-selection" value="andata" text="BLQ > ATH" }}</div>
<div>{{> @radiobutton id="ritorno" name="round-trip-selection" value="ritorno" text="ATH > BLQ" }}</div>
</div>
</div>
<div class="filters__child companies">
{{> @select flight-companies }}
</div>
<div class="filters__child news" role="radiogroup" aria-label="seleziona le novità del mese corrente o dei mesi successivi">
{{> @radiobutton current-month-flights }}
{{> @radiobutton next-months-flights }}
</div>
<div class="filters__child months">
<a href="#">{{> @icon prev-month }}<p class="u-visuallyhidden">Mese precedente</p></a>
<p>Aprile</p>
<a href="#">{{> @icon next-month }}<p class="u-visuallyhidden">Mese successivo</p></a>
</div>
</div>
<ul class="c-calendar__weekdays">
<li aria-label="Lunedì">Lun</li>
<li aria-label="Martedì">Mar</li>
<li aria-label="Mercoledì">Mer</li>
<li aria-label="Giovedì">Gio</li>
<li aria-label="Venerdì">Ven</li>
<li aria-label="Sabato">Sab</li>
<li aria-label="Domenica">Dom</li>
</ul>
<ul class="c-calendar__day-grid">
{{#each days}}
<li class="{{ this.class }}">
{{#equalTo this.class "active-day"}} {{!-- *1) --}}
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>{{ this.day }}</span>
<div class="flight-companies">
<div class="company">
<img src="{{ path "/images/flights-logos/alitalia.png" }}" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="{{ path "/images/flights-logos/ryanair.png" }}" alt="Ryanair" width="30"></div>
</div>
</a>
{{else}}
<span>{{ this.day }}</span>
{{/equalTo}}
</li>
{{/each}}
</ul>
<small class="c-calendar__hint">
Clicca sui giorni evidenziati per vedere i voli disponibili in quel giorno.
</small>
</div>
{{ render "@dialog--dayflight" }}
{{!--
*1) Per Endurance: vedere la documentazione nel tab NOTES in Fractal.
--}}
{
"days": [
{
"day": 29,
"class": "ghost-day"
},
{
"day": 30,
"class": "ghost-day"
},
{
"day": 31,
"class": "ghost-day"
},
{
"day": 1
},
{
"day": 2
},
{
"day": 3,
"class": "active-day"
},
{
"day": 4
},
{
"day": 5,
"class": "active-day"
},
{
"day": 6
},
{
"day": 7,
"class": "active-day"
},
{
"day": 8
},
{
"day": 9
},
{
"day": 10,
"class": "active-day"
},
{
"day": 11
},
{
"day": 12,
"class": "active-day"
},
{
"day": 13
},
{
"day": 14,
"class": "active-day"
},
{
"day": 15
},
{
"day": 16
},
{
"day": 17,
"class": "active-day"
},
{
"day": 18
},
{
"day": 19,
"class": "active-day"
},
{
"day": 20
},
{
"day": 21,
"class": "active-day"
},
{
"day": 22
},
{
"day": 23
},
{
"day": 24,
"class": "active-day"
},
{
"day": 25
},
{
"day": 26,
"class": "active-day"
},
{
"day": 27
},
{
"day": 28,
"class": "active-day"
},
{
"day": 29
},
{
"day": 30
},
{
"day": 1,
"class": "ghost-day"
},
{
"day": 2,
"class": "ghost-day"
}
],
"round-trip-selection": {
"label_id": "select-round-trip-selection",
"label_message": "Tratta:",
"label_class": null,
"atom-select": {
"id": "select-round-trip-selection",
"class": null,
"required": true,
"hasNote": true,
"describedby": "select-round-trip-selection-note",
"placeholder": null,
"options": [
{
"value": "option-1",
"text": "Andata: BLQ > ATH",
"selected": true
},
{
"value": "option-2",
"text": "Ritorno: ATH > BLQ"
}
]
},
"note_id": "select-round-trip-selection-note",
"note_message": "Seleziona la tratta del volo",
"note_class": "u-visuallyhidden"
},
"flight-companies": {
"label_id": "select-flight-companies",
"label_message": "Compagnie aeree:",
"label_class": null,
"atom-select": {
"id": "select-flight-companies",
"class": null,
"required": true,
"hasNote": true,
"describedby": "select-flight-companies-note",
"placeholder": null,
"options": [
{
"value": "option-1",
"text": "Tutte le compagnie",
"selected": true
},
{
"value": "option-2",
"text": "Alitalia"
},
{
"value": "option-3",
"text": "Ryanair"
}
]
},
"note_id": "select-flight-companies-note",
"note_message": "Seleziona le compagnie",
"note_class": "u-visuallyhidden"
},
"prev-month": {
"symbol": "ic_chevron_left_black_24px",
"class": "c-icon c-icon--24"
},
"next-month": {
"symbol": "ic_chevron_right_black_24px",
"class": "c-icon c-icon--24"
},
"current-month-flights": {
"id": "current-month",
"name": "choice",
"value": "current-months",
"text": "★ Novità di questo mese",
"input-class": "js-fr-dialogmodal-open",
"aria-controls": "dialog-button"
},
"next-months-flights": {
"id": "next-months",
"name": "choice",
"value": "next-months",
"text": "★ Novità dei prossimi mesi"
}
}
.c-calendar__weekdays,
.c-calendar__day-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@supports (display: grid) {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 0;
flex-direction: initial;
flex-wrap: initial;
}
li {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
margin-left: 0;
width: 14%; // For flex usage
flex-grow: 1;
@supports (display: grid) {
width: auto;
}
}
}
.c-calendar__weekdays {
margin-bottom: remify(16px);
}
.c-calendar__day-grid {
background-color: primary(sky, 20);
border: remify(2px) solid primary(sky, 20);
@include shadow(medium);
@supports (display: grid) {
grid-gap: remify(2px);
}
li {
background-color: secondary(page, 100);
height: 12vw;
max-height: remify(125px);
align-items: flex-start;
justify-content: flex-start;
padding: 1vw;
border: 1px solid primary(sky, 20);
border-width: 1px 0 0 1px;
@supports (display: grid) {
border : none;
}
}
span {
font-size: 85%;
line-height: remify(24px);
@include min-screen(bp(tablet)) {
font-size: 100%;
}
}
.flight-companies {
display: flex;
}
.company {
display: none;
@include min-screen(bp(tablet-p)) {
display: inline-block;
margin-top: 1vw;
text-align: center;
}
}
li.ghost-day {
color: primary(sky, 20);
}
li.active-day {
background-color: #fff;
padding: 0;
a {
padding: 1vw;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
span {
display: block;
background-color: primary(sky, 120);
color: #fff;
font-weight: fw(bold);
border-radius: remify(20px);
width: remify(24px);
height: remify(24px);
text-align: center;
@include min-screen(bp(tablet-l)) {
background-color: transparent;
color: primary(sky, 120);
// text-decoration: underline;
}
}
}
}
.c-calendar__hint {
margin-top: remify(24px);
display: block;
}
/*------------------------------------*\
Flights modifier
\*------------------------------------*/
.c-calendar--flights {
.airports {
color: primary(night, 80);
text-align: center;
margin-bottom: remify(16px);
font-size: 75%;
@include min-screen(bp(tablet)) {
font-size: 100%;
}
li {
display: inline-block;
padding: remify(8px) remify(16px);
}
a {
color: currentColor;
text-transform: uppercase;
&.is-active {
font-weight: fw(bold);
text-decoration: none;
color: primary(night, 100);
}
}
}
.filters {
margin-bottom: remify(8px);
@include min-screen(bp(tablet)) {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: remify(16px);
}
}
.filters__child {
@include min-screen(bp(tablet)) {
flex: 1 1 auto;
}
}
.route {
@include min-screen(bp(tablet)) {
order: 1;
}
text-align: left;
.is-label {
color: primary(night, 100);
font-weight: fw(bold);
display: block;
width: 100%;
text-align: left;
}
}
.companies {
display: flex;
justify-content: center;
align-items: center;
@include min-screen(bp(tablet)) {
order: 3;
}
label {
color: primary(night, 100);
font-weight: fw(bold);
display: block;
width: 100%;
text-align: left;
}
i {
display: block;
font-weight: fw(regular);
}
}
.news {
@include min-screen(bp(tablet)) {
order: 4;
flex: 1 0 100%;
text-align: center;
margin-top: remify(24px);
}
label:not(:last-child) {
margin-right: remify(32px);
}
}
.months {
display: flex;
align-items: center;
justify-content: center;
@include min-screen(bp(tablet)) {
order: 2;
}
p {
color: primary(night, 100);
font-size: 150%;
margin: 0 remify(24px);
}
a {
max-height: remify(24px);
}
svg * {
fill: primary(night, 100);
}
}
}
If the <li> contains .active-day class, an <a> that opens a dialog is added.
Example:
...
<li class="">
<span>2</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>3</span>
</a>
</li>
<li class="">
<span>4</span>
</li>
...