Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/old/vendor/magento/magento2-base/lib/web/css/docs/source/ |
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Default button
//
// Default style for buttons is set by the <code>.lib-button()</code> mixin. The mixin is called in <code>.lib-magento-reset()</code> or it can be called directly.
//
// ## Default button large
// ```html
// <button class="example-button-1 example-button-2" type="button"><span>Button</span></button>
// <button class="example-button-1 example-button-2 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-1 example-button-2 :active" type="button"><span>Active</span></button>
// <button class="example-button-1 example-button-2" type="button" disabled><span>Disabled</span></button>
// ```
//
// ## Default button
// ```html
// <button class="example-button-1" type="button"><span>Button</span></button>
// <button class="example-button-1 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-1 :active" type="button"><span>Active</span></button>
// <button class="example-button-1" type="button" disabled><span>Disabled</span></button>
// ```
//
// ## Default button small
// ```html
// <button class="example-button-1 example-button-3" type="button"><span>Button</span></button>
// <button class="example-button-1 example-button-3 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-1 example-button-3 :active" type="button"><span>Active</span></button>
// <button class="example-button-1 example-button-3" type="button" disabled><span>Disabled</span></button>
// ```
//
button {
.lib-button(@_button-margin: 3px);
border-radius: 3px;
&:active,
&:focus {
box-shadow: inset 0 2px 1px rgba(0,0,0,.12);
}
}
.example-button-1 {
&.example-button-2 {
.lib-button-l();
}
&.example-button-3 {
.lib-button-s();
border-radius: 0;
color: @color-black;
&:hover,
&.active {
color: @color-black;
}
}
}
// # Button variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Global variable</th>
// <th class="vars_head">Default value</th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_button-font-family</th>
// <td>@button__font-family</td>
// <td class="vars_value">@font-family__base</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button font family</td>
// </tr>
// <tr>
// <th>@_button-font-size</th>
// <td>@button__font-size</td>
// <td class="vars_value">@font-size__base</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button font size</td>
// </tr>
// <tr>
// <th>@_button-font-weight</th>
// <td>@button__font-weight</td>
// <td class="vars_value">@font-weight__bold</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button font weight</td>
// </tr>
// <tr>
// <th>@_button-cursor</th>
// <td>@button__cursor</td>
// <td class="vars_value">pointer</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button cursor</td>
// </tr>
// <tr>
// <th>@_button-display</th>
// <td>@button__display</td>
// <td class="vars_value">inline-block</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button display</td>
// </tr>
// <tr>
// <th>@_button-disabled-opacity</th>
// <td>@button__disabled__opacity</td>
// <td class="vars_value">.5</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button disabled opacity</td>
// </tr>
// <tr>
// <th>@_button-line-height</th>
// <td>@button__line-height</td>
// <td class="vars_value">@font-size__base + 2</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button height</td>
// </tr>
// <tr>
// <th>@_button-width</th>
// <td>@button__width</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button width</td>
// </tr>
// <tr>
// <th>@_button-margin</th>
// <td>@button__margin</td>
// <td class="vars_value">0</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button margin</td>
// </tr>
// <tr>
// <th>@_button-padding</th>
// <td>@button__padding</td>
// <td class="vars_value">7px 15px</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button padding</td>
// </tr>
// <tr>
// <th>@_button-gradient</th>
// <td>@button__gradient</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | true</td>
// <td>Button has gradient background</td>
// </tr>
// <tr>
// <th>@_button-gradient-direction</th>
// <td>@button__gradient-direction</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | vertical | horizontal</td>
// <td>Direction of button background gradient (if there is any)</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Button default state</th>
// </tr>
// <tr>
// <th>@_button-color</th>
// <td>@button__color</td>
// <td class="vars_value">@primary__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button text color</td>
// </tr>
// <tr>
// <th>@_button-background</th>
// <td>@button__background</td>
// <td class="vars_value">#f2f2f2</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button background</td>
// </tr>
// <tr>
// <th>@_button-border</th>
// <td>@button__border</td>
// <td class="vars_value">1px solid #cdcdcd</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button border</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-start</th>
// <td>@button__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Gradient background start color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-end</th>
// <td>@button__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Gradient background end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Button hover state</th>
// </tr>
// <tr>
// <th>@_button-color-hover</th>
// <td>@button__hover__color</td>
// <td class="vars_value">#555</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button text color</td>
// </tr>
// <tr>
// <th>@_button-background-hover</th>
// <td>@button__hover__background</td>
// <td class="vars_value">#e2e2e2</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button background</td>
// </tr>
// <tr>
// <th>@_button-border-hover</th>
// <td>@button__hover__border</td>
// <td class="vars_value">@button__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button border</td>
// </tr>
// <tr>
// <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
// <td>@button__hover__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button gradient background start color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-end-hover</th>
// <td>@button__hover__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button gradient background end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Button active state</th>
// </tr>
// <tr>
// <th>@_button-color-active</th>
// <td>@button__active__color</td>
// <td class="vars_value">@button__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button text color</td>
// </tr>
// <tr>
// <th>@_button-background-active</th>
// <td>@button__active__background</td>
// <td class="vars_value">@button__hover__background</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button background</td>
// </tr>
// <tr>
// <th>@_button-border-active</th>
// <td>@button__active__border</td>
// <td class="vars_value">@button__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button border</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-start-active<br /></th>
// <td>@button__active__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button gradient background start color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-end-active</th>
// <td>@button__active__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button gradient background end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Button with icon</th>
// </tr>
// <tr>
// <th>@_button-icon-use</th>
// <td>@button-icon__use</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | true</td>
// <td>Button has an icon</td>
// </tr>
// <tr>
// <th>@_button-font-content</th>
// <td>@button-icon__content</td>
// <td class="vars_value">@icon-settings</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button icon symbol</td>
// </tr>
// <tr>
// <th>@_button-icon-font</th>
// <td>@button-icon__font</td>
// <td class="vars_value">@icon-font</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button icon font</td>
// </tr>
// <tr>
// <th>@_button-icon-font-size</th>
// <td>@button-icon__font-size</td>
// <td class="vars_value">22px</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button icon font size</td>
// </tr>
// <tr>
// <th>@_button-icon-font-line-height</th>
// <td>@button-icon__line-height</td>
// <td class="vars_value" nowrap="nowrap">@button-icon__font-size</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button icon line height</td>
// </tr>
// <tr>
// <th>@_button-icon-font-color</th>
// <td>@button-icon__color</td>
// <td class="vars_value">inherit</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button icon color</td>
// </tr>
// <tr>
// <th>@_button-icon-font-color-hover</th>
// <td>@button-icon__hover__font-color</td>
// <td class="vars_value">inherit</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button icon color</td>
// </tr>
// <tr>
// <th>@_button-icon-font-color-active</th>
// <td>@button-icon__active__font-color</td>
// <td class="vars_value">inherit</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button icon color</td>
// </tr>
// <tr>
// <th>@_button-icon-font-margin</th>
// <td>@button-icon__margin</td>
// <td class="vars_value">0</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button icon margin</td>
// </tr>
// <tr>
// <th>@_button-icon-font-vertical-align</th>
// <td>@button-icon__vertical-align</td>
// <td class="vars_value">top</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button icon vertical align</td>
// </tr>
// <tr>
// <th>@_button-icon-font-position</th>
// <td>@button-icon__position</td>
// <td class="vars_value">@icon__position</td>
// <td class="vars_value">'' | false | before | after</td>
// <td>Button icon font position</td>
// </tr>
// <tr>
// <th>@_button-icon-font-text-hide</th>
// <td>@button-icon__text-hide</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | true</td>
// <td>Button icon text hide</td>
// </tr>
// </table>
// </pre>
//
// # 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
// <button class="example-button-10" type="button">
// <span>Add to cart</span>
// </button>
// <button class="example-button-10 :hover" type="button">
// <span>Add to cart</span>
// </button>
// <button class="example-button-10 :active" type="button">
// <span>Add to cart</span>
// </button>
// ```
//
.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
//
// <code>@_button-icon-font-position</code> variable is used to set up the icon position
//
// Use <code>before</code> to set up button icon position on the left:
// ```css
// @_button-icon-font-position: before
// ```
//
// ```html
// <button class="example-button-11" type="button" title="Add to cart">
// <span>Button</span>
// </button>
// <button class="example-button-11 :hover" type="button" title="Add to cart">
// <span>Hover</span>
// </button>
// <button class="example-button-11 :active" type="button" title="Add to cart">
// <span>Active</span>
// </button>
// <button class="example-button-11 disabled" type="button" title="Add to cart">
// <span>Disabled</span>
// </button>
// ```
// Use <code>after</code> to set up button icon position on the right:
// ```css
// @_button-icon-font-position: after
// ```
// ```html
// <button class="example-button-12" type="button" title="Add to cart">
// <span>Button</span>
// </button>
// <button class="example-button-12 :hover" type="button" title="Add to cart">
// <span>Hover</span>
// </button>
// <button class="example-button-12 :active" type="button" title="Add to cart">
// <span>Active</span>
// </button>
// <button class="example-button-12 disabled" type="button" title="Add to cart">
// <span>Disabled</span>
// </button>
// ```
//
.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
// <button class="example-button-13" type="button" title="Add to cart">
// <span>Button</span>
// </button>
// <button class="example-button-13 :hover" type="button" title="Add to cart">
// <span>Hover</span>
// </button>
// <button class="example-button-13 :active" type="button" title="Add to cart">
// <span>Active</span>
// </button>
// <button class="example-button-13 disabled" type="button" title="Add to cart">
// <span>Disabled</span>
// </button>
// ```
//
.example-button-13 {
.lib-button(@_button-width: 100px, @_button-margin: 3px);
}
// # Primary button
//
// The <code>.lib-button-primary()</code> mixin is used to create a **primary button**. By default it uses Primary button variables from _variables.less file.
//
// ##Primary button big
// ```html
// <button class="example-button-4 example-button-5" type="button"><span>Button</span></button>
// <button class="example-button-4 example-button-5 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-4 example-button-5 :active" type="button"><span>Active</span></button>
// <button class="example-button-4 example-button-5" type="button" disabled><span>Disabled</span></button>
// ```
//
// ##Primary button
// ```html
// <button class="example-button-4" type="button"><span>Button</span></button>
// <button class="example-button-4 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-4 :active" type="button"><span>Active</span></button>
// <button class="example-button-4 disabled" type="button"><span>Disabled</span></button>
// ```
//
// ##Primary button small
// ```html
// <button class="example-button-4 example-button-6" type="button"><span>Button</span></button>
// <button class="example-button-4 example-button-6 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-4 example-button-6 :active" type="button"><span>Active</span></button>
// <button class="example-button-4 example-button-6" type="button" disabled><span>Disabled</span></button>
// ```
//
.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 <code>@button-primary__</code> prefix. So for example to configure primary button background you should use <code>@_button-background</code> variable of the mixin or <code>@button-primary__background</code> of the global variables list.
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Global variable</th>
// <th class="vars_head">Default value</th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_button-line-height</th>
// <td>@button-primary__line-height</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button line-height</td>
// </tr>
// <tr>
// <th>@_button-width</th>
// <td>@button-primary__width</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button width</td>
// </tr>
// <tr>
// <th>@_button-margin</th>
// <td>@button-primary__margin</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button margin</td>
// </tr>
// <tr>
// <th>@_button-padding</th>
// <td>@button-primary__padding</td>
// <td class="vars_value">@button__padding</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button padding</td>
// </tr>
// <tr>
// <th>@_button-gradient</th>
// <td>@button-primary__gradient</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | true</td>
// <td>Button has gradient background</td>
// </tr>
// <tr>
// <th>@_button-gradient-direction</th>
// <td>@button-primary__gradient-direction</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | vertical | horizontal</td>
// <td>Direction of button background gradient (if there is any)</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Button default state</th>
// </tr>
// <tr>
// <th>@_button-background</th>
// <td>@button-primary__background</td>
// <td class="vars_value">#1979c3</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button background</td>
// </tr>
// <tr>
// <th>@_button-border</th>
// <td>@button-primary__border</td>
// <td class="vars_value">1px solid #1979c3</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button border</td>
// </tr>
// <tr>
// <th>@_button-color</th>
// <td>@button-primary__color</td>
// <td class="vars_value">#fff</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button text color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-start</th>
// <td>@button-primary__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Gradient background start color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-end</th>
// <td>@button-primary__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Gradient background end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Button hover state</th>
// </tr>
// <tr>
// <th>@_button-background-hover</th>
// <td>@button-primary__hover__background</td>
// <td class="vars_value">#006bb4</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button background</td>
// </tr>
// <tr>
// <th>@_button-border-hover</th>
// <td>@button-primary__hover__border</td>
// <td class="vars_value">1px solid #006bb4</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button border</td>
// </tr>
// <tr>
// <th>@_button-color-hover</th>
// <td>@button-primary__hover__color</td>
// <td class="vars_value">@button-primary__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button text color</td>
// </tr>
// <tr>
// <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
// <td>@button-primary__hover__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button gradient background start color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-end-hover</th>
// <td>@button-primary__hover__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Hovered button gradient background end color</td>
// </tr>
// <tr>
// <th colspan="5" class="vars_section">Button active state</th>
// </tr>
// <tr>
// <th>@_button-background-active</th>
// <td>@button-primary__active__background</td>
// <td class="vars_value">@button-primary__hover__background</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button background</td>
// </tr>
// <tr>
// <th>@_button-border-active</th>
// <td>@button-primary__active__border</td>
// <td class="vars_value">@button-primary__hover__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button border</td>
// </tr>
// <tr>
// <th>@_button-color-active</th>
// <td>@button-primary__active__color</td>
// <td class="vars_value">@button-primary__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button text color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-start-active</th>
// <td>@button-primary__active__gradient-color-start</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button gradient background start color</td>
// </tr>
// <tr>
// <th>@_button-gradient-color-end-active</th>
// <td>@button-primary__active__gradient-color-end</td>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Active button gradient background end color</td>
// </tr>
// </table>
// </pre>
// # Button with gradient background
//
// The <code>.lib-button()</code> mixin can get its values from _variables.less file or directly
// ```html
// <button class="example-button-7" type="button"><span>Button</span></button>
// <button class="example-button-7 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-7 :active" type="button"><span>Active</span></button>
// <button class="example-button-7 disabled" type="button"><span>Disabled</span></button>
// ```
//
.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 <code>.lib-button-as-link()</code> mixin is used to make button look like a link. It resets default button styles.
//
// ```html
// <button class="example-button-8" type="button"><span>Button</span></button>
// <button class="example-button-8 :visited" type="button"><span>Visited</span></button>
// <button class="example-button-8 :hover" type="button"><span>Hover</span></button>
// <button class="example-button-8 :active" type="button"><span>Active</span></button>
// <button class="example-button-8 disabled" type="button"><span>Disabled</span></button>
// ```
//
.example-button-8 {
.lib-button-as-link();
font-weight: normal;
&:active {
box-shadow: none;
}
}
// # Button as a link variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Global variable</th>
// <th class="vars_head">Default value</th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_link-color</th>
// <td>@link__color</td>
// <td class="vars_value">@link-color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button as a link color</td>
// </tr>
// <tr>
// <th>@_link-color-hover</th>
// <td>@link__hover__color</td>
// <td class="vars_value">@link-color-hover</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button as a link hovered color</td>
// </tr>
// <tr>
// <th>@_line-height</th>
// <td>@line-height__base</td>
// <td class="vars_value">@line-height-base</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button as a link line height</td>
// </tr>
// <tr>
// <th>@_margin</th>
// <td>-</td>
// <td class="vars_value">0</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button as a link margin</td>
// </tr>
// <tr>
// <th>@_padding</th>
// <td>-</td>
// <td class="vars_value">0</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button as a link padding</td>
// </tr>
// <tr>
// <th>@_disabled_opacity</th>
// <td>@button__disabled__opacity</td>
// <td class="vars_value">.5</td>
// <td class="vars_value">range between .1 and .9</td>
// <td>Button as a link opacity</td>
// </tr>
// </table>
// # Link as a button
//
// The <code>.lib-link-as-button()</code> 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 <code>.lib-button()</code> mixin with appropriate parameters.
//
// ```html
// <a href="#" class="example-button-9"><span>Button</span></a>
// <a href="#" class="example-button-9 :hover"><span>Hover</span></a>
// <a href="#" class="example-button-9 :active"><span>Active</span></a>
// <a href="#" class="example-button-9 disabled"><span>Disabled</span></a>
// ```
//
.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 <code>.lib-button-reset()</code> mixin is used to fully reset button styles.
//
// ```html
// <button class="example-button-14" type="button"><span>Button with reset styles</span></button>
// ```
//
.example-button-14 {
.lib-button-reset();
}
// # Button revert secondary color
//
// The <code>.lib-button-revert-secondary-color()</code> 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
// <button class="example-button-15" type="button"><span>Reverted color</span></button>
// <button class="example-button-16" type="button"><span>Custom colors</span></button>
// ```
//
.example-button-15 {
.lib-button-primary();
.lib-button-revert-secondary-color();
}
// # Button revert secondary color variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Global variable</th>
// <th class="vars_head">Default value</th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_button-color</th>
// <td>@button__color</td>
// <td class="vars_value">@button__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button color</td>
// </tr>
// <tr>
// <th>@_button-background</th>
// <td>@button__background</td>
// <td class="vars_value">@button__background</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button background</td>
// </tr>
// <tr>
// <th>@_button-border</th>
// <td>@button__border</td>
// <td class="vars_value">@button__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button border</td>
// </tr>
// <tr>
// <th>@_button-color-hover</th>
// <td>@button__hover__color</td>
// <td class="vars_value">@button__hover__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button hover color</td>
// </tr>
// <tr>
// <th>@_button-background-hover</th>
// <td>@button__hover__background</td>
// <td class="vars_value">@button__hover__background</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button hover background</td>
// </tr>
// <tr>
// <th>@_button-border-hover</th>
// <td>@button__hover__border</td>
// <td class="vars_value">@button__hover__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button hover border</td>
// </tr>
// <tr>
// <th>@_button-color-active</th>
// <td>@button__active__color</td>
// <td class="vars_value">@button__active__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button active color</td>
// </tr>
// <tr>
// <th>@_button-background-active</th>
// <td>@button__active__background</td>
// <td class="vars_value">@button__active__background</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button active background</td>
// </tr>
// <tr>
// <th>@_button-border-active</th>
// <td>@button__active__border</td>
// <td class="vars_value">@button__active__border</td>
// <td class="vars_value">'' | false | value</td>
// <td>Button active border</td>
// </tr>
// </table>
// </pre>
// # Button revert secondary size
//
// The <code>.lib-button-revert-secondary-size()</code> mixin is used to revert button sizes to secondary button sizes.
// Also can be passed font-size, line-height and padding if needed.
//
// ```html
// <button class="example-button-17" type="button"><span>Reverted size</span></button>
// <button class="example-button-18" type="button"><span>Custom sizes</span></button>
// ```
//
.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
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Global variable</th>
// <th class="vars_head">Default value</th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_button-font-size</th>
// <td>@button__font-size</td>
// <td class="vars_value">@button__font-size</td>
// <td class="vars_value">'' | value</td>
// <td>Button font size</td>
// </tr>
// <tr>
// <th>@_button-line-height</th>
// <td>@button__line-height</td>
// <td class="vars_value">@button__line-height</td>
// <td class="vars_value">'' | value</td>
// <td>Button line-height</td>
// </tr>
// <tr>
// <th>@_button-padding</th>
// <td>@button__padding</td>
// <td class="vars_value">@button__padding</td>
// <td class="vars_value">'' | value</td>
// <td>Button padding</td>
// </tr>
// </table>
// </pre>