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

lib/web/css/docs/utilities.html
264 строки231 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>utilities | 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>  <code>_utilities.less</code> is a reuseable collection of basic Less mixins.</p>
</div></article><article id="libclearfix" class="section"><div class="docs"><a href="#libclearfix" 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="libclearfix">.lib-clearfix()</h1>
<p>  The <code>.lib-clearfix()</code> mixin is a modern solution for healing container`s height which have floated elements. Also its applying prevents top-margins from collapsing.</p>
<p> Container with floated child elements without <code>.lib-clearfix()</code></p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-clearfix-container-1"&gt;
      &lt;div class="example-clearfix-item left"&gt;
          Float left
      &lt;/div&gt;
      &lt;div class="example-clearfix-item right"&gt;
          Float right
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p> Container with floated child elements with <code>.lib-clearfix()</code></p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-clearfix-container-2"&gt;
      &lt;div class="example-clearfix-item left"&gt;
          Float left
      &lt;/div&gt;
      &lt;div class="example-clearfix-item right"&gt;
          Float right
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-clearfix-container-1 {
    border: 1px solid #f00;
}

.example-clearfix-container-2 {
    .lib-clearfix();
    border: 1px solid #0f0;
}

.example-clearfix-item.left {
    float: left;
}
.example-clearfix-item.right {
    float: right;
}</code></pre></div></article><article id="libvisibilityhidden" class="section"><div class="docs"><a href="#libvisibilityhidden" 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="libvisibilityhidden">.lib-visibility-hidden()</h1>
<p>  The <code>.lib-visibility-hidden()()</code> mixin changes element`s visibility to hidden and height to 0.</p>
<p>  This is a block with applied <code>.lib-visibility-hidden()</code> mixin.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-visibility-hidden"&gt;
      &lt;div&gt;
          This is hidden text
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-visibility-hidden {
    .lib-visibility-hidden();
}</code></pre></div></article><article id="libvisuallyhidden" class="section"><div class="docs"><a href="#libvisuallyhidden" 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="libvisuallyhidden">.lib-visually-hidden()</h1>
<p>  The <code>.lib-visually-hidden()</code> mixin safely hides the element for accessibility reasons.</p>
<p>  This is a block with applied <code>.lib-visually-hidden()</code> mixin.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-visually-hidden-1"&gt;
      &lt;div&gt;
          This is hidden text
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-visually-hidden-1 {
    .lib-visually-hidden();
}</code></pre></div></article><article id="libvisuallyhiddenreset" class="section"><div class="docs"><a href="#libvisuallyhiddenreset" 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="libvisuallyhiddenreset">.lib-visually-hidden-reset()</h1>
<p>  The <code>.lib-visually-hidden-reset()</code> mixin resets hidden visibility and makes element again visible.</p>
<p>  This is a block with applied <code>.lib-visually-hidden-reset()</code> mixin after <code>.lib-visually-hidden()</code> applying.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-visually-hidden-2"&gt;
      &lt;div&gt;
          The text is visible again
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-visually-hidden-2 {
    background: #fdf0d5;
    padding: 5px;
    .lib-visually-hidden();
}

.example-visually-hidden-2 {
    .lib-visually-hidden-reset();
}</code></pre></div></article><article id="libcss" class="section"><div class="docs"><a href="#libcss" 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="libcss">.lib-css()</h1>
<p>  The <code>.lib-css()</code> mixin is used to set any css property if there is a value passed to it by a variable. Also <code>.lib-css()</code> can add -ms-, -webkit- and -moz- prefixes if needed.</p>
<p>  If the variable is set to <code>false</code>, the <code>.lib-css()</code> mixin will add nothing to the code.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-css-container"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt..
  &lt;/div&gt;</textarea><textarea class="preview-code" spellcheck="false">  &lt;div class="example-css-container-2"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt..
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-css-container {
    .lib-css(padding, @indent__base);
    .lib-css(background, @secondary__color);
}


.example-css-container-2 {
    .lib-css(background, false);
}</code></pre></div></article><article id="libcss-variables" class="section"><div class="docs"><a href="#libcss-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="libcss-variables">.lib-css() variables</h1>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin 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>@_property</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Any css property</td>
        </tr>
        <tr>
            <th>@_value</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Any css value</td>
        </tr>
        <tr>
            <th>@_prefix</th>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | 1</td>
            <td>If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property</td>
        </tr>
    </table>
  </pre>
