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/. --- .../type/base/assets/js/customizer-preview.js | 717 +++++++++++++++++++++ .../class-astra-button-component-dynamic-css.php | 215 ++++++ .../class-astra-html-component-dynamic-css.php | 187 ++++++ .../class-astra-social-component-dynamic-css.php | 421 ++++++++++++ .../class-astra-widget-component-dynamic-css.php | 174 +++++ 5 files changed, 1714 insertions(+) create mode 100644 inc/builder/type/base/assets/js/customizer-preview.js create mode 100644 inc/builder/type/base/dynamic-css/button/class-astra-button-component-dynamic-css.php create mode 100644 inc/builder/type/base/dynamic-css/html/class-astra-html-component-dynamic-css.php create mode 100644 inc/builder/type/base/dynamic-css/social/class-astra-social-component-dynamic-css.php create mode 100644 inc/builder/type/base/dynamic-css/widget/class-astra-widget-component-dynamic-css.php (limited to 'inc/builder/type/base') diff --git a/inc/builder/type/base/assets/js/customizer-preview.js b/inc/builder/type/base/assets/js/customizer-preview.js new file mode 100644 index 0000000..0e1514d --- /dev/null +++ b/inc/builder/type/base/assets/js/customizer-preview.js @@ -0,0 +1,717 @@ +/** + * HTML Component CSS. + * + * @param string builder_type Builder Type. + * @param string html_count HTML Count. + * + */ +function astra_builder_html_css( builder_type = 'header', html_count ) { + + for ( var index = 1; index <= html_count; index++ ) { + + let selector = ( 'header' === builder_type ) ? '.ast-header-html-' + index : '.footer-widget-area[data-section="section-fb-html-' + index + '"]'; + + let section = ( 'header' === builder_type ) ? 'section-hb-html-' + index : 'section-fb-html-' + index; + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + // HTML color. + astra_color_responsive_css( + builder_type + '-html-' + index + '-color', + 'astra-settings[' + builder_type + '-html-' + index + 'color]', + 'color', + selector + ' .ast-builder-html-element' + ); + + // Link color. + astra_color_responsive_css( + builder_type + '-html-' + index + '-l-color', + 'astra-settings[' + builder_type + '-html-' + index + 'link-color]', + 'color', + selector + ' .ast-builder-html-element a' + ); + + // Link Hover color. + astra_color_responsive_css( + builder_type + '-html-' + index + '-l-h-color', + 'astra-settings[' + builder_type + '-html-' + index + 'link-h-color]', + 'color', + selector + ' .ast-builder-html-element a:hover' + ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, selector, 'block' ); + + // Margin. + wp.customize( 'astra-settings[' + section + '-margin]', function( value ) { + value.bind( function( margin ) { + if( + margin.desktop.bottom != '' || margin.desktop.top != '' || margin.desktop.left != '' || margin.desktop.right != '' || + margin.tablet.bottom != '' || margin.tablet.top != '' || margin.tablet.left != '' || margin.tablet.right != '' || + margin.mobile.bottom != '' || margin.mobile.top != '' || margin.mobile.left != '' || margin.mobile.right != '' + ) { + 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 + '-margin-toggle-button', dynamicStyle ); + } + } ); + } ); + + // Typography CSS Generation. + astra_responsive_font_size( + 'astra-settings[font-size-' + section + ']', + selector + ' .ast-builder-html-element' + ); + } +} + +/** + * Button Component CSS. + * + * @param string builder_type Builder Type. + * @param string button_count Button Count. + * + */ +function astra_builder_button_css( builder_type = 'header', button_count ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + for ( var index = 1; index <= button_count; index++ ) { + + var section = ( 'header' === builder_type ) ? 'section-hb-button-' + index : 'section-fb-button-' + index; + var context = ( 'header' === builder_type ) ? 'hb' : 'fb'; + var prefix = 'button' + index; + var selector = '.ast-' + builder_type + '-button-' + index + ' .ast-builder-button-wrap'; + var button_selector = '.ast-' + builder_type + '-button-' + index + '[data-section*="section-' + context + '-button-"] .ast-builder-button-wrap'; + + astra_css( 'flex', 'display', '.ast-' + builder_type + '-button-' + index + '[data-section="' + section + '"]' ); + + // Button Text Color. + astra_color_responsive_css( + context + '-button-color', + 'astra-settings[' + builder_type + '-' + prefix + '-text-color]', + 'color', + selector + ' .ast-custom-button' + ); + astra_color_responsive_css( + context + '-button-color-h', + 'astra-settings[' + builder_type + '-' + prefix + '-text-h-color]', + 'color', + selector + ':hover .ast-custom-button' + ); + + // Button Background Color. + astra_color_responsive_css( + context + '-button-bg-color', + 'astra-settings[' + builder_type + '-' + prefix + '-back-color]', + 'background-color', + selector + ' .ast-custom-button' + ); + astra_color_responsive_css( + context + '-button-bg-color-h', + 'astra-settings[' + builder_type + '-' + prefix + '-back-h-color]', + 'background-color', + selector + ':hover .ast-custom-button' + ); + + // Button Typography. + astra_responsive_font_size( + 'astra-settings[' + builder_type + '-' + prefix + '-font-size]', + button_selector + ' .ast-custom-button' + ); + + // Border Radius. + astra_css( + 'astra-settings[' + builder_type + '-' + prefix + '-border-radius]', + 'border-radius', + selector + ' .ast-custom-button', + 'px' + ); + + // Border Color. + astra_color_responsive_css( + context + '-button-border-color', + 'astra-settings[' + builder_type + '-' + prefix + '-border-color]', + 'border-color', + selector + ' .ast-custom-button' + ); + astra_color_responsive_css( + context + '-button-border-color-h', + 'astra-settings[' + builder_type + '-' + prefix + '-border-h-color]', + 'border-color', + selector + ' .ast-custom-button:hover' + ); + + // Advanced CSS Generation. + astra_builder_advanced_css( section, button_selector + ' .ast-custom-button' ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, selector, 'block' ); + + (function (index) { + wp.customize( 'astra-settings[' + builder_type + '-button'+ index +'-border-size]', function( setting ) { + setting.bind( function( border ) { + var dynamicStyle = '.ast-' + builder_type + '-button-'+ index +' .ast-custom-button {'; + dynamicStyle += 'border-top-width:' + border.top + 'px;'; + dynamicStyle += 'border-right-width:' + border.right + 'px;'; + dynamicStyle += 'border-left-width:' + border.left + 'px;'; + dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;'; + dynamicStyle += '} '; + astra_add_dynamic_css( 'astra-settings[' + builder_type + '-button'+ index +'-border-size]', dynamicStyle ); + } ); + } ); + + if( 'footer' == builder_type ) { + wp.customize( 'astra-settings[footer-button-'+ index +'-alignment]', function( value ) { + value.bind( function( alignment ) { + + if( alignment.desktop != '' || alignment.tablet != '' || alignment.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += '.ast-footer-button-'+ index +'[data-section="section-fb-button-'+ index +'"] {'; + dynamicStyle += 'justify-content: ' + alignment['desktop'] + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-footer-button-'+ index +'[data-section="section-fb-button-'+ index +'"] {'; + dynamicStyle += 'justify-content: ' + alignment['tablet'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-footer-button-'+ index +'[data-section="section-fb-button-'+ index +'"] {'; + dynamicStyle += 'justify-content: ' + alignment['mobile'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( 'footer-button-'+ index +'-alignment', dynamicStyle ); + } + } ); + } ); + } + })(index); + } +} + +/** + * Social Component CSS. + * + * @param string builder_type Builder Type. + * @param string section Section. + * + */ +function astra_builder_social_css( builder_type = 'header', social_count ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + for ( var index = 1; index <= social_count; index++ ) { + + let selector = '.ast-' + builder_type + '-social-' + index + '-wrap'; + let section = ( 'header' === builder_type ) ? 'section-hb-social-icons-' + index : 'section-fb-social-icons-' + index; + var context = ( 'header' === builder_type ) ? 'hb' : 'fb'; + var visibility_selector = '.ast-builder-layout-element[data-section="' + section + '"]'; + + // Icon Color. + astra_color_responsive_css( + context + '-soc-color', + 'astra-settings[' + builder_type + '-social-' + index + '-color]', + 'fill', + selector + ' .ast-social-color-type-custom .ast-builder-social-element svg' + ); + + astra_color_responsive_css( + context + '-soc-label-color', + 'astra-settings[' + builder_type + '-social-' + index + '-color]', + 'color', + selector + ' .ast-social-color-type-custom .ast-builder-social-element .social-item-label' + ); + + astra_color_responsive_css( + context + '-soc-color-h', + 'astra-settings[' + builder_type + '-social-' + index + '-h-color]', + 'color', + selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover' + ); + + astra_color_responsive_css( + context + '-soc-label-color-h', + 'astra-settings[' + builder_type + '-social-' + index + '-h-color]', + 'color', + selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover .social-item-label' + ); + + astra_color_responsive_css( + context + '-soc-svg-color-h', + 'astra-settings[' + builder_type + '-social-' + index + '-h-color]', + 'fill', + selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover svg' + ); + + // Icon Background Color. + astra_color_responsive_css( + context + '-soc-bg-color', + 'astra-settings[' + builder_type + '-social-' + index + '-bg-color]', + 'background-color', + selector + ' .ast-social-color-type-custom .ast-builder-social-element' + ); + + astra_color_responsive_css( + context + '-soc-bg-color-h', + 'astra-settings[' + builder_type + '-social-' + index + '-bg-h-color]', + 'background-color', + selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover' + ); + + // Icon Label Color. + astra_color_responsive_css( + context + '-soc-label-color', + 'astra-settings[' + builder_type + '-social-' + index + '-label-color]', + 'color', + selector + ' .ast-social-color-type-custom .ast-builder-social-element span.social-item-label' + ); + + astra_color_responsive_css( + context + '-soc-label-color-h', + 'astra-settings[' + builder_type + '-social-' + index + '-label-h-color]', + 'color', + selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover span.social-item-label' + ); + + // Icon Background Space. + astra_css( + 'astra-settings[' + builder_type + '-social-' + index + '-bg-space]', + 'padding', + selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element', + 'px' + ); + + // Icon Border Radius. + astra_css( + 'astra-settings[' + builder_type + '-social-' + index + '-radius]', + 'border-radius', + selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element', + 'px' + ); + + // Typography CSS Generation. + astra_responsive_font_size( + 'astra-settings[font-size-' + section + ']', + selector + ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, visibility_selector, 'block' ); + + // Icon Spacing. + (function( index ) { + // Icon Size. + wp.customize( 'astra-settings[' + builder_type + '-social-' + index + '-size]', function( value ) { + value.bind( function( size ) { + + if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element svg {'; + dynamicStyle += 'height: ' + size.desktop + 'px;'; + dynamicStyle += 'width: ' + size.desktop + 'px;'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element svg {'; + dynamicStyle += 'height: ' + size.tablet + 'px;'; + dynamicStyle += 'width: ' + size.tablet + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element svg {'; + dynamicStyle += 'height: ' + size.mobile + 'px;'; + dynamicStyle += 'width: ' + size.mobile + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( builder_type + '-social-' + index + '-size', dynamicStyle ); + } + } ); + } ); + + + // Icon Space. + wp.customize( 'astra-settings[' + builder_type + '-social-' + index + '-space]', function( value ) { + value.bind( function( spacing ) { + var space = ''; + var dynamicStyle = ''; + if ( spacing.desktop != '' ) { + space = spacing.desktop/2; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element {'; + dynamicStyle += 'margin-left: ' + space + 'px;'; + dynamicStyle += 'margin-right: ' + space + 'px;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:first-child {'; + dynamicStyle += 'margin-left: 0;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:last-child {'; + dynamicStyle += 'margin-right: 0;'; + dynamicStyle += '} '; + } + + if ( spacing.tablet != '' ) { + space = spacing.tablet/2; + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element {'; + dynamicStyle += 'margin-left: ' + space + 'px;'; + dynamicStyle += 'margin-right: ' + space + 'px;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:first-child {'; + dynamicStyle += 'margin-left: 0;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:last-child {'; + dynamicStyle += 'margin-right: 0;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + } + + if ( spacing.mobile != '' ) { + space = spacing.mobile/2; + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element {'; + dynamicStyle += 'margin-left: ' + space + 'px;'; + dynamicStyle += 'margin-right: ' + space + 'px;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:first-child {'; + dynamicStyle += 'margin-left: 0;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:last-child {'; + dynamicStyle += 'margin-right: 0;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + } + + astra_add_dynamic_css( builder_type + '-social-icons-icon-space', dynamicStyle ); + } ); + } ); + + // Color Type - Custom/Official + wp.customize( 'astra-settings[' + builder_type + '-social-' + index + '-color-type]', function ( value ) { + value.bind( function ( newval ) { + + var side_class = 'ast-social-color-type-' + newval; + + jQuery('.ast-' + builder_type + '-social-' + index + '-wrap .' + builder_type + '-social-inner-wrap').removeClass( 'ast-social-color-type-custom' ); + jQuery('.ast-' + builder_type + '-social-' + index + '-wrap .' + builder_type + '-social-inner-wrap').removeClass( 'ast-social-color-type-official' ); + jQuery('.ast-' + builder_type + '-social-' + index + '-wrap .' + builder_type + '-social-inner-wrap').addClass( side_class ); + } ); + } ); + + // Margin. + wp.customize( 'astra-settings[' + section + '-margin]', function( value ) { + value.bind( function( margin ) { + if( + margin.desktop.bottom != '' || margin.desktop.top != '' || margin.desktop.left != '' || margin.desktop.right != '' || + margin.tablet.bottom != '' || margin.tablet.top != '' || margin.tablet.left != '' || margin.tablet.right != '' || + margin.mobile.bottom != '' || margin.mobile.top != '' || margin.mobile.left != '' || margin.mobile.right != '' + ) { + 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 + '-margin', dynamicStyle ); + } + } ); + } ); + + if ( 'footer' === builder_type ) { + // Alignment. + wp.customize( 'astra-settings[footer-social-' + index + '-alignment]', function( value ) { + value.bind( function( alignment ) { + if( alignment.desktop != '' || alignment.tablet != '' || alignment.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += '[data-section="section-fb-social-icons-' + index + '"] .footer-social-inner-wrap {'; + dynamicStyle += 'text-align: ' + alignment['desktop'] + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '[data-section="section-fb-social-icons-' + index + '"] .footer-social-inner-wrap {'; + dynamicStyle += 'text-align: ' + alignment['tablet'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '[data-section="section-fb-social-icons-' + index + '"] .footer-social-inner-wrap {'; + dynamicStyle += 'text-align: ' + alignment['mobile'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( 'footer-social-' + index + '-alignment', dynamicStyle ); + } + } ); + } ); + + } + })( index ); + } +} + +/** + * Widget Component CSS. + * + * @param string builder_type Builder Type. + * @param string section Section. + * + */ +function astra_builder_widget_css( builder_type = 'header' ) { + + var tablet_break_point = AstraBuilderWidgetData.tablet_break_point || 768, + mobile_break_point = AstraBuilderWidgetData.mobile_break_point || 544; + + let widget_count = 'header' === builder_type ? AstraBuilderWidgetData.header_widget_count: AstraBuilderWidgetData.footer_widget_count; + + for ( var index = 1; index <= widget_count; index++ ) { + + var selector = '.' + builder_type + '-widget-area[data-section="sidebar-widgets-' + builder_type + '-widget-' + index + '"]'; + + var section = AstraBuilderWidgetData.has_block_editor ? 'astra-sidebar-widgets-' + builder_type + '-widget-' + index : 'sidebar-widgets-' + builder_type + '-widget-' + index; + + // Widget Content Color. + astra_color_responsive_css( + builder_type + '-widget-' + index + '-color', + 'astra-settings[' + builder_type + '-widget-' + index + '-color]', + 'color', + ( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner' : selector + ' .' + builder_type + '-widget-area-inner' + ); + + // Widget Link Color. + astra_color_responsive_css( + builder_type + '-widget-' + index + '-link-color', + 'astra-settings[' + builder_type + '-widget-' + index + '-link-color]', + 'color', + ( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner a' : selector + ' .' + builder_type + '-widget-area-inner a' + ); + + // Widget Link Hover Color. + astra_color_responsive_css( + builder_type + '-widget-' + index + '-link-h-color', + 'astra-settings[' + builder_type + '-widget-' + index + '-link-h-color]', + 'color', + ( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner a:hover' : selector + ' .' + builder_type + '-widget-area-inner a:hover' + ); + + // Widget Title Color. + astra_color_responsive_css( + builder_type + '-widget-' + index + '-title-color', + 'astra-settings[' + builder_type + '-widget-' + index + '-title-color]', + 'color', + selector + ' .widget-title' + ); + + // Widget Title Typography. + astra_responsive_font_size( + 'astra-settings[' + builder_type + '-widget-' + index + '-font-size]', + selector + ' .widget-title' + ); + + // Widget Content Typography. + astra_responsive_font_size( + 'astra-settings[' + builder_type + '-widget-' + index + '-content-font-size]', + ( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner' : selector + ' .' + builder_type + '-widget-area-inner' + ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, selector, 'block' ); + + (function (index) { + + var marginControl = AstraBuilderWidgetData.has_block_editor ? 'astra-sidebar-widgets-' + builder_type + '-widget-' + index + '-margin' : 'sidebar-widgets-' + builder_type + '-widget-' + index + '-margin'; + + wp.customize( 'astra-settings[' + marginControl + ']', function( value ) { + value.bind( function( margin ) { + var selector = '.' + builder_type + '-widget-area[data-section="sidebar-widgets-' + builder_type + '-widget-' + index + '"]'; + if( + margin.desktop.bottom != '' || margin.desktop.top != '' || margin.desktop.left != '' || margin.desktop.right != '' || + margin.tablet.bottom != '' || margin.tablet.top != '' || margin.tablet.left != '' || margin.tablet.right != '' || + margin.mobile.bottom != '' || margin.mobile.top != '' || margin.mobile.left != '' || margin.mobile.right != '' + ) { + 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( 'sidebar-widgets-' + builder_type + '-widget-' + index + '-margin', dynamicStyle ); + } + } ); + } ); + + if ( 'footer' === builder_type ) { + + wp.customize( 'astra-settings[footer-widget-alignment-' + index + ']', function( value ) { + value.bind( function( alignment ) { + if( alignment.desktop != '' || alignment.tablet != '' || alignment.mobile != '' ) { + var dynamicStyle = ''; + if( AstraBuilderWidgetData.is_flex_based_css ){ + dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"].footer-widget-area-inner {'; + }else{ + dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"] .footer-widget-area-inner {'; + } + dynamicStyle += 'text-align: ' + alignment['desktop'] + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + if( AstraBuilderWidgetData.is_flex_based_css ){ + dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"].footer-widget-area-inner {'; + }else{ + dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"] .footer-widget-area-inner {'; + } + dynamicStyle += 'text-align: ' + alignment['tablet'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + if( AstraBuilderWidgetData.is_flex_based_css ){ + dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"].footer-widget-area-inner {'; + }else{ + dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"] .footer-widget-area-inner {'; + } + dynamicStyle += 'text-align: ' + alignment['mobile'] + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( 'footer-widget-alignment-' + index, dynamicStyle ); + } + } ); + } ); + + } + })(index); + + } + +} + +/** + * Apply Visibility CSS for the element + * + * @param string section Section ID. + * @param string selector Base Selector. + * @param string default_property default CSS property. + */ +function astra_builder_visibility_css( section, selector, default_property = 'flex' ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + // Header Desktop visibility. + wp.customize( 'astra-settings[' + section + '-hide-desktop]', function( setting ) { + setting.bind( function( desktop_visible ) { + + var dynamicStyle = ''; + var is_hidden = ( ! desktop_visible ) ? default_property : 'none'; + + dynamicStyle += selector + ' {'; + dynamicStyle += 'display: ' + is_hidden + ';'; + dynamicStyle += '} '; + + astra_add_dynamic_css( section + '-hide-desktop', dynamicStyle ); + } ); + + } ); + + // Header Tablet visibility. + wp.customize( 'astra-settings[' + section + '-hide-tablet]', function( setting ) { + setting.bind( function( tablet_visible ) { + + var dynamicStyle = ''; + var is_hidden = ( ! tablet_visible ) ? default_property : 'none'; + + dynamicStyle += '@media (min-width: ' + mobile_break_point + 'px) and (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point ' + selector + ' {'; + dynamicStyle += 'display: ' + is_hidden + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( section + '-hide-tablet', dynamicStyle ); + } ); + + } ); + + // Header Mobile visibility. + wp.customize( 'astra-settings[' + section + '-hide-mobile]', function( setting ) { + setting.bind( function( mobile_visible ) { + + var dynamicStyle = ''; + var is_hidden = ( ! mobile_visible ) ? default_property : 'none'; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point ' + selector + ' {'; + dynamicStyle += 'display: ' + is_hidden + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( section + '-hide-mobile', dynamicStyle ); + } ); + } ); +} diff --git a/inc/builder/type/base/dynamic-css/button/class-astra-button-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/button/class-astra-button-component-dynamic-css.php new file mode 100644 index 0000000..8695773 --- /dev/null +++ b/inc/builder/type/base/dynamic-css/button/class-astra-button-component-dynamic-css.php @@ -0,0 +1,215 @@ + array( + // Typography. + 'font-size' => astra_responsive_font( $button_font_size, 'desktop' ), + ), + + /** + * Button Colors. + */ + $selector . ' .ast-custom-button' => array( + // Colors. + 'color' => $button_color_desktop, + 'background' => $button_bg_color_desktop, + + // Border. + 'border-color' => $button_border_color_desktop, + 'border-top-width' => astra_get_css_value( $button_border_width['top'], 'px' ), + 'border-bottom-width' => astra_get_css_value( $button_border_width['bottom'], 'px' ), + 'border-left-width' => astra_get_css_value( $button_border_width['left'], 'px' ), + 'border-right-width' => astra_get_css_value( $button_border_width['right'], 'px' ), + 'border-radius' => astra_get_css_value( $button_border_radius, 'px' ), + ), + + // Hover Options. + $selector . ' .ast-custom-button:hover' => array( + 'color' => $button_h_color_desktop, + 'background' => $button_bg_h_color_desktop, + 'border-color' => $button_border_h_color_desktop, + ), + ); + + /** + * Button CSS. + */ + $css_output_tablet = array( + + + /** + * Button font size. + */ + $selector . '[data-section*="section-' . $context . '-button-"] .ast-builder-button-wrap .ast-custom-button' => array( + // Typography. + 'font-size' => astra_responsive_font( $button_font_size, 'tablet' ), + ), + + /** + * Button Colors. + */ + $selector . ' .ast-custom-button' => array( + // Typography. + 'font-size' => astra_responsive_font( $button_font_size, 'tablet' ), + + // Colors. + 'color' => $button_color_tablet, + 'background' => $button_bg_color_tablet, + 'border-color' => $button_border_color_tablet, + ), + // Hover Options. + $selector . ' .ast-custom-button:hover' => array( + 'color' => $button_h_color_tablet, + 'background' => $button_bg_h_color_tablet, + 'border-color' => $button_border_h_color_tablet, + ), + ); + + /** + * Button CSS. + */ + $css_output_mobile = array( + + /** + * Button font size. + */ + $selector . '[data-section*="section-' . $context . '-button-"] .ast-builder-button-wrap .ast-custom-button' => array( + // Typography. + 'font-size' => astra_responsive_font( $button_font_size, 'mobile' ), + ), + + /** + * Button Colors. + */ + $selector . ' .ast-custom-button' => array( + // Typography. + 'font-size' => astra_responsive_font( $button_font_size, 'mobile' ), + + // Colors. + 'color' => $button_color_mobile, + 'background' => $button_bg_color_mobile, + 'border-color' => $button_border_color_mobile, + ), + // Hover Options. + $selector . ' ..ast-custom-button:hover' => array( + 'color' => $button_h_color_mobile, + 'background' => $button_bg_h_color_mobile, + 'border-color' => $button_border_h_color_mobile, + ), + ); + + /* 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() ); + + $generated_css .= $css_output; + + $generated_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_margin_padding_css( $_section, $selector . '[data-section*="section-' . $context . '-button-"] .ast-builder-button-wrap .ast-custom-button' ); + + $visibility_selector = '.ast-' . $builder_type . '-button-' . $index . '[data-section="' . $_section . '"]'; + $generated_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $visibility_selector ); + } + + if ( true === $hb_button_flag ) { + $static_hb_css = array( + '[data-section*="section-hb-button-"] .menu-link' => array( + 'display' => 'none', + ), + ); + return astra_parse_css( $static_hb_css ) . $generated_css; + } + + return $generated_css; + } +} + +/** + * Kicking this off by creating object of this class. + */ + +new Astra_Button_Component_Dynamic_CSS(); diff --git a/inc/builder/type/base/dynamic-css/html/class-astra-html-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/html/class-astra-html-component-dynamic-css.php new file mode 100644 index 0000000..e36aca8 --- /dev/null +++ b/inc/builder/type/base/dynamic-css/html/class-astra-html-component-dynamic-css.php @@ -0,0 +1,187 @@ + array( + 'color' => $text_color_desktop, + // Typography. + 'font-size' => astra_responsive_font( $font_size, 'desktop' ), + ), + + $selector => array( + // Margin. + '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' ), + ), + + // Link Color. + $selector . ' a' => array( + 'color' => $link_color_desktop, + ), + + // Link Hover Color. + $selector . ' a:hover' => array( + 'color' => $link_h_color_desktop, + ), + ); + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output_desktop ); + + // Tablet CSS. + $css_output_tablet = array( + + $selector . ' .ast-builder-html-element' => array( + 'color' => $text_color_tablet, + // Typography. + 'font-size' => astra_responsive_font( $font_size, 'tablet' ), + ), + + $selector => array( + // Margin CSS. + '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' ), + ), + + // Link Color. + $selector . ' a' => array( + 'color' => $link_color_tablet, + ), + + // Link Hover Color. + $selector . ' a:hover' => array( + 'color' => $link_h_color_tablet, + ), + ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + + // Mobile CSS. + $css_output_mobile = array( + + $selector . ' .ast-builder-html-element' => array( + 'color' => $text_color_mobile, + // Typography. + 'font-size' => astra_responsive_font( $font_size, 'mobile' ), + ), + + $selector => array( + // Margin CSS. + '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' ), + ), + + // Link Color. + $selector . ' a' => array( + 'color' => $link_color_mobile, + ), + + // Link Hover Color. + $selector . ' a:hover' => array( + 'color' => $link_h_color_mobile, + ), + ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $generated_css .= $css_output; + + $generated_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_typography_css( $_section, $selector ); + + $generated_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector, $display_prop ); + } + if ( true === $html_css_flag ) { + $html_static_css = array( + '.ast-builder-html-element img.alignnone' => array( + 'display' => 'inline-block', + ), + '.ast-builder-html-element p:first-child' => array( + 'margin-top' => '0', + ), + '.ast-builder-html-element p:last-child' => array( + 'margin-bottom' => '0', + ), + '.ast-header-break-point .main-header-bar .ast-builder-html-element' => array( + 'line-height' => '1.85714285714286', + ), + ); + return astra_parse_css( $html_static_css ) . $generated_css; + } + + return $generated_css; + } +} + +/** + * Kicking this off by creating object of this class. + */ + +new Astra_Html_Component_Dynamic_CSS(); diff --git a/inc/builder/type/base/dynamic-css/social/class-astra-social-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/social/class-astra-social-component-dynamic-css.php new file mode 100644 index 0000000..31d8044 --- /dev/null +++ b/inc/builder/type/base/dynamic-css/social/class-astra-social-component-dynamic-css.php @@ -0,0 +1,421 @@ + array( + // Icon Spacing. + 'margin-left' => astra_get_css_value( $icon_spacing_desktop, 'px' ), + 'margin-right' => astra_get_css_value( $icon_spacing_desktop, 'px' ), + + // Icon Background Space. + 'padding' => astra_get_css_value( $icon_bg_spacing, 'px' ), + + // Icon Radius. + 'border-radius' => astra_get_css_value( $icon_radius, 'px' ), + ), + $selector . ' .ast-builder-social-element svg' => array( + + // Icon Size. + 'width' => astra_get_css_value( $icon_size_desktop, 'px' ), + 'height' => astra_get_css_value( $icon_size_desktop, 'px' ), + ), + $selector . ' .ast-social-icon-image-wrap' => array( + + // Icon Background Space. + 'margin' => astra_get_css_value( $icon_bg_spacing, 'px' ), + ), + $selector => array( + // Margin CSS. + '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' ), + ), + ); + + if ( 'custom' === $color_type || is_customize_preview() ) { + $css_output_desktop[ $selector . ' .ast-social-color-type-custom svg' ]['fill'] = $social_icons_color_desktop; + $css_output_desktop[ $selector . ' .ast-builder-social-element' ]['background'] = $social_icons_bg_color_desktop; + + $css_output_desktop[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover' ] = array( + // Hover. + 'color' => $social_icons_h_color_desktop, + 'background' => $social_icons_h_bg_color_desktop, + ); + + $css_output_desktop[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover svg' ] = array( + 'fill' => $social_icons_h_color_desktop, + ); + + if ( isset( $social_icons_label_color_desktop ) && ! empty( $social_icons_label_color_desktop ) ) { + $css_output_desktop[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_label_color_desktop; + } else { + $css_output_desktop[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_color_desktop; + } + if ( isset( $social_icons_label_h_color_desktop ) && ! empty( $social_icons_label_h_color_desktop ) ) { + $css_output_desktop[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_label_h_color_desktop; + } else { + $css_output_desktop[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_h_color_desktop; + } + } + + /** + * Social_icons CSS. + */ + $css_output_tablet = array( + $selector . ' .ast-builder-social-element svg' => array( + + // Icon Size. + 'width' => astra_get_css_value( $icon_size_tablet, 'px' ), + 'height' => astra_get_css_value( $icon_size_tablet, 'px' ), + ), + $selector . ' .ast-builder-social-element' => array( + // Icon Spacing. + 'margin-left' => astra_get_css_value( $icon_spacing_tablet, 'px' ), + 'margin-right' => astra_get_css_value( $icon_spacing_tablet, 'px' ), + ), + $selector => array( + // Margin CSS. + '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' ), + ), + ); + + if ( 'custom' === $color_type || is_customize_preview() ) { + $css_output_tablet[ $selector . ' .ast-social-color-type-custom svg' ]['fill'] = $social_icons_color_tablet; + + $css_output_tablet[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element' ]['background'] = $social_icons_bg_color_tablet; + + $css_output_tablet[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover' ] = array( + // Hover. + 'color' => $social_icons_h_color_tablet, + 'background' => $social_icons_h_bg_color_tablet, + ); + $css_output_tablet[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover svg' ] = array( + 'fill' => $social_icons_h_color_tablet, + ); + + if ( isset( $social_icons_label_color_tablet ) && ! empty( $social_icons_label_color_tablet ) ) { + $css_output_tablet[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_label_color_tablet; + } else { + $css_output_tablet[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_color_tablet; + } + if ( isset( $social_icons_label_h_color_tablet ) && ! empty( $social_icons_label_h_color_tablet ) ) { + $css_output_tablet[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_label_h_color_tablet; + } else { + $css_output_tablet[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_h_color_tablet; + } + } + + /** + * Social_icons CSS. + */ + $css_output_mobile = array( + $selector . ' .ast-builder-social-element svg' => array( + + // Icon Size. + 'width' => astra_get_css_value( $icon_size_mobile, 'px' ), + 'height' => astra_get_css_value( $icon_size_mobile, 'px' ), + ), + $selector . ' .ast-builder-social-element' => array( + // Icon Spacing. + 'margin-left' => astra_get_css_value( $icon_spacing_mobile, 'px' ), + 'margin-right' => astra_get_css_value( $icon_spacing_mobile, 'px' ), + ), + $selector => array( + // Margin CSS. + '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' ), + ), + ); + + if ( 'custom' === $color_type || is_customize_preview() ) { + $css_output_mobile[ $selector . ' .ast-social-color-type-custom svg' ]['fill'] = $social_icons_color_mobile; + + $css_output_mobile[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element' ]['background'] = $social_icons_bg_color_mobile; + + $css_output_mobile[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover' ] = array( + // Hover. + 'color' => $social_icons_h_color_mobile, + 'background' => $social_icons_h_bg_color_mobile, + ); + $css_output_mobile[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover svg' ] = array( + 'fill' => $social_icons_h_color_mobile, + ); + + if ( isset( $social_icons_label_color_mobile ) && ! empty( $social_icons_label_color_mobile ) ) { + $css_output_mobile[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_label_color_mobile; + } else { + $css_output_mobile[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_color_mobile; + } + if ( isset( $social_icons_label_h_color_mobile ) && ! empty( $social_icons_label_h_color_mobile ) ) { + $css_output_mobile[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_label_h_color_mobile; + } else { + $css_output_mobile[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_h_color_mobile; + } + } + + if ( 'footer' === $builder_type ) { + + // Footer Social Alignment CSS. + $alignment = astra_get_option( 'footer-social-' . $index . '-alignment' ); + + $desktop_alignment = ( isset( $alignment['desktop'] ) ) ? $alignment['desktop'] : ''; + $tablet_alignment = ( isset( $alignment['tablet'] ) ) ? $alignment['tablet'] : ''; + $mobile_alignment = ( isset( $alignment['mobile'] ) ) ? $alignment['mobile'] : ''; + + $css_output_desktop[ '[data-section="section-fb-social-icons-' . $index . '"] .footer-social-inner-wrap' ] = array( + 'text-align' => $desktop_alignment, + ); + $css_output_tablet[ '[data-section="section-fb-social-icons-' . $index . '"] .footer-social-inner-wrap' ] = array( + 'text-align' => $tablet_alignment, + ); + $css_output_mobile[ '[data-section="section-fb-social-icons-' . $index . '"] .footer-social-inner-wrap' ] = array( + 'text-align' => $mobile_alignment, + ); + + } + + /* 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() ); + + $css_output .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_typography_css( $_section, $selector ); + + $visibility_selector = '.ast-builder-layout-element[data-section="' . $_section . '"]'; + $css_output .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $visibility_selector ); + + $generated_css .= $css_output; + } + if ( $social_css_flag ) { + return self::get_social_static_css() . $generated_css; + } + + return $generated_css; + } + + /** + * Load Social default css. + * + * @since 3.0.0 + */ + public static function get_social_static_css() { + $social_static_css = ' + .ast-builder-social-element:hover { + color: #0274be; + } + .ast-social-stack-desktop .ast-builder-social-element, + .ast-social-stack-tablet .ast-builder-social-element, + .ast-social-stack-mobile .ast-builder-social-element { + margin-top: 6px; + margin-bottom: 6px; + } + .ast-social-color-type-official .ast-builder-social-element, .ast-social-color-type-official .social-item-label { + color: var(--color); + background-color: var(--background-color); + } + .header-social-inner-wrap.ast-social-color-type-official .ast-builder-social-element svg, + .footer-social-inner-wrap.ast-social-color-type-official .ast-builder-social-element svg { + fill: currentColor; + } + .social-show-label-true .ast-builder-social-element { + width: auto; + padding: 0 0.4em; + } + [data-section^="section-fb-social-icons-"] .footer-social-inner-wrap { + text-align: center; + } + .ast-footer-social-wrap { + width: 100%; + }'; + + if ( is_rtl() ) { + $social_static_css .= '.ast-footer-social-wrap .ast-builder-social-element:first-child { + margin-right: 0; + } + .ast-footer-social-wrap .ast-builder-social-element:last-child { + margin-left: 0; + } + .ast-header-social-wrap .ast-builder-social-element:first-child { + margin-right: 0; + } + .ast-header-social-wrap .ast-builder-social-element:last-child { + margin-left: 0; + } + .ast-builder-social-element { + line-height: 1; + color: #3a3a3a; + background: transparent; + vertical-align: middle; + transition: all 0.01s; + margin-right: 6px; + margin-left: 6px; + justify-content: center; + align-items: center; + } + .ast-builder-social-element { + line-height: 1; + color: #3a3a3a; + background: transparent; + vertical-align: middle; + transition: all 0.01s; + margin-right: 6px; + margin-left: 6px; + justify-content: center; + align-items: center; + } + .ast-builder-social-element .social-item-label { + padding-right: 6px; + }'; + } else { + $social_static_css .= '.ast-footer-social-wrap .ast-builder-social-element:first-child { + margin-left: 0; + } + .ast-footer-social-wrap .ast-builder-social-element:last-child { + margin-right: 0; + } + .ast-header-social-wrap .ast-builder-social-element:first-child { + margin-left: 0; + } + .ast-header-social-wrap .ast-builder-social-element:last-child { + margin-right: 0; + } + .ast-builder-social-element { + line-height: 1; + color: #3a3a3a; + background: transparent; + vertical-align: middle; + transition: all 0.01s; + margin-left: 6px; + margin-right: 6px; + justify-content: center; + align-items: center; + } + .ast-builder-social-element { + line-height: 1; + color: #3a3a3a; + background: transparent; + vertical-align: middle; + transition: all 0.01s; + margin-left: 6px; + margin-right: 6px; + justify-content: center; + align-items: center; + } + .ast-builder-social-element .social-item-label { + padding-left: 6px; + }'; + } + + return Astra_Enqueue_Scripts::trim_css( $social_static_css ); + } +} + +/** + * Kicking this off by creating object of this class. + */ + +new Astra_Social_Component_Dynamic_CSS(); diff --git a/inc/builder/type/base/dynamic-css/widget/class-astra-widget-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/widget/class-astra-widget-component-dynamic-css.php new file mode 100644 index 0000000..243e25b --- /dev/null +++ b/inc/builder/type/base/dynamic-css/widget/class-astra-widget-component-dynamic-css.php @@ -0,0 +1,174 @@ + array( + 'color' => $text_color_desktop, + // Typography. + 'font-size' => astra_responsive_font( $content_font_size, 'desktop' ), + ), + $builder_widget_selector . ' a' => array( + 'color' => $link_color_desktop, + ), + $builder_widget_selector . ' a:hover' => array( + 'color' => $link_h_color_desktop, + ), + $selector . ' .widget-title' => array( + 'color' => $title_color_desktop, + // Typography. + 'font-size' => astra_responsive_font( $title_font_size, 'desktop' ), + ), + $selector => array( + // Margin CSS. + '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_tablet = array( + $builder_widget_selector => array( + 'color' => $text_color_tablet, + // Typography. + 'font-size' => astra_responsive_font( $content_font_size, 'tablet' ), + ), + $selector . ' .widget-title' => array( + 'color' => $title_color_tablet, + // Typography. + 'font-size' => astra_responsive_font( $title_font_size, 'tablet' ), + ), + $builder_widget_selector . ' a' => array( + 'color' => $link_color_tablet, + ), + $builder_widget_selector . ' a:hover' => array( + 'color' => $link_h_color_tablet, + ), + $selector => array( + // Margin CSS. + '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_mobile = array( + $builder_widget_selector => array( + 'color' => $text_color_mobile, + // Typography. + 'font-size' => astra_responsive_font( $content_font_size, 'mobile' ), + ), + $selector . ' .widget-title' => array( + 'color' => $title_color_mobile, + // Typography. + 'font-size' => astra_responsive_font( $title_font_size, 'mobile' ), + ), + $builder_widget_selector . ' a' => array( + 'color' => $link_color_mobile, + ), + $builder_widget_selector . ' a:hover' => array( + 'color' => $link_h_color_mobile, + ), + $selector => array( + // Margin CSS. + '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' ), + ), + ); + + /* 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() ); + + $css_output .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector, 'block' ); + + $generated_css .= $css_output; + + } + + return $generated_css; + } +} + +/** + * Kicking this off by creating object of this class. + */ + +new Astra_Widget_Component_Dynamic_CSS(); -- cgit v1.2.3-70-g09d2