Aeroporto di Bologna - Design System

Filters: Flights Stacked 

<div class="c-filters c-filters--stacked">

    <div class="c-filters__list">

        <div class="c-filters__item">
            <div class="c-dropdown-filter " role="group">
                <button class="c-dropdown-filter__btn" aria-haspopup="true" aria-expanded="false" data-target="content-mobile-1">
                    Voli
                    <div class="icon"><svg class="c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg></div>
                </button>
                <div id="content-mobile-1" class="c-dropdown-filter__content" role="menu" hidden>
                    <div class="c-form">
                        <div class="filter-item"><input type="checkbox" id="mobile-flights-filters-1" name="mobile-flights-filters-1" class="u-visuallyhidden " role="group" aria-label="mobile-flights-filters-1">

                            <label for="mobile-flights-filters-1" class="">
                                Tutti i risultati
                            </label>
                        </div>
                        <div class="filter-item"><input type="checkbox" id="mobile-flights-filters-2" name="mobile-flights-filters-2" class="u-visuallyhidden " role="group" aria-label="mobile-flights-filters-2">

                            <label for="mobile-flights-filters-2" class="">
                                Voli diretti
                            </label>
                        </div>
                        <div class="filter-item"><input type="checkbox" id="mobile-flights-filters-3" name="mobile-flights-filters-3" class="u-visuallyhidden " role="group" aria-label="mobile-flights-filters-3">

                            <label for="mobile-flights-filters-3" class="">
                                Voli con scalo
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="c-filters__item">
            <div class="c-dropdown-filter c-dropdown-filter--tabs " role="group">
                <button class="c-dropdown-filter__btn" aria-haspopup="true" aria-expanded="false" data-target="content-mobile-2">
                    Prezzo
                    <div class="icon"><svg class="c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg></div>
                </button>
                <div id="content-mobile-2" class="c-dropdown-filter__content" role="menu" hidden>

                    <ul data-mobile-tabs-price class="c-dropdown-filter__tabs">
                        <li class="tab">
                            <a data-tabby-default href="#mobile-price-andata">Andata</a>
                        </li>
                        <li class="tab">
                            <a href="#mobile-price-ritorno">Ritorno</a>
                        </li>
                    </ul>

                    <div id="mobile-price-andata" class="tab-content">
                        <div class="c-rangeslider u-mt-space-48">
                            <div class="c-rangeslider__exp-values">
                            </div>
                            <div class="c-rangeslider__item">
                                <div id="slider-mobile-price-round"></div>
                            </div>
                        </div>
                    </div>

                    <div id="mobile-price-ritorno" class="tab-content">
                        <div class="c-rangeslider u-mt-space-48">
                            <div class="c-rangeslider__exp-values">
                            </div>
                            <div class="c-rangeslider__item">
                                <div id="slider-mobile-price-trip"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="c-filters__item">
            <div class="c-dropdown-filter c-dropdown-filter--tabs " role="group">
                <button class="c-dropdown-filter__btn" aria-haspopup="true" aria-expanded="false" data-target="content-mobile-3">
                    Aeroporto
                    <div class="icon"><svg class="c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg></div>
                </button>
                <div id="content-mobile-3" class="c-dropdown-filter__content" role="menu" hidden>

                    <ul data-mobile-tabs-airport class="c-dropdown-filter__tabs">
                        <li class="tab">
                            <a data-tabby-default href="#mobile-airport-andata">Andata</a>
                        </li>
                        <li class="tab">
                            <a href="#mobile-airport-ritorno">Ritorno</a>
                        </li>
                    </ul>

                    <div id="mobile-airport-andata" class="tab-content">
                        <div class="c-form">
                            <div class="filter-item"><input type="checkbox" id="mobile-round-airport-1" name="mobile-round-airport-1" class="u-visuallyhidden " role="group" aria-label="mobile-round-airport-1">

                                <label for="mobile-round-airport-1" class="">
                                    Milano, Bergamo/Orio Al Serio [BGY] (ITALIA)
                                </label>
                            </div>
                            <div class="filter-item"><input type="checkbox" id="mobile-round-airport-2" name="mobile-round-airport-2" class="u-visuallyhidden " role="group" aria-label="mobile-round-airport-2">

                                <label for="mobile-round-airport-2" class="">
                                    Milano, Linate [LIN] (ITALIA)
                                </label>
                            </div>
                            <div class="filter-item"><input type="checkbox" id="mobile-round-airport-3" name="mobile-round-airport-3" class="u-visuallyhidden " role="group" aria-label="mobile-round-airport-3">

                                <label for="mobile-round-airport-3" class="">
                                    Milano, Malpensa [MXP] (ITALIA)
                                </label>
                            </div>
                            <div class="filter-item"><input type="checkbox" id="mobile-round-airport-4" name="mobile-round-airport-4" class="u-visuallyhidden " role="group" aria-label="mobile-round-airport-4">

                                <label for="mobile-round-airport-4" class="">
                                    Milano, Tutti gli aeroporti [MIL] (ITALIA)
                                </label>
                            </div>
                        </div>
                    </div>

                    <div id="mobile-airport-ritorno" class="tab-content">
                        <div class="c-form">
                            <div class="filter-item"><input type="checkbox" id="mobile-trip-airport-1" name="mobile-trip-airport-1" class="u-visuallyhidden " role="group" aria-label="mobile-trip-airport-1">

                                <label for="mobile-trip-airport-1" class="">
                                    Roma, Fiumicino [FCO] (ITALIA)
                                </label>
                            </div>
                            <div class="filter-item"><input type="checkbox" id="mobile-trip-airport-2" name="mobile-trip-airport-2" class="u-visuallyhidden " role="group" aria-label="mobile-trip-airport-2">

                                <label for="mobile-trip-airport-2" class="">
                                    Roma, Ciampino [CIA] (ITALIA)
                                </label>
                            </div>
                            <div class="filter-item"><input type="checkbox" id="mobile-trip-airport-3" name="mobile-trip-airport-3" class="u-visuallyhidden " role="group" aria-label="mobile-trip-airport-3">

                                <label for="mobile-trip-airport-3" class="">
                                    Roma, Tutti gli aeroporti [ROM] (ITALIA)
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="c-filters__item">
            <div class="c-dropdown-filter c-dropdown-filter--tabs " role="group">
                <button class="c-dropdown-filter__btn" aria-haspopup="true" aria-expanded="false" data-target="content-mobile-4">
                    Orario
                    <div class="icon"><svg class="c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg></div>
                </button>
                <div id="content-mobile-4" class="c-dropdown-filter__content" role="menu" hidden>

                    <ul data-mobile-tabs-time class="c-dropdown-filter__tabs">
                        <li class="tab">
                            <a data-tabby-default href="#mobile-time-andata">Andata</a>
                        </li>
                        <li class="tab">
                            <a href="#mobile-time-ritorno">Ritorno</a>
                        </li>
                    </ul>

                    <div id="mobile-time-andata" class="tab-content">
                        <div class="c-rangeslider ">
                            <div class="c-rangeslider__exp-values">
                                <span class="label">Partenza: </span>
                                <span class="number" id="slider-mobile-time-departure-round-left-val"></span>
                                <span class="number" id="slider-mobile-time-departure-round-right-val"></span>
                            </div>
                            <div class="c-rangeslider__item">
                                <div id="slider-mobile-time-departure-round"></div>
                            </div>
                        </div>
                        <div class="c-rangeslider ">
                            <div class="c-rangeslider__exp-values">
                                <span class="label">Arrivo: </span>
                                <span class="number" id="slider-mobile-time-arrival-round-left-val"></span>
                                <span class="number" id="slider-mobile-time-arrival-round-right-val"></span>
                            </div>
                            <div class="c-rangeslider__item">
                                <div id="slider-mobile-time-arrival-round"></div>
                            </div>
                        </div>
                    </div>

                    <div id="mobile-time-ritorno" class="tab-content">
                        <div class="c-rangeslider ">
                            <div class="c-rangeslider__exp-values">
                                <span class="label">Partenza: </span>
                                <span class="number" id="slider-mobile-time-departure-trip-left-val"></span>
                                <span class="number" id="slider-mobile-time-departure-trip-right-val"></span>
                            </div>
                            <div class="c-rangeslider__item">
                                <div id="slider-mobile-time-departure-trip"></div>
                            </div>
                        </div>
                        <div class="c-rangeslider ">
                            <div class="c-rangeslider__exp-values">
                                <span class="label">Arrivo: </span>
                                <span class="number" id="slider-mobile-time-arrival-trip-left-val"></span>
                                <span class="number" id="slider-mobile-time-arrival-trip-right-val"></span>
                            </div>
                            <div class="c-rangeslider__item">
                                <div id="slider-mobile-time-arrival-trip"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="c-filters__item">
            <div class="c-dropdown-filter " role="group">
                <button class="c-dropdown-filter__btn" aria-haspopup="true" aria-expanded="false" data-target="content-mobile-5">
                    Compagnia aerea
                    <div class="icon"><svg class="c-icon--24">
                            <use xlink:href="#ic_expand_more_black_24px"></use>
                        </svg></div>
                </button>
                <div id="content-mobile-5" class="c-dropdown-filter__content" role="menu" hidden>
                    <div class="c-form">
                        <div class="filter-item"><input type="checkbox" id="mobile-airline-company-1" name="mobile-airline-company-1" class="u-visuallyhidden " role="group" aria-label="mobile-airline-company-1">

                            <label for="mobile-airline-company-1" class="">
                                Air France
                            </label>
                        </div>
                        <div class="filter-item"><input type="checkbox" id="mobile-airline-company-2" name="mobile-airline-company-2" class="u-visuallyhidden " role="group" aria-label="mobile-airline-company-2">

                            <label for="mobile-airline-company-2" class="">
                                Alitalia
                            </label>
                        </div>
                        <div class="filter-item"><input type="checkbox" id="mobile-airline-company-3" name="mobile-airline-company-3" class="u-visuallyhidden " role="group" aria-label="mobile-airline-company-3">

                            <label for="mobile-airline-company-3" class="">
                                Easyjet airline Co. Ltd
                            </label>
                        </div>
                        <div class="filter-item"><input type="checkbox" id="mobile-airline-company-4" name="mobile-airline-company-4" class="u-visuallyhidden " role="group" aria-label="mobile-airline-company-4">

                            <label for="mobile-airline-company-4" class="">
                                Kim Royal Dutch Airlines
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="c-filters__cta">
        <div class="c-filters__reset">
            <button type="button" class="c-button c-button--as-link">

                Azzera tutti i filtri

            </button>
        </div>
        <div class="c-filters__submit">
            <button type="button" class="c-button c-button--submit">

                Applica filtri

            </button>
        </div>
    </div>

