diff options
Diffstat (limited to 'inc/builder/type/header/off-canvas')
5 files changed, 896 insertions, 0 deletions
diff --git a/inc/builder/type/header/off-canvas/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/off-canvas/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..8b9f45b --- /dev/null +++ b/inc/builder/type/header/off-canvas/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var a=astraBuilderPreview.tablet_break_point||768,o=astraBuilderPreview.mobile_break_point||544;astra_css("astra-settings[off-canvas-close-color]","color",".ast-mobile-popup-drawer.active .menu-toggle-close"),wp.customize("astra-settings[off-canvas-background]",function(e){e.bind(function(e){astra_background_obj_css(wp.customize,e,"off-canvas-background"," .ast-mobile-popup-drawer.active .ast-mobile-popup-inner, .ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content { {{css}} }")})}),wp.customize("astra-settings[off-canvas-inner-spacing]",function(e){e.bind(function(e){var t="";""!=e&&(t+=".ast-mobile-popup-content > *, .ast-mobile-header-content > *, .ast-desktop-popup-content > *, .ast-desktop-header-content > * {",t+="padding-top: "+e+"px;",t+="padding-bottom: "+e+"px;",t+="} "),astra_add_dynamic_css("off-canvas-inner-spacing",t)})}),wp.customize("astra-settings[mobile-header-type]",function(e){e.bind(function(e){var t=document.querySelectorAll("#ast-mobile-header"),a=document.querySelectorAll("#ast-desktop-header"),o=e,s=void 0!==wp.customize._value["astra-settings[off-canvas-slide]"]?wp.customize._value["astra-settings[off-canvas-slide]"]._value:"right",e="";"off-canvas"===o?e="left"===s?"ast-mobile-popup-left":"ast-mobile-popup-right":"full-width"===o&&(e="ast-mobile-popup-full-width"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-left"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-right"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-full-width"),jQuery(".ast-mobile-popup-drawer").addClass(e),"full-width"===o&&(o="off-canvas");for(var n=0;n<t.length;n++)t[n].setAttribute("data-type",o);for(n=0;n<a.length;n++)a[n].setAttribute("data-type",o);e=new CustomEvent("astMobileHeaderTypeChange",{detail:{type:o}});document.dispatchEvent(e)})}),wp.customize("astra-settings[off-canvas-slide]",function(e){e.bind(function(e){var t="",t="left"===e?"ast-mobile-popup-left":"ast-mobile-popup-right";jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-left"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-right"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-full-width"),jQuery(".ast-mobile-popup-drawer").addClass(t)})}),wp.customize("astra-settings[off-canvas-padding]",function(e){e.bind(function(e){var t;""!=e.desktop.bottom||""!=e.desktop.top||""!=e.desktop.left||""!=e.desktop.right||""!=e.tablet.bottom||""!=e.tablet.top||""!=e.tablet.left||""!=e.tablet.right||""!=e.mobile.bottom||""!=e.mobile.top||""!=e.mobile.left||""!=e.mobile.right?(t="",t+=".ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content {",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-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content {",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+="} ",t+="@media (max-width: "+o+"px) {",t+=".ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content {",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+="} ",astra_add_dynamic_css("off-canvas-padding",t)):astra_add_dynamic_css("off-canvas-padding","")})}),wp.customize("astra-settings[header-builder-menu-toggle-target]",function(e){e.bind(function(e){e="ast-builder-menu-toggle-"+e+" ";jQuery(".site-header").removeClass("ast-builder-menu-toggle-icon"),jQuery(".site-header").removeClass("ast-builder-menu-toggle-link"),jQuery(".site-header").addClass(e)})}),wp.customize("astra-settings[header-offcanvas-content-alignment]",function(e){e.bind(function(e){var t="content-align-"+e+" ",a="center";jQuery(".ast-mobile-header-content").removeClass("content-align-flex-start"),jQuery(".ast-mobile-header-content").removeClass("content-align-flex-end"),jQuery(".ast-mobile-header-content").removeClass("content-align-center"),jQuery(".ast-mobile-popup-drawer").removeClass("content-align-flex-end"),jQuery(".ast-mobile-popup-drawer").removeClass("content-align-flex-start"),jQuery(".ast-mobile-popup-drawer").removeClass("content-align-center"),jQuery(".ast-desktop-header-content").removeClass("content-align-flex-start"),jQuery(".ast-desktop-header-content").removeClass("content-align-flex-end"),jQuery(".ast-desktop-header-content").removeClass("content-align-center"),jQuery(".ast-desktop-header-content").addClass(t),jQuery(".ast-mobile-header-content").addClass(t),jQuery(".ast-mobile-popup-drawer").addClass(t),"flex-start"===e?a="left":"flex-end"===e&&(a="right");t=".content-align-"+e+" .ast-builder-layout-element {";t+="justify-content: "+e+";",t+="} ",t+=".content-align-"+e+" .main-header-menu {",t+="text-align: "+a+";",t+="} ",astra_add_dynamic_css("header-offcanvas-content-alignment",t)})})}(jQuery);
\ No newline at end of file diff --git a/inc/builder/type/header/off-canvas/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/off-canvas/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..dcf518b --- /dev/null +++ b/inc/builder/type/header/off-canvas/assets/js/unminified/customizer-preview.js @@ -0,0 +1,205 @@ +/**
+ * 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 = astraBuilderPreview.tablet_break_point || 768,
+ mobile_break_point = astraBuilderPreview.mobile_break_point || 544;
+
+ // Close Icon Color.
+ astra_css(
+ 'astra-settings[off-canvas-close-color]',
+ 'color',
+ '.ast-mobile-popup-drawer.active .menu-toggle-close'
+ );
+
+ // Off-Canvas Background Color.
+ wp.customize( 'astra-settings[off-canvas-background]', function( value ) {
+ value.bind( function( bg_obj ) {
+ var dynamicStyle = ' .ast-mobile-popup-drawer.active .ast-mobile-popup-inner, .ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content { {{css}} }';
+ astra_background_obj_css( wp.customize, bg_obj, 'off-canvas-background', dynamicStyle );
+ } );
+ } );
+
+ wp.customize( 'astra-settings[off-canvas-inner-spacing]', function ( value ) {
+ value.bind( function ( spacing ) {
+ var dynamicStyle = '';
+ if( spacing != '' ) {
+ dynamicStyle += '.ast-mobile-popup-content > *, .ast-mobile-header-content > *, .ast-desktop-popup-content > *, .ast-desktop-header-content > * {';
+ dynamicStyle += 'padding-top: ' + spacing + 'px;';
+ dynamicStyle += 'padding-bottom: ' + spacing + 'px;';
+ dynamicStyle += '} ';
+ }
+ astra_add_dynamic_css( 'off-canvas-inner-spacing', dynamicStyle );
+ } );
+ } );
+
+ wp.customize( 'astra-settings[mobile-header-type]', function ( value ) {
+ value.bind( function ( newVal ) {
+
+ var mobile_header = document.querySelectorAll( "#ast-mobile-header" );
+ var desktop_header = document.querySelectorAll( "#ast-desktop-header" );
+ var header_type = newVal;
+ var off_canvas_slide = ( typeof ( wp.customize._value['astra-settings[off-canvas-slide]'] ) != 'undefined' ) ? wp.customize._value['astra-settings[off-canvas-slide]']._value : 'right';
+
+ var side_class = '';
+
+ if ( 'off-canvas' === header_type ) {
+
+ if ( 'left' === off_canvas_slide ) {
+
+ side_class = 'ast-mobile-popup-left';
+ } else {
+
+ side_class = 'ast-mobile-popup-right';
+ }
+ } else if ( 'full-width' === header_type ) {
+
+ side_class = 'ast-mobile-popup-full-width';
+ }
+
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'ast-mobile-popup-left' );
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'ast-mobile-popup-right' );
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'ast-mobile-popup-full-width' );
+ jQuery('.ast-mobile-popup-drawer').addClass( side_class );
+
+ if( 'full-width' === header_type ) {
+
+ header_type = 'off-canvas';
+ }
+
+ for ( var k = 0; k < mobile_header.length; k++ ) {
+ mobile_header[k].setAttribute( 'data-type', header_type );
+ }
+ for ( var k = 0; k < desktop_header.length; k++ ) {
+ desktop_header[k].setAttribute( 'data-type', header_type );
+ }
+
+ var event = new CustomEvent( "astMobileHeaderTypeChange",
+ {
+ "detail": { 'type' : header_type }
+ }
+ );
+
+ document.dispatchEvent(event);
+ } );
+ } );
+
+ wp.customize( 'astra-settings[off-canvas-slide]', function ( value ) {
+ value.bind( function ( newval ) {
+
+ var side_class = '';
+
+ if ( 'left' === newval ) {
+
+ side_class = 'ast-mobile-popup-left';
+ } else {
+
+ side_class = 'ast-mobile-popup-right';
+ }
+
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'ast-mobile-popup-left' );
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'ast-mobile-popup-right' );
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'ast-mobile-popup-full-width' );
+ jQuery('.ast-mobile-popup-drawer').addClass( side_class );
+ } );
+ } );
+
+ // Padding.
+ wp.customize( 'astra-settings[off-canvas-padding]', function( value ) {
+ value.bind( function( padding ) {
+ if(
+ padding.desktop.bottom != '' || padding.desktop.top != '' || padding.desktop.left != '' || padding.desktop.right != '' ||
+ padding.tablet.bottom != '' || padding.tablet.top != '' || padding.tablet.left != '' || padding.tablet.right != '' ||
+ padding.mobile.bottom != '' || padding.mobile.top != '' || padding.mobile.left != '' || padding.mobile.right != ''
+ ) {
+ var dynamicStyle = '';
+ dynamicStyle += '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content {';
+ 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-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content {';
+ 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 += '} ';
+ dynamicStyle += '} ';
+
+ dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {';
+ dynamicStyle += '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content {';
+ 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 += '} ';
+ dynamicStyle += '} ';
+ astra_add_dynamic_css( 'off-canvas-padding', dynamicStyle );
+ } else {
+ astra_add_dynamic_css( 'off-canvas-padding', '' );
+ }
+ } );
+ } );
+
+ wp.customize( 'astra-settings[header-builder-menu-toggle-target]', function ( value ) {
+ value.bind( function ( newval ) {
+ var menuTargetClass = 'ast-builder-menu-toggle-' + newval + ' ';
+
+ jQuery( '.site-header' ).removeClass( 'ast-builder-menu-toggle-icon' );
+ jQuery( '.site-header' ).removeClass( 'ast-builder-menu-toggle-link' );
+ jQuery( '.site-header' ).addClass( menuTargetClass );
+ } );
+ } );
+
+ wp.customize( 'astra-settings[header-offcanvas-content-alignment]', function ( value ) {
+ value.bind( function ( newval ) {
+
+ var alignment_class = 'content-align-' + newval + ' ';
+ var menu_content_alignment = 'center';
+
+ jQuery('.ast-mobile-header-content').removeClass( 'content-align-flex-start' );
+ jQuery('.ast-mobile-header-content').removeClass( 'content-align-flex-end' );
+ jQuery('.ast-mobile-header-content').removeClass( 'content-align-center' );
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'content-align-flex-end' );
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'content-align-flex-start' );
+ jQuery('.ast-mobile-popup-drawer').removeClass( 'content-align-center' );
+ jQuery('.ast-desktop-header-content').removeClass( 'content-align-flex-start' );
+ jQuery('.ast-desktop-header-content').removeClass( 'content-align-flex-end' );
+ jQuery('.ast-desktop-header-content').removeClass( 'content-align-center' );
+
+ jQuery('.ast-desktop-header-content').addClass( alignment_class );
+ jQuery('.ast-mobile-header-content').addClass( alignment_class );
+ jQuery('.ast-mobile-popup-drawer').addClass( alignment_class );
+
+
+
+ if ( 'flex-start' === newval ) {
+ menu_content_alignment = 'left';
+ } else if ( 'flex-end' === newval ) {
+ menu_content_alignment = 'right';
+ }
+
+ var dynamicStyle = '.content-align-' + newval + ' .ast-builder-layout-element {';
+ dynamicStyle += 'justify-content: ' + newval + ';';
+ dynamicStyle += '} ';
+
+ dynamicStyle += '.content-align-' + newval + ' .main-header-menu {';
+ dynamicStyle += 'text-align: ' + menu_content_alignment + ';';
+ dynamicStyle += '} ';
+
+ astra_add_dynamic_css( 'header-offcanvas-content-alignment', dynamicStyle );
+ } );
+ } );
+
+} )( jQuery );
diff --git a/inc/builder/type/header/off-canvas/class-astra-off-canvas-loader.php b/inc/builder/type/header/off-canvas/class-astra-off-canvas-loader.php new file mode 100644 index 0000000..dbabfae --- /dev/null +++ b/inc/builder/type/header/off-canvas/class-astra-off-canvas-loader.php @@ -0,0 +1,53 @@ +<?php +/** + * Off Canvas Loader. + * + * @package astra-builder + * @author Brainstorm Force + * @copyright Copyright (c) 2020, Brainstorm Force + * @link https://www.brainstormforce.com + * @since 3.0.0 + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; // Exit if accessed directly. +} + +/** + * Class Astra_Off_Canvas_Loader + * + * Loads config files. + * + * @since 3.0.0 + */ +class Astra_Off_Canvas_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-off-canvas-customizer-preview-js', ASTRA_OFF_CANVAS_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_Off_Canvas_Loader(); diff --git a/inc/builder/type/header/off-canvas/class-astra-off-canvas.php b/inc/builder/type/header/off-canvas/class-astra-off-canvas.php new file mode 100644 index 0000000..48166b1 --- /dev/null +++ b/inc/builder/type/header/off-canvas/class-astra-off-canvas.php @@ -0,0 +1,45 @@ +<?php +/** + * Off Canvas. + * + * @package astra-builder + * @author Brainstorm Force + * @copyright Copyright (c) 2020, Brainstorm Force + * @link https://www.brainstormforce.com + * @since 3.0.0 + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; // Exit if accessed directly. +} + +define( 'ASTRA_OFF_CANVAS_DIR', ASTRA_THEME_DIR . 'inc/builder/type/header/off-canvas' ); +define( 'ASTRA_OFF_CANVAS_URI', ASTRA_THEME_URI . 'inc/builder/type/header/off-canvas' ); + +/** + * Off Canvas Initial Setup + * + * @since 3.0.0 + */ +class Astra_Off_Canvas { + + /** + * Constructor function that initializes required actions and hooks. + */ + public function __construct() { + + // @codingStandardsIgnoreStart WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound + require_once ASTRA_OFF_CANVAS_DIR . '/class-astra-off-canvas-loader.php'; + + // Include front end files. + if ( ! is_admin() ) { + require_once ASTRA_OFF_CANVAS_DIR . '/dynamic-css/dynamic.css.php'; + } + // @codingStandardsIgnoreEnd WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound + } +} + +/** + * Kicking this off by creating an object. + */ +new Astra_Off_Canvas(); diff --git a/inc/builder/type/header/off-canvas/dynamic-css/dynamic.css.php b/inc/builder/type/header/off-canvas/dynamic-css/dynamic.css.php new file mode 100644 index 0000000..d0c1517 --- /dev/null +++ b/inc/builder/type/header/off-canvas/dynamic-css/dynamic.css.php @@ -0,0 +1,592 @@ +<?php +/** + * Off Canvas - Dynamic CSS + * + * @package astra-builder + * @since 3.0.0 + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; // Exit if accessed directly. +} + +/** + * Off Canvas Row. + */ +add_filter( 'astra_dynamic_theme_css', 'astra_off_canvas_row_setting', 11 ); + +/** + * Off Canvas Row - Dynamic CSS + * + * @param string $dynamic_css Astra Dynamic CSS. + * @param string $dynamic_css_filtered Astra Dynamic CSS Filters. + * @return String Generated dynamic CSS for Heading Colors. + * + * @since 3.0.0 + */ +function astra_off_canvas_row_setting( $dynamic_css, $dynamic_css_filtered = '' ) { + + $selector = '.ast-mobile-popup-drawer.active'; + + $off_canvas_background = astra_get_option( 'off-canvas-background' ); + $off_canvas_close_color = astra_get_option( 'off-canvas-close-color' ); + $offcanvas_content_alignment = astra_get_option( 'header-offcanvas-content-alignment', 'flex-start' ); + $padding = astra_get_option( 'off-canvas-padding' ); + $menu_content_alignment = 'center'; + $inner_spacing = astra_get_option( 'off-canvas-inner-spacing' ); + $mobile_header_type = astra_get_option( 'mobile-header-type' ); + + $inner_spacing = ( isset( $inner_spacing ) ) ? (int) $inner_spacing : ''; + + if ( 'flex-start' === $offcanvas_content_alignment ) { + $menu_content_alignment = 'left'; + } elseif ( 'flex-end' === $offcanvas_content_alignment ) { + $menu_content_alignment = 'right'; + } + + if ( 'off-canvas' === $mobile_header_type || 'full-width' === $mobile_header_type || is_customize_preview() ) { + $dynamic_css .= astra_off_canvas_static_css(); + } + if ( 'dropdown' === $mobile_header_type || is_customize_preview() ) { + $dynamic_css .= astra_dropdown_type_static_css(); + } + + /** + * Off-Canvas CSS. + */ + $css_output = array( + + $selector . ' .ast-mobile-popup-inner' => astra_get_background_obj( $off_canvas_background ), + + '.ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content' => astra_get_background_obj( $off_canvas_background ), + '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content' => array( + // Padding CSS. + 'padding-top' => astra_responsive_spacing( $padding, 'top', 'desktop' ), + 'padding-bottom' => astra_responsive_spacing( $padding, 'bottom', 'desktop' ), + 'padding-left' => astra_responsive_spacing( $padding, 'left', 'desktop' ), + 'padding-right' => astra_responsive_spacing( $padding, 'right', 'desktop' ), + ), + '.ast-mobile-popup-content > *, .ast-mobile-header-content > *, .ast-desktop-popup-content > *, .ast-desktop-header-content > *' => array( + 'padding-top' => astra_get_css_value( $inner_spacing, 'px' ), + 'padding-bottom' => astra_get_css_value( $inner_spacing, 'px' ), + ), + '.content-align-' . esc_attr( $offcanvas_content_alignment ) . ' .ast-builder-layout-element' => array( + 'justify-content' => esc_attr( $offcanvas_content_alignment ), + ), + '.content-align-' . esc_attr( $offcanvas_content_alignment ) . ' .main-header-menu' => array( + 'text-align' => esc_attr( $menu_content_alignment ), + ), + ); + + $css_output[ $selector . ' .ast-mobile-popup-drawer.active .menu-toggle-close' ]['color'] = $off_canvas_close_color; + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output ); + + // Tablet CSS. + $css_output_tablet = array( + '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content' => array( + // Padding CSS. + 'padding-top' => astra_responsive_spacing( $padding, 'top', 'tablet' ), + 'padding-bottom' => astra_responsive_spacing( $padding, 'bottom', 'tablet' ), + 'padding-left' => astra_responsive_spacing( $padding, 'left', 'tablet' ), + 'padding-right' => astra_responsive_spacing( $padding, 'right', 'tablet' ), + ), + ); + + $css_output_mobile = array( + + '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content' => array( + // Padding CSS. + 'padding-top' => astra_responsive_spacing( $padding, 'top', 'mobile' ), + 'padding-bottom' => astra_responsive_spacing( $padding, 'bottom', 'mobile' ), + 'padding-left' => astra_responsive_spacing( $padding, 'left', 'mobile' ), + 'padding-right' => astra_responsive_spacing( $padding, 'right', 'mobile' ), + ), + ); + + $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; + + return $dynamic_css; +} + +/** + * Add static CSS for Off-canvas flyout. + * + * @since 3.4.0 + * @return string. + */ +function astra_off_canvas_static_css() { + $off_canvas_css = ' + .ast-off-canvas-active body.ast-main-header-nav-open { + overflow: hidden; + } + .ast-mobile-popup-drawer .ast-mobile-popup-overlay { + background-color: rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + visibility: hidden; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + .ast-mobile-popup-drawer .ast-mobile-popup-header { + -js-display: flex; + display: flex; + justify-content: flex-end; + min-height: calc( 1.2em + 24px); + } + .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close { + background: transparent; + border: 0; + font-size: 24px; + line-height: 1; + padding: .6em; + color: inherit; + -js-display: flex; + display: flex; + box-shadow: none; + } + .ast-mobile-popup-drawer.ast-mobile-popup-full-width .ast-mobile-popup-inner { + max-width: none; + transition: transform 0s ease-in, opacity 0.2s ease-in; + } + .ast-mobile-popup-drawer.active { + left: 0; + opacity: 1; + right: 0; + z-index: 100000; + transition: opacity 0.25s ease-out; + } + .ast-mobile-popup-drawer.active .ast-mobile-popup-overlay { + opacity: 1; + cursor: pointer; + visibility: visible; + } + body.admin-bar .ast-mobile-popup-drawer, body.admin-bar .ast-mobile-popup-drawer .ast-mobile-popup-inner { + top: 32px; + } + body.admin-bar.ast-primary-sticky-header-active .ast-mobile-popup-drawer, body.admin-bar.ast-primary-sticky-header-active .ast-mobile-popup-drawer .ast-mobile-popup-inner { + top: 0px; + } + @media (max-width: 782px) { + body.admin-bar .ast-mobile-popup-drawer,body.admin-bar .ast-mobile-popup-drawer .ast-mobile-popup-inner { + top: 46px; + } + } + .ast-mobile-popup-content > *, + .ast-desktop-popup-content > *{ + padding: 10px 0; + height: auto; + } + + .ast-mobile-popup-content > *:first-child, + .ast-desktop-popup-content > *:first-child{ + padding-top: 10px; + } + + .ast-mobile-popup-content > .ast-builder-menu, + .ast-desktop-popup-content > .ast-builder-menu{ + padding-top: 0; + } + .ast-mobile-popup-content > *:last-child, + .ast-desktop-popup-content > *:last-child { + padding-bottom: 0; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-icon, + .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children .sub-menu, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-icon { + display: none; + } + + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search label, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search label { + width: 100%; + } + .ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu, .ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .sub-menu { + background-color: transparent; + } + .ast-mobile-popup-content .ast-icon svg { + height: .85em; + width: .95em; + margin-top: 15px; + } + .ast-mobile-popup-content .ast-icon.icon-search svg { + margin-top: 0; + } + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-up > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-up > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-down > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-down > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-fade > .menu-item > .sub-menu, + .ast-mobile-popup-drawer.show, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-fade > .menu-item .menu-item > .sub-menu{ + opacity: 1; + visibility: visible; + }'; + + if ( is_rtl() ) { + $off_canvas_css .= ' + .ast-mobile-popup-drawer { + position: fixed; + top: 0; + bottom: 0; + right: -99999rem; + left: 99999rem; + transition: opacity 0.25s ease-in, right 0s 0.25s, left 0s 0.25s; + opacity: 0; + } + .ast-mobile-popup-drawer .ast-mobile-popup-inner { + width: 100%; + transform: translateX(100%); + max-width: 90%; + left: 0; + top: 0; + background: #fafafa; + color: #3a3a3a; + bottom: 0; + opacity: 0; + position: fixed; + box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1); + -js-display: flex; + display: flex; + flex-direction: column; + transition: transform 0.2s ease-in, opacity 0.2s ease-in; + overflow-y:auto; + overflow-x:hidden; + } + .ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner { + transform: translateX(-100%); + left: auto; + right: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation ul .menu-item .sub-menu .menu-link { + padding-right: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-right: 40px; + } + .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + left: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + right: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + left: auto; + transform: none; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-form { + left: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-field { + width: 100%; + padding-left: 5.5em; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-submit, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + left: 0; + padding: 0 1em; + border-radius: 0; + }'; + } else { + $off_canvas_css .= ' + .ast-mobile-popup-drawer { + position: fixed; + top: 0; + bottom: 0; + left: -99999rem; + right: 99999rem; + transition: opacity 0.25s ease-in, left 0s 0.25s, right 0s 0.25s; + opacity: 0; + } + .ast-mobile-popup-drawer .ast-mobile-popup-inner { + width: 100%; + transform: translateX(100%); + max-width: 90%; + right: 0; + top: 0; + background: #fafafa; + color: #3a3a3a; + bottom: 0; + opacity: 0; + position: fixed; + box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1); + -js-display: flex; + display: flex; + flex-direction: column; + transition: transform 0.2s ease-in, opacity 0.2s ease-in; + overflow-y:auto; + overflow-x:hidden; + } + .ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner { + transform: translateX(-100%); + right: auto; + left: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation ul .menu-item .sub-menu .menu-link { + padding-left: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-left: 40px; + } + .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + right: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + left: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + right: auto; + transform: none; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-form { + right: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-field { + width: 100%; + padding-right: 5.5em; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-submit, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + right: 0; + padding: 0 1em; + border-radius: 0; + }'; + } + + // Adding this CSS to bottom because it needs to be load after above style loads. As it required to hide/show flyout offcanvas. + $off_canvas_css .= ' + .ast-mobile-popup-drawer.active .ast-mobile-popup-inner { + opacity: 1; + visibility: visible; + transform: translateX(0%); + }'; + + return Astra_Enqueue_Scripts::trim_css( $off_canvas_css ); +} + + +/** + * Add static CSS for Dropdown Type. + * + * @since 3.4.0 + * @return string. + */ +function astra_dropdown_type_static_css() { + $dropdown_type_css = ' + .ast-mobile-header-content > *, + .ast-desktop-header-content > * { + padding: 10px 0; + height: auto; + } + .ast-mobile-header-content > *:first-child, + .ast-desktop-header-content > *:first-child { + padding-top: 10px; + } + .ast-mobile-header-content > .ast-builder-menu, + .ast-desktop-header-content > .ast-builder-menu { + padding-top: 0; + } + + .ast-mobile-header-content > *:last-child, + .ast-desktop-header-content > *:last-child { + padding-bottom: 0; + } + .ast-mobile-header-content .ast-search-menu-icon.ast-inline-search label, + .ast-desktop-header-content .ast-search-menu-icon.ast-inline-search label { + width: 100%; + } + .ast-desktop-header-content .main-header-bar-navigation .ast-submenu-expanded > .ast-menu-toggle::before { + transform: rotateX(180deg); + } + #ast-desktop-header .ast-desktop-header-content, + .ast-mobile-header-content .ast-search-icon, + .ast-desktop-header-content .ast-search-icon, + .ast-mobile-header-wrap .ast-mobile-header-content, + .ast-main-header-nav-open.ast-popup-nav-open .ast-mobile-header-wrap .ast-mobile-header-content, + .ast-main-header-nav-open.ast-popup-nav-open .ast-desktop-header-content { + display: none; + } + .ast-main-header-nav-open.ast-header-break-point #ast-desktop-header .ast-desktop-header-content, + .ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content { + display: block; + } + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-up > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-up > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-down > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-down > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-fade > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-fade > .menu-item .menu-item > .sub-menu { + opacity: 1; + visibility: visible; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation { + width: unset; + margin: unset; + }'; + + if ( is_rtl() ) { + $dropdown_type_css .= ' + .ast-mobile-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle, + .ast-desktop-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + right: calc( 20px - 0.907em); + } + .ast-mobile-header-content .ast-search-menu-icon, + .ast-mobile-header-content .ast-search-menu-icon.slide-search, + .ast-desktop-header-content .ast-search-menu-icon, + .ast-desktop-header-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + left: auto; + transform: none; + } + .ast-mobile-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-header-content .ast-search-menu-icon .search-form, + .ast-desktop-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-desktop-header-content .ast-search-menu-icon .search-form { + left: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + .ast-mobile-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-header-content .ast-search-menu-icon .search-field, + .ast-desktop-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-desktop-header-content .ast-search-menu-icon .search-field { + width: 100%; + padding-left: 5.5em; + } + .ast-mobile-header-content .ast-search-menu-icon .search-submit, + .ast-desktop-header-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + left: 0; + padding: 0 1em; + border-radius: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation ul .sub-menu .menu-link { + padding-right: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-right: 40px; + }'; + } else { + $dropdown_type_css .= ' + .ast-mobile-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle, + .ast-desktop-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + left: calc( 20px - 0.907em); + } + .ast-mobile-header-content .ast-search-menu-icon, + .ast-mobile-header-content .ast-search-menu-icon.slide-search, + .ast-desktop-header-content .ast-search-menu-icon, + .ast-desktop-header-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + right: auto; + transform: none; + } + .ast-mobile-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-header-content .ast-search-menu-icon .search-form, + .ast-desktop-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-desktop-header-content .ast-search-menu-icon .search-form { + right: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + .ast-mobile-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-header-content .ast-search-menu-icon .search-field, + .ast-desktop-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-desktop-header-content .ast-search-menu-icon .search-field { + width: 100%; + padding-right: 5.5em; + } + .ast-mobile-header-content .ast-search-menu-icon .search-submit, + .ast-desktop-header-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + right: 0; + padding: 0 1em; + border-radius: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation ul .sub-menu .menu-link { + padding-left: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-left: 40px; + }'; + } + return Astra_Enqueue_Scripts::trim_css( $dropdown_type_css ); +} |