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

lib/web/css/docs/dropdowns.html
879 строк254 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>dropdowns | 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>  Magento UI library provides mixins for 2 types of drop-downs: the <code>.lib-dropdown()</code> mixin for drop-down and the <code>.lib-dropdown-split()</code> mixin for split button.</p>
</div></article><article id="dropdown" class="section"><div class="docs"><a href="#dropdown" 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="dropdown">Drop-down</h1>
<p>  In Magento UI library the dropdown does not depend on the toggle tag. To toggle the drop-down, the corresponding tag must have <code>class=&quot;action toggle&quot;</code>.</p>
<h2 id="button-tag-dropdown-toggle">Button tag drop-down toggle</h2>
<p>  To implement a drop-down using a button + drop-down, use the following markup:</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="actions dropdown example-dropdown-1"&gt;
     &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
         &lt;span&gt;button + dropdown&lt;/span&gt;
     &lt;/button&gt;
     &lt;ul class="dropdown"&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;One&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Two&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Three&lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</textarea><h2 id="span-tag-dropdown-toggle">Span tag drop-down toggle</h2>
<p>  To implement a drop-down using a span + drop-down, use the following markup:</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-dropdown-2"&gt;
     &lt;span class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
         &lt;span&gt;span + dropdown&lt;/span&gt;
     &lt;/span&gt;
     &lt;ul class="dropdown"&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;One&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Two&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Three&lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-dropdown-1 {
    .lib-dropdown();
}


