Direction of button background gradient (if there is any)
//
//
//
Button default state
//
//
//
@_button-color
//
@button__color
//
@primary__color
//
'' | false | value
//
Button text color
//
//
//
@_button-background
//
@button__background
//
#f2f2f2
//
'' | false | value
//
Button background
//
//
//
@_button-border
//
@button__border
//
1px solid #cdcdcd
//
'' | false | value
//
Button border
//
//
//
@_button-gradient-color-start
//
@button__gradient-color-start
//
false
//
'' | false | value
//
Gradient background start color
//
//
//
@_button-gradient-color-end
//
@button__gradient-color-end
//
false
//
'' | false | value
//
Gradient background end color
//
//
//
Button hover state
//
//
//
@_button-color-hover
//
@button__hover__color
//
#555
//
'' | false | value
//
Hovered button text color
//
//
//
@_button-background-hover
//
@button__hover__background
//
#e2e2e2
//
'' | false | value
//
Hovered button background
//
//
//
@_button-border-hover
//
@button__hover__border
//
@button__border
//
'' | false | value
//
Hovered button border
//
//
//
@_button-gradient-color-start-hover
//
@button__hover__gradient-color-start
//
false
//
'' | false | value
//
Hovered button gradient background start color
//
//
//
@_button-gradient-color-end-hover
//
@button__hover__gradient-color-end
//
false
//
'' | false | value
//
Hovered button gradient background end color
//
//
//
Button active state
//
//
//
@_button-color-active
//
@button__active__color
//
@button__color
//
'' | false | value
//
Active button text color
//
//
//
@_button-background-active
//
@button__active__background
//
@button__hover__background
//
'' | false | value
//
Active button background
//
//
//
@_button-border-active
//
@button__active__border
//
@button__border
//
'' | false | value
//
Active button border
//
//
//
@_button-gradient-color-start-active
//
@button__active__gradient-color-start
//
false
//
'' | false | value
//
Active button gradient background start color
//
//
//
@_button-gradient-color-end-active
//
@button__active__gradient-color-end
//
false
//
'' | false | value
//
Active button gradient background end color
//
//
//
Button with icon
//
//
//
@_button-icon-use
//
@button-icon__use
//
false
//
'' | false | true
//
Button has an icon
//
//
//
@_button-font-content
//
@button-icon__content
//
@icon-settings
//
'' | false | value
//
Button icon symbol
//
//
//
@_button-icon-font
//
@button-icon__font
//
@icon-font
//
'' | false | value
//
Button icon font
//
//
//
@_button-icon-font-size
//
@button-icon__font-size
//
22px
//
'' | false | value
//
Button icon font size
//
//
//
@_button-icon-font-line-height
//
@button-icon__line-height
//
@button-icon__font-size
//
'' | false | value
//
Button icon line height
//
//
//
@_button-icon-font-color
//
@button-icon__color
//
inherit
//
'' | false | value
//
Button icon color
//
//
//
@_button-icon-font-color-hover
//
@button-icon__hover__font-color
//
inherit
//
'' | false | value
//
Hovered button icon color
//
//
//
@_button-icon-font-color-active
//
@button-icon__active__font-color
//
inherit
//
'' | false | value
//
Active button icon color
//
//
//
@_button-icon-font-margin
//
@button-icon__margin
//
0
//
'' | false | value
//
Button icon margin
//
//
//
@_button-icon-font-vertical-align
//
@button-icon__vertical-align
//
top
//
'' | false | value
//
Button icon vertical align
//
//
//
@_button-icon-font-position
//
@button-icon__position
//
@icon__position
//
'' | false | before | after
//
Button icon font position
//
//
//
@_button-icon-font-text-hide
//
@button-icon__text-hide
//
false
//
'' | false | true
//
Button icon text hide
//
//
//
//
// # Button as an icon
//
// To make a button look like an icon you need to:
//
// enable icon:
// ```css
// @_button-icon-use: true
// ```
// set the font icon code:
// ```css
// @_button-font-content: @icon-cart
// ```
// hide button text:
// ```css
// @_button-icon-font-text-hide: true
// ```
//
// ```html
//
//
//
// ```
//
.example-button-10 {
.lib-button(
@_button-margin: 3px,
@_button-icon-use: true,
@_button-font-content: @icon-cart,
@_button-icon-font-text-hide: true
);
.lib-button-reset();
}
// # Button with an icon on the left or right side of the text
//
// @_button-icon-font-position variable is used to set up the icon position
//
// Use before to set up button icon position on the left:
// ```css
// @_button-icon-font-position: before
// ```
//
// ```html
//
//
//
//
// ```
// Use after to set up button icon position on the right:
// ```css
// @_button-icon-font-position: after
// ```
// ```html
//
//
//
//
// ```
//
.example-button-11 {
.lib-button(
@_button-margin: 3px,
@_button-icon-use: true,
@_button-font-content: @icon-cart,
@_button-icon-font-position: before
);
}
.example-button-12 {
.lib-button(
@_button-margin: 3px,
@_button-icon-use: true,
@_button-font-content: @icon-cart,
@_button-icon-font-position: after
);
}
// # Button with fixed width
//
// To get a fixed width button, you need to set:
// ```css
// @_button-width: 100px
// ```
//
// ```html
//
//
//
//
// ```
//
.example-button-13 {
.lib-button(@_button-width: 100px, @_button-margin: 3px);
}
// # Primary button
//
// The .lib-button-primary() mixin is used to create a **primary button**. By default it uses Primary button variables from _variables.less file.
//
// ##Primary button big
// ```html
//
//
//
//
// ```
//
// ##Primary button
// ```html
//
//
//
//
// ```
//
// ##Primary button small
// ```html
//
//
//
//
// ```
//
.example-button-4 {
.lib-button-primary(
@_button-margin: 3px
);
&:active {
box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
}
&.example-button-5 {
.lib-button-l(@_button-l-padding: 7px 35px);
}
&.example-button-6 {
.lib-button-s();
color: @color-white;
&:hover,
&.active {
color: @color-white;
}
}
}
// # Primary button variables
//
// In the variables list primary buttons are configured with @button-primary__ prefix. So for example to configure primary button background you should use @_button-background variable of the mixin or @button-primary__background of the global variables list.
//
//
//
//
//
Mixin variable
//
Global variable
//
Default value
//
Allowed values
//
Comment
//
//
//
@_button-line-height
//
@button-primary__line-height
//
false
//
'' | false | value
//
Button line-height
//
//
//
@_button-width
//
@button-primary__width
//
false
//
'' | false | value
//
Button width
//
//
//
@_button-margin
//
@button-primary__margin
//
false
//
'' | false | value
//
Button margin
//
//
//
@_button-padding
//
@button-primary__padding
//
@button__padding
//
'' | false | value
//
Button padding
//
//
//
@_button-gradient
//
@button-primary__gradient
//
false
//
'' | false | true
//
Button has gradient background
//
//
//
@_button-gradient-direction
//
@button-primary__gradient-direction
//
false
//
'' | false | vertical | horizontal
//
Direction of button background gradient (if there is any)
//
//
//
Button default state
//
//
//
@_button-background
//
@button-primary__background
//
#1979c3
//
'' | false | value
//
Button background
//
//
//
@_button-border
//
@button-primary__border
//
1px solid #1979c3
//
'' | false | value
//
Button border
//
//
//
@_button-color
//
@button-primary__color
//
#fff
//
'' | false | value
//
Button text color
//
//
//
@_button-gradient-color-start
//
@button-primary__gradient-color-start
//
false
//
'' | false | value
//
Gradient background start color
//
//
//
@_button-gradient-color-end
//
@button-primary__gradient-color-end
//
false
//
'' | false | value
//
Gradient background end color
//
//
//
Button hover state
//
//
//
@_button-background-hover
//
@button-primary__hover__background
//
#006bb4
//
'' | false | value
//
Hovered button background
//
//
//
@_button-border-hover
//
@button-primary__hover__border
//
1px solid #006bb4
//
'' | false | value
//
Hovered button border
//
//
//
@_button-color-hover
//
@button-primary__hover__color
//
@button-primary__color
//
'' | false | value
//
Hovered button text color
//
//
//
@_button-gradient-color-start-hover
//
@button-primary__hover__gradient-color-start
//
false
//
'' | false | value
//
Hovered button gradient background start color
//
//
//
@_button-gradient-color-end-hover
//
@button-primary__hover__gradient-color-end
//
false
//
'' | false | value
//
Hovered button gradient background end color
//
//
//
Button active state
//
//
//
@_button-background-active
//
@button-primary__active__background
//
@button-primary__hover__background
//
'' | false | value
//
Active button background
//
//
//
@_button-border-active
//
@button-primary__active__border
//
@button-primary__hover__border
//
'' | false | value
//
Active button border
//
//
//
@_button-color-active
//
@button-primary__active__color
//
@button-primary__color
//
'' | false | value
//
Active button text color
//
//
//
@_button-gradient-color-start-active
//
@button-primary__active__gradient-color-start
//
false
//
'' | false | value
//
Active button gradient background start color
//
//
//
@_button-gradient-color-end-active
//
@button-primary__active__gradient-color-end
//
false
//
'' | false | value
//
Active button gradient background end color
//
//
//
// # Button with gradient background
//
// The .lib-button() mixin can get its values from _variables.less file or directly
// ```html
//
//
//
//
// ```
//
.example-button-7 {
.lib-button(
@_button-margin: 3px,
@_button-padding: @button__padding,
@_button-gradient-color-start: #1979c3,
@_button-gradient-color-end: #006bb4,
@_button-color: @color-white,
@_button-gradient-color-start-hover: #006bb4,
@_button-gradient-color-end-hover: #1979c3,
@_button-color-hover: @color-white,
@_button-gradient-color-start-active: #006bb4,
@_button-gradient-color-end-active: #006bb4,
@_button-color-active: @color-white,
@_button-gradient: true,
@_button-gradient-direction: vertical,
@_button-border: @button-primary__border,
@_button-border-hover: @button-primary__hover__border,
@_button-border-active: @button-primary__active__border
);
border-radius: 3px;
&:active {
box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
}
}
// # Button as a link
//
// The .lib-button-as-link() mixin is used to make button look like a link. It resets default button styles.
//
// ```html
//
//
//
//
//
// ```
//
.example-button-8 {
.lib-button-as-link();
font-weight: normal;
&:active {
box-shadow: none;
}
}
// # Button as a link variables
//
//
//
//
//
Mixin variable
//
Global variable
//
Default value
//
Allowed values
//
Comment
//
//
//
@_link-color
//
@link__color
//
@link-color
//
'' | false | value
//
Button as a link color
//
//
//
@_link-color-hover
//
@link__hover__color
//
@link-color-hover
//
'' | false | value
//
Button as a link hovered color
//
//
//
@_line-height
//
@line-height__base
//
@line-height-base
//
'' | false | value
//
Button as a link line height
//
//
//
@_margin
//
-
//
0
//
'' | false | value
//
Button as a link margin
//
//
//
@_padding
//
-
//
0
//
'' | false | value
//
Button as a link padding
//
//
//
@_disabled_opacity
//
@button__disabled__opacity
//
.5
//
range between .1 and .9
//
Button as a link opacity
//
//
// # Link as a button
//
// The .lib-link-as-button() mixin is used to reset link styles (text-decoration and display inline). Then to make it look like a button, you need to add the .lib-button() mixin with appropriate parameters.
//
// ```html
// Button
// Hover
// Active
// Disabled
// ```
//
.example-button-9 {
.lib-link-as-button();
.lib-button();
margin: 3px;
border-radius: 3px;
font-weight: bold;
&:active {
box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
}
}
// # Button reset
//
// The .lib-button-reset() mixin is used to fully reset button styles.
//
// ```html
//
// ```
//
.example-button-14 {
.lib-button-reset();
}
// # Button revert secondary color
//
// The .lib-button-revert-secondary-color() mixin is used to revert button styles (primary for example) to secondary color styles.
// Also can be passed any color, background and border if needed.
//
// ```html
//
//
// ```
//
.example-button-15 {
.lib-button-primary();
.lib-button-revert-secondary-color();
}
// # Button revert secondary color variables
//
//
//
//
//
Mixin variable
//
Global variable
//
Default value
//
Allowed values
//
Comment
//
//
//
@_button-color
//
@button__color
//
@button__color
//
'' | false | value
//
Button color
//
//
//
@_button-background
//
@button__background
//
@button__background
//
'' | false | value
//
Button background
//
//
//
@_button-border
//
@button__border
//
@button__border
//
'' | false | value
//
Button border
//
//
//
@_button-color-hover
//
@button__hover__color
//
@button__hover__color
//
'' | false | value
//
Button hover color
//
//
//
@_button-background-hover
//
@button__hover__background
//
@button__hover__background
//
'' | false | value
//
Button hover background
//
//
//
@_button-border-hover
//
@button__hover__border
//
@button__hover__border
//
'' | false | value
//
Button hover border
//
//
//
@_button-color-active
//
@button__active__color
//
@button__active__color
//
'' | false | value
//
Button active color
//
//
//
@_button-background-active
//
@button__active__background
//
@button__active__background
//
'' | false | value
//
Button active background
//
//
//
@_button-border-active
//
@button__active__border
//
@button__active__border
//
'' | false | value
//
Button active border
//
//
//
// # Button revert secondary size
//
// The .lib-button-revert-secondary-size() mixin is used to revert button sizes to secondary button sizes.
// Also can be passed font-size, line-height and padding if needed.
//
// ```html
//
//
// ```
//
.example-button-17 {
.lib-button-l();
.lib-button-revert-secondary-size();
}
.example-button-18 {
.lib-button-revert-secondary-size(
@_button-font-size: 10px,
@_button-line-height: 12px,
@_button-padding: 4px 10px
);
}
// # Button revert secondary size variables
//
//