Aeroporto di Bologna - Design System

Rounded label 

<!-- Default -->
<span class="c-rounded-label " aria-label="">

    Text here
</span>


<!-- Grey -->
<span class="c-rounded-label c-rounded-label--grey" aria-label="">

    Grey <strong>label</strong>
</span>


<!-- Positive -->
<span class="c-rounded-label c-rounded-label--positive" aria-label="">

    Positive label
</span>


<!-- Negative -->
<span class="c-rounded-label c-rounded-label--negative" aria-label="">

    Negative label
</span>


<!-- Dark -->
<span class="c-rounded-label c-rounded-label--dark" aria-label="">

    Dark label
</span>


<!-- Relevant -->
<span class="c-rounded-label c-rounded-label--relevant" aria-label="">
    <svg class="c-icon c-icon--24">
        <use xlink:href="#ic-star-new-black-18px"></use>
    </svg>
    Relevant label
</span>


<!-- Sky -->
<span class="c-rounded-label c-rounded-label--sky" aria-label="">

    Rounded label
</span>


<!-- Small -->
<span class="c-rounded-label c-rounded-label--dark c-rounded-label--small" aria-label="">

    Small label
</span>


<span class="c-rounded-label {{ modifier }}" aria-label="{{ aria-label }}">
  {{#if svg}}{{> @icon symbol=svg.symbol  class=svg.class  }}{{/if}}
  {{{ text }}}
</span>
 
/* Default */
{
  "text": "Text here"
}


/* Grey */
{
  "text": "Grey <strong>label</strong>",
  "modifier": "c-rounded-label--grey"
}


/* Positive */
{
  "text": "Positive label",
  "modifier": "c-rounded-label--positive"
}


/* Negative */
{
  "text": "Negative label",
  "modifier": "c-rounded-label--negative"
}


/* Dark */
{
  "text": "Dark label",
  "modifier": "c-rounded-label--dark"
}


/* Relevant */
{
  "text": "Relevant label",
  "modifier": "c-rounded-label--relevant",
  "svg": {
    "symbol": "ic-star-new-black-18px",
    "class": "c-icon c-icon--24"
  }
}


/* Sky */
{
  "text": "Rounded label",
  "modifier": "c-rounded-label--sky"
}


/* Small */
{
  "text": "Small label",
  "modifier": "c-rounded-label--dark c-rounded-label--small"
}
  • Content: 
    .c-rounded-label {
  display: inline-block;
  background-color: secondary(page, 100);
  border-radius: remify(24px);
  color: primary(night, 120);
  margin-right: remify(8px);
  padding: remify(4px) remify(16px);
  text-align: center;

  img {
    max-height: remify(25px);
  }

  .icon {
    display: none;
    @include min-screen(bp(phone-p)) {
      display: inline-block;
    }
  }

  .svg,
  svg {
    vertical-align: middle;
    display: inline-block;
    margin-right: remify(4px);
    fill: currentColor;
  }

  .c-product & {
    @include shadow(small);
    margin-top: 0;
    margin-right: 0remify(16px);  
    @include font-scale(level-1-5);

    @include min-screen(bp(phablet)) {
      margin-top: initial;
      margin-right: remify(16px);
    }
  }
  
  .c-product--compact & {
    @include shadow(small);
    margin-top: remify(16px);
    margin-right: 0;  

    @include min-screen(bp(phone-p)) {
      margin-right: remify(16px);
    }
  }

  .c-launch--showcase & {
    position: absolute;
    top: remify(16px);
  }

  .c-canvas--content-template & {
    font-weight: fw(bold);
    margin-bottom: remify(24px);
  }

  &:last-child,
  &.last {
    margin-right: 0;
  }

  .c-product__schedule & {
    margin-bottom: remify(24px);
  }

  // .c-form--outstanding & {
  //   background-color: #fff;
  // }

  p {
    @include resetFont();
    // padding: remify(8px) remify(16px);
  }

  .c-skyscreaper--extra & {
    z-index: 1;
    position: absolute;
    top: remify(-18px);
    left: remify(24px);
    @include shadow(small);
  }

  .c-retail & {
    z-index: 1;
    position: absolute;
    top: remify(16px);
    left: remify(16px);
    @include shadow(small);
    font-size: 12px;
  }

  .c-superhero--details & {
    margin-right: 0;
  }

}

.c-rounded-label--positive {
  font-weight: fw(bold);
  background-color: status(positive);
  color: #fff
}

.c-rounded-label--negative {
  font-weight: fw(bold);
  background-color: status(negative);
  color: #fff
}

.c-rounded-label--dark {
  font-weight: fw(bold);
  color: secondary(page, 100);
  background: primary(night, 100);
}

.c-rounded-label--relevant {
  font-weight: fw(bold);
  color: primary(night, 120);
  background: primary(sun, 80);
}

.c-rounded-label--sky {
  font-weight: fw(bold);
  color: white;
  background: primary(sky, 120);
}

.c-rounded-label--grey {
  background: primary(night, 20);
}

.c-rounded-label--stamp {

  .c-product & {
    background-color: primary(night, 80);
    color: #fff;
    text-transform: uppercase;
    font-size: 75%;
    position: absolute;
    left: 50%;
    top: remify(-12px);
    transform: translateX(-50%);

    // p {
      padding: remify(4px) remify(16px);
    // }

  }

}

.c-rounded-label--small {
  padding: remify(4px) remify(12px);
  @include font-scale(level-1);
}
  • URL: /components/raw/rounded-label/_rounded-label.scss
  • Filesystem Path: src/views/01-atoms/rounded-label/_rounded-label.scss
  • Size: 2.8 KB

No notes defined.