.example-dropdown-2 {
    .lib-dropdown();
}</code></pre></div></article><article id="dropdown-variables" class="section"><div class="docs"><a href="#dropdown-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="dropdown-variables">Drop-down 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>@_toggle-selector</th>
            <td>-</td>
            <td class="vars_value">~".action.toggle"</td>
            <td class="vars_value">Selector</td>
            <td>Toggle selector</td>
        </tr>
        <tr>
            <th>@_options-selector</th>
            <td>-</td>
            <td class="vars_value">~"ul.dropdown"</td>
            <td class="vars_value">Selector</td>
            <td>Options selector</td>
        </tr>
        <tr>
            <th>@_dropdown-actions-padding</th>
            <td>@dropdown-actions__padding</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle element padding</td>
        </tr>
        <tr>
            <th>@_dropdown-list-min-width</th>
            <td>@dropdown-list__min-width</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down min width value</td>
        </tr>
        <tr>
            <th>@_dropdown-list-width</th>
            <td>@dropdown-list__width</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list width value</td>
        </tr>
        <tr>
            <th>@_dropdown-list-height</th>
            <td>@dropdown-list__height</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list height value</td>
        </tr>
        <tr>
            <th>@_dropdown-list-margin-top</th>
            <td>@dropdown-list__margin-top</td>
            <td class="vars_value">4px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list margin-top value</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Drop-down list</th>
        </tr>
        <tr>
            <th>@_dropdown-list-position-top</th>
            <td>@dropdown-list__position-top</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: top</td>
        </tr>
        <tr>
            <th>@_dropdown-list-position-right</th>
            <td>@dropdown-list__position-right</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: right</td>
        </tr>
        <tr>
            <th>@_dropdown-list-position-bottom</th>
            <td>@dropdown-list__position-bottom</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: bottom</td>
        </tr>
        <tr>
            <th>@_dropdown-list-position-left</th>
            <td>@dropdown-list__position-left</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list position: left</td>
        </tr>
        <tr>
            <th>@_dropdown-list-background</th>
            <td>@dropdown-list__background</td>
            <td class="vars_value">@color-white</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list background</td>
        </tr>
        <tr>
            <th>@_dropdown-list-border</th>
            <td>@dropdown-list__border</td>
            <td class="vars_value">1px solid #bbb</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list border</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer</th>
            <td>@dropdown-list__pointer</td>
            <td class="vars_value">true</td>
            <td class="vars_value">true | false</td>
            <td>Drop-down list pointer is visible</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-border</th>
            <td>@dropdown-list-pointer__border</td>
            <td class="vars_value">#bbb</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list pointer border</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-position</th>
            <td>@dropdown-list-pointer__position</td>
            <td class="vars_value">left</td>
            <td class="vars_value">left | right</td>
            <td>Drop-down pointer position</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-position-top</th>
            <td>@dropdown-list-pointer__position-top</td>
            <td class="vars_value">-12px</td>
            <td class="vars_value">value</td>
            <td>Drop-down pointer top position</td>
        </tr>
        <tr>
            <th>@_dropdown-list-pointer-position-left-right</th>
            <td>@dropdown-list-pointer__position-left-right</td>
            <td class="vars_value">10px</td>
            <td class="vars_value">value</td>
            <td>Drop-down pointer left or right position</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-border</th>
            <td>@dropdown-list-item__border</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item border</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-padding</th>
            <td>@dropdown-list-item__padding</td>
            <td class="vars_value">3px @indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item padding</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-margin</th>
            <td>@dropdown-list-item__margin</td>
            <td class="vars_value">0</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item margin</td>
        </tr>
        <tr>
            <th>@_dropdown-list-item-hover</th>
            <td>@dropdown-list-item__hover</td>
            <td class="vars_value">#e8e8e8</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list item hovered background</td>
        </tr>
        <tr>
            <th>@_dropdown-list-shadow</th>
            <td>@dropdown-list__shadow</td>
            <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list shadow</td>
        </tr>
        <tr>
            <th>@_dropdown-list-z-index</th>
            <td>@dropdown-list__z-index</td>
            <td class="vars_value">100</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down list z-index</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Drop-down icon</th>
        </tr>
        <tr>
            <th>@_dropdown-toggle-icon-content</th>
            <td>@dropdown-toggle-icon__content</td>
            <td class="vars_value">@icon-pointer-down</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon symbol code for default state</td>
        </tr>
        <tr>
            <th nowrap>@_dropdown-toggle-active-icon-content</th>
            <td>@dropdown-toggle-icon__active__content</td>
            <td class="vars_value">@icon-pointer-up</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon symbol code for active state</td>
        </tr>
        <tr>
            <th>@_icon-font</th>
            <td>@dropdown-toggle-icon__font</td>
            <td class="vars_value">@button-icon__font</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon font</td>
        </tr>
        <tr>
            <th>@_icon-font-size</th>
            <td>@dropdown-toggle-icon__font-size</td>
            <td class="vars_value">@button-icon__font-size</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon font size</td>
        </tr>
        <tr>
            <th>@_icon-font-line-height</th>
            <td>@dropdown-toggle-icon__font-line-height</td>
            <td class="vars_value">@button-icon__line-height</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon line height</td>
        </tr>
        <tr>
            <th>@_icon-font-color</th>
            <td>@dropdown-toggle-icon__font-color</td>
            <td class="vars_value">@button-icon__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-hover</th>
            <td>@dropdown-toggle-icon__font-color-hover</td>
            <td class="vars_value">@button-icon__hover__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon hovered color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-active</th>
            <td>@dropdown-toggle-icon__font-color-active</td>
            <td class="vars_value">@button-icon__active__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon active color</td>
        </tr>
        <tr>
            <th>@_icon-font-margin</th>
            <td>@dropdown-toggle-icon__font-margin</td>
            <td class="vars_value">@button-icon__margin</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon margin</td>
        </tr>
        <tr>
            <th>@_icon-font-position</th>
            <td>@dropdown-toggle-icon__position</td>
            <td class="vars_value">after</td>
            <td class="vars_value">before | after</td>
            <td>Drop-down toggle icon position</td>
        </tr>
        <tr>
            <th>@_icon-font-vertical-align</th>
            <td>@dropdown-toggle-icon__font-vertical-align</td>
            <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
            <td class="vars_value">'' | false | value</td>
            <td>Drop-down toggle icon vertical align</td>
        </tr>
        <tr>
            <th>@_icon-font-text-hide</th>
            <td>@dropdown-toggle-icon__text-hide</td>
            <td class="vars_value">@button-icon__text-hide</td>
            <td class="vars_value">true | false</td>
            <td>Text in the tag, that contains icon, is hidden</td>
        </tr>
    </table>
  </pre>
