mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-12 08:53:59 +02:00
Created Labels and Badges (markdown)
51
Labels-and-Badges.md
Normal file
51
Labels-and-Badges.md
Normal file
@@ -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.
|
Reference in New Issue
Block a user