A label is used to label content with a corresponding icon. For example a teaser.
<span class="label {{ type }}"><i class="{{ icon }}"></i>{{ label }}</span>
<!-- Default -->
<span class="label "><i class="icon-tag"></i>Label name</span>
<!-- Label Success -->
<span class="label success"><i class="icon-tag"></i>Label name</span>
<!-- Label Warning -->
<span class="label warning"><i class="icon-tag"></i>Label name</span>
<!-- Label Error -->
<span class="label error"><i class="icon-tag"></i>Label name</span>
/* Default */
{
"label": "Label name",
"type": "",
"icon": "icon-tag"
}
/* Label Success */
{
"label": "Label name",
"type": "success",
"icon": "icon-tag"
}
/* Label Warning */
{
"label": "Label name",
"type": "warning",
"icon": "icon-tag"
}
/* Label Error */
{
"label": "Label name",
"type": "error",
"icon": "icon-tag"
}
.label {
@include theme('background-color', 'color-none', 'label-background-color');
@include small-text();
display: inline-flex;
align-items: center;
justify-content: space-between;
height: 30px;
padding: 0 10px;
border: 1px solid color('gray');
text-decoration: none;
&.success {
@include theme('color', 'color-success', 'label-color-success');
@include theme('border-color', 'color-success', 'label-color-success');
@include theme('background-color', 'color-success-light', 'label-background-color-success');
}
&.warning {
@include theme('color', 'color-warning', 'label-color-warning');
@include theme('border-color', 'color-warning', 'label-color-warning');
@include theme('background-color', 'color-warning-light', 'label-background-color-warning');
}
&.error {
@include theme('color', 'color-error', 'label-color-error');
@include theme('border-color', 'color-error', 'label-color-error');
@include theme('background-color', 'color-error-light', 'label-background-color-error');
}
i {
display: flex;
margin-right: 5px;
font-size: .8rem;
&::before {
font-size: .8rem;
}
}
}