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';


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

To have a modal popup use .lib-modal-popup class.

To have a modal slide panel use .lib-modal-slide class.

@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
@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