lib/web/css/docs/buttons.html - 2.4-develop - githubmirror/magento2

lib/web/css/docs/buttons.html
878 строк260 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:583d4f486
<!--
/**
 * Copyright 2014 Adobe
 * All Rights Reserved.
 */
-->

<!DOCTYPE html><html><head><title>buttons | Magento UI Library
</title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл]
<p>  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.</p>
<h2 id="default-button-large">Default button large</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-1 example-button-2" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 example-button-2 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 example-button-2 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 example-button-2" type="button" disabled&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea><h2 id="default-button">Default button</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-1" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1" type="button" disabled&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea><h2 id="default-button-small">Default button small</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-1 example-button-3" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 example-button-3 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 example-button-3 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-1 example-button-3" type="button" disabled&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea>
</div><div class="code"><pre><code>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: #000;
        &:hover,
        &.active {
            color: #000;
        }
    }
}</code></pre></div></article><article id="button-variables" class="section"><div class="docs"><a href="#button-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-variables">Button variables</h1>
  <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>
</div></article><article id="button-as-an-icon" class="section"><div class="docs"><a href="#button-as-an-icon" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-as-an-icon">Button as an icon</h1>
<p>  To make a button look like an icon you need to:</p>
<p>  enable icon:</p>
<pre><code class="lang-css">  @_button-icon-use: true</code></pre>
<p>  set the font icon code:</p>
<pre><code class="lang-css">  @_button-font-content: @icon-cart</code></pre>
<p>  hide button text:</p>
<pre><code class="lang-css">  @_button-icon-font-text-hide: true</code></pre>
<textarea class="preview-code" spellcheck="false">    &lt;button class="example-button-10" type="button"&gt;
        &lt;span&gt;Add to cart&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-10 :hover" type="button"&gt;
        &lt;span&gt;Add to cart&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-10 :active" type="button"&gt;
        &lt;span&gt;Add to cart&lt;/span&gt;
    &lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.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();
}</code></pre></div></article><article id="button-with-an-icon-on-the-left-or-right-side-of-the-text" class="section"><div class="docs"><a href="#button-with-an-icon-on-the-left-or-right-side-of-the-text" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-with-an-icon-on-the-left-or-right-side-of-the-text">Button with an icon on the left or right side of the text</h1>
<p>  <code>@_button-icon-font-position</code> variable is used to set up the icon postiton</p>
<p>  Use <code>before</code> to set up button icon position on the left:</p>
<pre><code class="lang-css">  @_button-icon-font-position: before</code></pre>
<textarea class="preview-code" spellcheck="false">    &lt;button class="example-button-11" type="button" title="Add to cart"&gt;
        &lt;span&gt;Button&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-11 :hover" type="button" title="Add to cart"&gt;
        &lt;span&gt;Hover&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-11 :active" type="button" title="Add to cart"&gt;
        &lt;span&gt;Active&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-11 disabled" type="button" title="Add to cart"&gt;
        &lt;span&gt;Disabled&lt;/span&gt;
    &lt;/button&gt;</textarea><p>  Use <code>after</code> to set up button icon position on the right:</p>
<pre><code class="lang-css">  @_button-icon-font-position: after</code></pre>
<textarea class="preview-code" spellcheck="false">    &lt;button class="example-button-12" type="button" title="Add to cart"&gt;
        &lt;span&gt;Button&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-12 :hover" type="button" title="Add to cart"&gt;
        &lt;span&gt;Hover&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-12 :active" type="button" title="Add to cart"&gt;
        &lt;span&gt;Active&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-12 disabled" type="button" title="Add to cart"&gt;
        &lt;span&gt;Disabled&lt;/span&gt;
    &lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.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
   );
}</code></pre></div></article><article id="button-with-fixed-width" class="section"><div class="docs"><a href="#button-with-fixed-width" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-with-fixed-width">Button with fixed width</h1>
<p>  To get a fixed width button, you need to set:</p>
<pre><code class="lang-css">  @_button-width: 100px</code></pre>
<textarea class="preview-code" spellcheck="false">    &lt;button class="example-button-13" type="button" title="Add to cart"&gt;
        &lt;span&gt;Button&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-13 :hover" type="button" title="Add to cart"&gt;
        &lt;span&gt;Hover&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-13 :active" type="button" title="Add to cart"&gt;
        &lt;span&gt;Active&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="example-button-13 disabled" type="button" title="Add to cart"&gt;
        &lt;span&gt;Disabled&lt;/span&gt;
    &lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.example-button-13 {
    .lib-button(@_button-width: 100px, @_button-margin: 3px);
}</code></pre></div></article><article id="primary-button" class="section"><div class="docs"><a href="#primary-button" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="primary-button">Primary button</h1>
<p>  The <code>.lib-button-primary()</code> mixin is used to create a <strong>primary button</strong>. By default it uses Primary button variables from _variables.less file.</p>
<h2 id="primary-button-big">Primary button big</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-4 example-button-5" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 example-button-5 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 example-button-5 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 example-button-5" type="button" disabled&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea><h2 id="primary-button">Primary button</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-4" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 disabled" type="button"&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea><h2 id="primary-button-small">Primary button small</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-4 example-button-6" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 example-button-6 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 example-button-6 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-4 example-button-6" type="button" disabled&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.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: #fff;
        &:hover,
        &.active {
            color: #fff;
        }
    }
}</code></pre></div></article><article id="primary-button-variables" class="section"><div class="docs"><a href="#primary-button-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="primary-button-variables">Primary button variables</h1>
<p>  In the variables list primary buttons are configured with <code>@button-primary<strong></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</strong>background</code> of the global variables list.</p>
  <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>