</div></article><article id="dropdown-with-icon-customization" class="section"><div class="docs"><a href="#dropdown-with-icon-customization" 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="dropdown-with-icon-customization">Drop-down with icon customization</h1>
<p>  To customize drop-down icon symbol, specify variables for default state icon code and active state icon code:</p>
<pre><code class="lang-css">  @_dropdown-toggle-icon-content: @icon-expand,
  @_dropdown-toggle-active-icon-content: @icon-collapse</code></pre>
<p>  The <code>.lib-dropdown()</code> mixin uses the <code>.icon-font()</code> mixin to display and customize toggle icon. More information about <code>.icon-font()</code> mixin parameters you can find at the <strong>Icons</strong> page</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="actions dropdown example-dropdown-3"&gt;
     &lt;span class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
         &lt;span&gt;span + dropdown&lt;/span&gt;
     &lt;/span&gt;
     &lt;ul class="dropdown"&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;One&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Two&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Three&lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-dropdown-3 {
    .lib-dropdown(
        @_dropdown-toggle-icon-content: @icon-expand,
        @_dropdown-toggle-active-icon-content: @icon-collapse,
        @_icon-font-line-height: 1,
        @_icon-font-position: before,
        @_icon-font-color: #f00,
        @_icon-font-color-hover: #f00
    );
}</code></pre></div></article><article id="modify-dropdown-list-styles" class="section"><div class="docs"><a href="#modify-dropdown-list-styles" 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="modify-dropdown-list-styles">Modify dropdown list styles</h1>
<p>  You can customize dropdown list style</p>
<textarea class="preview-code" spellcheck="false"> &lt;div class="actions dropdown example-dropdown-5"&gt;
    &lt;span class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
        &lt;span&gt;span + dropdown&lt;/span&gt;
    &lt;/span&gt;
    &lt;ul class="dropdown"&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;One&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Two&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Three&lt;/span&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-dropdown-5 {
    .lib-dropdown(
        @_dropdown-list-pointer: false,
        @_dropdown-list-background: #eef1f3,
        @_dropdown-list-item-hover: #d8e3e3,
        @_dropdown-list-border: 2px solid #ced1d4,
        @_dropdown-list-item-padding: 10px,
        @_dropdown-list-item-border: 2px solid #e8eaed,
        @_dropdown-list-shadow: none,
        @_icon-font-line-height: 1
    );
}</code></pre></div></article><article id="split-button" class="section"><div class="docs"><a href="#split-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="split-button">Split button</h1>
<p>  Split button can be formed of two buttons or a link and a button. The first element (link or button) must have <code>class=&quot;action split&quot;</code>, the toggle element must have <code>class=&quot;action toggle&quot;</code>.</p>
<h2 id="split-button-buttonbutton">Split button: button+button</h2>
<textarea class="preview-code" spellcheck="false">  &lt;div class="actions split example-dropdown-6"&gt;
     &lt;button class="action split"&gt;
         &lt;span&gt;Spit button&lt;/span&gt;
     &lt;/button&gt;
     &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
         &lt;span&gt;Select&lt;/span&gt;
     &lt;/button&gt;
     &lt;ul class="dropdown"&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;One&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Two&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Three&lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</textarea><h2 id="split-button-linkbutton">Split button: link+button</h2>
<textarea class="preview-code" spellcheck="false">  &lt;div class="actions split example-dropdown-7"&gt;
      &lt;a href="#" class="action split"&gt;
          &lt;span&gt;Spit button&lt;/span&gt;
      &lt;/a&gt;
      &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
          &lt;span&gt;Select&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown"&gt;
          &lt;li&gt;
              &lt;span class="item"&gt;One&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;span class="item"&gt;Two&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;span class="item"&gt;Three&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-dropdown-6 {
    .lib-dropdown-split(
        @_dropdown-split-button-border-radius-fix: true
    );
}

