diff options
Diffstat (limited to 'inc/builder/type/header/mobile-menu')
5 files changed, 801 insertions, 0 deletions
diff --git a/inc/builder/type/header/mobile-menu/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/mobile-menu/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..5697634 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var n=AstraBuilderMenuData.tablet_break_point||768,a=AstraBuilderMenuData.mobile_break_point||544,e=".ast-builder-menu-mobile .main-navigation";astra_builder_visibility_css("section-header-mobile-menu",e,"block"),astra_generate_outside_font_family_css("astra-settings[header-mobile-menu-font-family]",e+" .menu-item > .menu-link"),astra_generate_font_weight_css("astra-settings[header-mobile-menu-font-family]","astra-settings[header-mobile-menu-font-weight]","font-weight",e+" .menu-item > .menu-link"),astra_css("astra-settings[header-mobile-menu-text-transform]","text-transform",e+" .menu-item > .menu-link"),astra_responsive_font_size("astra-settings[header-mobile-menu-font-size]",e+" .menu-item > .menu-link"),astra_css("astra-settings[header-mobile-menu-line-height]","line-height",e+" .menu-item > .menu-link, "+e+" .menu-item > .ast-menu-toggle"),astra_css("astra-settings[header-mobile-menu-letter-spacing]","letter-spacing",e+" .menu-item > .menu-link","px"),astra_color_responsive_css("astra-menu-color-preview","astra-settings[header-mobile-menu-color-responsive]","color",e+" .main-header-menu .menu-item > .menu-link"),astra_color_responsive_css("astra-menu-h-color-preview","astra-settings[header-mobile-menu-h-color-responsive]","color",e+" .menu-item:hover > .menu-link, "+e+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder-toggle","astra-settings[header-mobile-menu-color-responsive]","color",e+" .menu-item > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-h-toogle-color-preview","astra-settings[header-mobile-menu-h-color-responsive]","color",e+" .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-active-color-preview","astra-settings[header-mobile-menu-a-color-responsive]","color",e+" .menu-item.current-menu-item > .menu-link, "+e+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle"),astra_apply_responsive_background_css("astra-settings[header-mobile-menu-bg-obj-responsive]",e+" .main-header-menu, "+e+" .main-header-menu .sub-menu","desktop"),astra_apply_responsive_background_css("astra-settings[header-mobile-menu-bg-obj-responsive]",e+" .main-header-menu, "+e+" .main-header-menu .sub-menu","tablet"),astra_apply_responsive_background_css("astra-settings[header-mobile-menu-bg-obj-responsive]",e+" .main-header-menu, "+e+" .main-header-menu .sub-menu","mobile"),astra_color_responsive_css("astra-menu-bg-preview","astra-settings[header-mobile-menu-h-bg-color-responsive]","background",e+" .menu-item:hover > .menu-link, "+e+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder","astra-settings[header-mobile-menu-a-bg-color-responsive]","background",e+" .menu-item.current-menu-item > .menu-link, "+e+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle"),wp.customize("astra-settings[header-mobile-menu-submenu-item-b-size]",function(e){e.bind(function(e){var t=".ast-hfb-header .ast-builder-menu-mobile .main-navigation",i="";i+=t+" .main-header-menu {",i+="border-top-width: "+e+"px;",i+="} ",i+=t+" .menu-item .sub-menu .menu-link, "+t+" .menu-item .menu-link {",i+="border-bottom-width: "+e+"px;",i+="} ",astra_add_dynamic_css("header-mobile-menu-submenu-item-b-size",i)})}),wp.customize("astra-settings[header-mobile-menu-submenu-border]",function(e){e.bind(function(e){var t=".ast-builder-menu-mobile .sub-menu {";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-mobile-menu-submenu-border",t)})}),wp.customize("astra-settings[header-mobile-menu-menu-spacing]",function(e){e.bind(function(e){var t="";t+=".ast-hfb-header .ast-builder-menu-mobile .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+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.desktop.top+e["desktop-unit"]+";",t+="right: calc( "+e.desktop.right+e["desktop-unit"]+" - 0.907em );",t+="} ",t+="@media (max-width: "+n+"px) {",t+=".ast-header-break-point .ast-builder-menu-mobile .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-mobile .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: "+a+"px) {",t+=".ast-header-break-point .ast-builder-menu-mobile .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-mobile .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-mobile-menu-menu-spacing-toggle-button",t)})}),wp.customize("astra-settings[section-header-mobile-menu-margin]",function(e){e.bind(function(e){var t=".ast-builder-menu-mobile .main-header-menu, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu",i="";i+=t+" {",i+="margin-left: "+e.desktop.left+e["desktop-unit"]+";",i+="margin-right: "+e.desktop.right+e["desktop-unit"]+";",i+="margin-top: "+e.desktop.top+e["desktop-unit"]+";",i+="margin-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",i+="} ",i+="@media (max-width: "+n+"px) {",i+=t+" {",i+="margin-left: "+e.tablet.left+e["tablet-unit"]+";",i+="margin-right: "+e.tablet.right+e["tablet-unit"]+";",i+="margin-top: "+e.tablet.top+e["desktop-unit"]+";",i+="margin-bottom: "+e.tablet.bottom+e["desktop-unit"]+";",i+="} ",i+="} ",i+="@media (max-width: "+a+"px) {",i+=t+" {",i+="margin-left: "+e.mobile.left+e["mobile-unit"]+";",i+="margin-right: "+e.mobile.right+e["mobile-unit"]+";",i+="margin-top: "+e.mobile.top+e["desktop-unit"]+";",i+="margin-bottom: "+e.mobile.bottom+e["desktop-unit"]+";",i+="} ",i+="} ",astra_add_dynamic_css("section-header-mobile-menu-margin",i)})}),wp.customize("astra-settings[header-mobile-menu-submenu-item-b-color]",function(e){e.bind(function(e){var t,i=wp.customize("astra-settings[header-mobile-menu-submenu-item-border]").get(),n=wp.customize("astra-settings[header-mobile-menu-submenu-item-b-size]").get();""!=e&&1==i?(t="",t+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link",t+="{",t+="border-bottom-width:"+(!0===i?n+"px;":"0px;"),t+="border-color:"+e+";",t+="border-style: solid;",t+="}",t+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu",t+="{",t+="border-top-width:"+(!0===i?n+"px;":"0px;"),t+="border-color:"+e+";",t+="}",astra_add_dynamic_css("header-mobile-menu-submenu-item-b-color",t)):wp.customize.preview.send("refresh")})}),wp.customize("astra-settings[header-mobile-menu-submenu-item-border]",function(e){e.bind(function(e){var t,i=wp.customize("astra-settings[header-mobile-menu-submenu-item-b-color]").get(),n=wp.customize("astra-settings[header-mobile-menu-submenu-item-b-size]").get();!0===e?(t=".ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .sub-menu .menu-link, .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .menu-link",t+="{",t+="border-bottom-width:"+(!0===e?n+"px;":"0px;"),t+="border-color:"+i+";",t+="border-style: solid;",t+="}",t+=".ast-builder-menu-mobile .main-navigation .main-header-menu",t+="{",t+="border-top-width:"+(!0===e?n+"px;":"0px;"),t+="border-style: solid;",t+="border-color:"+i+";",t+="}",astra_add_dynamic_css("header-mobile-menu-submenu-item-border",t)):wp.customize.preview.send("refresh")})}),astra_css("astra-settings[header-mobile-menu-submenu-b-color]","border-color",e+" li.menu-item .sub-menu, "+e+" .main-header-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/mobile-menu/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/mobile-menu/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..e809116 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/assets/js/unminified/customizer-preview.js @@ -0,0 +1,324 @@ +/**
+ * 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;
+
+ var selector = '.ast-builder-menu-mobile .main-navigation';
+ var section = 'section-header-mobile-menu';
+
+ // Advanced Visibility CSS Generation.
+ astra_builder_visibility_css( section, selector, 'block' );
+
+ /**
+ * Typography CSS.
+ */
+
+ // Menu Typography.
+ astra_generate_outside_font_family_css(
+ 'astra-settings[header-mobile-menu-font-family]',
+ selector + ' .menu-item > .menu-link'
+ );
+ astra_generate_font_weight_css(
+ 'astra-settings[header-mobile-menu-font-family]',
+ 'astra-settings[header-mobile-menu-font-weight]',
+ 'font-weight',
+ selector + ' .menu-item > .menu-link'
+ );
+ astra_css(
+ 'astra-settings[header-mobile-menu-text-transform]',
+ 'text-transform',
+ selector + ' .menu-item > .menu-link'
+ );
+ astra_responsive_font_size(
+ 'astra-settings[header-mobile-menu-font-size]',
+ selector + ' .menu-item > .menu-link'
+ );
+ astra_css(
+ 'astra-settings[header-mobile-menu-line-height]',
+ 'line-height',
+ selector + ' .menu-item > .menu-link, ' + selector + ' .menu-item > .ast-menu-toggle'
+ );
+ astra_css(
+ 'astra-settings[header-mobile-menu-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-mobile-menu-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-mobile-menu-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-mobile-menu-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-mobile-menu-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-mobile-menu-a-color-responsive]',
+ 'color',
+ selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle'
+ );
+
+ // Menu - Normal Background
+ astra_apply_responsive_background_css( 'astra-settings[header-mobile-menu-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'desktop' );
+ astra_apply_responsive_background_css( 'astra-settings[header-mobile-menu-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'tablet' );
+ astra_apply_responsive_background_css( 'astra-settings[header-mobile-menu-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-mobile-menu-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-mobile-menu-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'
+ );
+
+ /**
+ * Border CSS.
+ */
+
+ (function () {
+
+ // Sub Menu - Divider Size.
+ wp.customize( 'astra-settings[header-mobile-menu-submenu-item-b-size]', function( value ) {
+ value.bind( function( borderSize ) {
+ var selector = '.ast-hfb-header .ast-builder-menu-mobile .main-navigation';
+ var dynamicStyle = '';
+ dynamicStyle += selector + ' .main-header-menu {';
+ dynamicStyle += 'border-top-width: ' + borderSize + 'px;';
+ dynamicStyle += '} ';
+ dynamicStyle += selector + ' .menu-item .sub-menu .menu-link, ' + selector + ' .menu-item .menu-link {';
+ dynamicStyle += 'border-bottom-width: ' + borderSize + 'px;';
+ dynamicStyle += '} ';
+ astra_add_dynamic_css( 'header-mobile-menu-submenu-item-b-size', dynamicStyle );
+ } );
+ } );
+
+ // Menu 1 > Sub Menu Border Size.
+ wp.customize( 'astra-settings[header-mobile-menu-submenu-border]', function( setting ) {
+ setting.bind( function( border ) {
+
+ var dynamicStyle = '.ast-builder-menu-mobile .sub-menu {';
+ 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-mobile-menu-submenu-border', dynamicStyle );
+
+ } );
+ } );
+
+ // Menu Spacing - Menu 1.
+ wp.customize( 'astra-settings[header-mobile-menu-menu-spacing]', function( value ) {
+ value.bind( function( padding ) {
+ var dynamicStyle = '';
+ dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .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 += '} ';
+
+ // Toggle top.
+ dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {';
+ dynamicStyle += 'top: ' + padding['desktop']['top'] + padding['desktop-unit'] + ';';
+ dynamicStyle += 'right: calc( ' + padding['desktop']['right'] + padding['desktop-unit'] + ' - 0.907em );'
+ dynamicStyle += '} ';
+
+ dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {';
+ dynamicStyle += '.ast-header-break-point .ast-builder-menu-mobile .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-mobile .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-mobile .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-mobile .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-mobile-menu-menu-spacing-toggle-button', dynamicStyle );
+ } );
+ } );
+
+ // Margin - Menu 1.
+ wp.customize( 'astra-settings[section-header-mobile-menu-margin]', function( value ) {
+ value.bind( function( margin ) {
+ var selector = '.ast-builder-menu-mobile .main-header-menu, .ast-header-break-point .ast-builder-menu-mobile .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-header-mobile-menu-margin', dynamicStyle );
+ } );
+ } );
+
+ /**
+ * Header Menu 1 > Submenu border Color
+ */
+ wp.customize('astra-settings[header-mobile-menu-submenu-item-b-color]', function (value) {
+ value.bind(function (color) {
+ var insideBorder = wp.customize('astra-settings[header-mobile-menu-submenu-item-border]').get(),
+ borderSize = wp.customize('astra-settings[header-mobile-menu-submenu-item-b-size]').get();
+ if ('' != color) {
+ if ( true == insideBorder ) {
+
+ var dynamicStyle = '';
+
+ dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link';
+ dynamicStyle += '{';
+ dynamicStyle += 'border-bottom-width:' + ( ( true === insideBorder ) ? borderSize + 'px;' : '0px;' );
+ dynamicStyle += 'border-color:' + color + ';';
+ dynamicStyle += 'border-style: solid;';
+ dynamicStyle += '}';
+ dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu';
+ dynamicStyle += '{';
+ dynamicStyle += 'border-top-width:' + ( ( true === insideBorder ) ? borderSize + 'px;' : '0px;' );
+ dynamicStyle += 'border-color:' + color + ';';
+ dynamicStyle += '}';
+
+ astra_add_dynamic_css('header-mobile-menu-submenu-item-b-color', dynamicStyle);
+ } else {
+ wp.customize.preview.send( 'refresh' );
+ }
+ } else {
+ wp.customize.preview.send('refresh');
+ }
+ });
+ });
+
+ /**
+ * Header Menu 1 > Submenu border Color
+ */
+ wp.customize( 'astra-settings[header-mobile-menu-submenu-item-border]', function( value ) {
+ value.bind( function( border ) {
+ var color = wp.customize( 'astra-settings[header-mobile-menu-submenu-item-b-color]' ).get(),
+ borderSize = wp.customize('astra-settings[header-mobile-menu-submenu-item-b-size]').get();
+
+ if( true === border ) {
+ var dynamicStyle = '.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .sub-menu .menu-link, .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .menu-link';
+ dynamicStyle += '{';
+ dynamicStyle += 'border-bottom-width:' + ( ( true === border ) ? borderSize + 'px;' : '0px;' );
+ dynamicStyle += 'border-color:' + color + ';';
+ dynamicStyle += 'border-style: solid;';
+ dynamicStyle += '}';
+ dynamicStyle += '.ast-builder-menu-mobile .main-navigation .main-header-menu';
+ dynamicStyle += '{';
+ dynamicStyle += 'border-top-width:' + ( ( true === border ) ? borderSize + 'px;' : '0px;' );
+ dynamicStyle += 'border-style: solid;';
+ dynamicStyle += 'border-color:' + color + ';';
+ dynamicStyle += '}';
+
+ astra_add_dynamic_css( 'header-mobile-menu-submenu-item-border', dynamicStyle );
+ } else {
+ wp.customize.preview.send( 'refresh' );
+ }
+
+ } );
+ } );
+ })();
+
+
+ // Sub Menu - Border Color.
+ astra_css(
+ 'astra-settings[header-mobile-menu-submenu-b-color]',
+ 'border-color',
+ selector + ' li.menu-item .sub-menu, ' + selector + ' .main-header-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/mobile-menu/class-astra-mobile-menu-component-loader.php b/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component-loader.php new file mode 100644 index 0000000..f14a3a5 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component-loader.php @@ -0,0 +1,52 @@ +<?php +/** + * Mobile Navigation Menu Styling Loader for Astra theme. + * + * @package Astra Builder + * @author Brainstorm Force + * @copyright Copyright (c) 2020, Brainstorm Force + * @link https://www.brainstormforce.com + * @since Astra 3.0.0 + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; // Exit if accessed directly. +} + +/** + * Mobile Navigation Menu Initialization + * + * @since 3.0.0 + */ +class Astra_Mobile_Menu_Component_Loader { + + /** + * Constructor + * + * @since 3.0.0 + */ + public function __construct() { + add_action( 'customize_preview_init', array( $this, 'preview_scripts' ), 110 ); + } + + /** + * Customizer Preview + * + * @since 3.0.0 + */ + public function preview_scripts() { + /** + * Load unminified if SCRIPT_DEBUG is true. + */ + /* Directory and Extension */ + $dir_name = ( SCRIPT_DEBUG ) ? 'unminified' : 'minified'; + $file_prefix = ( SCRIPT_DEBUG ) ? '' : '.min'; + wp_enqueue_script( 'astra-mobile-menu-customizer-preview', ASTRA_BUILDER_MOBILE_MENU_URI . '/assets/js/' . $dir_name . '/customizer-preview' . $file_prefix . '.js', array( 'customize-preview', 'astra-customizer-preview-js' ), ASTRA_THEME_VERSION, true ); + + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Mobile_Menu_Component_Loader(); diff --git a/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component.php b/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component.php new file mode 100644 index 0000000..4c46c8c --- /dev/null +++ b/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component.php @@ -0,0 +1,131 @@ +<?php +/** + * Header Navigation Menu component. + * + * @package Astra Builder + * @author Brainstorm Force + * @copyright Copyright (c) 2020, Brainstorm Force + * @link https://www.brainstormforce.com + * @since Astra 3.0.0 + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; // Exit if accessed directly. +} + +define( 'ASTRA_BUILDER_MOBILE_MENU_DIR', ASTRA_THEME_DIR . 'inc/builder/type/header/mobile-menu' ); +define( 'ASTRA_BUILDER_MOBILE_MENU_URI', ASTRA_THEME_URI . 'inc/builder/type/header/mobile-menu' ); + +/** + * Header Navigation Menu Initial Setup + * + * @since 3.0.0 + */ +class Astra_Mobile_Menu_Component { + + /** + * Constructor function that initializes required actions and hooks + */ + public function __construct() { + + // @codingStandardsIgnoreStart WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound + require_once ASTRA_BUILDER_MOBILE_MENU_DIR . '/class-astra-mobile-menu-component-loader.php'; + + // Include front end files. + if ( ! is_admin() ) { + require_once ASTRA_BUILDER_MOBILE_MENU_DIR . '/dynamic-css/dynamic.css.php'; + } + // @codingStandardsIgnoreEnd WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound + } + + /** + * Secondary navigation markup + * + * @since 3.0.0. + */ + public static function menu_markup() { + + $theme_location = 'mobile_menu'; + $submenu_class = apply_filters( 'secondary_submenu_border_class', ' submenu-with-border' ); + $stack_on_mobile_class = 'stack-on-mobile'; + + // Menu Animation. + $menu_animation = astra_get_option( 'header-mobile-menu-submenu-container-animation' ); + if ( ! empty( $menu_animation ) ) { + $submenu_class .= ' astra-menu-animation-' . esc_attr( $menu_animation ) . ' '; + } + + /** + * Filter the classes(array) for Menu (<ul>). + * + * @since 3.0.0 + * @var Array + */ + $menu_classes = apply_filters( 'astra_primary_menu_classes', array( 'main-header-menu', 'ast-nav-menu', 'ast-flex', $submenu_class, $stack_on_mobile_class ) ); + + $items_wrap = '<nav '; + $items_wrap .= astra_attr( + 'site-navigation', + array( + 'id' => 'site-navigation', + 'class' => 'ast-flex-grow-1 navigation-accessibility site-header-focus-item', + 'aria-label' => esc_attr__( 'Site Navigation', 'astra' ), + ) + ); + $items_wrap .= '>'; + $items_wrap .= '<div class="main-navigation">'; + $items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>'; + $items_wrap .= '</div>'; + $items_wrap .= '</nav>'; + + // Fallback Menu if primary menu not set. + $fallback_menu_args = array( + 'theme_location' => $theme_location, + 'menu_id' => 'ast-hf-mobile-menu', + 'menu_class' => 'main-navigation', + 'container' => 'div', + 'before' => '<ul class="' . esc_attr( implode( ' ', $menu_classes ) ) . '">', + 'after' => '</ul>', + '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 '<div ' . astra_attr( 'ast-main-header-bar-alignment' ) . '>'; + + 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-mobile-menu', + '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 '<div class="main-header-bar-navigation">'; + echo '<nav '; + echo astra_attr( + 'site-navigation', + array( + 'id' => 'site-navigation', + ) + ); + echo ' class="ast-flex-grow-1 navigation-accessibility" aria-label="' . esc_attr__( 'Site Navigation', 'astra' ) . '">'; + wp_page_menu( $fallback_menu_args ); + echo '</nav>'; + echo '</div>'; + } + echo '</div>'; + } +} + +/** + * Kicking this off by creating an object. + */ +new Astra_Mobile_Menu_Component(); diff --git a/inc/builder/type/header/mobile-menu/dynamic-css/dynamic.css.php b/inc/builder/type/header/mobile-menu/dynamic-css/dynamic.css.php new file mode 100644 index 0000000..4943f82 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/dynamic-css/dynamic.css.php @@ -0,0 +1,293 @@ +<?php +/** + * Header Menu Colors - Dynamic CSS + * + * @package astra-builder + * @since 3.0.0 + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; // Exit if accessed directly. +} + +/** + * Header Menu Colors + */ +add_filter( 'astra_dynamic_theme_css', 'astra_hb_mobile_menu_dynamic_css', 11 ); + +/** + * Dynamic CSS + * + * @param string $dynamic_css Astra Dynamic CSS. + * @param string $dynamic_css_filtered Astra Dynamic CSS Filters. + * @return String Generated dynamic CSS for Header Menu Colors. + * + * @since 3.0.0 + */ +function astra_hb_mobile_menu_dynamic_css( $dynamic_css, $dynamic_css_filtered = '' ) { + + if ( ! Astra_Builder_Helper::is_component_loaded( 'mobile-menu', 'header' ) ) { + return $dynamic_css; + } + + $_section = 'section-header-mobile-menu'; + + $selector = '.ast-builder-menu-mobile .main-navigation'; + + + // Sub Menu. + $sub_menu_divider_toggle = astra_get_option( 'header-mobile-menu-submenu-item-border' ); + $sub_menu_divider_size = astra_get_option( 'header-mobile-menu-submenu-item-b-size' ); + $sub_menu_divider_color = astra_get_option( 'header-mobile-menu-submenu-item-b-color' ); + + // Menu. + $menu_resp_color = astra_get_option( 'header-mobile-menu-color-responsive' ); + $menu_resp_bg_color = astra_get_option( 'header-mobile-menu-bg-obj-responsive' ); + $menu_resp_color_hover = astra_get_option( 'header-mobile-menu-h-color-responsive' ); + $menu_resp_bg_color_hover = astra_get_option( 'header-mobile-menu-h-bg-color-responsive' ); + $menu_resp_color_active = astra_get_option( 'header-mobile-menu-a-color-responsive' ); + $menu_resp_bg_color_active = astra_get_option( 'header-mobile-menu-a-bg-color-responsive' ); + + $menu_resp_color_desktop = ( isset( $menu_resp_color['desktop'] ) ) ? $menu_resp_color['desktop'] : ''; + $menu_resp_color_tablet = ( isset( $menu_resp_color['tablet'] ) ) ? $menu_resp_color['tablet'] : ''; + $menu_resp_color_mobile = ( isset( $menu_resp_color['mobile'] ) ) ? $menu_resp_color['mobile'] : ''; + + $menu_resp_color_hover_desktop = ( isset( $menu_resp_color_hover['desktop'] ) ) ? $menu_resp_color_hover['desktop'] : ''; + $menu_resp_color_hover_tablet = ( isset( $menu_resp_color_hover['tablet'] ) ) ? $menu_resp_color_hover['tablet'] : ''; + $menu_resp_color_hover_mobile = ( isset( $menu_resp_color_hover['mobile'] ) ) ? $menu_resp_color_hover['mobile'] : ''; + + $menu_resp_bg_color_hover_desktop = ( isset( $menu_resp_bg_color_hover['desktop'] ) ) ? $menu_resp_bg_color_hover['desktop'] : ''; + $menu_resp_bg_color_hover_tablet = ( isset( $menu_resp_bg_color_hover['tablet'] ) ) ? $menu_resp_bg_color_hover['tablet'] : ''; + $menu_resp_bg_color_hover_mobile = ( isset( $menu_resp_bg_color_hover['mobile'] ) ) ? $menu_resp_bg_color_hover['mobile'] : ''; + + $menu_resp_color_active_desktop = ( isset( $menu_resp_color_active['desktop'] ) ) ? $menu_resp_color_active['desktop'] : ''; + $menu_resp_color_active_tablet = ( isset( $menu_resp_color_active['tablet'] ) ) ? $menu_resp_color_active['tablet'] : ''; + $menu_resp_color_active_mobile = ( isset( $menu_resp_color_active['mobile'] ) ) ? $menu_resp_color_active['mobile'] : ''; + + $menu_resp_bg_color_active_desktop = ( isset( $menu_resp_bg_color_active['desktop'] ) ) ? $menu_resp_bg_color_active['desktop'] : ''; + $menu_resp_bg_color_active_tablet = ( isset( $menu_resp_bg_color_active['tablet'] ) ) ? $menu_resp_bg_color_active['tablet'] : ''; + $menu_resp_bg_color_active_mobile = ( isset( $menu_resp_bg_color_active['mobile'] ) ) ? $menu_resp_bg_color_active['mobile'] : ''; + + // Typography. + $menu_font_family = astra_get_option( 'header-mobile-menu-font-family' ); + $menu_font_size = astra_get_option( 'header-mobile-menu-font-size' ); + $menu_font_weight = astra_get_option( 'header-mobile-menu-font-weight' ); + $menu_text_transform = astra_get_option( 'header-mobile-menu-text-transform' ); + $menu_line_height = astra_get_option( 'header-mobile-menu-line-height' ); + + $menu_font_size_desktop = ( isset( $menu_font_size['desktop'] ) ) ? $menu_font_size['desktop'] : ''; + $menu_font_size_tablet = ( isset( $menu_font_size['tablet'] ) ) ? $menu_font_size['tablet'] : ''; + $menu_font_size_mobile = ( isset( $menu_font_size['mobile'] ) ) ? $menu_font_size['mobile'] : ''; + $menu_font_size_desktop_unit = ( isset( $menu_font_size['desktop-unit'] ) ) ? $menu_font_size['desktop-unit'] : ''; + $menu_font_size_tablet_unit = ( isset( $menu_font_size['tablet-unit'] ) ) ? $menu_font_size['tablet-unit'] : ''; + $menu_font_size_mobile_unit = ( isset( $menu_font_size['mobile-unit'] ) ) ? $menu_font_size['mobile-unit'] : ''; + + + // Spacing. + $menu_spacing = astra_get_option( 'header-mobile-menu-menu-spacing' ); + + $sub_menu_divider_color = ( true === $sub_menu_divider_toggle ) ? $sub_menu_divider_color : ''; + + // Margin. + $margin = astra_get_option( $_section . '-margin' ); + $margin_selector = '.ast-builder-menu-mobile .main-header-menu, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu'; + + $menu_spacing_desktop_top = astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ); + $menu_spacing_desktop_top = ( isset( $menu_spacing_desktop_top ) && ! empty( $menu_spacing_desktop_top ) ) ? $menu_spacing_desktop_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; + + $menu_spacing_mobile_top = astra_responsive_spacing( $menu_spacing, 'top', 'mobile' ); + + if ( isset( $menu_spacing_mobile_top ) && '' === $menu_spacing_mobile_top && isset( $menu_spacing_tablet_top ) && '' !== $menu_spacing_tablet_top && 0 !== $menu_spacing_tablet_top ) { + + $menu_spacing_mobile_top = $menu_spacing_tablet_top; + } + + $menu_spacing_mobile_top = ( isset( $menu_spacing_mobile_top ) && ! empty( $menu_spacing_mobile_top ) ) ? $menu_spacing_mobile_top : 0; + + $css_output_desktop = array( + + $selector . ' .menu-item > .menu-link' => array( + 'font-family' => astra_get_font_family( $menu_font_family ), + 'font-weight' => esc_attr( $menu_font_weight ), + 'line-height' => esc_attr( $menu_line_height ), + 'text-transform' => esc_attr( $menu_text_transform ), + ), + $selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_desktop, $menu_font_size_desktop_unit ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + '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 . ' .main-header-menu .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 . ' .menu-item.current-menu-ancestor > .menu-link, ' . $selector . ' .menu-item.current-menu-ancestor > .ast-menu-toggle' => 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, + ), + $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_desktop_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), '-', '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', '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' ); + + $css_output_tablet = array( + + $selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_tablet, $menu_font_size_tablet_unit ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_tablet, + '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 . ' .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 . ' .menu-item.current-menu-ancestor > .menu-link, ' . $selector . ' .menu-item.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, + ), + $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( + + $selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_mobile, $menu_font_size_mobile_unit ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_mobile, + '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 . ' .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 . ' .menu-item.current-menu-ancestor > .menu-link, ' . $selector . ' .menu-item.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, + ), + $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 ) { + + $css_output_desktop_submenu = array( + '.ast-hfb-header ' . $selector . ' .main-header-menu, .ast-hfb-header ' . $selector . ' .main-header-menu, .ast-hfb-header .ast-mobile-header-content ' . $selector . ' .main-header-menu, .ast-hfb-header .ast-mobile-popup-content ' . $selector . ' .main-header-menu' => array( + 'border-top-width' => $sub_menu_divider_size . 'px', + 'border-color' => $sub_menu_divider_color, + ), + '.ast-hfb-header ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header ' . $selector . ' .menu-item .menu-link, .ast-hfb-header ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header ' . $selector . ' .menu-item .menu-link, .ast-hfb-header .ast-mobile-header-content ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-mobile-header-content ' . $selector . ' .menu-item .menu-link, .ast-hfb-header .ast-mobile-popup-content ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-mobile-popup-content ' . $selector . ' .menu-item .menu-link' => array( + 'border-bottom-width' => $sub_menu_divider_size . 'px', + 'border-color' => $sub_menu_divider_color, + 'border-style' => 'solid', + ), + ); + + } else { + + $css_output_desktop_submenu = array( + + '.ast-hfb-header .ast-builder-menu-mobile .main-header-menu, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link' => array( + 'border-style' => 'none', + ), + ); + } + + $css_output_desktop_submenu[ $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' ] = array( + 'top' => $menu_spacing_desktop_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), '-', '0.907', 'em' ), + ); + + $css_output = astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_desktop_submenu ); + $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, 'block' ); + + return $dynamic_css; +} |