From 9d4123cee1867ee7199b06bdc92d40611f547ecc Mon Sep 17 00:00:00 2001 From: Zach van Rijn Date: Wed, 21 Jul 2021 14:54:07 -0500 Subject: Initial unmodified import from Astra (Version: 3.6.5) @ /wp-content/themes/astra/. --- .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 407 +++++++++++++++++++++ .../class-astra-header-menu-component-loader.php | 89 +++++ .../menu/class-astra-header-menu-component.php | 153 ++++++++ .../type/header/menu/dynamic-css/dynamic.css.php | 370 +++++++++++++++++++ 5 files changed, 1020 insertions(+) create mode 100644 inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/menu/class-astra-header-menu-component-loader.php create mode 100644 inc/builder/type/header/menu/class-astra-header-menu-component.php create mode 100644 inc/builder/type/header/menu/dynamic-css/dynamic.css.php (limited to 'inc/builder/type/header/menu') diff --git a/inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..41296e8 --- /dev/null +++ b/inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){for(var a=AstraBuilderMenuData.tablet_break_point||768,s=AstraBuilderMenuData.mobile_break_point||544,n=AstraBuilderMenuData.nav_menu_enabled||!1,e=1;e<=AstraBuilderMenuData.component_limit;e++){var t="menu"+e,i=".ast-builder-menu-"+e;astra_builder_visibility_css("section-hb-menu-"+e,i),astra_generate_outside_font_family_css("astra-settings[header-"+t+"-font-family]",i+" .menu-item > .menu-link"),astra_generate_font_weight_css("astra-settings[header-"+t+"-font-family]","astra-settings[header-"+t+"-font-weight]","font-weight",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-text-transform]","text-transform",i+" .menu-item > .menu-link"),astra_responsive_font_size("astra-settings[header-"+t+"-font-size]",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-line-height]","line-height",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-letter-spacing]","letter-spacing",i+" .menu-item > .menu-link","px"),astra_color_responsive_css("astra-menu-color-preview","astra-settings[header-"+t+"-color-responsive]","color",i+" .main-header-menu .menu-item > .menu-link"),astra_color_responsive_css("astra-menu-h-color-preview","astra-settings[header-"+t+"-h-color-responsive]","color",i+" .menu-item:hover > .menu-link, "+i+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder-toggle","astra-settings[header-"+t+"-color-responsive]","color",i+" .menu-item > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-h-toogle-color-preview","astra-settings[header-"+t+"-h-color-responsive]","color",i+" .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-active-color-preview","astra-settings[header-"+t+"-a-color-responsive]","color",i+" .menu-item.current-menu-item > .menu-link, "+i+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, "+i+" .current-menu-ancestor > .menu-link, "+i+" .current-menu-ancestor > .ast-menu-toggle"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","desktop"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","tablet"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","mobile"),astra_color_responsive_css("astra-menu-bg-preview","astra-settings[header-"+t+"-h-bg-color-responsive]","background",i+" .menu-item:hover > .menu-link, "+i+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder","astra-settings[header-"+t+"-a-bg-color-responsive]","background",i+" .menu-item.current-menu-item > .menu-link, "+i+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, "+i+" .current-menu-ancestor > .menu-link, "+i+" .current-menu-ancestor > .ast-menu-toggle"),function(i){wp.customize("astra-settings[header-menu"+i+"-submenu-border]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" .sub-menu, .ast-builder-menu-"+i+" .inline-on-mobile .sub-menu, .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .astra-megamenu, .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .astra-full-megamenu-wrapper {";t+="border-top-width:"+e.top+"px;",t+="border-right-width:"+e.right+"px;",t+="border-left-width:"+e.left+"px;",t+="border-style: solid;",t+="border-bottom-width:"+e.bottom+"px;",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-border",t)})}),wp.customize("astra-settings[header-menu"+i+"-menu-spacing]",function(e){e.bind(function(e){var t="";t+=".ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.desktop.left+e["desktop-unit"]+";",t+="padding-right: "+e.desktop.right+e["desktop-unit"]+";",t+="padding-top: "+e.desktop.top+e["desktop-unit"]+";",t+="padding-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",t+="} ",t+="@media (max-width: "+a+"px) {",t+=".ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.tablet.left+e["tablet-unit"]+";",t+="padding-right: "+e.tablet.right+e["tablet-unit"]+";",t+="padding-top: "+e.tablet.top+e["tablet-unit"]+";",t+="padding-bottom: "+e.tablet.bottom+e["tablet-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-"+i+" .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.tablet.top+e["tablet-unit"]+";",t+="right: calc( "+e.tablet.right+e["tablet-unit"]+" - 0.907em );",t+="} ",t+="} ",t+="@media (max-width: "+s+"px) {",t+=".ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.mobile.left+e["mobile-unit"]+";",t+="padding-right: "+e.mobile.right+e["mobile-unit"]+";",t+="padding-top: "+e.mobile.top+e["mobile-unit"]+";",t+="padding-bottom: "+e.mobile.bottom+e["mobile-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-"+i+" .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.mobile.top+e["mobile-unit"]+";",t+="right: calc( "+e.mobile.right+e["mobile-unit"]+" - 0.907em );",t+="} ",t+="} ",astra_add_dynamic_css("header-menu"+i+"-menu-spacing-toggle-button",t)})}),wp.customize("astra-settings[section-hb-menu-"+i+"-margin]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" .main-header-menu, .ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu",n="";n+=t+" {",n+="margin-left: "+e.desktop.left+e["desktop-unit"]+";",n+="margin-right: "+e.desktop.right+e["desktop-unit"]+";",n+="margin-top: "+e.desktop.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",n+="} ",n+="@media (max-width: "+a+"px) {",n+=t+" {",n+="margin-left: "+e.tablet.left+e["tablet-unit"]+";",n+="margin-right: "+e.tablet.right+e["tablet-unit"]+";",n+="margin-top: "+e.tablet.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.tablet.bottom+e["desktop-unit"]+";",n+="} ",n+="} ",n+="@media (max-width: "+s+"px) {",n+=t+" {",n+="margin-left: "+e.mobile.left+e["mobile-unit"]+";",n+="margin-right: "+e.mobile.right+e["mobile-unit"]+";",n+="margin-top: "+e.mobile.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.mobile.bottom+e["desktop-unit"]+";",n+="} ",n+="} ",astra_add_dynamic_css("section-hb-menu-"+i+"-margin",n)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-color]",function(e){e.bind(function(e){var t=wp.customize("astra-settings[header-menu"+i+"-submenu-item-border]").get(),n=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]").get();""!=e?1==t&&(t="",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu .menu-item .sub-menu .menu-link",t+="{",t+="border-bottom-width:"+(n?n+"px;":"0px;"),t+="border-color:"+e+";",t+="border-style: solid;",t+="}",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }",astra_add_dynamic_css("header-menu"+i+"-submenu-item-b-color",t)):wp.customize.preview.send("refresh")})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]",function(e){e.bind(function(e){var t=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu",n="";n+=t+" .menu-item .sub-menu .menu-link {",n+="border-bottom-width: "+e+"px;",n+="} ",n+=t+" .menu-item .sub-menu .menu-item:last-child .menu-link {",n+="border-bottom-width: 0px",n+="} ",astra_add_dynamic_css("header-menu"+i+"-submenu-item-b-size",n)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-border]",function(e){e.bind(function(e){var t=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-color]").get(),n=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]").get(),a=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .sub-menu .menu-link";!0===e?(a+="{",a+="border-bottom-width:"+(n?n+"px;":"0px;"),a+="border-color:"+t+";",a+="border-style: solid;"):(a+="{",a+="border-style: none;"),a+="}",a+=".ast-desktop .ast-builder-menu-"+i+" .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }",astra_add_dynamic_css("header-menu"+i+"-submenu-item-border",a)})}),wp.customize("astra-settings[header-menu"+i+"-menu-hover-animation]",function(e){e.bind(function(e){var t=jQuery("#ast-desktop-header #ast-hf-menu-"+i);t.removeClass("ast-menu-hover-style-underline"),t.removeClass("ast-menu-hover-style-zoom"),t.removeClass("ast-menu-hover-style-overline"),n&&document.dispatchEvent(new CustomEvent("astMenuHoverStyleChanged",{detail:{}})),t.addClass("ast-menu-hover-style-"+e)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-container-animation]",function(e){e.bind(function(e){var t=jQuery("#ast-desktop-header #ast-hf-menu-"+i);t.removeClass("astra-menu-animation-fade"),t.removeClass("astra-menu-animation-slide-down"),t.removeClass("astra-menu-animation-slide-up"),""!=e&&t.addClass("astra-menu-animation-"+e)})}),wp.customize("astra-settings[header-menu"+i+"-menu-stack-on-mobile]",function(e){e.bind(function(e){var t=jQuery("#ast-mobile-header #ast-hf-menu-"+i+".main-header-menu");t.removeClass("inline-on-mobile"),t.removeClass("stack-on-mobile"),!1===e?t.addClass("inline-on-mobile"):t.addClass("stack-on-mobile")})}),wp.customize("astra-settings[header-menu"+i+"-submenu-border-radius]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu {";t+="border-radius: "+e+"px",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-border-radius",t)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-top-offset]",function(e){e.bind(function(e){var t=".ast-desktop .ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-"+i+" li.menu-item .astra-full-megamenu-wrapper {";t+="margin-top: "+e+"px",t+="}",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop .ast-builder-menu-"+i+" .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before {",t+="height: calc( "+e+"px + 5px );",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-top-offset",t)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-width]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu {";t+="width: "+e+"px",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-width",t)})})}(e),astra_css("astra-settings[header-"+t+"-submenu-b-color]","border-color",i+" li.menu-item .sub-menu, "+i+" .inline-on-mobile li.menu-item .sub-menu ")}astra_color_responsive_css("astra-builder-transparent-submenu","astra-settings[transparent-submenu-h-color-responsive]","color",".ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link")}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..54fa93b --- /dev/null +++ b/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js @@ -0,0 +1,407 @@ +/** + * This file adds some LIVE to the Customizer live preview. To leverage + * this, set your custom settings to 'postMessage' and then add your handling + * here. Your javascript should grab settings from customizer controls, and + * then make any necessary changes to the page using jQuery. + * + * @package Astra + * @since 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = AstraBuilderMenuData.tablet_break_point || 768, + mobile_break_point = AstraBuilderMenuData.mobile_break_point || 544, + isNavMenuEnabled = AstraBuilderMenuData.nav_menu_enabled || false; + + for ( var index = 1; index <= AstraBuilderMenuData.component_limit; index++ ) { + + var prefix = 'menu' + index; + var selector = '.ast-builder-menu-' + index; + var section = 'section-hb-menu-' + index; + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, selector ); + + /** + * Typography CSS. + */ + + // Menu Typography. + astra_generate_outside_font_family_css( + 'astra-settings[header-' + prefix + '-font-family]', + selector + ' .menu-item > .menu-link' + ); + astra_generate_font_weight_css( + 'astra-settings[header-' + prefix + '-font-family]', + 'astra-settings[header-' + prefix + '-font-weight]', + 'font-weight', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-' + prefix + '-text-transform]', + 'text-transform', + selector + ' .menu-item > .menu-link' + ); + astra_responsive_font_size( + 'astra-settings[header-' + prefix + '-font-size]', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-' + prefix + '-line-height]', + 'line-height', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-' + prefix + '-letter-spacing]', + 'letter-spacing', + selector + ' .menu-item > .menu-link', + 'px' + ); + + /** + * Color CSS. + */ + + /** + * Menu - Colors + */ + + // Menu - Normal Color + astra_color_responsive_css( + 'astra-menu-color-preview', + 'astra-settings[header-' + prefix + '-color-responsive]', + 'color', + selector + ' .main-header-menu .menu-item > .menu-link' + ); + + // Menu - Hover Color + astra_color_responsive_css( + 'astra-menu-h-color-preview', + 'astra-settings[header-' + prefix + '-h-color-responsive]', + 'color', + selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' + ); + + // Menu Toggle - Color + astra_color_responsive_css( + 'astra-builder-toggle', + 'astra-settings[header-' + prefix + '-color-responsive]', + 'color', + selector + ' .menu-item > .ast-menu-toggle' + ); + + // Menu Toggle - Hover Color + astra_color_responsive_css( + 'astra-menu-h-toogle-color-preview', + 'astra-settings[header-' + prefix + '-h-color-responsive]', + 'color', + selector + ' .menu-item:hover > .ast-menu-toggle' + ); + // Menu - Active Color + astra_color_responsive_css( + 'astra-menu-active-color-preview', + 'astra-settings[header-' + prefix + '-a-color-responsive]', + 'color', + selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' + selector + ' .current-menu-ancestor > .menu-link, ' + selector + ' .current-menu-ancestor > .ast-menu-toggle' + ); + + // Menu - Normal Background + astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'desktop' ); + astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'tablet' ); + astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'mobile' ); + + // Menu - Hover Background + astra_color_responsive_css( + 'astra-menu-bg-preview', + 'astra-settings[header-' + prefix + '-h-bg-color-responsive]', + 'background', + selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' + ); + + // Menu - Active Background + astra_color_responsive_css( + 'astra-builder', + 'astra-settings[header-' + prefix + '-a-bg-color-responsive]', + 'background', + selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' + selector + ' .current-menu-ancestor > .menu-link, ' + selector + ' .current-menu-ancestor > .ast-menu-toggle' + ); + + /** + * Border CSS. + */ + + (function (index) { + + // Menu 1 > Sub Menu Border Size. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-border]', function( setting ) { + setting.bind( function( border ) { + + var dynamicStyle = '.ast-builder-menu-'+ index +' .sub-menu, .ast-builder-menu-'+ index +' .inline-on-mobile .sub-menu, .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .astra-megamenu, .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .astra-full-megamenu-wrapper {'; + dynamicStyle += 'border-top-width:' + border.top + 'px;'; + dynamicStyle += 'border-right-width:' + border.right + 'px;'; + dynamicStyle += 'border-left-width:' + border.left + 'px;'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;'; + + dynamicStyle += '}'; + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-border', dynamicStyle ); + + } ); + } ); + + // Menu Spacing - Menu 1. + wp.customize( 'astra-settings[header-menu'+ index +'-menu-spacing]', function( value ) { + value.bind( function( padding ) { + var dynamicStyle = ''; + dynamicStyle += '.ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['desktop']['left'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['desktop']['right'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['desktop']['top'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['desktop']['bottom'] + padding['desktop-unit'] + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['tablet']['left'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['tablet']['right'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['tablet']['bottom'] + padding['tablet-unit'] + ';'; + dynamicStyle += '} '; + // Toggle top. + dynamicStyle += '.ast-hfb-header .ast-builder-menu-'+ index +' .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {'; + dynamicStyle += 'top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'right: calc( ' + padding['tablet']['right'] + padding['tablet-unit'] + ' - 0.907em );' + dynamicStyle += '} '; + + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['mobile']['left'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['mobile']['right'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['mobile']['bottom'] + padding['mobile-unit'] + ';'; + dynamicStyle += '} '; + // Toggle top. + dynamicStyle += '.ast-hfb-header .ast-builder-menu-'+ index +' .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {'; + dynamicStyle += 'top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'right: calc( ' + padding['mobile']['right'] + padding['mobile-unit'] + ' - 0.907em );' + dynamicStyle += '} '; + + dynamicStyle += '} '; + + astra_add_dynamic_css( 'header-menu'+ index +'-menu-spacing-toggle-button', dynamicStyle ); + } ); + } ); + + // Margin - Menu 1. + wp.customize( 'astra-settings[section-hb-menu-'+ index +'-margin]', function( value ) { + value.bind( function( margin ) { + var selector = '.ast-builder-menu-'+ index +' .main-header-menu, .ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu'; + var dynamicStyle = ''; + dynamicStyle += selector + ' {'; + dynamicStyle += 'margin-left: ' + margin['desktop']['left'] + margin['desktop-unit'] + ';'; + dynamicStyle += 'margin-right: ' + margin['desktop']['right'] + margin['desktop-unit'] + ';'; + dynamicStyle += 'margin-top: ' + margin['desktop']['top'] + margin['desktop-unit'] + ';'; + dynamicStyle += 'margin-bottom: ' + margin['desktop']['bottom'] + margin['desktop-unit'] + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += selector + ' {'; + dynamicStyle += 'margin-left: ' + margin['tablet']['left'] + margin['tablet-unit'] + ';'; + dynamicStyle += 'margin-right: ' + margin['tablet']['right'] + margin['tablet-unit'] + ';'; + dynamicStyle += 'margin-top: ' + margin['tablet']['top'] + margin['desktop-unit'] + ';'; + dynamicStyle += 'margin-bottom: ' + margin['tablet']['bottom'] + margin['desktop-unit'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += selector + ' {'; + dynamicStyle += 'margin-left: ' + margin['mobile']['left'] + margin['mobile-unit'] + ';'; + dynamicStyle += 'margin-right: ' + margin['mobile']['right'] + margin['mobile-unit'] + ';'; + dynamicStyle += 'margin-top: ' + margin['mobile']['top'] + margin['desktop-unit'] + ';'; + dynamicStyle += 'margin-bottom: ' + margin['mobile']['bottom'] + margin['desktop-unit'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + astra_add_dynamic_css( 'section-hb-menu-'+ index +'-margin', dynamicStyle ); + } ); + } ); + + /** + * Header Menu 1 > Submenu border Color + */ + wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-color]', function (value) { + value.bind(function (color) { + var insideBorder = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-border]').get(), + borderSize = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-size]').get(); + if ('' != color) { + if ( true == insideBorder ) { + + var dynamicStyle = ''; + + dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu .menu-item .sub-menu .menu-link'; + dynamicStyle += '{'; + dynamicStyle += 'border-bottom-width:' + ( ( borderSize ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += '}'; + dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }'; + + astra_add_dynamic_css('header-menu'+ index +'-submenu-item-b-color', dynamicStyle); + } + } else { + wp.customize.preview.send('refresh'); + } + }); + }); + + // Sub Menu - Divider Size. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-b-size]', function( value ) { + value.bind( function( borderSize ) { + var selector = '.ast-desktop .ast-builder-menu-'+ index + ' .main-header-menu'; + var dynamicStyle = ''; + dynamicStyle += selector + ' .menu-item .sub-menu .menu-link {'; + dynamicStyle += 'border-bottom-width: ' + borderSize + 'px;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .menu-item .sub-menu .menu-item:last-child .menu-link {'; + dynamicStyle += 'border-bottom-width: 0px'; + dynamicStyle += '} '; + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-item-b-size', dynamicStyle ); + } ); + } ); + + /** + * Header Menu 1 > Submenu border Color + */ + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-border]', function( value ) { + value.bind( function( border ) { + var color = wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-b-color]' ).get(), + borderSize = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-size]').get(); + + var dynamicStyle = '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .sub-menu .menu-link'; + + if( true === border ) { + dynamicStyle += '{'; + dynamicStyle += 'border-bottom-width:' + ( ( borderSize ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += '}'; + } else { + dynamicStyle += '{'; + dynamicStyle += 'border-style: none;'; + dynamicStyle += '}'; + } + + dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }'; + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-item-border', dynamicStyle ); + + } ); + } ); + + // Animation preview support. + // Adding customizer-refresh because if megamenu is enabled on menu then caluculated left & width JS value of megamenu wrapper wiped out due to partial refresh. + wp.customize( 'astra-settings[header-menu'+ index +'-menu-hover-animation]', function( setting ) { + setting.bind( function( animation ) { + + var menuWrapper = jQuery( '#ast-desktop-header #ast-hf-menu-'+ index ); + menuWrapper.removeClass('ast-menu-hover-style-underline'); + menuWrapper.removeClass('ast-menu-hover-style-zoom'); + menuWrapper.removeClass('ast-menu-hover-style-overline'); + + if ( isNavMenuEnabled ) { + document.dispatchEvent( new CustomEvent( "astMenuHoverStyleChanged", { "detail": {} }) ); + } + + menuWrapper.addClass( 'ast-menu-hover-style-' + animation ); + } ); + } ); + + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-container-animation]', function( setting ) { + setting.bind( function( animation ) { + + var menuWrapper = jQuery( '#ast-desktop-header #ast-hf-menu-'+ index ); + menuWrapper.removeClass('astra-menu-animation-fade'); + menuWrapper.removeClass('astra-menu-animation-slide-down'); + menuWrapper.removeClass('astra-menu-animation-slide-up'); + + if ( '' != animation ) { + menuWrapper.addClass( 'astra-menu-animation-' + animation ); + } + } ); + } ); + + // Stack on Mobile CSS + wp.customize( 'astra-settings[header-menu'+ index +'-menu-stack-on-mobile]', function( setting ) { + setting.bind( function( stack ) { + + var menu_div = jQuery( '#ast-mobile-header #ast-hf-menu-'+ index + '.main-header-menu' ); + menu_div.removeClass('inline-on-mobile'); + menu_div.removeClass('stack-on-mobile'); + + if ( false === stack ) { + menu_div.addClass('inline-on-mobile'); + } else { + menu_div.addClass('stack-on-mobile'); + } + } ); + } ); + + // Sub Menu - Border Radius. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-border-radius]', function( value ) { + value.bind( function( border ) { + + var dynamicStyle = '.ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu {'; + dynamicStyle += 'border-radius: ' + border + 'px'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-border-radius', dynamicStyle ); + + } ); + } ); + + // Sub Menu - Top Offset. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-top-offset]', function( value ) { + value.bind( function( offset ) { + + var dynamicStyle = '.ast-desktop .ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-' + index + ' li.menu-item .astra-full-megamenu-wrapper {'; + dynamicStyle += 'margin-top: ' + offset + 'px'; + dynamicStyle += '}'; + + dynamicStyle += '.ast-desktop .ast-builder-menu-' + index + ' .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop .ast-builder-menu-' + index + ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before {'; + dynamicStyle += 'height: calc( ' + offset + 'px + 5px );'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-top-offset', dynamicStyle ); + + } ); + } ); + + // Sub Menu - Width. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-width]', function( value ) { + value.bind( function( width ) { + + var dynamicStyle = '.ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu {'; + dynamicStyle += 'width: ' + width + 'px'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-width', dynamicStyle ); + + } ); + } ); + + })(index); + + + // Sub Menu - Border Color. + astra_css( + 'astra-settings[header-' + prefix + '-submenu-b-color]', + 'border-color', + selector + ' li.menu-item .sub-menu, ' + selector + ' .inline-on-mobile li.menu-item .sub-menu ' + ); + } + + // Transparent header > Submenu link hover color. + astra_color_responsive_css( 'astra-builder-transparent-submenu', 'astra-settings[transparent-submenu-h-color-responsive]', 'color', '.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link' ); + +} )( jQuery ); diff --git a/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php b/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php new file mode 100644 index 0000000..aeb74dc --- /dev/null +++ b/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php @@ -0,0 +1,89 @@ + defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_menu, + 'nav_menu_enabled' => ( defined( 'ASTRA_EXT_VER' ) && Astra_Ext_Extension::is_active( 'nav-menu' ) ) ? true : false, + 'tablet_break_point' => astra_get_tablet_breakpoint(), + 'mobile_break_point' => astra_get_mobile_breakpoint(), + ) + ); + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Header_Menu_Component_Loader(); diff --git a/inc/builder/type/header/menu/class-astra-header-menu-component.php b/inc/builder/type/header/menu/class-astra-header-menu-component.php new file mode 100644 index 0000000..5c565b6 --- /dev/null +++ b/inc/builder/type/header/menu/class-astra-header-menu-component.php @@ -0,0 +1,153 @@ +). + * + * @since 3.0.0 + * @var Array + */ + $menu_classes = apply_filters( 'astra_' . $theme_location . '_menu_classes', array( 'main-header-menu', 'ast-nav-menu', 'ast-flex', $submenu_class, $stack_on_mobile_class ) ); + + $items_wrap = ''; + + // Fallback Menu if primary menu not set. + $fallback_menu_args = array( + 'theme_location' => $theme_location, + 'menu_id' => 'ast-hf-menu-' . $index, + 'menu_class' => 'main-navigation ast-inline-flex', + 'container' => 'div', + 'before' => '', + 'walker' => new Astra_Walker_Page(), + ); + + // To add default alignment for navigation which can be added through any third party plugin. + // Do not add any CSS from theme except header alignment. + echo '
'; + + if ( is_customize_preview() ) { + Astra_Builder_UI_Controller::render_customizer_edit_button(); + } + if ( has_nav_menu( $theme_location ) ) { + wp_nav_menu( + array( + 'menu_id' => 'ast-hf-menu-' . $index, + 'menu_class' => esc_attr( implode( ' ', $menu_classes ) ), + 'container' => 'div', + 'container_class' => 'main-header-bar-navigation', + 'items_wrap' => $items_wrap, + 'theme_location' => $theme_location, + ) + ); + } else { + echo '
'; + echo ''; + echo '
'; + } + echo '
'; + } +} + +/** + * Kicking this off by creating an object. + */ +new Astra_Header_Menu_Component(); diff --git a/inc/builder/type/header/menu/dynamic-css/dynamic.css.php b/inc/builder/type/header/menu/dynamic-css/dynamic.css.php new file mode 100644 index 0000000..074abb7 --- /dev/null +++ b/inc/builder/type/header/menu/dynamic-css/dynamic.css.php @@ -0,0 +1,370 @@ + array( + 'font-family' => astra_get_font_family( $menu_font_family ), + 'font-weight' => esc_attr( $menu_font_weight ), + 'text-transform' => esc_attr( $menu_text_transform ), + ), + $selector . ' .menu-item > .menu-link' => array( + 'line-height' => esc_attr( $menu_line_height ), + 'font-size' => astra_get_font_css_value( $menu_font_size_desktop, $menu_font_size_desktop_unit ), + 'color' => $menu_resp_color_desktop, + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'desktop' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'desktop' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_desktop, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_desktop, + 'background' => $menu_resp_bg_color_hover_desktop, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_desktop, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link' => array( + 'color' => $menu_resp_color_active_desktop, + 'background' => $menu_resp_bg_color_active_desktop, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_desktop, + ), + // Sub Menu. + $selector . ' .sub-menu, ' . $selector . ' .inline-on-mobile .sub-menu' => array( + 'border-top-width' => astra_get_css_value( $sub_menu_border_top, 'px' ), + 'border-bottom-width' => astra_get_css_value( $sub_menu_border_bottom, 'px' ), + 'border-right-width' => astra_get_css_value( $sub_menu_border_right, 'px' ), + 'border-left-width' => astra_get_css_value( $sub_menu_border_left, 'px' ), + 'border-color' => esc_attr( astra_get_option( 'header-' . $_prefix . '-submenu-b-color', $theme_color ) ), + 'border-style' => 'solid', + 'width' => astra_get_css_value( $sub_menu_width, 'px' ), + 'border-radius' => astra_get_css_value( $sub_menu_border_radius, 'px' ), + ), + $selector . ' .main-header-menu > .menu-item > .sub-menu, ' . $selector . ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper' => array( + 'margin-top' => astra_get_css_value( $sub_menu_top_offset, 'px' ), + ), + '.ast-desktop ' . $selector . ' .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop ' . $selector . ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before' => array( + 'height' => astra_calculate_spacing( $sub_menu_top_offset . 'px', '+', '5', 'px' ), + ), + $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ), + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), '-', '0.907', 'em' ), + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + $css_output_desktop[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'desktop' ); + + $mobile_selector = '.ast-header-break-point .ast-builder-menu-' . $index; + + $menu_spacing_mobile_top = astra_responsive_spacing( $menu_spacing, 'top', 'mobile' ); + $menu_spacing_mobile_top = ( isset( $menu_spacing_mobile_top ) && ! empty( $menu_spacing_mobile_top ) ) ? $menu_spacing_mobile_top : 0; + + $menu_spacing_tablet_top = astra_responsive_spacing( $menu_spacing, 'top', 'tablet' ); + $menu_spacing_tablet_top = ( isset( $menu_spacing_tablet_top ) && ! empty( $menu_spacing_tablet_top ) ) ? $menu_spacing_tablet_top : 0; + + $css_output_tablet = array( + + $mobile_selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_tablet, $menu_font_size_tablet_unit ), + ), + $mobile_selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'tablet' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'tablet' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'tablet' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_tablet, + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_tablet, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_tablet, + 'background' => $menu_resp_bg_color_hover_tablet, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_tablet, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link, ' . $selector . ' .current-menu-ancestor > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_tablet, + 'background' => $menu_resp_bg_color_active_tablet, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_tablet, + ), + $mobile_selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_tablet_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ), '-', '0.907', 'em' ), + ), + $selector . ' .menu-item-has-children > .menu-link:after' => array( + 'content' => 'unset', + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + $css_output_tablet[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'tablet' ); + + $css_output_mobile = array( + + $mobile_selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_mobile, $menu_font_size_mobile_unit ), + ), + $mobile_selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'mobile' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'mobile' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'mobile' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_mobile, + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_mobile, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_mobile, + 'background' => $menu_resp_bg_color_hover_mobile, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_mobile, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link, ' . $selector . ' .current-menu-ancestor > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_mobile, + 'background' => $menu_resp_bg_color_active_mobile, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_mobile, + ), + $mobile_selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_mobile_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ), '-', '0.907', 'em' ), + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + $css_output_mobile[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'mobile' ); + + if ( true === $sub_menu_divider_toggle ) { + // Sub Menu Divider. + $css_output_desktop[ '.ast-desktop ' . $selector . ' .menu-item .sub-menu .menu-link' ] = array( + 'border-bottom-width' => $sub_menu_divider_size . 'px', + 'border-color' => $sub_menu_divider_color, + 'border-style' => 'solid', + ); + $css_output_desktop[ '.ast-desktop ' . $selector . ' .menu-item .sub-menu .menu-item:last-child .menu-link' ] = array( + 'border-bottom-width' => 0, + ); + } else { + + $css_output_desktop[ '.ast-desktop .ast-builder-menu-' . $index . ' .menu-item .sub-menu .menu-link' ] = array( + 'border-style' => 'none', + ); + } + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector ); + + } + + $dynamic_css .= astra_menu_hover_style_css(); + return $dynamic_css; +} + +/** + * Load Menu hover style static CSS if any one of the menu hover style is selected. + * + * @return string + * @since 3.5.0 + */ +function astra_menu_hover_style_css() { + $hover_style_flg = false; + $menu_hover_css = ''; + for ( $index = 1; $index <= Astra_Builder_Helper::$num_of_header_menu; $index++ ) { + if ( '' !== astra_get_option( 'header-menu' . $index . '-menu-hover-animation' ) ) { + $hover_style_flg = true; + } + } + + if ( true === $hover_style_flg ) { + $menu_hover_css = ' + .ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link:before, + .ast-desktop .ast-menu-hover-style-overline > .menu-item > .menu-link:before { + content: ""; + position: absolute; + width: 100%; + right: 50%; + height: 1px; + background-color: transparent; + transform: scale(0, 0) translate(-50%, 0); + transition: transform .3s ease-in-out, color .0s ease-in-out; + } + + .ast-desktop .ast-menu-hover-style-underline > .menu-item:hover > .menu-link:before, + .ast-desktop .ast-menu-hover-style-overline > .menu-item:hover > .menu-link:before { + width: calc(100% - 1.2em); + background-color: currentColor; + transform: scale(1, 1) translate(50%, 0); + } + + .ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link:before { + bottom: 0; + } + + .ast-desktop .ast-menu-hover-style-overline > .menu-item > .menu-link:before { + top: 0; + } + + .ast-desktop .ast-menu-hover-style-zoom > .menu-item > .menu-link:hover { + transition: all .3s ease; + transform: scale(1.2); + }'; + } + return Astra_Enqueue_Scripts::trim_css( $menu_hover_css ); +} -- cgit v1.2.3-60-g2f50