.split.example-dropdown-7 {
    .lib-dropdown-split();
}</code></pre></div></article><article id="split-button-variables" class="section"><div class="docs"><a href="#split-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="split-button-variables">Split 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>@_toggle-selector</th>
            <td>-</td>
            <td class="vars_value">~".action.toggle"</td>
            <td class="vars_value">selector</td>
            <td>Split button action toggle selector</td>
        </tr>
        <tr>
            <th>@_options-selector</th>
            <td>-</td>
            <td class="vars_value">~"ul.dropdown"</td>
            <td class="vars_value">selector</td>
            <td>Split button options selector</td>
        </tr>
        <tr>
            <th>@_button-selector</th>
            <td>-</td>
            <td class="vars_value">~".action.split"</td>
            <td class="vars_value">selector</td>
            <td>Split button selector</td>
        </tr>
        <tr>
            <th>@_dropdown-split-actions-padding</th>
            <td>@dropdown-split-actions__padding</td>
            <td class="vars_value">0 @indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button toggle element padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-button-actions-padding</th>
            <td>@dropdown-split-button__actions__padding</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button actions padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-toggle-actions-padding</th>
            <td>@dropdown-split-toggle__actions__padding</td>
            <td class="vars_value">4px @indent__xs</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button toggle padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-toggle-position</th>
            <td>@dropdown-split-toggle__position</td>
            <td class="vars_value">right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button toggle element position</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Drop-down list</th>
        </tr>
        <tr>
            <th>@_dropdown-split-list-min-width</th>
            <td>@dropdown-split-list__min-width</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button min width</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-width</th>
            <td>@dropdown-split-list__width</td>
            <td class="vars_value">100%</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button width</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-height</th>
            <td>@dropdown-split-list__height</td>
            <td class="vars_value">false</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button height</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-margin-top</th>
            <td>@dropdown-split-list__margin-top</td>
            <td class="vars_value">4px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button margin-top</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-top</th>
            <td>@dropdown-split-list__position-top</td>
            <td class="vars_value">@dropdown-list__position-top</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: top</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-right</th>
            <td>@dropdown-split-list__position-right</td>
            <td class="vars_value">@dropdown-list__position-right</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: right</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-bottom</th>
            <td>@dropdown-split-list__position-bottom</td>
            <td class="vars_value">@dropdown-list__position-bottom</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: bottom</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-position-left</th>
            <td>@dropdown-split-list__position-left</td>
            <td class="vars_value">@dropdown-list__position-left</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list position: left</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-background</th>
            <td>@dropdown-split-list__background</td>
            <td class="vars_value">@dropdown-list__background</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down background</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-border</th>
            <td>@dropdown-split-list__border</td>
            <td class="vars_value">@dropdown-list__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer</th>
            <td>@dropdown-split-list__pointer</td>
            <td class="vars_value">@dropdown-list__pointer</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-border</th>
            <td>@dropdown-split-list__pointer-border</td>
            <td class="vars_value">@dropdown-list-pointer__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-button-border-radius-fix</th>
            <td>@dropdown-split-button__border-radius-fix</td>
            <td class="vars_value">false</td>
            <td class="vars_value">true | false</td>
            <td>Split button drop-down list item border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-border</th>
            <td>@dropdown-split-list__item-border</td>
            <td class="vars_value">@dropdown-list-item__border</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item border</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-padding</th>
            <td>@dropdown-split-list__item-padding</td>
            <td class="vars_value">@dropdown-list-item__padding</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item padding</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-margin</th>
            <td>@dropdown-split-list__item-margin</td>
            <td class="vars_value">@dropdown-list-item__margin</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item margin</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-item-hover</th>
            <td>@dropdown-split-list__item-hover</td>
            <td class="vars_value">@dropdown-list-item__hover</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list item hovered background</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-position</th>
            <td>@dropdown-split-list__pointer-position</td>
            <td class="vars_value">right</td>
            <td class="vars_value">left | right</td>
            <td>Split button drop-down list pointer position</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-position-top</th>
            <td>@dropdown-split-list__pointer-position-top</td>
            <td class="vars_value">-12px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer position top</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-pointer-position-left-right</th>
            <td>@dropdown-split-list__pointer-position-left-right</td>
            <td class="vars_value">10px</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list pointer left or right position</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-shadow</th>
            <td>@dropdown-split-list__shadow</td>
            <td class="vars_value">@dropdown-list__shadow</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list shadow</td>
        </tr>
        <tr>
            <th>@_dropdown-split-list-z-index</th>
            <td>@dropdown-split-list__z-index</td>
            <td class="vars_value">@dropdown-list__z-index</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down list z-index</td>
        </tr>
        <tr>
            <th colspan="5" class="vars_section">Dropdown icon</th>
        </tr>
        <tr>
            <th>@_dropdown-split-toggle-icon-content</th>
            <td>@dropdown-split-toggle-icon__content</td>
            <td class="vars_value">@dropdown-toggle-icon__content</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon - default state</td>
        </tr>
        <tr>
            <th nowrap="nowrap">@_dropdown-split-toggle-active-icon-content</th>
            <td>@dropdown-split-toggle-icon__active__content</td>
            <td class="vars_value" nowrap="nowrap">@dropdown-toggle-icon__active__content</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon - active state</td>
        </tr>
        <tr>
            <th>@_icon-font</th>
            <td>@dropdown-split-toggle-icon__font</td>
            <td class="vars_value">@button-icon__font</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon font</td>
        </tr>
        <tr>
            <th>@_icon-font-size</th>
            <td>@dropdown-split-toggle-icon__font-size</td>
            <td class="vars_value">@button-icon__font-size</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon font size</td>
        </tr>
        <tr>
            <th>@_icon-font-line-height</th>
            <td>@dropdown-split-toggle-icon__font-line-height</td>
            <td class="vars_value">@button-icon__line-height</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon line height</td>
        </tr>
        <tr>
            <th>@_icon-font-color</th>
            <td>@dropdown-split-toggle-icon__font-color</td>
            <td class="vars_value">@button-icon__color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-hover</th>
            <td>@dropdown-split-toggle-icon__font-color-hover</td>
            <td class="vars_value">@button-icon__hover__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon hovered color</td>
        </tr>
        <tr>
            <th>@_icon-font-color-active</th>
            <td>@dropdown-split-toggle-icon__font-color-active</td>
            <td class="vars_value">@button-icon__active__font-color</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon active color</td>
        </tr>
        <tr>
            <th>@_icon-font-margin</th>
            <td>@dropdown-split-toggle-icon__font-margin</td>
            <td class="vars_value">@button-icon__margin</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon margin</td>
        </tr>
        <tr>
            <th>@_icon-font-position</th>
            <td>@dropdown-split-toggle-icon__position</td>
            <td class="vars_value">after</td>
            <td class="vars_value">before | after</td>
            <td>Split button drop-down toggle icon position</td>
        </tr>
        <tr>
            <th>@_icon-font-vertical-align</th>
            <td>@dropdown-split-toggle-icon__font-vertical-align</td>
            <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
            <td class="vars_value">'' | false | value</td>
            <td>Split button drop-down toggle icon vertical align</td>
        </tr>
        <tr>
            <th>@_icon-font-text-hide</th>
            <td>@dropdown-split-toggle-icon__text-hide</td>
            <td class="vars_value">@button-icon__text-hide</td>
            <td class="vars_value">true | false</td>
            <td>The text in the toggle tag is hidden</td>
        </tr>
    </table>
  </pre>
