<span class="status--{{ state }}">{{ text }}</span>
<!-- Error -->
<span class="status--error">Text for error state</span>
<!-- Warning -->
<span class="status--warning">Text for warning state</span>
<!-- Success -->
<span class="status--success">Text for success state</span>
/* Error */
{
"state": "error",
"text": "Text for error state"
}
/* Warning */
{
"state": "warning",
"text": "Text for warning state"
}
/* Success */
{
"state": "success",
"text": "Text for success state"
}
@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');
}
}