Aeroporto di Bologna - Design System

Chip: Filter 

<div class="c-chip c-chip--filter ">
    <span>Milano Linate [LIN]</span>
    <button class="c-chip__button"><svg class="c-icon c-icon--18">
            <use xlink:href="#ic_close_black_24px"></use>
        </svg></button>
</div>
 
<div class="c-chip c-chip--filter {{ modifier }}">
  <span>{{ text }}</span>
  <button class="c-chip__button">{{> @icon chip-icon }}</button>
</div>
 
{
  "chip-icon": {
    "class": "c-icon c-icon--18",
    "symbol": "ic_close_black_24px"
  },
  "text": "Milano Linate [LIN]"
}
  • Content: 
    .c-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: primary(night, 60);
  border-radius: remify(14px);
  padding: remify(5px) remify(12px) remify(5px) remify(8px);
  width: max-content;
  
  span {
    color: secondary(page, 100);
    font-size: remify(12px);
  }
  
  svg {
    fill: secondary(page, 100);
    margin-right: remify(12px);
  }
  
  a {
    color: secondary(page, 100);    
    font-size: remify(12px);
    text-decoration: none;
  }
  
  .c-airport-map__chip-list & {
    margin: remify(6px) remify(6px);
    padding: remify(8px) remify(16px);
    border-radius: remify(20px);
    background-color: primary(sky, 120);
    font-weight: fw(bold);
  }

  .c-airport-map__detail--mobile & {
    position: absolute;
    top: remify(-20px);
    min-width: remify(140px);
  }

  &.is-selected {
    background-color: primary(night, 100);
  }

}

/*------------------------------------*
  Modifier: c-chip--filter
*------------------------------------*/
.c-chip--filter {
  background-color: primary(sky, 20);
  color: secondary(text, 100);
  padding: remify(2px) remify(12px);
  border-radius: remify(48px);
  border: remify(1px) solid primary(sky, 40);

  span {
    color: currentColor;
    @include font-scale(level-1-5);
    font-weight: fw(semibold);
  }

  svg {
    margin-right: 0;
    fill: secondary(text, 100);
    vertical-align: middle;
  }

  .c-chip__button {
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: transparent;
    margin-left: remify(16px);
  }

}
  • URL: /components/raw/chip/_chip.scss
  • Filesystem Path: src/views/02-molecules/chip/_chip.scss
  • Size: 1.6 KB

No notes defined.