City of Ghent Style Guide

Status

<span class="status--{{ state }}">{{ text }}</span>
<span class="status--success">Text for success state</span>
{
  "state": "success",
  "text": "Text for success state"
}
  • Content:
    @mixin status {
      &::before {
        display: inline-block;
        width: 1.2rem;
        height: 1.2rem;
        margin-right: .4rem;
        border-radius: 50%;
        content: '';
        vertical-align: middle;
      }
    }
    
    .status--warning {
      @include status;
    
      &::before {
        background-color: color('yellow');
      }
    }
    
    .status--success {
      @include status;
    
      &::before {
        background-color: color('green');
      }
    }
    
    .status--error {
      @include status;
    
      &::before {
        background-color: color('red');
      }
    }
    
  • URL: /components/raw/status/_status.scss
  • Filesystem Path: components/21-atoms/status/_status.scss
  • Size: 487 Bytes