newsupernova/lib/web/css/docs/source/_popups.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//  # Popups
//  To implement the popup, use the following markup. It corresponds accessibility requirements. To set Popup styles use the <code>.lib-popup()</code> mixin.
//
//  The <code>.lib-window-overlay()</code> mixin controls the styles of overlay background.
//  ##Simple popup
//
//  ``` html
//  <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
// <div class="window popup popup-example" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true">
//      <div class="popup actions">
//          <div class="secondary">
//              <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//          </div>
//      </div>
//      <div class="popup header">
//          <strong class="title" id="popup-title"><span>Popup title</span></strong>
//      </div>
//      <div class="popup content" id="popup-content">
//          <p>Popup content</p>
//      </div>
//      <div class="popup footer"></div>
//  </div>
//  ```
//
// ##Popup with actions toolbar
//
//  ``` html
//  <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
//  <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">
//     <div class="popup actions">
//         <div class="secondary">
//             <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//         </div>
//     </div>
//     <div class="popup header">
//         <strong class="title"><span>Popup title</span></strong>
//     </div>
//     <div class="popup content">
//         <p>Popup content</p>
//     </div>
//     <div class="popup footer">
//         <div class="actions toolbar">
//             <div class="primary">
//                 <button type="submit" class="action submit"><span>Primary Action</span></button>
//             </div>
//             <div class="secondary">
//                 <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//             </div>
//         </div>
//     </div>
//  </div>
//  ```

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

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

.window.overlay {
    .lib-window-overlay();
}

//  #Popup variables
//
// <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>
//
//  # Window overlay mixin variables
//
//  <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>
//
//  # Fixed height popup
//
//  To get a fixed height popup set the desired value for <code>@_popup-height</code> variable:
//  ``` html
//  <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
//  <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">
//      <div class="popup actions">
//          <div class="secondary">
//              <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//          </div>
//      </div>
//      <div class="popup header">
//          <strong class="title" id="popup-title"><span>Popup title</span></strong>
//      </div>
//      <div class="popup content" id="popup-content">
//          <p>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</p>
//      </div>
//      <div class="popup footer"></div>
//  </div>
//  ```

.window.popup.popup-example-2 {
    .lib-popup(
        @_popup-height: 200px
    );
}

//  # Fixed content height popup
//  To get a fixed height popup content set the desired value for <code>@_popup-content-height</code> variable:
//
//  ``` html
//  <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
//  <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">
//      <div class="popup actions">
//          <div class="secondary">
//              <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//          </div>
//      </div>
//      <div class="popup header">
//          <strong class="title" id="popup-title"><span>Popup title</span></strong>
//      </div>
//      <div class="popup content" id="popup-content">
//          <p>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</p>
//      </div>
//      <div class="popup footer"></div>
//  </div>
//  ```

.window.popup.popup-example-3 {
    .lib-popup(
        @_popup-content-height: 200px
    );
}

//  # Margins for header, content and footer block in popup
//
//  To set margins to header, content and footer block in popup, use variables:
//  ```css
//  @_popup-header-margin: value,
//  @_popup-content-margin: value,
//  @_popup-footer-margin: value
//  ```
// ``` html
// <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
// <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">
//     <div class="popup actions">
//         <div class="secondary">
//             <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//         </div>
//     </div>
//     <div class="popup header">
//         <strong class="title" id="popup-title"><span>Popup title</span></strong>
//     </div>
//     <div class="popup content" id="popup-content">
//         <p>Popup content</p>
//     </div>
//     <div class="popup footer">
//         <div class="actions toolbar">
//             <div class="primary">
//                 <button type="submit" class="action submit"><span>Primary Action</span></button>
//             </div>
//             <div class="secondary">
//                 <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//             </div>
//         </div>
//     </div>
// </div>
// ```

.window.popup.popup-example-4 {
    .lib-popup(
        @_popup-header-margin: 0 0 25px,
        @_popup-content-margin: 0 0 20px,
        @_popup-footer-margin: 0 20px
    );
}

//  # Popup titles styled as theme headings
//
//  To enable inheritance of the page heading style for popup title set:
//  ```css
//  @_popup-title-headings: true
//  ```
//  To set the page heading to inherit use:
//  ```css
//  @_popup-title-headings-level: h3 // h1, h2, h3, h4, h5, h6
//  ```
// ``` html
// <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
// <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">
//     <div class="popup actions">
//         <div class="secondary">
//             <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//         </div>
//     </div>
//     <div class="popup header">
//         <strong class="title" id="popup-title"><span>Popup title</span></strong>
//     </div>
//     <div class="popup content" id="popup-content">
//         <p>Popup content</p>
//     </div>
//     <div class="popup footer">
//         <div class="actions toolbar">
//             <div class="primary">
//                 <button type="submit" class="action submit"><span>Primary Action</span></button>
//             </div>
//             <div class="secondary">
//                 <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//             </div>
//         </div>
//     </div>
// </div>
// ```

