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

lib/web/css/docs/popups.html
753 строки253 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>popups | 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>  To implement the popup, use the following markup. It corresponds accessibility requirements. To set Popup styles use the <code>.lib-popup()</code> mixin.</p>
<p>  The <code>.lib-window-overlay()</code> mixin controls the styles of overlay background.</p>
<h2 id="simple-popup">Simple popup</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
 &lt;div class="window popup popup-example" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
      &lt;div class="popup actions"&gt;
          &lt;div class="secondary"&gt;
              &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="popup header"&gt;
          &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div class="popup content" id="popup-content"&gt;
          &lt;p&gt;Popup content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="popup footer"&gt;&lt;/div&gt;
  &lt;/div&gt;</textarea><h2 id="popup-with-actions-toolbar">Popup with actions toolbar</h2>
<textarea class="preview-code" spellcheck="false">  &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
  &lt;div class="window popup popup-example-1" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
     &lt;div class="popup actions"&gt;
         &lt;div class="secondary"&gt;
             &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="popup header"&gt;
         &lt;strong class="title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
     &lt;/div&gt;
     &lt;div class="popup content"&gt;
         &lt;p&gt;Popup content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="popup footer"&gt;
         &lt;div class="actions toolbar"&gt;
             &lt;div class="primary"&gt;
                 &lt;button type="submit" class="action submit"&gt;&lt;span&gt;Primary Action&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
             &lt;div class="secondary"&gt;
                 &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example {
    .lib-popup();
}

.window.popup.popup-example-1 {
    .lib-popup();
}

