Aeroporto di Bologna - Design System

Chess 

<div class="c-chess ">
    <div class="c-chess__item ">
        <div class="c-pawn ">
            <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-bar" aria-hidden="true">
            <label class="c-pawn__label" for="chkbx-shop-bar">
                Bar & Ristoranti
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_expand_more_black_24px"></use>
                </svg> </label>
            <div class="c-pawn__content ">
                <ul class="c-icon-list" aria-label="Servizi disponibili in Bar &amp; Ristoranti">
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_free_breakfast_black_24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Bar</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_restaurant_menu_black_24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Ristoranti</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-more-horiz-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="c-chess__item ">
        <div class="c-pawn ">
            <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-shops" aria-hidden="true">
            <label class="c-pawn__label" for="chkbx-shop-shops">
                Negozi
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_expand_more_black_24px"></use>
                </svg> </label>
            <div class="c-pawn__content ">
                <ul class="c-icon-list" aria-label="Tipologie di negozi">
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-fashion-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Fashion & Style</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-shopping-black-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">General store</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-gift-25px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Duty free</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-more-horiz-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="c-chess__item ">
        <div class="c-pawn ">
            <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-services" aria-hidden="true">
            <label class="c-pawn__label" for="chkbx-shop-services">
                Servizi in aeroporto
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_expand_more_black_24px"></use>
                </svg> </label>
            <div class="c-pawn__content ">
                <ul class="c-icon-list" aria-label="Servizi disponibili in aeroporto">
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-deposito-bagagli-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Deposito bagagli</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-pharmacy-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Farmacia</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-bank-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Banca</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-more-horiz-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="c-chess__item ">
        <div class="c-pawn ">
            <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-vip" aria-hidden="true">
            <label class="c-pawn__label" for="chkbx-shop-vip">
                Lounge e servizi VIP
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_expand_more_black_24px"></use>
                </svg> </label>
            <div class="c-pawn__content ">
                <ul class="c-icon-list" aria-label="Servizi vip e lounge">
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_weekend_black_24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Vip Lounge</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-star-new-black-18px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Youfirst</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-people-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Area meeting</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-event-seat-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Eventi in Lounge</a></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="c-chess__item ">
        <div class="c-pawn ">
            <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-transport" aria-hidden="true">
            <label class="c-pawn__label" for="chkbx-shop-transport">
                Trasporti da/per
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_expand_more_black_24px"></use>
                </svg> </label>
            <div class="c-pawn__content ">
                <ul class="c-icon-list" aria-label="Trasporti da e per Aeroporto">
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_directions_car_black_24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">In auto</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_directions_bus_black_24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">In bus</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic_local_taxi_black_24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">In taxi</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-more-horiz-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="c-chess__item ">
        <div class="c-pawn ">
            <input class="c-pawn__toggle" type="checkbox" id="chkbx-shop-maps" aria-hidden="true">
            <label class="c-pawn__label" for="chkbx-shop-maps">
                Mappe
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic_expand_more_black_24px"></use>
                </svg> </label>
            <div class="c-pawn__content ">
                <ul class="c-icon-list" aria-label="Mappe Aeroporto">
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-map-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Piano terra</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-map-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Primo piano</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-map-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Parcheggi</a></span>
                    </li>
                    <li class="c-icon-list__item ">
                        <svg class="c-icon c-icon--24">
                            <use xlink:href="#ic-map-24px"></use>
                        </svg> <span class="c-icon-list__text"><a href="#">Servizi al PRM</a></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
