Status
A status has 5 different styles:
Not started
In-progress
Coming due
Past due
Completed
<span class="status">Not started</span>
<span class="status -primary">In-progress</span>
<span class="status -warning">Coming due</span>
<span class="status -danger">Past due</span>
<span class="status -success">Completed</span>
Related mixin
@mixin status-variant($background-color, $text-color) {
color: $text-color;
&::before {
background-color: $background-color;
}
}
Example
Usage:
.element {
@include status-variant($primary-color, $primary-color-dark-20);
}
CSS Output:
.element {
color: #1077bc;
}
.element::before {
background-color: #1e99eb;
}