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.

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
      

      

        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
"+a.textContent):g=m,f.setAttribute("src",g);var i=function(){f.contentDocument.body.innerHTML=this.value,h(f,"getHeight")};a.addEventListener("keypress",i),a.addEventListener("keyup",i),a.parentNode.insertBefore(d,a)},p=function(a){var b=document.createElement("div");b.className="preview-code",b.style.position="absolute",b.style.left="-9999px",j.appendChild(b);var c=parseInt(window.getComputedStyle(a).getPropertyValue("max-height"),10),d=function(a){b.textContent=this.value+"\n";var d=b.offsetHeight+2;d>=c?this.style.overflow="auto":this.style.overflow="hidden",this.style.height=b.offsetHeight+2+"px"};a.addEventListener("keypress",d),a.addEventListener("keyup",d),d.call(a)},q=function(){var b=j.getElementsByClassName("settings")[0],c=j.getElementsByClassName("resizeable"),d=30,e=function(b){document.cookie="preview-width="+b,a(c,function(a){b==="auto"&&(b=a.parentNode.offsetWidth),a.style.width=b+"px",h(a.getElementsByTagName("iframe")[0],"getHeight")})},i=f(document.cookie)["preview-width"];if(i){e(i),g(b.getElementsByClassName("is-active"),"is-active");var k=b.querySelector('button[data-width="'+i+'"]');k&&k.classList.add("is-active")}window.addEventListener("message",function(a){if(a.data==null||!a.source)return;var b=a.data,c=document.getElementsByName(a.source.name)[0];b.height!=null&&c&&(c.parentNode.style.height=b.height+d+"px")},!1),b&&c.length>0&&(b.hidden=!1,b.addEventListener("click",function(a){var c=a.target.tagName.toLowerCase(),d;if(c==="button")d=a.target;else{if(c!=="svg")return;d=a.target.parentNode}a.preventDefault(),g(b.getElementsByClassName("is-active"),"is-active"),d.classList.add("is-active");var f=d.dataset.width;e(f)}))}}()})()