<div class="c-chess {{ modifier }}">
  {{#each pawns }}
  <div class="c-chess__item {{ this.item_modifier }}">
    {{> @pawn }}
  </div>
  {{/each}}
</div>
 
{
  "pawns": [
    {
      "input-toggle": {
        "id": "chkbx-shop-bar",
        "label": "Bar & Ristoranti"
      },
      "list": {
        "items": [
          {
            "icon": "ic_free_breakfast_black_24px",
            "text": "<a href=\"#\">Bar</a>"
          },
          {
            "icon": "ic_restaurant_menu_black_24px",
            "text": "<a href=\"#\">Ristoranti</a>"
          },
          {
            "icon": "ic-more-horiz-24px",
            "text": "<a href=\"#\">Tutti</a>"
          }
        ],
        "aria-label": "Servizi disponibili in Bar & Ristoranti"
      }
    },
    {
      "input-toggle": {
        "id": "chkbx-shop-shops",
        "label": "Negozi"
      },
      "list": {
        "items": [
          {
            "icon": "ic-fashion-24px",
            "text": "<a href=\"#\">Fashion & Style</a>"
          },
          {
            "icon": "ic-shopping-black-24px",
            "text": "<a href=\"#\">General store</a>"
          },
          {
            "icon": "ic-gift-25px",
            "text": "<a href=\"#\">Duty free</a>"
          },
          {
            "icon": "ic-more-horiz-24px",
            "text": "<a href=\"#\">Tutti</a>"
          }
        ],
        "aria-label": "Tipologie di negozi"
      }
    },
    {
      "input-toggle": {
        "id": "chkbx-shop-services",
        "label": "Servizi in aeroporto"
      },
      "list": {
        "items": [
          {
            "icon": "ic-deposito-bagagli-24px",
            "text": "<a href=\"#\">Deposito bagagli</a>"
          },
          {
            "icon": "ic-pharmacy-24px",
            "text": "<a href=\"#\">Farmacia</a>"
          },
          {
            "icon": "ic-bank-24px",
            "text": "<a href=\"#\">Banca</a>"
          },
          {
            "icon": "ic-more-horiz-24px",
            "text": "<a href=\"#\">Tutti</a>"
          }
        ],
        "aria-label": "Servizi disponibili in aeroporto"
      }
    },
    {
      "input-toggle": {
        "id": "chkbx-shop-vip",
        "label": "Lounge e servizi VIP"
      },
      "list": {
        "items": [
          {
            "icon": "ic_weekend_black_24px",
            "text": "<a href=\"#\">Vip Lounge</a>"
          },
          {
            "icon": "ic-star-new-black-18px",
            "text": "<a href=\"#\">Youfirst</a>"
          },
          {
            "icon": "ic-people-24px",
            "text": "<a href=\"#\">Area meeting</a>"
          },
          {
            "icon": "ic-event-seat-24px",
            "text": "<a href=\"#\">Eventi in Lounge</a>"
          }
        ],
        "aria-label": "Servizi vip e lounge"
      }
    },
    {
      "input-toggle": {
        "id": "chkbx-shop-transport",
        "label": "Trasporti da/per"
      },
      "list": {
        "items": [
          {
            "icon": "ic_directions_car_black_24px",
            "text": "<a href=\"#\">In auto</a>"
          },
          {
            "icon": "ic_directions_bus_black_24px",
            "text": "<a href=\"#\">In bus</a>"
          },
          {
            "icon": "ic_local_taxi_black_24px",
            "text": "<a href=\"#\">In taxi</a>"
          },
          {
            "icon": "ic-more-horiz-24px",
            "text": "<a href=\"#\">Tutti</a>"
          }
        ],
        "aria-label": "Trasporti da e per Aeroporto"
      }
    },
    {
      "input-toggle": {
        "id": "chkbx-shop-maps",
        "label": "Mappe"
      },
      "list": {
        "items": [
          {
            "icon": "ic-map-24px",
            "text": "<a href=\"#\">Piano terra</a>"
          },
          {
            "icon": "ic-map-24px",
            "text": "<a href=\"#\">Primo piano</a>"
          },
          {
            "icon": "ic-map-24px",
            "text": "<a href=\"#\">Parcheggi</a>"
          },
          {
            "icon": "ic-map-24px",
            "text": "<a href=\"#\">Servizi al PRM</a>"
          }
        ],
        "aria-label": "Mappe Aeroporto"
      }
    }
  ]
}
  • Content: 
    .c-chess {
  display: flex;
  flex-wrap: wrap;
  max-width: 1064px;
  margin: 0 auto;
  position: relative;

  @supports (display: grid) {
    display: grid;
    grid-gap: remify(16px);
    grid-template-columns: 1fr;

    flex-wrap: initial;

    @include min-screen(bp(phablet)) {
      grid-template-columns: 1fr 1fr;
    }

    @include min-screen(bp(tablet-p)) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

}

.c-chess__item {
  background: #fff;
  flex: 1 1 100%;
  margin-bottom: remify(24px);
  @include shadow(higher);
  border-radius: remify(16px);
  padding: remify(16px);

  @supports (display: grid) {
    flex: initial;
    margin-bottom: initial;
  }

  @include min-screen(bp(phablet)) {
    flex: 1 1 remify(320px);
    margin-right: remify(16px);
    padding: remify(24px);

    @supports (display: grid) {
      flex: initial;
      margin-right: initial;
    }
  }

  @include min-screen(bp(tablet-p)) {
    padding: remify(32px);
  }

}

  .c-chess__item--adv {
    padding: remify(16px);
    // display: none;

    // @include min-screen(bp(phablet)) {
    //   display: block;
    // }

  }
  • URL: /components/raw/chess/_chess.scss
  • Filesystem Path: src/views/02-molecules/chess/_chess.scss
  • Size: 1.1 KB

No notes defined.