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

lib/web/css/docs/actions-toolbar.html
304 строки228 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>actions-toolbar | 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>  Actions toolbar is a set of actions on a page, form and so on that includes primary and/or secondary actions.
  To customize action toolbar <code>.lib-actions-toolbar()</code> mixin is used.
  To implement the Actions toolbar use the following markup</p>
<p>  <strong>Sample of using a button + link</strong></p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="actions-toolbar"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <strong>Sample of using a button + button</strong></p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-1"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Redeem Gift Card&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;button class="action check" type="button" value="Check status and balance"&gt;
              &lt;span&gt;Check status and balance&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.actions-toolbar {
    .lib-actions-toolbar();
}

.example-actions-toolbar-1 {
    .lib-actions-toolbar();
}</code></pre></div></article><article id="actions-toolbar-mixin-variables" class="section"><div class="docs"><a href="#actions-toolbar-mixin-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="actions-toolbar-mixin-variables">Actions toolbar mixin 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>@_actions-toolbar-actions-position</th>
        <td>@actions-toolbar-actions__position</td>
        <td class="vars_value">justify</td>
        <td class="vars_value">justify | left | right | center</td>
        <td>Position for actions in Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-actions-reverse</th>
        <td>@actions-toolbar-actions__reverse</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Reverse primary and secondary blocks position in Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-margin</th>
        <td>@actions-toolbar__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-padding</th>
        <td>@actions-toolbar__padding</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Paddings of the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-actions-margin</th>
        <td>@actions-toolbar-actions__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of all .actions in the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-primary-actions-margin</th>
        <td>@actions-toolbar-actions-primary__margin</td>
        <td class="vars_value">0 @indent__xs 0 0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of primary .actions in the Actions toolbar</td>
      </tr>
      <tr>
        <th>@_actions-toolbar-secondary-actions-margin</th>
        <td>@actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margins of secondary .actions in the Actions toolbar</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_actions-toolbar-actions-links-margin-top</th>
        <td>@actions-toolbar-actions-links__margin-top</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margin-top for links with class .action in the Actions toolbar</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_actions-toolbar-primary-actions-links-margin-top</th>
        <td>@actions-toolbar-actions-links-primary__margin-top</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margin-top for primary links with class .action in the Actions toolbar</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_actions-toolbar-secondary-actions-links-margin-top</th>
        <td>@actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value">6px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Margin-top for secondary links with class .action in the Actions toolbar</td>
      </tr>
    </table>
  </pre>
</div></article><article id="actions-toolbar-alignment" class="section"><div class="docs"><a href="#actions-toolbar-alignment" 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="actions-toolbar-alignment">Actions toolbar alignment</h1>
<p>  <code>@_actions-toolbar-actions-position</code> variable controls aligning actions toolbar elements. It can be set to:</p>
<pre><code class="lang-css">  justify | left | right | center</code></pre>
<p>  <strong>Justify:</strong></p>
<pre><code class="lang-css">  @_actions-toolbar-actions-position: justify</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-2"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <strong>Align toolbar elements left:</strong></p>
<pre><code class="lang-css">  @_actions-toolbar-actions-position: left</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-3"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <strong>Align toolbar elements right:</strong></p>
<pre><code class="lang-css">  @_actions-toolbar-actions-position: right</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-4"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <strong>Center:</strong></p>
<pre><code class="lang-css">  @_actions-toolbar-actions-position: center</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-5"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-actions-toolbar-2 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: justify
    );
}

.example-actions-toolbar-3 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left
    );
}

.example-actions-toolbar-4 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: right
    );
}