.window.overlay {
    .lib-window-overlay();
}</code></pre></div></article><article id="popup-variables" class="section"><div class="docs"><a href="#popup-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="popup-variables">Popup 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>@_popup-width</th>
        <td>@popup__width</td>
        <td class="vars_value">auto</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup width</td>
      </tr>
      <tr>
        <th>@_popup-height</th>
        <td>@popup__height</td>
        <td class="vars_value">auto</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup height</td>
      </tr>
      <tr>
        <th>@_popup-padding</th>
        <td>@popup__padding</td>
        <td class="vars_value">22px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Inner popup padding</td>
      </tr>
      <tr>
        <th>@_popup-background</th>
        <td>@popup__background</td>
        <td class="vars_value">@color-white</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup background</td>
      </tr>
      <tr>
        <th>@_popup-border</th>
        <td>@popup__border</td>
        <td class="vars_value">1px solid #aeaeae</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup border</td>
      </tr>
      <tr>
        <th>@_popup-shadow</th>
        <td>@popup__shadow</td>
        <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
        <td class="vars_value">'' | false | none | value</td>
        <td>Popup shadow</td>
      </tr>
      <tr>
        <th>@_popup-fade</th>
        <td>@popup__fade</td>
        <td class="vars_value">opacity .3s linear</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup overlay opacity</td>
      </tr>
      <tr>
        <th>@_popup-z-index</th>
        <td>@popup__z-index</td>
        <td class="vars_value">1001</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup z-index</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup position</th>
      </tr>
      <tr>
        <th>@_popup-position</th>
        <td>@popup__position</td>
        <td class="vars_value">fixed</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup position</td>
      </tr>
      <tr>
        <th>@_popup-position-top</th>
        <td>@popup__position-top</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup top</td>
      </tr>
      <tr>
        <th>@_popup-position-right</th>
        <td>@popup__position-right</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup right</td>
      </tr>
      <tr>
        <th>@_popup-position-bottom</th>
        <td>@popup__position-bottom</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup bottom</td>
      </tr>
      <tr>
        <th>@_popup-position-left</th>
        <td>@popup__position-left</td>
        <td class="vars_value">0</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup left</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup margin</th>
      </tr>

      <tr>
        <th>@_popup-margin-top</th>
        <td>@popup__margin-top</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup top margin</td>
      </tr>
      <tr>
        <th>@_popup-margin-right</th>
        <td>@popup__margin-right</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup right margin</td>
      </tr>
      <tr>
        <th>@_popup-margin-bottom</th>
        <td>@popup__margin-bottom</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup bottom margin</td>
      </tr>
      <tr>
        <th>@_popup-margin-left</th>
        <td>@popup__margin-left</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup left margin</td>
      </tr>
      <tr>
        <th>@_popup-content-height</th>
        <td>@popup-content__height</td>
        <td class="vars_value">auto</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup content height</td>
      </tr>
      <tr>
        <th>@_popup-header-margin</th>
        <td>@popup-header__margin</td>
        <td class="vars_value">0 0 25px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup header margin</td>
      </tr>
      <tr>
        <th>@_popup-content-margin</th>
        <td>@popup-content__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup content margin</td>
      </tr>
      <tr>
        <th>@_popup-footer-margin</th>
        <td>@popup-footer__margin</td>
        <td class="vars_value">false</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup footer margin</td>
      </tr>
      <tr>
        <th>@_popup-title-headings</th>
        <td>@popup-title-headings</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Popup title has the same style as one of page headings</td>
      </tr>
      <tr>
        <th>@_popup-title-headings-level</th>
        <td>@popup-title-headings__level</td>
        <td class="vars_value">h3</td>
        <td class="vars_value">h1 | h2 | h3 | h4 | h5 | h6</td>
        <td>What heading style is applyed to the popup title</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup close button</th>
      </tr>
      <tr>
        <th>@_popup-button-close-icon</th>
        <td>@popup-button-close__icon</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Popup close button has an icon</td>
      </tr>
      <tr>
        <th>@_popup-button-close-reset</th>
        <td>@popup-button-close__reset</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Reset popup close button default styles</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position</th>
        <td>@popup-button-close__position</td>
        <td class="vars_value">absolute</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-top</th>
        <td>@popup-button-close__position-top</td>
        <td class="vars_value">10px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close top position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-right</th>
        <td>@popup-button-close__position-right</td>
        <td class="vars_value">10px</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close right position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-bottom</th>
        <td>@popup-button-close__position-bottom</td>
        <td class="vars_value">''</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close bottom position</td>
      </tr>
      <tr>
        <th>@_popup-button-close-position-left</th>
        <td>@popup-button-close__position-left</td>
        <td class="vars_value">''</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup button close left position</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Popup icons parameters</th>
      </tr>
      <tr>
        <th>@_popup-icon-font-content</th>
        <td>@popup-icon-font__content</td>
        <td class="vars_value">@icon-remove</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon code</td>
      </tr>
      <tr>
        <th>@_popup-icon-font</th>
        <td>@popup-icon-font</td>
        <td class="vars_value">@button-icon__font</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon font</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-size</th>
        <td>@popup-icon-font__size</td>
        <td class="vars_value">@button-icon__font-size</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon font size</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-line-height</th>
        <td>@popup-icon-font__line-height</td>
        <td class="vars_value">@button-icon__line-height</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon line height</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-color</th>
        <td>@popup-icon-font__color</td>
        <td class="vars_value">@button-icon__color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon color</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-color-hover</th>
        <td>@popup-icon-font__color-hover</td>
        <td class="vars_value">@button-icon__hover__font-color</td>
        <td class="vars_value">'' | false | value</td>
        <td>Hovered popup icon color</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-color-active</th>
        <td>@popup-icon-font__color-active</td>
        <td class="vars_value">@popup-icon-font__color-active</td>
        <td class="vars_value">'' | false | value</td>
        <td>Active popup icon color</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-margin</th>
        <td>@popup-icon-font__margin</td>
        <td class="vars_value">@button-icon__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon  margin</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-vertical-align</th>
        <td>@popup-icon-font__vertical-align</td>
        <td class="vars_value">@button-icon__vertical-align</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon vertical align</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-position</th>
        <td>@popup-icon-font__position</td>
        <td class="vars_value">@button-icon__position</td>
        <td class="vars_value">'' | false | value</td>
        <td>Popup icon position</td>
      </tr>
      <tr>
        <th>@_popup-icon-font-text-hide</th>
        <td>@popup-icon-font__text-hide</td>
        <td class="vars_value">true</td>
        <td class="vars_value">true | false</td>
        <td>Popup icon hide text</td>
      </tr>
      <tr>
        <th colspan="5" class="vars_section">Actions toolbar parameters</th>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar</th>
        <td>@popup-actions-toolbar</td>
        <td class="vars_value">false</td>
        <td class="vars_value">true | false</td>
        <td>Actions toolbar is displayed</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-position</th>
        <td>@popup-actions-toolbar-actions__position</td>
        <td class="vars_value">@actions-toolbar-actions__position</td>
        <td class="vars_value">justify | left | right | center</td>
        <td>Actions toolbar position</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-reverse</th>
        <td>@popup-actions-toolbar-actions__reverse</td>
        <td class="vars_value">@actions-toolbar-actions__reverse</td>
        <td class="vars_value">true | false</td>
        <td>Actions toolbar reverse</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-margin</th>
        <td>@popup-actions-toolbar__margin</td>
        <td class="vars_value">@actions-toolbar__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-padding</th>
        <td>@popup-actions-toolbar__padding</td>
        <td class="vars_value">@actions-toolbar__padding</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar padding</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-margin</th>
        <td>@popup-actions-toolbar-actions__margin</td>
        <td class="vars_value">@actions-toolbar-actions__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar actions margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-primary-actions-margin</th>
        <td>@popup-actions-toolbar-actions-primary__margin</td>
        <td class="vars_value">@actions-toolbar-actions-primary__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar primary actions margin</td>
      </tr>
      <tr>
        <th nowrap="nowrap">@_popup-actions-toolbar-secondary-actions-margin</th>
        <td>@popup-actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value"nowrap="nowrap">@actions-toolbar-actions-secondary__margin</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar secondary actions margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-actions-links-margin-top</th>
        <td>@popup-actions-toolbar-actions-links__margin-top</td>
        <td class="vars_value">@actions-toolbar-actions-links__margin-top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar links top margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-primary-actions-links-margin-top</th>
        <td>@popup-actions-toolbar-actions-links-primary__margin-top</td>
        <td class="vars_value">@actions-toolbar-actions-links-primary__margin-top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar primary actions links top margin</td>
      </tr>
      <tr>
        <th>@_popup-actions-toolbar-secondary-links-margin-top</th>
        <td>@popup-actions-toolbar-actions-links-secondary__margin-top</td>
        <td class="vars_value">@actions-toolbar-actions-links-secondary__margin-top</td>
        <td class="vars_value">'' | false | value</td>
        <td>Actions toolbar secondary links top margin</td>
      </tr>
    </table>
 </pre>
