diff --git a/Buttons.md b/Buttons.md new file mode 100644 index 0000000..b3e7ebf --- /dev/null +++ b/Buttons.md @@ -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. \ No newline at end of file