Installation

<var>is-switcher</var> 
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(),function(t){t(document).ready(function(){function e(){var e={};[".color1",".color2",".color3",".color4",".color5",".color6",".color7"].forEach(function(i){e[i]=t(i).css("background-color")}),document.documentElement.style.setProperty("--bg-primary",e[".color1"]),document.documentElement.style.setProperty("--bg-primary-light",e[".color2"]),document.documentElement.style.setProperty("--bg-primary-dark",e[".color3"]),document.documentElement.style.setProperty("--bg-secondary",e[".color4"]),document.documentElement.style.setProperty("--bg-secondary-dark",e[".color5"]),document.documentElement.style.setProperty("--bg-btn-01",e[".color6"]),document.documentElement.style.setProperty("--text-btn-01",e[".color7"])}t(".config10").each(function(){var e=t(this);if(e.hasClass("config10")){var i=e.find("p").map(function(){return t(this).text().trim()}).get().join("");i=i.replace(/\s+/g," ").trim();var n=t('style[data-type="custom-css"]');n.length>0&&!i?n.remove():(n.remove(),t("head").append('<style data-type="custom-css">'+i+"</style>"))}else e[0].textContent.trim().replace(/\s+/g," ").trim().split(" ")}),t(".is-boxed").length&&t("body").addClass("has-sidebar"),t(".j-hgrid").unwrap().wrap("<div class='m-section' />"),t(".cc-m-htmlcode").on({mouseenter:function(){t(this).find("var, ins").show().css("display","block")},mouseleave:function(){t(this).find("var, ins").hide()}}),t("var").each(function(){t(this).closest(".m-section").removeClass().addClass(t(this).text())}),t(".matrix-view").on("click",function(e){e.preventDefault(),t("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),t(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style");var i,n=t('<div class="guide-lines-container"></div>').appendTo(".matrix .is-fluid-area");function s(e){n.empty();var i=e.position(),s=e.outerWidth();e.parent(),t('<div class="guide-line-vertical"></div>').css({left:i.left+s/2,top:0,bottom:0}).appendTo(n)}function o(){n.empty()}t(".matrix .is-fluid").draggable({containment:"parent",grid:[1,1],stop:function(){var e=t(this).parent().width(),i=t(this).parent().height(),n=t(this).position().left/e*100+"%",s=t(this).position().top/i*100+"%";t(this).css("left",n),t(this).css("top",s),o()},drag:function(t,e){s(e.helper)}}),t(".matrix .is-fluid").dblclick(function(e){t(e.target).hasClass("btn-radius-plus")||t(e.target).hasClass("btn-radius-minus")||t(this).draggable({disabled:!0})}),t(document).on("click",function(e){t(e.target).closest(".matrix .is-fluid").length||t(".matrix .is-fluid").draggable({disabled:!1})}),t(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,resize:function(t,e){var n=e.element.parent(),s=e.element.width()/n.width()*100+"%";e.element.css({width:s,height:"auto",left:i.left,top:i.top}),o()},start:function(t,e){i=e.element.position(),s(e.helper)},stop:function(){o()}}),t(".matrix .is-fluid-area").resizable({handles:"s",autoHide:!0,stop:function(t,e){var i=e.element.parent();e.element.css({height:e.element.height()+"px",width:e.element.width()/i.width()*100+"%"})}}),t(".matrix .mask-section").resizable({containment:"parent",autoHide:!0,resize:function(t,e){var i=e.element.parent(),n=(e.element.width()+r)/i.width()*100+"%",s=e.element.height()/i.height()*100+"%",r=4;e.element.css({width:n,height:s,left:0,top:0}),o()},start:function(t,e){s(e.helper)},stop:function(){o()}}),t(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,resize:function(t,e){var n=e.element.parent(),s=(e.element.width()+a)/n.width()*100+"%",r=e.element.height()/n.height()*100+"%",a=4;e.element.css({width:s,height:r,left:i.left,top:i.top}),o();var l=e.position.left/e.size.width*100+"%",c=e.position.top/e.size.height*100+"%";e.element.css("background-position",l+" "+c)},start:function(t,e){i=e.element.position(),s(e.helper)},stop:function(){o()}}),new MutationObserver(function(i){i.forEach(function(i){"childList"===i.type&&i.addedNodes.length>0&&(e(),t(".bg-custom-color").each(function(){var e=t(this).find("span").css("color");t(this).parent().attr("style","background-color: "+e+"!important")}))})}).observe(document.body,{childList:!0,subtree:!0}),e(),t(".reset-btn").click(function(){t(".matrix .is-fluid").draggable("destroy"),t(".matrix .is-fluid").draggable()}),t(".edit-btn").click(function(){t(".matrix .is-fluid").draggable("destroy")}),t(".btn-delete").click(function(){t(this).parent().remove()}),t(".btn-add").click(function(){var e=t(this).parent(".is-fluid"),i=e.clone();e.hasClass("is-rel")&&i.removeClass("is-rel"),i.css({left:"+=10px",top:"+=10px"}),i.insertAfter(e)}),t(".is-fluid").removeAttr("data-mce-style")})}(jQuery);//]]>
</script> 
<button class="btn btn-sm cc-m-save btn-save matrix-msg matrix-save" data-action="save">&#160;</button> 
<button class="btn btn-sm matrix-msg matrix-view">&#160;</button>