Aeroporto di Bologna - Design System

Status: Status delay 

<div class='c-status c-status--delay'>
    <div class='c-status__img'>
        <svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
            <g fill='none' fill-rule='evenodd'>
                <circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
                <g fill-rule='nonzero'>
                    <g transform='translate(11 28.96)'>
                        <path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
                        <rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
                        <rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
                        <rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
                        <path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
                    </g>
                    <g transform='translate(30.36 14)'>
                        <path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
                        <g fill='#fff'>
                            <path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
                            <path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
    </div>

    <div class='c-status__txt'>
        <strong>Presentati con ampio anticipo in aeroporto</strong>
        <small>Causa controlli aggiuntivi dovuti al Covid-19</small>
    </div>
</div>
 
{{! Check into NOTES tab for more info }}

<div class='c-status c-status--delay'>
  <div class='c-status__img'>
    <svg
      height='69'
      viewBox='0 0 69 69'
      width='69'
      xmlns='http://www.w3.org/2000/svg'
    >
      <g fill='none' fill-rule='evenodd'>
        <circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
        <g fill-rule='nonzero'>
          <g transform='translate(11 28.96)'>
            <path
              d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z'
              fill='#fecd05'
            ></path>
            <rect
              fill='#013860'
              height='7.907328'
              rx='.988416'
              width='7.248384'
              x='3.29472'
            ></rect>
            <rect
              fill='#013860'
              height='7.907328'
              rx='.988416'
              width='7.248384'
              x='3.29472'
              y='16.4736'
            ></rect>
            <rect
              fill='#2b72b0'
              height='12.519936'
              rx='2.306304'
              width='11.202048'
              x='1.317888'
              y='5.930496'
            ></rect>
            <path
              d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z'
              fill='#fff'
            ></path>
          </g>
          <g transform='translate(30.36 14)'>
            <path
              d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z'
              fill='#ff4a05'
            ></path>
            <g fill='#fff'>
              <path
                d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'
              ></path>
              <path
                d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'
              ></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>

  <div class='c-status__txt'>
    {{{primary-txt}}}
    {{{secondary-txt}}}
  </div>
</div>
 
{
  "svg-class": "one",
  "primary-txt": "<strong>Presentati con ampio anticipo in aeroporto</strong>",
  "secondary-txt": "<small>Causa controlli aggiuntivi dovuti al Covid-19</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(16px) remify(8px) remify(8px);

  .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
    stroke-width: 30;
    background-color: #fff;
    border-radius: 50%;
    padding: remify(4px);

    path {
      stroke: #ccc;
    }

  }

  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: status(warning);
    }
  }

  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%);
    color: secondary(text, 100);

    p {
      font-size: 75%;
    }

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

  }

}

.c-status__txt {
  margin-left: remify(16px);
  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: 1.9 KB

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