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

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

<!DOCTYPE html><html><head><title>components | 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> Components are complete ready-for-use parts both for Storefront or Admin area.
 They are not mixins, but classes. To use them, include this file with @import.</p>
<pre><code class="lang-less">  @import &#39;components/_component.less&#39;;</code></pre>
<h2 id="modals">Modals</h2>
<p> This component contains two kinds of modals: popups and slide panels.</p>
<h3 id="modal-popups">Modal popups</h3>
<p> To have a modal popup use <code>.lib-modal-popup</code> class.
 <textarea class="preview-code" spellcheck="false">
 <div class="modals-wrapper">
    <aside
        class="modal-popup _show"
        data-role="modal"
        data-type="popup">
        <div class="modal-inner-wrap">
             <header class="modal-header">
                 <h1 class="modal-title" data-role="title">Modal Popup</h1>
                 <button
                     class="action-close"
                     data-role="closeBtn"
                     type="button">
                     <span>Close</span>
                 </button>
             </header>
             <div class="modal-content" data-role="content">
                 Modal Content
             </div>
             <footer class="modal-content" data-role="content">
                 Modal Footer
             </footer>
        </div>
    </aside>
    <div class="modals-overlay"></div>
 </div>
 </textarea></p>
<h3 id="modal-slide-panels">Modal slide panels</h3>
<p> To have a modal slide panel use <code>.lib-modal-slide</code> class.
 <textarea class="preview-code" spellcheck="false">
 <div class="modals-wrapper">
    <aside
        class="modal-slide _show"
        data-role="modal"
        data-type="slide">
        <div class="modal-inner-wrap">
             <header class="modal-header">
                 <h1 class="modal-title" data-role="title">Modal Slide</h1>
                 <button
                     class="action-close"
                     data-role="closeBtn"
                     type="button">
                     <span>Close</span>
                 </button>
             </header>
             <div class="modal-content" data-role="content">
                 Modal Content
             </div>
             <footer class="modal-content" data-role="content">
                 Modal Footer
             </footer>
        </div>
    </aside>
    <div class="modals-overlay"></div>
 </div>
 </textarea></p>
</div><div class="code"><pre><code>@import '../../source/components/_modals.less';</code></pre></div></article><article id="components-variables" class="section"><div class="docs"><a href="#components-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="components-variables">Components Variables</h1>
 <pre>
    <table>
      <tr>
        <th class="vars_head">Variable</th>
        <th class="vars_head">Default value</th>
        <th class="vars_head">Allowable values</th>
        <th class="vars_head">Comment</th>
      </tr>
      <tr>
        <th>@modal__background-color</th>
        <td class="vars_value">@color-white</td>
        <td class="vars_value">constant</td>
        <td>Modal background color</td>
      </tr>
      <tr>
        <th>@modal__box-shadow</th>
        <td class="vars_value">0 0 12px 2px rgba(0, 0, 0, .35)</td>
        <td class="vars_value">constant</td>
        <td>Modal shadow</td>
      </tr>
      <tr>
        <th class="vars_section" colspan="4">Popups</th>
      </tr>
      <tr>
        <th>@modal-popup__indent-vertical</th>
        <td class="vars_value">5rem</td>
        <td class="vars_value">constant</td>
        <td>Modal popup top window indent</td>
      </tr>
      <tr>
        <th>@modal-popup__padding</th>
        <td class="vars_value">5rem</td>
        <td class="vars_value">constant</td>
        <td>Modal popup inner indent</td>
      </tr>
      <tr>
        <th>@modal-popup__width</th>
        <td class="vars_value">75%</td>
        <td class="vars_value">constant</td>
        <td>Modal popup width</td>
      </tr>
      <tr>
        <th>@modal-popup__z-index</th>
        <td class="vars_value">@modal__z-index</td>
        <td class="vars_value">constant</td>
        <td>Modal popup z-index</td>
      </tr>
      <tr>
        <th class="vars_section" colspan="4">Slide panels</th>
      </tr>
      <tr>
        <th>@modal-slide__first__indent-left</th>
        <td class="vars_value">14.8rem</td>
        <td class="vars_value">constant</td>
        <td>Modal first slide window indent</td>
      </tr>
      <tr>
        <th>@modal-slide__indent-left</th>
        <td class="vars_value">4.5rem</td>
        <td class="vars_value">constant</td>
        <td>Indent between modal slide panels</td>
      </tr>
      <tr>
        <th>@modal-slide__padding</th>
        <td class="vars_value">2.6rem</td>
        <td class="vars_value">constant</td>
        <td>Modal popup inner indent</td>
      </tr>
      <tr>
        <th>@modal-slide__z-index</th>
        <td class="vars_value">@modal__z-index</td>
        <td class="vars_value">constant</td>
        <td>Modal slide z-index</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  … [Строка слишком длинная. Вы можете скачать файл]