</div></article><article id="split-button-button-styling" class="section"><div class="docs"><a href="#split-button-button-styling" 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="split-button-button-styling">Split button - button styling</h1>
<p>  Split buttons can be customized the same way as all types of buttons from Magento UI library.</p>
<p>  <strong>Regular button:</strong></p>
<textarea class="preview-code" spellcheck="false"> &lt;div class="actions split example-dropdown-8"&gt;
    &lt;button class="action split"&gt;
        &lt;span&gt;Spit button&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
        &lt;span&gt;Select&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown"&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;One&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Two&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Three&lt;/span&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;</textarea><p>  <strong>Big button:</strong></p>
<textarea class="preview-code" spellcheck="false"> &lt;div class="actions split example-dropdown-9"&gt;
    &lt;button class="action split"&gt;
        &lt;span&gt;Spit button&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
        &lt;span&gt;Select&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown"&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;One&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Two&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Three&lt;/span&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;</textarea><p>  <strong>Small button:</strong></p>
<textarea class="preview-code" spellcheck="false"> &lt;div class="actions split example-dropdown-10"&gt;
    &lt;button class="action split"&gt;
        &lt;span&gt;Spit button&lt;/span&gt;
    &lt;/button&gt;
    &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
        &lt;span&gt;Select&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown"&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;One&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Two&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span class="item"&gt;Three&lt;/span&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-dropdown-8 {
    .lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}