</div></article><article id="window-overlay-mixin-variables" class="section"><div class="docs"><a href="#window-overlay-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="window-overlay-mixin-variables">Window overlay 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>@_overlay-background</th>
        <td>@overlay__background</td>
        <td class="vars_value">#000</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay background color</td>
      </tr>
      <tr>
        <th>@_overlay-opacity</th>
        <td>@overlay__opacity</td>
        <td class="vars_value">.5</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay opacity</td>
      </tr>
      <tr>
        <th>@_overlay-opacity-old</th>
        <td>@overlay__opacity-old</td>
        <td class="vars_value">50</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay opacity for old browsers</td>
      </tr>
      <tr>
        <th>@_overlay-fade</th>
        <td>@overlay__fade</td>
        <td class="vars_value">opacity .15s linear</td>
        <td class="vars_value">'' | false | value</td>
        <td>Overlay fade</td>
      </tr>
      <tr>
        <th>@_overlay-z-index</th>
        <td>@overlay__z-index</td>
        <td class="vars_value">1000</td>
        <td class="vars_value">'' | value</td>
        <td>Overlay z-index</td>
      </tr>
    </table>
  </pre>
</div></article><article id="fixed-height-popup" class="section"><div class="docs"><a href="#fixed-height-popup" 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="fixed-height-popup">Fixed height popup</h1>
<p>  To get a fixed height popup set the desired value for <code>@_popup-height</code> variable:</p>
<textarea class="preview-code" spellcheck="false">  &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
  &lt;div class="window popup popup-example-2" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
      &lt;div class="popup actions"&gt;
          &lt;div class="secondary"&gt;
              &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="popup header"&gt;
          &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div class="popup content" id="popup-content"&gt;
          &lt;p&gt;Popup content Popup contentPopup content Popup contentPopup content Popup contentPopup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="popup footer"&gt;&lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-2 {
    .lib-popup(
        @_popup-height: 200px
    );
}</code></pre></div></article><article id="fixed-content-height-popup" class="section"><div class="docs"><a href="#fixed-content-height-popup" 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="fixed-content-height-popup">Fixed content height popup</h1>
<p>  To get a fixed height popup content set the desired value for <code>@_popup-content-height</code> variable:</p>
<textarea class="preview-code" spellcheck="false">  &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
  &lt;div class="window popup popup-example-3" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
      &lt;div class="popup actions"&gt;
          &lt;div class="secondary"&gt;
              &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="popup header"&gt;
          &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div class="popup content" id="popup-content"&gt;
          &lt;p&gt;Popup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="popup footer"&gt;&lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-3 {
    .lib-popup(
        @_popup-content-height: 200px
    );
}</code></pre></div></article><article id="margins-for-header-content-and-footer-block-in-popup" class="section"><div class="docs"><a href="#margins-for-header-content-and-footer-block-in-popup" 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="margins-for-header-content-and-footer-block-in-popup">Margins for header, content and footer block in popup</h1>
<p>  To set margins to header, content and footer block in popup, use variables:</p>
<pre><code class="lang-css">  @_popup-header-margin: value,
  @_popup-content-margin: value,
  @_popup-footer-margin: value</code></pre>
