Aeroporto di Bologna - Design System

Status 

<div class='c-status'>

    <div class='c-status__txt'>
        <strong>Attesa ai controlli di sicurezza</strong>
        <small>Stima indicativa - Ultimo aggiornamento 14:30</small>
    </div>

    <div class='c-status__img'>
        <svg viewBox="0 0 320 320" class="one" role="presentation">
            <path d="M 290 160 A 130 130 0 0 0 182.57426309670095 31.97499210841295"></path>
            <path d="M 160 290 A 130 130 0 0 0 288.02500789158705 182.57426309670095"></path>
            <path d="M 30 160.00000000000003 A 130 130 0 0 0 137.42573690329905 288.02500789158705"></path>
            <path d="M 159.99999999999997 30 A 130 130 0 0 0 31.97499210841295 137.42573690329903"></path>
        </svg>
        <div class='waiting-time'>
            <p>Fino a</p><strong aria-hidden='true'>10 Min.</strong><time class='u-visuallyhidden'>10 Minuti</time>
        </div>
    </div>
</div>
 
<div class='c-status'>
  
  <div class='c-status__txt'>
    {{{primary-txt}}}
    {{{secondary-txt}}}
  </div>

  <div class='c-status__img'>
    <svg viewBox="0 0 320 320" class="{{{svg-class}}}" role="presentation">
      <path d="M 290 160 A 130 130 0 0 0 182.57426309670095 31.97499210841295"></path>
      <path d="M 160 290 A 130 130 0 0 0 288.02500789158705 182.57426309670095"></path>
      <path d="M 30 160.00000000000003 A 130 130 0 0 0 137.42573690329905 288.02500789158705"></path>
      <path d="M 159.99999999999997 30 A 130 130 0 0 0 31.97499210841295 137.42573690329903"></path>
    </svg>
    <div class='waiting-time'>
      {{{ waiting-time-text }}}
    </div>
  </div>
</div>
 
{
  "secondary-txt": "<small>Stima indicativa - Ultimo aggiornamento 14:30</small>"
}
  • Content: 
    $status-svg-size: 76px;

.c-status {
  display: inline-flex;
  align-items: center;
  @include shadow(medium);
  border-radius: remify(50px);
  padding: remify(8px) remify(8px) remify(8px) remify(16px);
  gap: remify(16px);

  .c-billboard__label & {
    box-shadow: none;
    padding: 0;
  }

  &:not(.c-status--delay) svg {
    width: remify($status-svg-size);
    height: remify($status-svg-size); // For IE
    background-color: #fff;
    border-radius: 50%;
    padding: remify(1px);
    // transform: scale(1.2);

    path {
      stroke: #ccc;
      stroke-width: 20;
      fill: none;
    }

  }

  svg.one {
    path:nth-child(n+1):nth-child(-n+1) {
      stroke: status(positive);
    }
  }

  svg.two {
    path:nth-child(n+1):nth-child(-n+2) {
      stroke: primary(sun, 100);
    }
  }

  svg.three {
    path:nth-child(n+1):nth-child(-n+3) {
      stroke: status(warning);
    }
  }

  svg.four {
    path:nth-child(n+1):nth-child(-n+4) {
      stroke: status(negative);
    }
  }

  svg.five {
    path:nth-child(n+1):nth-child(-n+5) {
      stroke: status(negative);
    }
  }

}

.c-status__img {
  position: relative;
  max-height: remify($status-svg-size);

  // .c-billboard__label & {
  //   order: 2;
  // }

  .waiting-time {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    // transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) scale(0.9);
    color: secondary(text, 100);

    p {
      font-size: 75%;
    }

    strong {
      font-size: 85%;
      display: block;
      line-height: remify(16px);
    }

  }

}

.c-status__txt {
  color: primary(night, 100);

  .c-status--delay & {
    text-align: left;
  }

  .c-billboard__label & {
    color: currentColor;
    // margin-right: remify(16px);
    // margin-left: 0;
    // order: 1;
    text-align: right;
  }

  &>* {
    display: block;
  }

  strong {
    font-size: 75%;

    @include min-screen(bp(phone-p)) {
      font-size: 90%;
    }

  }

}
  • URL: /components/raw/status/_status.scss
  • Filesystem Path: src/views/01-atoms/status/_status.scss
  • Size: 2 KB

To change the color of the stroke, you can use the following classes on the svg element: .one, .two, .three, .four, .five