diff options
Diffstat (limited to 'inc/builder/type/header/search/dynamic-css/dynamic.css.php')
| -rw-r--r-- | inc/builder/type/header/search/dynamic-css/dynamic.css.php | 281 |
1 files changed, 281 insertions, 0 deletions
diff --git a/inc/builder/type/header/search/dynamic-css/dynamic.css.php b/inc/builder/type/header/search/dynamic-css/dynamic.css.php new file mode 100644 index 0000000..9dea5fc --- /dev/null +++ b/inc/builder/type/header/search/dynamic-css/dynamic.css.php @@ -0,0 +1,281 @@ +<?php +/** + * Search - Dynamic CSS + * + * @package Astra + * @since 3.0.0 + */ + +if ( ! defined( 'ABSPATH' ) ) { + exit; // Exit if accessed directly. +} + +/** + * Search + */ +add_filter( 'astra_dynamic_theme_css', 'astra_hb_search_dynamic_css' ); + +/** + * Dynamic CSS + * + * @param string $dynamic_css Astra Dynamic CSS. + * @param string $dynamic_css_filtered Astra Dynamic CSS Filters. + * @return String Generated dynamic CSS for Search. + * + * @since 3.0.0 + */ +function astra_hb_search_dynamic_css( $dynamic_css, $dynamic_css_filtered = '' ) { + + if ( ! Astra_Builder_Helper::is_component_loaded( 'search', 'header' ) ) { + return $dynamic_css; + } + + $_section = 'section-header-search'; + $selector = '.ast-header-search'; + $icon_size = astra_get_option( 'header-search-icon-space' ); + + $icon_size_desktop = ( isset( $icon_size ) && isset( $icon_size['desktop'] ) && ! empty( $icon_size['desktop'] ) ) ? $icon_size['desktop'] : 20; + + $icon_size_tablet = ( isset( $icon_size ) && isset( $icon_size['tablet'] ) && ! empty( $icon_size['tablet'] ) ) ? $icon_size['tablet'] : 20; + + $icon_size_mobile = ( isset( $icon_size ) && isset( $icon_size['mobile'] ) && ! empty( $icon_size['mobile'] ) ) ? $icon_size['mobile'] : 20; + + $icon_color_desktop = astra_get_prop( astra_get_option( 'header-search-icon-color' ), 'desktop' ); + $icon_color_tablet = astra_get_prop( astra_get_option( 'header-search-icon-color' ), 'tablet' ); + $icon_color_mobile = astra_get_prop( astra_get_option( 'header-search-icon-color' ), 'mobile' ); + + $margin = astra_get_option( $_section . '-margin' ); + $margin_selector = '.ast-hfb-header .site-header-section > .ast-header-search, .ast-hfb-header .ast-header-search'; + + /** + * Search CSS. + */ + $css_output_desktop = array( + $selector . ' .ast-search-menu-icon .search-form .search-field:-ms-input-placeholder,' . $selector . ' .ast-search-menu-icon .search-form .search-field:-ms-input-placeholder' => array( + 'opacity' => '0.5', + ), + $selector . ' .ast-search-menu-icon.slide-search .search-form, .ast-header-search .ast-search-menu-icon.ast-inline-search .search-form' => array( + '-js-display' => 'flex', + 'display' => 'flex', + 'align-items' => 'center', + ), + '.ast-builder-layout-element.ast-header-search' => array( + 'height' => 'auto', + ), + $selector . ' .astra-search-icon' => array( + 'color' => esc_attr( $icon_color_desktop ), + 'font-size' => astra_get_css_value( $icon_size_desktop, 'px' ), + ), + $selector . ' .search-field::placeholder' => array( + 'color' => esc_attr( $icon_color_desktop ), + ), + $selector . ' .ast-search-menu-icon.ast-dropdown-active .search-field' => array( + 'margin-right' => astra_get_css_value( $icon_size_desktop - 10, 'px' ), + ), + $margin_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( + + $selector . ' .astra-search-icon' => array( + 'color' => esc_attr( $icon_color_tablet ), + 'font-size' => astra_get_css_value( $icon_size_tablet, 'px' ), + ), + $selector . ' .search-field::placeholder' => array( + 'color' => esc_attr( $icon_color_tablet ), + ), + $selector . ' .ast-search-menu-icon.ast-dropdown-active .search-field' => array( + 'margin-right' => astra_get_css_value( $icon_size_tablet - 10, 'px' ), + ), + $margin_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( + + $selector . ' .astra-search-icon' => array( + 'color' => esc_attr( $icon_color_mobile ), + 'font-size' => astra_get_css_value( $icon_size_mobile, 'px' ), + ), + $selector . ' .search-field::placeholder' => array( + 'color' => esc_attr( $icon_color_mobile ), + ), + $selector . ' .ast-search-menu-icon.ast-dropdown-active .search-field' => array( + 'margin-right' => astra_get_css_value( $icon_size_mobile - 10, 'px' ), + ), + $margin_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_search_static_css(); + $css_output .= astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector ); + + return $dynamic_css; +} + +/** + * Search Component static CSS. + * + * @return string + * @since 3.5.0 + */ +function astra_search_static_css() { + $search_css = ' + + .main-header-bar .main-header-bar-navigation .ast-search-icon { + display: block; + z-index: 4; + position: relative; + } + + .ast-search-icon { + z-index: 4; + position: relative; + line-height: normal; + } + .main-header-bar .ast-search-menu-icon .search-form { + background-color: #ffffff; + } + .ast-search-menu-icon.ast-dropdown-active.slide-search .search-form { + visibility: visible; + opacity: 1; + } + .ast-search-menu-icon .search-form { + border: 1px solid #e7e7e7; + line-height: normal; + padding: 0 3em 0 0; + border-radius: 2px; + display: inline-block; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: relative; + color: inherit; + background-color: #fff; + } + .ast-search-menu-icon .astra-search-icon { + -js-display: flex; + display: flex; + line-height: normal; + } + .ast-search-menu-icon .astra-search-icon:focus { + outline: none; + } + .ast-search-menu-icon .search-field { + border: none; + background-color: transparent; + transition: width .2s; + border-radius: inherit; + color: inherit; + font-size: inherit; + width: 0; + color: #757575; + } + .ast-search-menu-icon .search-submit { + display: none; + background: none; + border: none; + font-size: 1.3em; + color: #757575; + } + .ast-search-menu-icon.ast-dropdown-active { + visibility: visible; + opacity: 1; + position: relative; + } + + .ast-search-menu-icon.ast-dropdown-active .search-field { + width: 235px; + } + .ast-header-search .ast-search-menu-icon.slide-search .search-form, .ast-header-search .ast-search-menu-icon.ast-inline-search .search-form { + -js-display: flex; + display: flex; + align-items: center; + }'; + + if ( is_rtl() ) { + $search_css .= ' + .ast-search-menu-icon.ast-inline-search .search-field { + width : 100%; + padding : 0.60em; + padding-left : 5.5em; + } + .site-header-section-left .ast-search-menu-icon.slide-search .search-form { + padding-right: 3em; + padding-left: unset; + right: -1em; + left: unset; + } + + .site-header-section-left .ast-search-menu-icon.slide-search .search-form .search-field { + margin-left: unset; + margin-right: 10px; + } + .ast-search-menu-icon.slide-search .search-form { + -webkit-backface-visibility: visible; + backface-visibility: visible; + visibility: hidden; + opacity: 0; + transition: all .2s; + position: absolute; + z-index: 3; + left: -1em; + top: 50%; + transform: translateY(-50%); + }'; + } else { + $search_css .= ' + .ast-search-menu-icon.ast-inline-search .search-field { + width : 100%; + padding : 0.60em; + padding-right : 5.5em; + } + .site-header-section-left .ast-search-menu-icon.slide-search .search-form { + padding-left: 3em; + padding-right: unset; + left: -1em; + right: unset; + } + + .site-header-section-left .ast-search-menu-icon.slide-search .search-form .search-field { + margin-right: unset; + margin-left: 10px; + } + .ast-search-menu-icon.slide-search .search-form { + -webkit-backface-visibility: visible; + backface-visibility: visible; + visibility: hidden; + opacity: 0; + transition: all .2s; + position: absolute; + z-index: 3; + right: -1em; + top: 50%; + transform: translateY(-50%); + }'; + } + + return Astra_Enqueue_Scripts::trim_css( $search_css ); +} |