# 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