Components

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.

  @import 'components/_component.less';

Modals

This component contains two kinds of modals: popups and slide panels.

Modal popups

To have a modal popup use .lib-modal-popup class. <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>

Modal slide panels

To have a modal slide panel use .lib-modal-slide class. <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>

@import '../../source/components/_modals.less';

Components Variables

    

      

        
Variable
        
Default value
        
Allowable values
        
Comment
      
      

        
@modal__background-color
        
@color-white
        
constant
        
Modal background color
      
      

        
@modal__box-shadow
        
0 0 12px 2px rgba(0, 0, 0, .35)
        
constant
        
Modal shadow
      
      

        
Popups
      
      

        
@modal-popup__indent-vertical
        
5rem
        
constant
        
Modal popup top window indent
      
      

        
@modal-popup__padding
        
5rem
        
constant
        
Modal popup inner indent
      
      

        
@modal-popup__width
        
75%
        
constant
        
Modal popup width
      
      

        
@modal-popup__z-index
        
@modal__z-index
        
constant
        
Modal popup z-index
      
      

        
Slide panels
      
      

        
@modal-slide__first__indent-left
        
14.8rem
        
constant
        
Modal first slide window indent
      
      

        
@modal-slide__indent-left
        
4.5rem
        
constant
        
Indent between modal slide panels
      
      

        
@modal-slide__padding
        
2.6rem
        
constant
        
Modal popup inner indent
      
      

        
@modal-slide__z-index
        
@modal__z-index
        
constant
        
Modal slide z-index