<textarea class="preview-code" spellcheck="false"> &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
 &lt;div class="window popup popup-example-4" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
     &lt;div class="popup actions"&gt;
         &lt;div class="secondary"&gt;
             &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="popup header"&gt;
         &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
     &lt;/div&gt;
     &lt;div class="popup content" id="popup-content"&gt;
         &lt;p&gt;Popup content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="popup footer"&gt;
         &lt;div class="actions toolbar"&gt;
             &lt;div class="primary"&gt;
                 &lt;button type="submit" class="action submit"&gt;&lt;span&gt;Primary Action&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
             &lt;div class="secondary"&gt;
                 &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-4 {
    .lib-popup(
        @_popup-header-margin: 0 0 25px,
        @_popup-content-margin: 0 0 20px,
        @_popup-footer-margin: 0 20px
    );
}</code></pre></div></article><article id="popup-titles-styled-as-theme-headings" class="section"><div class="docs"><a href="#popup-titles-styled-as-theme-headings" 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="popup-titles-styled-as-theme-headings">Popup titles styled as theme headings</h1>
<p>  To enable inheritance of the page heading style for popup title set:</p>
<pre><code class="lang-css">  @_popup-title-headings: true</code></pre>
<p>  To set the page heading to inherit use:</p>
<pre><code class="lang-css">  @_popup-title-headings-level: h3 // h1, h2, h3, h4, h5, h6</code></pre>
<textarea class="preview-code" spellcheck="false"> &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
 &lt;div class="window popup popup-example-5" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
     &lt;div class="popup actions"&gt;
         &lt;div class="secondary"&gt;
             &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="popup header"&gt;
         &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
     &lt;/div&gt;
     &lt;div class="popup content" id="popup-content"&gt;
         &lt;p&gt;Popup content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="popup footer"&gt;
         &lt;div class="actions toolbar"&gt;
             &lt;div class="primary"&gt;
                 &lt;button type="submit" class="action submit"&gt;&lt;span&gt;Primary Action&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
             &lt;div class="secondary"&gt;
                 &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-5 {
    .lib-popup(
        @_popup-title-headings: true,
        @_popup-title-headings-level: h1
    );
}</code></pre></div></article><article id="popup-action-toolbar" class="section"><div class="docs"><a href="#popup-action-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="popup-action-toolbar">Popup action toolbar</h1>
<p>  The <code>.lib-popup()</code> mixin uses the same variables as <code>.actions-toolbar()</code>, but with <code>&#39;@_popup-&#39;</code> prefix added.</p>
<p>  To use variables from the <code>.actions-toolbar()</code> mixin set:</p>
<pre><code class="lang-css">  @_popup-actions-toolbar: true // false</code></pre>
<p>  More information about parameters you will find at <strong>Actions-toolbar</strong> page.</p>
<textarea class="preview-code" spellcheck="false"> &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
 &lt;div class="window popup popup-example-6" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
     &lt;div class="popup actions"&gt;
         &lt;div class="secondary"&gt;
             &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="popup header"&gt;
         &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
     &lt;/div&gt;
     &lt;div class="popup content" id="popup-content"&gt;
         &lt;p&gt;Popup content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="popup footer"&gt;
         &lt;div class="actions toolbar"&gt;
             &lt;div class="primary"&gt;
                 &lt;button type="submit" class="action submit"&gt;&lt;span&gt;Primary Action&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
             &lt;div class="secondary"&gt;
                 &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-6 {
    .lib-popup(
        @_popup-actions-toolbar: true,
        @_popup-actions-toolbar-actions-position: left,
        @_popup-actions-toolbar-actions-reverse: true
    );
}</code></pre></div></article><article id="popup-close-button-without-an-icon" class="section"><div class="docs"><a href="#popup-close-button-without-an-icon" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="popup-close-button-without-an-icon">Popup Close button without an icon</h1>
<p>  You can set the popup close button to inherit theme&#39;s default button styles without an icon.</p>
<pre><code class="lang-css">    @_popup-button-close-icon: false,
    @_popup-button-close-reset: false</code></pre>
