diff --git a/Labels-and-Badges.md b/Labels-and-Badges.md new file mode 100644 index 0000000..024a316 --- /dev/null +++ b/Labels-and-Badges.md @@ -0,0 +1,51 @@ +The label and badge styles allow you to easily create and customize lightweight labels and badges on the fly. In the [_label.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini-extra/_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. \ No newline at end of file