.example-dropdown-9 {
    .action.split,
    .action.toggle {
        .lib-button-l();
    }
    .lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}

.example-dropdown-10 {
    .action.split,
    .action.toggle {
        .lib-button-s();
    }
    .lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}</code></pre></div></article><article id="split-button-icon-customization" class="section"><div class="docs"><a href="#split-button-icon-customization" 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="split-button-icon-customization">Split button icon customization</h1>
<p>  Mixin <code>.lib-dropdown-split()</code> uses <code>.icon-font()</code> mixin to customize icon. More information about <code>.icon-font()</code> parameters you can find at <strong>Icons</strong> page</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="actions split example-dropdown-11"&gt;
     &lt;button class="action split"&gt;
         &lt;span&gt;Spit button&lt;/span&gt;
     &lt;/button&gt;
     &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
         &lt;span&gt;Select&lt;/span&gt;
     &lt;/button&gt;
     &lt;ul class="dropdown"&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;One&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Two&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Three&lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-dropdown-11 {
    .lib-dropdown-split(
        @_dropdown-split-toggle-position: left,
        @_dropdown-split-button-border-radius-fix: true,
        @_dropdown-split-toggle-icon-content: @icon-expand,
        @_dropdown-split-toggle-active-icon-content: @icon-collapse,
        @_icon-font-position: before,
        @_icon-font-color: #f00,
        @_icon-font-color-hover: #f00
    );
}</code></pre></div></article><article id="split-button-dropdown-list-customization" class="section"><div class="docs"><a href="#split-button-dropdown-list-customization" 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="split-button-dropdown-list-customization">Split button drop-down list customization</h1>
<p>  You can customize drop-down list style</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="actions split example-dropdown-12"&gt;
     &lt;button class="action split"&gt;
         &lt;span&gt;Spit button&lt;/span&gt;
     &lt;/button&gt;
     &lt;button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"&gt;
         &lt;span&gt;Select&lt;/span&gt;
     &lt;/button&gt;
     &lt;ul class="dropdown"&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;One&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Two&lt;/span&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;span class="item"&gt;Three&lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-dropdown-12 {
    .lib-dropdown-split(
        @_dropdown-split-list-pointer: false,
        @_dropdown-split-list-background: #eef1f3,
        @_dropdown-split-list-item-hover: #d8e3e3,
        @_dropdown-split-list-border: 2px solid #ced1d4,
        @_dropdown-split-list-item-padding: 10px,
        @_dropdown-split-list-item-border: 2px solid #e8eaed,
        @_dropdown-split-list-shadow: none,
        @_dropdown-split-button-border-radius-fix: true
    );
}</code></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 vie … [Строка слишком длинная. Вы можете скачать файл]