</div>
 
<div class="c-filters {{modifier}}">

  <div class="c-filters__list">
    
    {{!-- Voli --}}
    <div class="c-filters__item">
      {{#> @dropdown-filter flights }}
      <div class="c-form">
        {{#each items }}
          <div class="filter-item">{{> @checkbox }}</div>
        {{/each}}
      </div>
      {{/@dropdown-filter}}
    </div>
    
    {{!-- Prezzo --}}
    <div class="c-filters__item">
      {{#> @dropdown-filter--tabs price }}
        {{#*inline "round-block"}}
          {{> @rangeslider slider-price-round }}
        {{/inline}}
        {{#*inline "trip-block"}}
          {{> @rangeslider slider-price-trip }}
        {{/inline}}
      {{/@dropdown-filter--tabs}}
    </div>

    {{!-- Aeroporto --}}
    <div class="c-filters__item">
      {{#> @dropdown-filter--tabs airport }}
        {{#*inline "round-block"}}
        <div class="c-form">
          {{#each round-items }}
            <div class="filter-item">{{> @checkbox }}</div>
          {{/each}}
        </div>
        {{/inline}}
        {{#*inline "trip-block"}}
        <div class="c-form">
          {{#each trip-items }}
            <div class="filter-item">{{> @checkbox }}</div>
          {{/each}}
        </div>
        {{/inline}}
      {{/@dropdown-filter--tabs}}
    </div>

    {{!-- Orario --}}
    <div class="c-filters__item">
      {{#> @dropdown-filter--tabs time }}
        {{#*inline "round-block"}}
          {{> @rangeslider slider-time-departure-round }}
          {{> @rangeslider slider-time-arrival-round }}
        {{/inline}}
        {{#*inline "trip-block"}}
          {{> @rangeslider slider-time-departure-trip }}
          {{> @rangeslider slider-time-arrival-trip }}
        {{/inline}}
      {{/@dropdown-filter--tabs}}
    </div>

    {{!-- Compagnia --}}
    <div class="c-filters__item">
      {{#> @dropdown-filter airline-company }}
      <div class="c-form">
        {{#each items }}
          <div class="filter-item">{{> @checkbox }}</div>
        {{/each}}
      </div>
      {{/@dropdown-filter}}
    </div>

  </div>

  <div class="c-filters__cta">
    <div class="c-filters__reset">
      {{> @button reset-filters-btn}}
    </div>
    <div class="c-filters__submit">
      {{> @button submit-button }}
    </div>
  </div>

</div>
 
{
  "modifier": "c-filters--stacked",
  "flights": {
    "id": "mobile-1",
    "button-text": "Voli",
    "items": [
      {
        "id": "mobile-flights-filters-1",
        "name": "mobile-flights-filters-1",
        "text": "Tutti i risultati"
      },
      {
        "id": "mobile-flights-filters-2",
        "name": "mobile-flights-filters-2",
        "text": "Voli diretti"
      },
      {
        "id": "mobile-flights-filters-3",
        "name": "mobile-flights-filters-3",
        "text": "Voli con scalo"
      }
    ]
  },
  "price": {
    "id": "mobile-2",
    "button-text": "Prezzo",
    "tabby": {
      "name": "data-mobile-tabs-price",
      "tabs": [
        {
          "id": "mobile-price-andata",
          "name": "Andata",
          "isDefault": true
        },
        {
          "id": "mobile-price-ritorno",
          "name": "Ritorno"
        }
      ]
    },
    "slider-price-round": {
      "id": "slider-mobile-price-round",
      "modifier": "u-mt-space-48"
    },
    "slider-price-trip": {
      "id": "slider-mobile-price-trip",
      "modifier": "u-mt-space-48"
    }
  },
  "airport": {
    "id": "mobile-3",
    "button-text": "Aeroporto",
    "tabby": {
      "name": "data-mobile-tabs-airport",
      "tabs": [
        {
          "id": "mobile-airport-andata",
          "name": "Andata",
          "isDefault": true
        },
        {
          "id": "mobile-airport-ritorno",
          "name": "Ritorno"
        }
      ]
    },
    "round-items": [
      {
        "id": "mobile-round-airport-1",
        "name": "mobile-round-airport-1",
        "text": "Milano, Bergamo/Orio Al Serio [BGY] (ITALIA)"
      },
      {
        "id": "mobile-round-airport-2",
        "name": "mobile-round-airport-2",
        "text": "Milano, Linate [LIN] (ITALIA)"
      },
      {
        "id": "mobile-round-airport-3",
        "name": "mobile-round-airport-3",
        "text": "Milano, Malpensa [MXP] (ITALIA)"
      },
      {
        "id": "mobile-round-airport-4",
        "name": "mobile-round-airport-4",
        "text": "Milano, Tutti gli aeroporti [MIL] (ITALIA)"
      }
    ],
    "trip-items": [
      {
        "id": "mobile-trip-airport-1",
        "name": "mobile-trip-airport-1",
        "text": "Roma, Fiumicino [FCO] (ITALIA)"
      },
      {
        "id": "mobile-trip-airport-2",
        "name": "mobile-trip-airport-2",
        "text": "Roma, Ciampino [CIA] (ITALIA)"
      },
      {
        "id": "mobile-trip-airport-3",
        "name": "mobile-trip-airport-3",
        "text": "Roma, Tutti gli aeroporti [ROM] (ITALIA)"
      }
    ]
  },
  "time": {
    "id": "mobile-4",
    "button-text": "Orario",
    "tabby": {
      "name": "data-mobile-tabs-time",
      "tabs": [
        {
          "id": "mobile-time-andata",
          "name": "Andata",
          "isDefault": true
        },
        {
          "id": "mobile-time-ritorno",
          "name": "Ritorno"
        }
      ]
    },
    "slider-time-departure-round": {
      "id": "slider-mobile-time-departure-round",
      "value": {
        "label": "Partenza",
        "left-nr-id": "slider-mobile-time-departure-round-left-val",
        "right-nr-id": "slider-mobile-time-departure-round-right-val"
      }
    },
    "slider-time-arrival-round": {
      "id": "slider-mobile-time-arrival-round",
      "value": {
        "label": "Arrivo",
        "left-nr-id": "slider-mobile-time-arrival-round-left-val",
        "right-nr-id": "slider-mobile-time-arrival-round-right-val"
      }
    },
    "slider-time-departure-trip": {
      "id": "slider-mobile-time-departure-trip",
      "value": {
        "label": "Partenza",
        "left-nr-id": "slider-mobile-time-departure-trip-left-val",
        "right-nr-id": "slider-mobile-time-departure-trip-right-val"
      }
    },
    "slider-time-arrival-trip": {
      "id": "slider-mobile-time-arrival-trip",
      "value": {
        "label": "Arrivo",
        "left-nr-id": "slider-mobile-time-arrival-trip-left-val",
        "right-nr-id": "slider-mobile-time-arrival-trip-right-val"
      }
    }
  },
  "airline-company": {
    "id": "mobile-5",
    "button-text": "Compagnia aerea",
    "items": [
      {
        "id": "mobile-airline-company-1",
        "name": "mobile-airline-company-1",
        "text": "Air France"
      },
      {
        "id": "mobile-airline-company-2",
        "name": "mobile-airline-company-2",
        "text": "Alitalia"
      },
      {
        "id": "mobile-airline-company-3",
        "name": "mobile-airline-company-3",
        "text": "Easyjet airline Co. Ltd"
      },
      {
        "id": "mobile-airline-company-4",
        "name": "mobile-airline-company-4",
        "text": "Kim Royal Dutch Airlines"
      }
    ]
  },
  "reset-filters-btn": {
    "modifier": "c-button--as-link",
    "type": "button",
    "text": "Azzera tutti i filtri"
  },
  "submit-button": {
    "type": "button",
    "text": "Applica filtri",
    "modifier": "c-button--submit"
  }
}
  • Content: 
    .c-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: remify(16px);
}

.c-filters__list {
  // display: flex;
  // flex-direction: column;
  gap: remify(16px);
  // max-width: remify(500px);
  // width: 100%;
  // margin-inline: auto;

  // @include min-screen(bp(tablet)) {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1;
    grid-template-columns: repeat(5, 1fr);
    max-width: initial;
    margin-inline: initial;
  // }
}

.c-filters__cta {
  text-align: center;

  @include min-screen(bp(tablet)) {
    margin-inline: auto;
  }

  // .c-button {
  //   @include max-screen(bp(tablet)) {
  //     width: 100%;
  //     max-width: remify(500px);
  //   }
  // }

}

.c-filters__reset {
  display: none;
}

/*------------------------------------*
  Modifier: stacked
*------------------------------------*/
.c-filters--stacked {
  display: flex;
  flex-direction: column;
  align-items: initial;
  max-width: remify(500px);
  margin-inline: auto;

  .c-filters__list {
    display: flex;
    flex-direction: column;
    gap: remify(16px);
    width: 100%;
    margin-inline: auto;
  }

  .c-dropdown-filter__content {
    position: relative;
  }

  .c-filters__cta {
    margin-inline: initial;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: remify(16px);
    margin-top: remify(32px);

    // @include max-screen(bp(tablet)) {
    //   position: fixed;
    //   bottom: remify(32px);
    //   width: 100%;
    //   left: 0;
    //   padding-inline: remify(24px);
    //   margin-top: 0;
    //   z-index: 100;
    // }
    
  }

  .c-filters__submit {
    @include min-screen(remify(450px)) {
      flex-basis: remify(250px);
    }

    .c-button {
      width: 100%;
    }
  }

  .c-filters__reset {
    display: block;
    
    .c-button {
      color: primary(night, 120);
      font-weight: fw(semibold);
      @include font-scale(level-1-5);
    }
    
  }

}
  • URL: /components/raw/filters/_filters.scss
  • Filesystem Path: src/views/03-organisms/filters/_filters.scss
  • Size: 2 KB

No notes defined.