The label and badge styles allow you to easily create and customize lightweight labels and badges on the fly. In the _label.scss file, you can find a couple of mixins that can be used to create your own labels and badges and style them the way you want.
Making a label or badge base
To make a new base style for a label or badge, use the make-lbl mixin.
Definition
make-lbl(
$lbl-name,
$lbl-bg-color,
$lbl-color,
$lbl-border-radius,
$lbl-padding,
$lbl-hide-on-empty)
Parameters
- $lbl-name : The class name of the labels/badges.
- $lbl-bg-color : The background color of the labels/badges.
- $lbl-color : The text color of the labels/badges.
- $lbl-border-radius : The border-radius of the labels/badges.
- $lbl-padding : The padding of the labels/badges.
- $lbl-hide-on-empty : Style of the label/badges when empty. [1]
Notes:
- [1] : The values that $lbl-hide-on-empty can take are
hide or show. The inside condition only checks if the value is hide and acts accordingly. Invalid values are treated as show.
Adding custom styles
To add a new custom style class, use the make-lbl-style mixin.
Definition
make-lbl-style(
$lbl-name,
$lbl-style-name,
$lbl-style-color,
$lbl-style-bg-color)
Parameters
- $lbl-name : The class name of the labels/badges. [1]
- $lbl-style-name : The class name of the labels/badges style.
- $lbl-style-color : The text color of the labels/badges style.
- $lbl-style-bg-color : The background color of the labels/badges style.
Notes:
- [1] : The value of $lbl-name must be the same as the value specified when using
make-lbl, otherwise the specified style will not work correctly.
- There are no styles provided for
:hover, :active or :focus, users can add these on their own.
- There is neither custom styling to fit different parent containers (colored buttons etc) nor specific styles to play well with hyperlinks, in order to keep this module as small as possible. These can be manually added.