.example-actions-toolbar-5 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: center
    );
}</code></pre></div></article><article id="reverse-primary-and-secondary-blocks" class="section"><div class="docs"><a href="#reverse-primary-and-secondary-blocks" 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="reverse-primary-and-secondary-blocks">Reverse primary and secondary blocks</h1>
<p>  <code>@_actions-toolbar-actions-reverse</code> variable controls reversing of primary and secondary blocks.</p>
<p>  If it is set to <code>false</code>, the order of blocks in action toolbar is <strong>default</strong>.</p>
<p>  If it is set to <code>true</code>, the order of blocks in action toolbar is <strong>reversed</strong>.</p>
<p>  <strong>Justify toolbar elements and reverse them:</strong></p>
<pre><code class="lang-css">  @_actions-toolbar-actions-position: justify,
  @_actions-toolbar-actions-reverse: true</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-6"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <strong>Align toolbar elements to the left and reverse them:</strong></p>
<pre><code class="lang-css">  @_actions-toolbar-actions-position: left,
  @_actions-toolbar-actions-reverse: true</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-7"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <strong>Align toolbar elements to the right and reverse them:</strong></p>
<pre><code class="lang-css">  @_actions-toolbar-actions-position: right,
  @_actions-toolbar-actions-reverse: true</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-8"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-actions-toolbar-6 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: justify,
        @_actions-toolbar-actions-reverse: true
    );
}

.example-actions-toolbar-7 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left,
        @_actions-toolbar-actions-reverse: true
    );
}

.example-actions-toolbar-8 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: right,
        @_actions-toolbar-actions-reverse: true
    );
}</code></pre></div></article><article id="actions-toolbar-indents-customizations" class="section"><div class="docs"><a href="#actions-toolbar-indents-customizations" 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="actions-toolbar-indents-customizations">Actions toolbar indents customizations</h1>
<p>  <code>@_actions-toolbar-margin</code> variable controls margins of the actions toolbar wrapper.</p>
<p>  <code>@_actions-toolbar-padding</code> variable controls paddings of the actions toolbar wrapper.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-9"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a class="action back" href="#"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <code>@_actions-toolbar-primary-actions-margin</code> variable controls margins of the primary action elements.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class=" example-actions-toolbar-10"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
          &lt;button type="submit" class="action submit2" title="Submit2"&gt;&lt;span&gt;Submit2&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a href="#" class="action towishlist"&gt;&lt;span&gt;Add to Wish List&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="action tocompare"&gt;&lt;span&gt;Add to Compare&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea><p>  <code>@_actions-toolbar-secondary-actions-margin</code> variable controls margins of the secondary action elements.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-11"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
          &lt;button type="submit" class="action submit2" title="Submit2"&gt;&lt;span&gt;Submit2&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a href="#" class="action towishlist"&gt;&lt;span&gt;Add to Wish List&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="action tocompare"&gt;&lt;span&gt;Add to Compare&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-actions-toolbar-9 {
    .lib-actions-toolbar(
        @_actions-toolbar-margin: 10px,
        @_actions-toolbar-padding: 10px
    );
}

.example-actions-toolbar-10 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left,
        @_actions-toolbar-primary-actions-margin: 0 50px 0 0
    );
}

.example-actions-toolbar-11 {
    .lib-actions-toolbar(
        @_actions-toolbar-actions-position: left,
        @_actions-toolbar-secondary-actions-margin: 0 50px 0 0
    );
}</code></pre></div></article><article id="responsive-actions-toolbar" class="section"><div class="docs"><a href="#responsive-actions-toolbar" 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="responsive-actions-toolbar">Responsive actions toolbar</h1>
<p>  To set up responsive action toolbar, all floats of its elements should be cleared. To do this <code>.lib-actions-toolbar-clear-floats()</code> mixin is used.</p>
<textarea class="preview-code" spellcheck="false">  &lt;div class="example-actions-toolbar-12"&gt;
      &lt;div class="primary"&gt;
          &lt;button type="submit" class="action submit" title="Submit"&gt;&lt;span&gt;Submit&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="secondary"&gt;
          &lt;a href="#" class="action towishlist"&gt;&lt;span&gt;Add to Wish List&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.example-actions-toolbar-12 {
    .lib-actions-toolbar();
}

@media only screen and (max-width: @screen__m) {
    .example-actions-toolbar-12 {
       .lib-actions-toolbar-clear-floats();
    }
}</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 … [Строка слишком длинная. Вы можете скачать файл]