.window.popup.popup-example-5 {
    .lib-popup(
        @_popup-title-headings: true,
        @_popup-title-headings-level: h1
    );
}

//  # Popup action toolbar
//
//  The <code>.lib-popup()</code> mixin uses the same variables as <code>.actions-toolbar()</code>, but with <code>'@_popup-'</code> prefix added.
//
//  To use variables from the <code>.actions-toolbar()</code> mixin set:
//  ```css
//  @_popup-actions-toolbar: true // false
//  ```
//  More information about parameters you will find at **Actions-toolbar** page.
// ``` html
// <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
// <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">
//     <div class="popup actions">
//         <div class="secondary">
//             <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//         </div>
//     </div>
//     <div class="popup header">
//         <strong class="title" id="popup-title"><span>Popup title</span></strong>
//     </div>
//     <div class="popup content" id="popup-content">
//         <p>Popup content</p>
//     </div>
//     <div class="popup footer">
//         <div class="actions toolbar">
//             <div class="primary">
//                 <button type="submit" class="action submit"><span>Primary Action</span></button>
//             </div>
//             <div class="secondary">
//                 <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//             </div>
//         </div>
//     </div>
// </div>
// ```

.window.popup.popup-example-6 {
    .lib-popup(
        @_popup-actions-toolbar: true,
        @_popup-actions-toolbar-actions-position: left,
        @_popup-actions-toolbar-actions-reverse: true
    );
}

//  # Popup Close button without an icon
//  You can set the popup close button to inherit theme's default button styles without an icon.
//  ```css
//    @_popup-button-close-icon: false,
//    @_popup-button-close-reset: false
//  ```
//  ``` html
//  <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
//  <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">
//      <div class="popup actions">
//          <div class="secondary">
//              <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//          </div>
//      </div>
//      <div class="popup header">
//          <strong class="title" id="popup-title"><span>Popup title</span></strong>
//      </div>
//      <div class="popup content" id="popup-content">
//          <p>Popup content</p>
//      </div>
//      <div class="popup footer">
//          <div class="actions toolbar">
//              <div class="primary">
//                  <button type="submit" class="action submit"><span>Primary Action</span></button>
//              </div>
//              <div class="secondary">
//                  <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//              </div>
//          </div>
//      </div>
//  </div>
//  ```

.window.popup.popup-example-7 {
    .lib-popup(
        @_popup-button-close-icon: false,
        @_popup-button-close-reset: false
    );
}

//  # Modify the icon of popup Close button
//
//  The <code>.lib-popup()</code> mixin uses all the same variables as <code>.icon-font()</code> mixin with <code>'@_popup-'</code> prefix added. More information about <code>.lib-icon-font()</code> parameters you can find at **Icons** page
//
// ``` html
// <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
// <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">
//     <div class="popup actions">
//         <div class="secondary">
//             <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//         </div>
//     </div>
//     <div class="popup header">
//         <strong class="title" id="popup-title"><span>Popup title</span></strong>
//     </div>
//     <div class="popup content" id="popup-content">
//         <p>Popup content</p>
//     </div>
//     <div class="popup footer">
//         <div class="actions toolbar">
//             <div class="primary">
//                 <button type="submit" class="action submit"><span>Primary Action</span></button>
//             </div>
//             <div class="secondary">
//                 <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//             </div>
//         </div>
//     </div>
// </div>
// ```

.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
    );
}

//  # Modify overlay styles
//
//  To modify overlay styles use the <code>.lib-window-overlay()</code> mixin
//
//  ``` html
//  <button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button>
//  <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">
//      <div class="popup actions">
//          <div class="secondary">
//              <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//          </div>
//      </div>
//      <div class="popup header">
//          <strong class="title" id="popup-title"><span>Popup title</span></strong>
//      </div>
//      <div class="popup content" id="popup-content">
//          <p>Popup content</p>
//      </div>
//      <div class="popup footer">
//          <div class="actions toolbar">
//              <div class="primary">
//                  <button type="submit" class="action submit"><span>Primary Action</span></button>
//              </div>
//              <div class="secondary">
//                  <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button>
//              </div>
//          </div>
//      </div>
//  </div>
//  <div class="window overlay example-overlay-1 active"></div>
//  ```

.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
    );
}