<textarea class="preview-code" spellcheck="false">  &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
  &lt;div class="window popup popup-example-7" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
      &lt;div class="popup actions"&gt;
          &lt;div class="secondary"&gt;
              &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="popup header"&gt;
          &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div class="popup content" id="popup-content"&gt;
          &lt;p&gt;Popup content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="popup footer"&gt;
          &lt;div class="actions toolbar"&gt;
              &lt;div class="primary"&gt;
                  &lt;button type="submit" class="action submit"&gt;&lt;span&gt;Primary Action&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="secondary"&gt;
                  &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-7 {
    .lib-popup(
        @_popup-button-close-icon: false,
        @_popup-button-close-reset: false
    );
}</code></pre></div></article><article id="modify-the-icon-of-popup-close-button" class="section"><div class="docs"><a href="#modify-the-icon-of-popup-close-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="modify-the-icon-of-popup-close-button">Modify the icon of popup Close button</h1>
<p>  The <code>.lib-popup()</code> mixin uses all the same variables as <code>.icon-font()</code> mixin with <code>&#39;@_popup-&#39;</code> prefix added. More information about <code>.lib-icon-font()</code> parameters you can find at <strong>Icons</strong> page</p>
<textarea class="preview-code" spellcheck="false"> &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
 &lt;div class="window popup popup-example-8" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
     &lt;div class="popup actions"&gt;
         &lt;div class="secondary"&gt;
             &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="popup header"&gt;
         &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
     &lt;/div&gt;
     &lt;div class="popup content" id="popup-content"&gt;
         &lt;p&gt;Popup content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="popup footer"&gt;
         &lt;div class="actions toolbar"&gt;
             &lt;div class="primary"&gt;
                 &lt;button type="submit" class="action submit"&gt;&lt;span&gt;Primary Action&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
             &lt;div class="secondary"&gt;
                 &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-8 {
    .lib-popup(
        @_popup-icon-font-content: @icon-arrow-up,
        @_popup-icon-font-color: #f00,
        @_popup-icon-font-color-hover: #090,
        @_popup-icon-font-color-active: #00f,
        @_popup-icon-font-size: 30px,
        @_popup-icon-font-vertical-align: middle,
        @_popup-icon-font-text-hide: false
    );
}</code></pre></div></article><article id="modify-overlay-styles" class="section"><div class="docs"><a href="#modify-overlay-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-overlay-styles">Modify overlay styles</h1>
<p>  To modify overlay styles use the <code>.lib-window-overlay()</code> mixin</p>
<textarea class="preview-code" spellcheck="false">  &lt;button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"&gt;&lt;span&gt;Show popup&lt;/span&gt;&lt;/button&gt;
  &lt;div class="window popup popup-example-9" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"&gt;
      &lt;div class="popup actions"&gt;
          &lt;div class="secondary"&gt;
              &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="popup header"&gt;
          &lt;strong class="title" id="popup-title"&gt;&lt;span&gt;Popup title&lt;/span&gt;&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div class="popup content" id="popup-content"&gt;
          &lt;p&gt;Popup content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="popup footer"&gt;
          &lt;div class="actions toolbar"&gt;
              &lt;div class="primary"&gt;
                  &lt;button type="submit" class="action submit"&gt;&lt;span&gt;Primary Action&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="secondary"&gt;
                  &lt;button type="button" class="action close" data-dismiss="popup"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="window overlay example-overlay-1 active"&gt;&lt;/div&gt;</textarea>
</div><div class="code"><pre><code>.window.popup.popup-example-9 {
    .lib-popup();
}

.window.overlay.example-overlay-1.active {
    .lib-window-overlay(
        @_overlay-background: #0f5293,
        @_overlay-opacity: .8,
        @_overlay-opacity-old: 80
    );
}</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 … [Строка слишком длинная. Вы можете скачать файл]