</div></article><article id="librotate" class="section"><div class="docs"><a href="#librotate" 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="librotate">.lib-rotate()</h1>
<p>  The <code>.lib-rotate()</code> mixin is a wrapper for css3 transform property with rotate value.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-rotate"&gt;&lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-rotate {
    background: #f00;
    position: absolute;
    height: 20px;
    width: 40px;
    .lib-rotate(
        @_rotation: 45deg;
    );
}</code></pre></div></article><article id="librotate-variables" class="section"><div class="docs"><a href="#librotate-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="librotate-variables">.lib-rotate() variables</h1>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin 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>@rotation</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | false | value</td>
            <td>Transform rotate value, false or ''</td>
        </tr>
    </table>
  </pre>
</div></article><article id="libinputplaceholder" class="section"><div class="docs"><a href="#libinputplaceholder" 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="libinputplaceholder">.lib-input-placeholder()</h1>
<p>  The <code>.lib-input-placeholder()</code> mixin is used to change placeholder font-color and font-weight.</p>
<textarea class="preview-code" spellcheck="false">  &lt;input placeholder="Default text" class="example-placeholder" type="text" /&gt;</textarea>
</div><div class="code"><pre><code>.example-placeholder {
    .lib-input-placeholder(#808080, bold);
}</code></pre></div></article><article id="libinputplaceholder-variables" class="section"><div class="docs"><a href="#libinputplaceholder-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="libinputplaceholder-variables">.lib-input-placeholder() variables</h1>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin 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>@_input-placeholder-color</th>
            <td class="vars_value">@form-element-input-placeholder__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Input placeholder color</td>
        </tr>
        <tr>
            <th>@_input-placeholder-font-weight</th>
            <td class="vars_value">@form-element-input__font-weight</td>
            <td class="vars_value">'' | false | value</td>
            <td>Input placeholder font-weight</td>
        </tr>
    </table>
  </pre>
</div></article><article id="libbackgroundgradient" class="section"><div class="docs"><a href="#libbackgroundgradient" 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="libbackgroundgradient">.lib-background-gradient()</h1>
<p>  The <code>.lib-background-gradient()</code> mixin is used for applying custom css3 gradient.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-background-gradient-1"&gt;
      I`m gradient with vertical direction
  &lt;/div&gt;</textarea><textarea class="preview-code" spellcheck="false">  &lt;div class="example-background-gradient-2"&gt;
      I`m gradient with horizontal direction
  &lt;/div&gt;</textarea><textarea class="preview-code" spellcheck="false">  &lt;div class="example-background-gradient-3-wrapper"&gt;
  &lt;div class="example-background-gradient-3"&gt;
      I`m gradient with horizontal direction from transparent to a color
  &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-background-gradient-1 {
    .lib-background-gradient(
        @_background-gradient: true,
        @_background-gradient-direction: vertical,
        @_background-gradient-color-start: #cff,
        @_background-gradient-color-end: #ccf
    );
}

.example-background-gradient-2 {
    .lib-background-gradient(
        @_background-gradient: true,
        @_background-gradient-direction: horizontal,
        @_background-gradient-color-start: #cff,
        @_background-gradient-color-end: #ccf
    );
}

.example-background-gradient-3-wrapper {
    background: #ffc;
    padding: 10px;
}

.example-background-gradient-3 {
    .lib-background-gradient(
        @_background-gradient: true,
        @_background-gradient-direction: horizontal,
        @_background-gradient-color-start: rgba(255,255,255,0),
        @_background-gradient-color-end: #ccf,
        @_background-gradient-color-position: false
    );
}</code></pre></div></article><article id="libbackgroundgradient-variables" class="section"><div class="docs"><a href="#libbackgroundgradient-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="libbackgroundgradient-variables">.lib-background-gradient() variables</h1>
  <pre>
    <table>
        <tr>
            <th class="vars_head">Mixin 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>@_background-gradient</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | true</td>
            <td>If set to 'true' the element has gradient background</td>
        </tr>
        <tr>
            <th>@_background-gradient-direction</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | horizontal | vertical</td>
            <td>Gradient direction (horizontal or vertical)</td>
        </tr>
        <tr>
            <th>@_background-gradient-color-start</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | false | value</td>
            <td>Gradient start color (any css color)</td>
        </tr>
        <tr>
            <th>@_background-gradient-color-end</th>
            <td class="vars_value">''</td>
            <td class="vars_value">'' | false | value</td>
            <td>Gradient end color (any css color) </td>
        </tr>
        <tr>
            <th>@_background-gradient-color-position</th>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | true</td>
            <td>Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start</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  … [Строка слишком длинная. Вы можете скачать файл]