mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-12 17:03:57 +02:00
Created Buttons (markdown)
100
Buttons.md
Normal file
100
Buttons.md
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
The button styles allow you to easily create and customize lightweight buttons on the fly. In the [_button.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini/_button.scss) file, you can find multiple **mixins** that can be used to create your own buttons and style them the way you want.
|
||||||
|
|
||||||
|
## Making a button base
|
||||||
|
|
||||||
|
To make a new base style for all buttons, use the `make-btn` **mixin**.
|
||||||
|
|
||||||
|
### Definition
|
||||||
|
|
||||||
|
make-btn(
|
||||||
|
$btn-name,
|
||||||
|
$btn-border,
|
||||||
|
$btn-border-radius,
|
||||||
|
$btn-margin,
|
||||||
|
$btn-padding,
|
||||||
|
$btn-color,
|
||||||
|
$btn-bg-color,
|
||||||
|
$btn-hover-style,
|
||||||
|
$btn-hover-style-percentage,
|
||||||
|
$btn-cursor,
|
||||||
|
$btn-disabled-cursor,
|
||||||
|
$btn-disabled-opacity)
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
- $btn-name : The class name of the buttons.
|
||||||
|
- $btn-border : The border of the buttons.
|
||||||
|
- $btn-border-radius : The border-radius of the buttons.
|
||||||
|
- $btn-margin : The margin of the buttons.
|
||||||
|
- $btn-padding : The padding of the buttons.
|
||||||
|
- $btn-color : The text color of the buttons.
|
||||||
|
- $btn-bg-color : The background color of the buttons.
|
||||||
|
- $btn-hover-style : Hover/active/focus style of the buttons. [1]
|
||||||
|
- $btn-hover-style-percentage : Hover/active/focus style of the buttons percentage modifier.
|
||||||
|
- $btn-cursor : The cursor style when hovering over the buttons.
|
||||||
|
- $btn-disabled-cursor : The cursor style when hovering over the buttons whie disabled.
|
||||||
|
- $btn-disabled-opacity : The opacity of the buttons when disabled.
|
||||||
|
|
||||||
|
**Notes:**
|
||||||
|
|
||||||
|
- [1] : The values that $btn-hover-style can take are `lighten` and `darken`. The inside condition only checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
||||||
|
- [2] : This only creates a basic button style. For more styles use `make-btn-style`.
|
||||||
|
|
||||||
|
## Adding custom styles
|
||||||
|
|
||||||
|
To add a new custom style class, use the `make-btn-style` **mixin**.
|
||||||
|
|
||||||
|
### Definition
|
||||||
|
|
||||||
|
make-btn-style(
|
||||||
|
$btn-name,
|
||||||
|
$btn-style-name,
|
||||||
|
$btn-style-color,
|
||||||
|
$btn-style-bg-color,
|
||||||
|
$btn-style-hover-style: lighten,
|
||||||
|
$btn-style-hover-style-percentage: 7.5%)
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
- $btn-name : The class name of the buttons. [1]
|
||||||
|
- $btn-style-name : The class name of the button style.
|
||||||
|
- $btn-style-color : The text color of the button style.
|
||||||
|
- $btn-style-bg-color : The background color of the button style.
|
||||||
|
- $btn-style-hover-style : Hover/active/focus style of the button style. [2][3]
|
||||||
|
- $btn-style-hover-style-percentage : Hover/active/focus style of the button style percentage modifier.[3]
|
||||||
|
|
||||||
|
**Notes:**
|
||||||
|
|
||||||
|
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise the specified style will not work correctly.
|
||||||
|
- [2] : The values that $btn-style-hover-style can take are `lighten` and `darken`. The inside condition only checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
||||||
|
- [3] : The values of $btn-style-hover-style and $btn-style-hover-style-percentage default to `lighten` and `7.5%` if not specified.
|
||||||
|
- [4] : This mixin should be used in combination with `make-btn` and is suggested that you use it after `make-btn`.
|
||||||
|
|
||||||
|
## Adding custom sizes
|
||||||
|
|
||||||
|
To add a new custom size class, use the `make-btn-size` **mixin**.
|
||||||
|
|
||||||
|
### Definition
|
||||||
|
|
||||||
|
make-btn-size(
|
||||||
|
$btn-name,
|
||||||
|
$btn-size-name,
|
||||||
|
$btn-size-padding,
|
||||||
|
$btn-size-font-size)
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
- $btn-name : The class name of the buttons. [1]
|
||||||
|
- $btn-size-name : The class name of the button size.
|
||||||
|
- $btn-size-padding : The padding of the button size.
|
||||||
|
- $btn-size-font-size : The font-size of the button size.
|
||||||
|
|
||||||
|
**Notes:**
|
||||||
|
|
||||||
|
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise the specified style will not work correctly.
|
||||||
|
- [2] : This mixin should be used in combination with `make-btn` and is suggested that you use it after `make-btn`.
|
||||||
|
|
||||||
|
## Remarks
|
||||||
|
|
||||||
|
- After creting a base button style with `make-btn`, multiple sizes and styles can be defined using the other two mixins.
|
||||||
|
- Please exercise caution when naming style classes, especially if the names are the names of web-safe colors. For example if you want to create the `.btn.blue` class, pass the name *blue* in quotation marks like `'blue'` to avoid automatic conversion.
|
||||||
|
- The included mixin `btn-variant` is used internally for the creation of styled buttons. Please avoid using this mixin directly and use `make-btn-style` instead.
|
Reference in New Issue
Block a user