mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 12:00:36 +02:00
Code Issues Releases Wiki Activity
Page: Buttons
Pages
Base Buttons Carousel Collapse Documentation Extra utilities and experimental classes Flavors Forms Grid Home Labels and Badges Modals Navigation Navigation: Dropdown Progress Bars Spinners Tables Tabs Utilities and helper classes
Clone
1
Buttons
Angelos Chalaris edited this page 2016-08-23 16:46:19 +03:00
Table of Contents

The button styles allow you to easily create and customize lightweight buttons on the fly. In the _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.

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.