</div></article><article id="button-with-gradient-background" class="section"><div class="docs"><a href="#button-with-gradient-background" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-with-gradient-background">Button with gradient background</h1>
<p>  The <code>.lib-button()</code> mixin can get its values from _variables.less file or directly</p>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-7" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-7 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-7 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-7 disabled" type="button"&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.example-button-7 {
    .lib-button(
        @_button-margin: 3px,
        @_button-padding: @button__padding,
        @_button-gradient-color-start: #1979c3,
        @_button-gradient-color-end: #006bb4,
        @_button-color: #fff,
        @_button-gradient-color-start-hover: #006bb4,
        @_button-gradient-color-end-hover: #1979c3,
        @_button-color-hover: #fff,
        @_button-gradient-color-start-active: #006bb4,
        @_button-gradient-color-end-active: #006bb4,
        @_button-color-active: #fff,
        @_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);
    }
}</code></pre></div></article><article id="button-as-a-link" class="section"><div class="docs"><a href="#button-as-a-link" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-as-a-link">Button as a link</h1>
<p>  The <code>.lib-button-as-link()</code> mixin is used to make button look like a link. It resets default button styles.</p>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-8" type="button"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-8 :visited" type="button"&gt;&lt;span&gt;Visited&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-8 :hover" type="button"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-8 :active" type="button"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-8 disabled" type="button"&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.example-button-8 {
    .lib-button-as-link();
    font-weight: normal;
    &:active {
        box-shadow: none;
    }
}</code></pre></div></article><article id="button-as-a-link-variables" class="section"><div class="docs"><a href="#button-as-a-link-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-as-a-link-variables">Button as a link variables</h1>
<p>  <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<strong>color</td>
            <td class="vars_value">@link-color</td>
            <td class="vars_value">&#39;&#39; | false | value</td>
            <td>Button as a link color</td>
        </tr>
        <tr>
            <th>@_link-color-hover</th>
            <td>@link</strong>hover<strong>color</td>
            <td class="vars_value">@link-color-hover</td>
            <td class="vars_value">&#39;&#39; | false | value</td>
            <td>Button as a link hovered color</td>
        </tr>
        <tr>
            <th>@_line-height</th>
            <td>@line-height</strong>base</td>
            <td class="vars_value">@line-height-base</td>
            <td class="vars_value">&#39;&#39; | 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">&#39;&#39; | 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">&#39;&#39; | false | value</td>
            <td>Button as a link padding</td>
        </tr>
        <tr>
            <th>@_disabled_opacity</th>
            <td>@button<strong>disabled</strong>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></p>
</div></article><article id="link-as-a-button" class="section"><div class="docs"><a href="#link-as-a-button" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="link-as-a-button">Link as a button</h1>
<p>  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 paremeters.</p>
<textarea class="preview-code" spellcheck="false">  &lt;a href="#" class="example-button-9"&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/a&gt;
  &lt;a href="#" class="example-button-9 :hover"&gt;&lt;span&gt;Hover&lt;/span&gt;&lt;/a&gt;
  &lt;a href="#" class="example-button-9 :active"&gt;&lt;span&gt;Active&lt;/span&gt;&lt;/a&gt;
  &lt;a href="#" class="example-button-9 disabled"&gt;&lt;span&gt;Disabled&lt;/span&gt;&lt;/a&gt;</textarea>
</div><div class="code"><pre><code>.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);
    }
}</code></pre></div></article><article id="button-reset" class="section"><div class="docs"><a href="#button-reset" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-reset">Button reset</h1>
<p>  The <code>.lib-button-reset()</code> mixin is used to fully reset button styles.</p>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-14" type="button"&gt;&lt;span&gt;Button with reset styles&lt;/span&gt;&lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.example-button-14 {
    .lib-button-reset();
}</code></pre></div></article><article id="button-revert-secondary-color" class="section"><div class="docs"><a href="#button-revert-secondary-color" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-revert-secondary-color">Button revert secondary color</h1>
<p>  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.</p>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-15" type="button"&gt;&lt;span&gt;Reverted color&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-16" type="button"&gt;&lt;span&gt;Custom colors&lt;/span&gt;&lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.example-button-15 {
    .lib-button-primary();
    .lib-button-revert-secondary-color();
}</code></pre></div></article><article id="button-revert-secondary-color-variables" class="section"><div class="docs"><a href="#button-revert-secondary-color-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-revert-secondary-color-variables">Button revert secondary color variables</h1>
  <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>
</div></article><article id="button-revert-secondary-size" class="section"><div class="docs"><a href="#button-revert-secondary-size" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-revert-secondary-size">Button revert secondary size</h1>
<p>  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.</p>
<textarea class="preview-code" spellcheck="false">  &lt;button class="example-button-17" type="button"&gt;&lt;span&gt;Reverted size&lt;/span&gt;&lt;/button&gt;
  &lt;button class="example-button-18" type="button"&gt;&lt;span&gt;Custom sizes&lt;/span&gt;&lt;/button&gt;</textarea>
</div><div class="code"><pre><code>.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
    );
}</code></pre></div></article><article id="button-revert-secondary-size-variables" class="section"><div class="docs"><a href="#button-revert-secondary-size-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="button-revert-secondary-size-variables">Button revert secondary size variables</h1>
  <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>
</div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412  … [Строка слишком длинная. Вы можете скачать файл]