Aeroporto di Bologna - Design System

Icon list 

<ul class="c-icon-list" aria-label="Servizi disponibili">
    <li class="c-icon-list__item ">
        <svg class="c-icon c-icon--24">
            <use xlink:href="#ic-covered-parking-black-24px"></use>
        </svg> <span class="c-icon-list__text">Coperto</span>
    </li>
    <li class="c-icon-list__item c-icon-list__item--disabled">
        <svg class="c-icon c-icon--24">
            <use xlink:href="#ic-accessible-black-24px"></use>
        </svg> <span class="c-icon-list__text">Posti riservati</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">Fronte aerostazione</span>
    </li>
    <li class="c-icon-list__item ">
        <svg class="c-icon c-icon--24">
            <use xlink:href="#ic_directions_walk_black_24px"></use>
        </svg> <span class="c-icon-list__text">1 min. a piedi</span>
    </li>
</ul>
 
<ul class="c-icon-list{{#if modifier}} {{ modifier }}{{/if}}" aria-label="{{ aria-label }}">
  {{#each items}}
    <li class="c-icon-list__item {{ modifier }}">
      {{#if this.icon}}{{> @icon symbol=this.icon  class="c-icon c-icon--24"}}{{/if}} <span class="c-icon-list__text">{{{ this.text }}}</span>
    </li>
  {{/each}}
</ul>
 
{
  "items": [
    {
      "icon": "ic-covered-parking-black-24px",
      "text": "Coperto"
    },
    {
      "icon": "ic-accessible-black-24px",
      "text": "Posti riservati",
      "modifier": "c-icon-list__item--disabled"
    },
    {
      "icon": "ic_place_black_24px",
      "text": "Fronte aerostazione"
    },
    {
      "icon": "ic_directions_walk_black_24px",
      "text": "1 min. a piedi"
    }
  ],
  "aria-label": "Servizi disponibili"
}
  • Content: 
    .c-icon-list {

  li {
    font-size: 75%;
    padding-left: initial;
    margin-bottom: initial;
    position: relative;
    display: flex;
    align-items: center;

    &:before {
      content: '';
    }

    .c-skyscreaper & {
      font-size: 100%;
      margin-bottom: remify(12px);
    }

    // .c-route & {
    //   display: inline;
    //   margin-right: remify(6px);

    //   @include min-screen(bp(tablet-p)) {
    //     display: block;
    //     margin-right: 0;
    //   }

    // }
    
    .c-route--compact & {
      font-size: 100%;
    }

    .c-pawn & {
      font-size: 100%;
      margin-bottom: remify(8px);

      &:last-child {
        margin-bottom: 0;
      }

    }

  }

  li + li {
    margin-top: remify(8px);
  }

  svg {
    position: relative;
    // top: remify(6px);
    margin-right: remify(8px);
    flex-shrink: 0;

    * {
      fill: primary(night, 100);
      
      .c-pawn & {
        fill: currentColor;
      }
    }

  }

  .c-addon--benefit & {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    & > * {
      flex: 1 0 auto;
      color: primary(night, 40);
      margin-bottom: remify(4px);
      margin-right: remify(4px);

      &:last-child {
        margin-bottom: 0;
        margin-right: 0;
      }

    }

    li {
      @include min-screen ( bp(tablet-p) ) {
        font-size: 100%;
      }
    }

    svg * {
      fill: primary(night, 40);
    }

  }

  .c-tablist--flights-list & {
    margin-top: remify(32px);
    text-align: center;

    @include min-screen ( bp(tablet-p) ) {
      text-align: initial;
      margin-top: initial;
    }
  }

  .c-flight-product & {
    display: flex;
    gap: 0 remify(16px);

    li + li {
      margin-top: 0;
    }
    
    @include min-screen ( bp(tablet-p) ) {
      display: block;
    }
  }

}

/*------------------------------------*
    Disabled modifier
*------------------------------------*/

.c-icon-list__item--disabled {
  opacity: 0.4;
}

/*------------------------------------*\
  Horizontal modifier
\*------------------------------------*/
.c-icon-list--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: remify(8px) remify(16px);

  li + li {
    margin-top: 0;
  }

}
  • URL: /components/raw/icon-list/_icon-list.scss
  • Filesystem Path: src/views/02-molecules/icon-list/_icon-list.scss
  • Size: 2.2 KB

No notes defined.