Aeroporto di Bologna - Design System

Pawn 

<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_place_black_24px"></use>
                </svg> <span class="c-icon-list__text"><a href="#">Tutti</a></span>
            </li>
        </ul>
    </div>
</div>
 
<div class="c-pawn {{ modifier }}">
  {{#if input-toggle}}
    <input class="c-pawn__toggle" type="checkbox" id="{{input-toggle.id}}" aria-hidden="true">
    <label class="c-pawn__label" for="{{ input-toggle.id }}">
      {{{ input-toggle.label }}}
      {{> @icon class="c-icon c-icon--24" symbol="ic_expand_more_black_24px" }}
    </label>
  {{/if}}
  <div class="c-pawn__content {{ pawn-content-modifier }}">
    {{#if list}}
      {{> @icon-list list }}
    {{else}}
      {{{ whatever }}}
    {{/if}}
  </div>
</div>
 
{
  "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_place_black_24px",
        "text": "<a href=\"#\">Tutti</a>"
      }
    ],
    "aria-label": "Servizi disponibili in Bar & Ristoranti"
  }
}
  • Content: 
    .c-pawn {
  background-color: #fff;

  .c-chess & {
    background-color: transparent;
  }

}

.c-pawn__toggle {
  display: none;
}

.c-pawn__label {
  color: primary(night, 100);
  font-size: 125%;
  line-height: 1.4;
  font-weight: fw(light);
  display: flex;
  justify-content: space-between;
  
  @include min-screen(bp(phablet)) {
    font-size: 150%;
    line-height: 1.333;
  }

  svg {
    * {
      fill: primary(sky, 120);
    }

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

  }

}

.c-pawn__content {
  color: primary(sky, 120);

  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  width: 1px; 
  margin: -1px; 
  padding: 0; 
  border: 0;

  @include min-screen(bp(phablet)) {
    position: relative; 
    overflow: auto; 
    clip: unset; 
    height: auto; 
    width: auto; 
    margin: 0; 
    padding: 0; 
    border: 0;
    padding-top: remify(16px);
  }

  .c-chess__item--adv & {
    padding-top: 0;
  }

}

.c-pawn__content img {
  display: block;
  margin: 0 auto;
}

.c-pawn__toggle:checked ~ .c-pawn__content,
.c-pawn__content--visible {
  position: relative; 
  overflow: auto; 
  clip: unset; 
  height: auto; 
  width: auto; 
  margin: 0; 
  padding: 0;
  border: 0;
  padding-top: remify(8px);

  @include min-screen(bp(phablet)) {
    padding-top: remify(16px);
  }

}

.c-pawn__toggle:checked ~ .c-pawn__label svg {
  transform: rotate(180deg);
}
  • URL: /components/raw/pawn/_pawn.scss
  • Filesystem Path: src/views/02-molecules/pawn/_pawn.scss
  • Size: 1.4 KB

No notes defined.