From b0659e548642648733d3b41497acc9ef724ca358 Mon Sep 17 00:00:00 2001 From: Ben Ritner Date: Wed, 27 Nov 2024 12:38:03 -0700 Subject: [PATCH] use variables --- .../class-kadence-blocks-header-block.php | 47 +-- .../class-kadence-blocks-header-row-block.php | 17 +- includes/class-kadence-blocks-css.php | 43 +- includes/header/class-kadence-header-cpt.php | 336 ---------------- src/blocks/header/children/row/style.scss | 6 + .../header/components/backend-styles/index.js | 376 +++--------------- src/blocks/header/edit-inner.js | 25 +- src/blocks/header/style.scss | 15 +- 8 files changed, 136 insertions(+), 729 deletions(-) diff --git a/includes/blocks/class-kadence-blocks-header-block.php b/includes/blocks/class-kadence-blocks-header-block.php index 86756d179..ededf14b2 100644 --- a/includes/blocks/class-kadence-blocks-header-block.php +++ b/includes/blocks/class-kadence-blocks-header-block.php @@ -110,11 +110,8 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De $sized_attributes_inherit = $css->get_sized_attributes_auto( $attributes, $size ); $bg = $sized_attributes['background']; - // $hover_bg = $sized_attributes['backgroundHover']; $bg_transparent = $sized_attributes['backgroundTransparent']; - // $hover_bg_transparent = $sized_attributes['backgroundTransparentHover']; $bg_sticky = $sized_attributes['backgroundSticky']; - // $hover_bg_sticky = $sized_attributes['backgroundStickyHover']; $border = $sized_attributes['border']; $typography = $sized_attributes['typography']; $min_height = $css->get_inherited_value($sized_attributes['height'][0], $sized_attributes['height'][1], $sized_attributes['height'][2], $size); @@ -146,23 +143,13 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De $css->render_background( $bg, $css ); } - // //hover styles - // $css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container:hover' ); - // $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderHover'], 'bottom' ) ); - // $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderHover'], 'top' ) ); - // $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderHover'], 'left' ) ); - // $css->add_property( 'border-right', $css->render_border( $sized_attributes['borderHover'], 'right' ) ); - // $css->render_measure_range( $sized_attributes, ( 'Desktop' === $size ? 'borderRadiusHover' : 'borderRadiusHover' . $size ), 'border-radius', '', ['unit_key' => 'borderRadiusHoverUnit']); - - // if ( $sized_attributes['isTransparent'] != '1' ) { - // $css->render_background( $hover_bg, $css ); - // } - //transparent normal + $css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent' ); + if ( $this->is_header_transparent( $attributes, $unique_id, $size ) ) { + $css->render_background( $bg_transparent, $css, '--kb-transparent-header-bg' ); + } $css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent .kb-header-container' ); if ( $this->is_header_transparent( $attributes, $unique_id, $size ) ) { - $css->render_background( $bg_transparent, $css ); - $css->add_property( 'background-color', $css->render_color( ! empty( $bg_transparent['color'] ) ? $bg_transparent['color'] : '') ); $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderTransparent'], 'bottom' ) ); $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderTransparent'], 'top' ) ); $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderTransparent'], 'left' ) ); @@ -174,20 +161,13 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De } } - // //transparent hover - // $css->set_selector( '.wp-block-kadence-header' . $unique_id . '.header-' . strtolower( $size ) . '-transparent .kb-header-container:hover' ); - // if ( $sized_attributes['isTransparent'] == '1' ) { - // $css->render_background( $hover_bg_transparent, $css ); - // $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderTransparentHover'], 'bottom' ) ); - // $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderTransparentHover'], 'top' ) ); - // $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderTransparentHover'], 'left' ) ); - // $css->add_property( 'border-right', $css->render_border( $sized_attributes['borderTransparentHover'], 'right' ) ); - // } - - //sticky normal + // Sticky normal + $css->set_selector( '.wp-block-kadence-header' . $unique_id ); + if ( $sized_attributes['isSticky'] == '1' ) { + $css->render_background( $bg_sticky, $css, '--kb-stuck-header-bg' ); + } $css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container.item-is-stuck' ); if ( $sized_attributes['isSticky'] == '1' ) { - $css->render_background( $bg_sticky, $css ); $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderSticky'], 'bottom' ) ); $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderSticky'], 'top' ) ); $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderSticky'], 'left' ) ); @@ -199,15 +179,6 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De } } - // //sticky hover - // $css->set_selector( '.wp-block-kadence-header' . $unique_id . ' .kb-header-container.item-is-stuck:hover' ); - // if ( $sized_attributes['isSticky'] == '1' ) { - // $css->render_background( $hover_bg_sticky, $css ); - // $css->add_property( 'border-bottom', $css->render_border( $sized_attributes['borderStickyHover'], 'bottom' ) ); - // $css->add_property( 'border-top', $css->render_border( $sized_attributes['borderStickyHover'], 'top' ) ); - // $css->add_property( 'border-left', $css->render_border( $sized_attributes['borderStickyHover'], 'left' ) ); - // $css->add_property( 'border-right', $css->render_border( $sized_attributes['borderStickyHover'], 'right' ) ); - // } } /** diff --git a/includes/blocks/header/class-kadence-blocks-header-row-block.php b/includes/blocks/header/class-kadence-blocks-header-row-block.php index 7680e06f8..7ebd0a3db 100644 --- a/includes/blocks/header/class-kadence-blocks-header-row-block.php +++ b/includes/blocks/header/class-kadence-blocks-header-row-block.php @@ -118,10 +118,13 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { $css->add_property( 'max-width', $attributes['maxWidthMobile'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) ); $css->set_media_state( 'desktop' ); } - + // Background Variables. + $css->set_selector( '.wp-block-kadence-header-row' . $unique_id ); + $css->render_background( $bg, $css, '--kb-header-row-bg' ); + $css->render_background( $bg, $css, '--kb-stuck-header-bg' ); + $css->render_background( $bg_transparent, $css, '--kb-transparent-header-row-bg' ); if ( 'contained' !== $layout ) { $css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ', .wp-block-kadence-header-row' . $unique_id . '.item-is-stuck.item-is-stuck'); - $css->render_background( $bg, $css ); $css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'desktop_key' => 'borderRadius', 'tablet_key' => 'borderRadiusTablet', @@ -132,14 +135,10 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { 'tablet_key' => 'borderTablet', 'mobile_key' => 'borderMobile', ) ); - // Transparent overrides. - $css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-header-row' . $unique_id . ', .header-' . strtolower( $size ) . '-transparent .wp-block-kadence-header-row' . $unique_id . '.item-is-stuck' ); - $css->render_background( $bg_transparent, $css ); } // Container. - $css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' ); if ( 'contained' === $layout ) { - $css->render_background( $bg, $css ); + $css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' ); $css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'desktop_key' => 'borderRadius', 'tablet_key' => 'borderRadiusTablet', @@ -150,10 +149,8 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { 'tablet_key' => 'borderTablet', 'mobile_key' => 'borderMobile', ) ); - $css->set_selector( '.header-' . strtolower( $size ) . '-transparent .wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' ); - $css->render_background( $bg_transparent, $css ); - $css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' ); } + $css->set_selector( '.wp-block-kadence-header-row' . $unique_id . ' .kadence-header-row-inner' ); $css->render_measure_output( $attributes, 'padding', 'padding', array( 'desktop_key' => 'padding', 'tablet_key' => 'paddingTablet', diff --git a/includes/class-kadence-blocks-css.php b/includes/class-kadence-blocks-css.php index ef47f9929..ed602939c 100644 --- a/includes/class-kadence-blocks-css.php +++ b/includes/class-kadence-blocks-css.php @@ -2392,7 +2392,7 @@ public function render_opacity_from_100( $attributes, $name = null ) { * @param array $background an array of background settings. * @param object $css an object of css output. */ - public function render_background( $background, $css ) { + public function render_background( $background, $css, $property = 'normal' ) { if ( empty( $background ) ) { return false; } @@ -2401,20 +2401,37 @@ public function render_background( $background, $css ) { } $type = ( isset( $background['type'] ) && ! empty( $background['type'] ) ? $background['type'] : 'normal' ); if ( 'normal' === $type ) { - if ( ! empty( $background['color'] ) ) { - $css->add_property( 'background-color', $this->render_color( $background['color'] ) ); - } - $image_url = ( ! empty( $background['image'] ) ? 'url("' . $background['image'] . '")' : '' ); - if ( ! empty( $image_url ) ) { - $css->add_property( 'background-image', $image_url ); - $css->add_property( 'background-size', ( ! empty( $background['size'] ) ? $background['size'] : 'cover' ) ); - $css->add_property( 'background-position', ( ! empty( $background['position'] ) ? $background['position'] : 'center center' ) ); - $css->add_property( 'background-attachment', ( ! empty( $background['attachment'] ) ? $background['attachment'] : 'scroll' ) ); - $css->add_property( 'background-repeat', ( ! empty( $background['repeat'] ) ? $background['repeat'] : 'no-repeat' ) ); - + if ( $property !== 'normal' ) { + $background_color = ( ! empty( $background['color'] ) ? $background['color'] : '' ); + $image_url = ( ! empty( $background['image'] ) ? 'url("' . $background['image'] . '")' : '' ); + if ( ! empty( $image_url ) ) { + $background_size = ( ! empty( $background['size'] ) ? $background['size'] : '' ); + $background_position = ( ! empty( $background['position'] ) ? $background['position'] : 'center center' ); + $background_attachment = ( ! empty( $background['attachment'] ) ? $background['attachment'] : 'scroll' ); + $background_repeat = ( ! empty( $background['repeat'] ) ? $background['repeat'] : 'no-repeat' ); + $css->add_property( $property, ( ! empty( $background_color ) ? $this->render_color( $background_color ) . ' ' : '' ) . $image_url . ' ' . $background_repeat . ' ' . $background_position . ( ! empty( $background_size ) ? ' / ' . $background_size : '' ) . ' ' . $background_attachment ); + } else { + $css->add_property( $property, $this->render_color( $background_color ) ); + } + } else { + if ( ! empty( $background['color'] ) ) { + $css->add_property( 'background-color', $this->render_color( $background['color'] ) ); + } + $image_url = ( ! empty( $background['image'] ) ? 'url("' . $background['image'] . '")' : '' ); + if ( ! empty( $image_url ) ) { + $css->add_property( 'background-image', $image_url ); + $css->add_property( 'background-size', ( ! empty( $background['size'] ) ? $background['size'] : 'cover' ) ); + $css->add_property( 'background-position', ( ! empty( $background['position'] ) ? $background['position'] : 'center center' ) ); + $css->add_property( 'background-attachment', ( ! empty( $background['attachment'] ) ? $background['attachment'] : 'scroll' ) ); + $css->add_property( 'background-repeat', ( ! empty( $background['repeat'] ) ? $background['repeat'] : 'no-repeat' ) ); + } } } elseif ( 'gradient' === $type && isset( $background['gradient'] ) && ! empty( $background['gradient'] ) ) { - $css->add_property( 'background', $this->render_gradient( $background['gradient'] ) ); + if ( $property !== 'normal' ) { + $css->add_property( $property, $this->render_gradient( $background['gradient'] ) ); + } else { + $css->add_property( 'background', $this->render_gradient( $background['gradient'] ) ); + } } } diff --git a/includes/header/class-kadence-header-cpt.php b/includes/header/class-kadence-header-cpt.php index 00f4465c8..d4a53025f 100644 --- a/includes/header/class-kadence-header-cpt.php +++ b/includes/header/class-kadence-header-cpt.php @@ -387,69 +387,6 @@ public function register_meta() { 'unit' => array( 'type' => 'string' ), ), ), - // array( - // 'key' => '_kad_header_borderHover', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), - // array( - // 'key' => '_kad_header_borderHoverTablet', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), - // array( - // 'key' => '_kad_header_borderHoverMobile', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), array( 'key' => '_kad_header_borderRadius', 'default' => array( 0, 0, 0, 0 ), @@ -473,29 +410,6 @@ public function register_meta() { 'default' => 'px', 'type' => 'string', ), - // array( - // 'key' => '_kad_header_borderRadiusHover', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusHoverTablet', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusHoverMobile', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusHoverUnit', - // 'default' => 'px', - // 'type' => 'string', - // ), array( 'key' => '_kad_header_borderTransparent', 'type' => 'array', @@ -559,69 +473,6 @@ public function register_meta() { 'unit' => array( 'type' => 'string' ), ), ), - // array( - // 'key' => '_kad_header_borderTransparentHover', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), - // array( - // 'key' => '_kad_header_borderTransparentHoverTablet', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), - // array( - // 'key' => '_kad_header_borderTransparentHoverMobile', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), array( 'key' => '_kad_header_borderRadiusTransparent', 'default' => array( 0, 0, 0, 0 ), @@ -645,29 +496,6 @@ public function register_meta() { 'default' => 'px', 'type' => 'string', ), - // array( - // 'key' => '_kad_header_borderRadiusTransparentHover', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusTransparentHoverTablet', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusTransparentHoverMobile', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusTransparentHoverUnit', - // 'default' => 'px', - // 'type' => 'string', - // ), array( 'key' => '_kad_header_borderSticky', 'type' => 'array', @@ -731,69 +559,6 @@ public function register_meta() { 'unit' => array( 'type' => 'string' ), ), ), - // array( - // 'key' => '_kad_header_borderStickyHover', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), - // array( - // 'key' => '_kad_header_borderStickyHoverTablet', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), - // array( - // 'key' => '_kad_header_borderStickyHoverMobile', - // 'type' => 'array', - // 'children_type' => 'object', - // 'default' => array( - // array( - // 'top' => array( '', 'solid', '' ), - // 'right' => array( '', 'solid', '' ), - // 'bottom' => array( '', 'solid', '' ), - // 'left' => array( '', 'solid', '' ), - // 'unit' => 'px', - // ), - // ), - // 'properties' => array( - // 'top' => array( 'type' => 'array' ), - // 'right' => array( 'type' => 'array' ), - // 'bottom' => array( 'type' => 'array' ), - // 'left' => array( 'type' => 'array' ), - // 'unit' => array( 'type' => 'string' ), - // ), - // ), array( 'key' => '_kad_header_borderRadiusSticky', 'default' => array( 0, 0, 0, 0 ), @@ -817,29 +582,6 @@ public function register_meta() { 'default' => 'px', 'type' => 'string', ), - // array( - // 'key' => '_kad_header_borderRadiusStickyHover', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusStickyHoverTablet', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusStickyHoverMobile', - // 'default' => array( 0, 0, 0, 0 ), - // 'type' => 'array', - // 'children_type' => 'integer', - // ), - // array( - // 'key' => '_kad_header_borderRadiusStickyHoverUnit', - // 'default' => 'px', - // 'type' => 'string', - // ), array( 'key' => '_kad_header_background', 'type' => 'object', @@ -866,32 +608,6 @@ public function register_meta() { 'gradient' => array( 'type' => 'string' ), ), ), - // array( - // 'key' => '_kad_header_backgroundHover', - // 'type' => 'object', - // 'default' => array( - // 'color' => '', - // 'image' => '', - // 'imageID' => '', - // 'position' => 'center center', - // 'size' => 'cover', - // 'repeat' => 'no-repeat', - // 'attachment' => 'scroll', - // 'type' => 'normal', - // 'gradient' => '', - // ), - // 'properties' => array( - // 'color' => array( 'type' => 'string' ), - // 'image' => array( 'type' => 'string' ), - // 'imageID' => array( 'type' => 'string' ), - // 'position' => array( 'type' => 'string' ), - // 'size' => array( 'type' => 'string' ), - // 'repeat' => array( 'type' => 'string' ), - // 'attachment' => array( 'type' => 'string' ), - // 'type' => array( 'type' => 'string' ), - // 'gradient' => array( 'type' => 'string' ), - // ), - // ), array( 'key' => '_kad_header_backgroundTransparent', 'type' => 'object', @@ -918,32 +634,6 @@ public function register_meta() { 'gradient' => array( 'type' => 'string' ), ), ), - // array( - // 'key' => '_kad_header_backgroundTransparentHover', - // 'type' => 'object', - // 'default' => array( - // 'color' => '', - // 'image' => '', - // 'imageID' => '', - // 'position' => 'center center', - // 'size' => 'cover', - // 'repeat' => 'no-repeat', - // 'attachment' => 'scroll', - // 'type' => 'normal', - // 'gradient' => '', - // ), - // 'properties' => array( - // 'color' => array( 'type' => 'string' ), - // 'image' => array( 'type' => 'string' ), - // 'imageID' => array( 'type' => 'string' ), - // 'position' => array( 'type' => 'string' ), - // 'size' => array( 'type' => 'string' ), - // 'repeat' => array( 'type' => 'string' ), - // 'attachment' => array( 'type' => 'string' ), - // 'type' => array( 'type' => 'string' ), - // 'gradient' => array( 'type' => 'string' ), - // ), - // ), array( 'key' => '_kad_header_backgroundSticky', 'type' => 'object', @@ -970,32 +660,6 @@ public function register_meta() { 'gradient' => array( 'type' => 'string' ), ), ), - // array( - // 'key' => '_kad_header_backgroundStickyHover', - // 'type' => 'object', - // 'default' => array( - // 'color' => '', - // 'image' => '', - // 'imageID' => '', - // 'position' => 'center center', - // 'size' => 'cover', - // 'repeat' => 'no-repeat', - // 'attachment' => 'scroll', - // 'type' => 'normal', - // 'gradient' => '', - // ), - // 'properties' => array( - // 'color' => array( 'type' => 'string' ), - // 'image' => array( 'type' => 'string' ), - // 'imageID' => array( 'type' => 'string' ), - // 'position' => array( 'type' => 'string' ), - // 'size' => array( 'type' => 'string' ), - // 'repeat' => array( 'type' => 'string' ), - // 'attachment' => array( 'type' => 'string' ), - // 'type' => array( 'type' => 'string' ), - // 'gradient' => array( 'type' => 'string' ), - // ), - // ), array( 'key' => '_kad_header_anchor', 'default' => '', diff --git a/src/blocks/header/children/row/style.scss b/src/blocks/header/children/row/style.scss index 3335794ef..8d5f67412 100644 --- a/src/blocks/header/children/row/style.scss +++ b/src/blocks/header/children/row/style.scss @@ -1,6 +1,12 @@ .wp-block-kadence-header-row { margin-top: 0; margin-bottom: 0; + &:not(.kb-header-row-layout-contained) { + background: var(--kb-header-row-bg, transparent ); + } + &.kb-header-row-layout-contained .kadence-header-row-inner { + background: var(--kb-header-row-bg, transparent ); + } .kadence-header-row-inner { padding: 0 var(--global-content-edge-padding, 15px); display: grid; diff --git a/src/blocks/header/components/backend-styles/index.js b/src/blocks/header/components/backend-styles/index.js index dd43c8ad5..f1af8fba0 100644 --- a/src/blocks/header/components/backend-styles/index.js +++ b/src/blocks/header/components/backend-styles/index.js @@ -26,58 +26,31 @@ export default function BackendStyles(props) { borderTablet, borderMobile, borderUnit, - borderHover, - borderHoverTablet, - borderHoverMobile, - borderHoverUnit, borderRadius, borderRadiusTablet, borderRadiusMobile, borderRadiusUnit, - borderRadiusHover, - borderRadiusHoverTablet, - borderRadiusHoverMobile, - borderRadiusHoverUnit, borderTransparent, borderTransparentTablet, borderTransparentMobile, borderTransparentUnit, - borderTransparentHover, - borderTransparentHoverTablet, - borderTransparentHoverMobile, - borderTransparentHoverUnit, borderRadiusTransparent, borderRadiusTransparentTablet, borderRadiusTransparentMobile, borderRadiusTransparentUnit, - borderRadiusTransparentHover, - borderRadiusTransparentHoverTablet, - borderRadiusTransparentHoverMobile, - borderRadiusTransparentHoverUnit, borderSticky, borderStickyTablet, borderStickyMobile, borderStickyUnit, - borderStickyHover, - borderStickyHoverTablet, - borderStickyHoverMobile, - borderStickyHoverUnit, borderRadiusSticky, borderRadiusStickyTablet, borderRadiusStickyMobile, borderRadiusStickyUnit, - borderRadiusStickyHover, - borderRadiusStickyHoverTablet, - borderRadiusStickyHoverMobile, - borderRadiusStickyHoverUnit, className, anchor, background, - backgroundHover, backgroundTransparent, - backgroundTransparentHover, backgroundSticky, - backgroundStickyHover, typography, linkColor, linkHoverColor, @@ -172,63 +145,11 @@ export default function BackendStyles(props) { undefined !== borderRadiusTablet ? borderRadiusTablet[3] : '', undefined !== borderRadiusMobile ? borderRadiusMobile[3] : '' ); - const previewborderHoverTopLeftRadius = getPreviewSize( - previewDevice, - undefined !== borderRadiusHover ? borderRadiusHover[0] : '', - undefined !== borderRadiusHoverTablet ? borderRadiusHoverTablet[0] : '', - undefined !== borderRadiusHoverMobile ? borderRadiusHoverMobile[0] : '' - ); - const previewborderHoverTopRightRadius = getPreviewSize( - previewDevice, - undefined !== borderRadiusHover ? borderRadiusHover[1] : '', - undefined !== borderRadiusHoverTablet ? borderRadiusHoverTablet[1] : '', - undefined !== borderRadiusHoverMobile ? borderRadiusHoverMobile[1] : '' - ); - const previewborderHoverBottomRightRadius = getPreviewSize( - previewDevice, - undefined !== borderRadiusHover ? borderRadiusHover[2] : '', - undefined !== borderRadiusHoverTablet ? borderRadiusHoverTablet[2] : '', - undefined !== borderRadiusHoverMobile ? borderRadiusHoverMobile[2] : '' - ); - const previewborderHoverBottomLeftRadius = getPreviewSize( - previewDevice, - undefined !== borderRadiusHover ? borderRadiusHover[3] : '', - undefined !== borderRadiusHoverTablet ? borderRadiusHoverTablet[3] : '', - undefined !== borderRadiusHoverMobile ? borderRadiusHoverMobile[3] : '' - ); const previewBorderTop = css.render_border(border, borderTablet, borderMobile, previewDevice, 'top'); const previewBorderLeft = css.render_border(border, borderTablet, borderMobile, previewDevice, 'left'); const previewBorderRight = css.render_border(border, borderTablet, borderMobile, previewDevice, 'right'); const previewBorderBottom = css.render_border(border, borderTablet, borderMobile, previewDevice, 'bottom'); - const previewBorderHoverTop = css.render_border( - borderHover, - borderHoverTablet, - borderHoverMobile, - previewDevice, - 'top' - ); - const previewBorderHoverLeft = css.render_border( - borderHover, - borderHoverTablet, - borderHoverMobile, - previewDevice, - 'left' - ); - const previewBorderHoverRight = css.render_border( - borderHover, - borderHoverTablet, - borderHoverMobile, - previewDevice, - 'right' - ); - const previewBorderHoverBottom = css.render_border( - borderHover, - borderHoverTablet, - borderHoverMobile, - previewDevice, - 'bottom' - ); const previewBorderTopLeftRadiusTransparent = getPreviewSize( previewDevice, @@ -254,30 +175,6 @@ export default function BackendStyles(props) { undefined !== borderRadiusTransparentTablet ? borderRadiusTransparentTablet[3] : '', undefined !== borderRadiusTransparentMobile ? borderRadiusTransparentMobile[3] : '' ); - const previewborderHoverTopLeftRadiusTransparent = getPreviewSize( - previewDevice, - undefined !== borderRadiusTransparentHover ? borderRadiusTransparentHover[0] : '', - undefined !== borderRadiusTransparentHoverTablet ? borderRadiusTransparentHoverTablet[0] : '', - undefined !== borderRadiusTransparentHoverMobile ? borderRadiusTransparentHoverMobile[0] : '' - ); - const previewborderHoverTopRightRadiusTransparent = getPreviewSize( - previewDevice, - undefined !== borderRadiusTransparentHover ? borderRadiusTransparentHover[1] : '', - undefined !== borderRadiusTransparentHoverTablet ? borderRadiusTransparentHoverTablet[1] : '', - undefined !== borderRadiusTransparentHoverMobile ? borderRadiusTransparentHoverMobile[1] : '' - ); - const previewborderHoverBottomRightRadiusTransparent = getPreviewSize( - previewDevice, - undefined !== borderRadiusTransparentHover ? borderRadiusTransparentHover[2] : '', - undefined !== borderRadiusTransparentHoverTablet ? borderRadiusTransparentHoverTablet[2] : '', - undefined !== borderRadiusTransparentHoverMobile ? borderRadiusTransparentHoverMobile[2] : '' - ); - const previewborderHoverBottomLeftRadiusTransparent = getPreviewSize( - previewDevice, - undefined !== borderRadiusTransparentHover ? borderRadiusTransparentHover[3] : '', - undefined !== borderRadiusTransparentHoverTablet ? borderRadiusTransparentHoverTablet[3] : '', - undefined !== borderRadiusTransparentHoverMobile ? borderRadiusTransparentHoverMobile[3] : '' - ); const previewBorderTransparentTop = css.render_border( borderTransparent, borderTransparentTablet, @@ -306,34 +203,6 @@ export default function BackendStyles(props) { previewDevice, 'bottom' ); - const previewBorderTransparentHoverTop = css.render_border( - borderTransparentHover, - borderTransparentHoverTablet, - borderTransparentHoverMobile, - previewDevice, - 'top' - ); - const previewBorderTransparentHoverLeft = css.render_border( - borderTransparentHover, - borderTransparentHoverTablet, - borderTransparentHoverMobile, - previewDevice, - 'left' - ); - const previewBorderTransparentHoverRight = css.render_border( - borderTransparentHover, - borderTransparentHoverTablet, - borderTransparentHoverMobile, - previewDevice, - 'right' - ); - const previewBorderTransparentHoverBottom = css.render_border( - borderTransparentHover, - borderTransparentHoverTablet, - borderTransparentHoverMobile, - previewDevice, - 'bottom' - ); const previewBorderTopLeftRadiusSticky = getPreviewSize( previewDevice, undefined !== borderRadiusSticky ? borderRadiusSticky[0] : '', @@ -358,30 +227,6 @@ export default function BackendStyles(props) { undefined !== borderRadiusStickyTablet ? borderRadiusStickyTablet[3] : '', undefined !== borderRadiusStickyMobile ? borderRadiusStickyMobile[3] : '' ); - const previewborderHoverTopLeftRadiusSticky = getPreviewSize( - previewDevice, - undefined !== borderRadiusStickyHover ? borderRadiusStickyHover[0] : '', - undefined !== borderRadiusStickyHoverTablet ? borderRadiusStickyHoverTablet[0] : '', - undefined !== borderRadiusStickyHoverMobile ? borderRadiusStickyHoverMobile[0] : '' - ); - const previewborderHoverTopRightRadiusSticky = getPreviewSize( - previewDevice, - undefined !== borderRadiusStickyHover ? borderRadiusStickyHover[1] : '', - undefined !== borderRadiusStickyHoverTablet ? borderRadiusStickyHoverTablet[1] : '', - undefined !== borderRadiusStickyHoverMobile ? borderRadiusStickyHoverMobile[1] : '' - ); - const previewborderHoverBottomRightRadiusSticky = getPreviewSize( - previewDevice, - undefined !== borderRadiusStickyHover ? borderRadiusStickyHover[2] : '', - undefined !== borderRadiusStickyHoverTablet ? borderRadiusStickyHoverTablet[2] : '', - undefined !== borderRadiusStickyHoverMobile ? borderRadiusStickyHoverMobile[2] : '' - ); - const previewborderHoverBottomLeftRadiusSticky = getPreviewSize( - previewDevice, - undefined !== borderRadiusStickyHover ? borderRadiusStickyHover[3] : '', - undefined !== borderRadiusStickyHoverTablet ? borderRadiusStickyHoverTablet[3] : '', - undefined !== borderRadiusStickyHoverMobile ? borderRadiusStickyHoverMobile[3] : '' - ); const previewBorderStickyTop = css.render_border( borderSticky, borderStickyTablet, @@ -410,34 +255,6 @@ export default function BackendStyles(props) { previewDevice, 'bottom' ); - const previewBorderStickyHoverTop = css.render_border( - borderStickyHover, - borderStickyHoverTablet, - borderStickyHoverMobile, - previewDevice, - 'top' - ); - const previewBorderStickyHoverLeft = css.render_border( - borderStickyHover, - borderStickyHoverTablet, - borderStickyHoverMobile, - previewDevice, - 'left' - ); - const previewBorderStickyHoverRight = css.render_border( - borderStickyHover, - borderStickyHoverTablet, - borderStickyHoverMobile, - previewDevice, - 'right' - ); - const previewBorderStickyHoverBottom = css.render_border( - borderStickyHover, - borderStickyHoverTablet, - borderStickyHoverMobile, - previewDevice, - 'bottom' - ); // Header font options const previewFontSize = getPreviewSize( @@ -513,10 +330,26 @@ export default function BackendStyles(props) { if (previewIsTransparent !== '1') { if ('normal' === background?.type && background?.image) { css.add_property('background-image', background.image); - css.add_property('background-size', background.imageSize); - css.add_property('background-repeat', background.imageRepeat); - css.add_property('background-attachment', background.imageAttachment); - css.add_property('background-position', background.imagePosition); + if ( background?.size ) { + css.add_property('background-size', background.size); + } else if ( background?.imageSize ) { + css.add_property('background-size', background.imageSize); + } + if ( background?.repeat ) { + css.add_property('background-repeat', background.repeat); + } else if ( background?.imageRepeat ) { + css.add_property('background-repeat', background.imageRepeat); + } + if ( background?.attachment ) { + css.add_property('background-attachment', background.attachment); + } else if ( background?.imageAttachment ) { + css.add_property('background-attachment', background.imageAttachment); + } + if ( background?.position ) { + css.add_property('background-position', background.position); + } else if ( background?.imagePosition ) { + css.add_property('background-position', background.imagePosition); + } } if ('normal' === background?.type && background?.color) { css.add_property('background-color', KadenceColorOutput(background.color)); @@ -549,10 +382,26 @@ export default function BackendStyles(props) { if (previewIsTransparent === '1') { if ('normal' === backgroundTransparent?.type && backgroundTransparent?.image) { css.add_property('background-image', backgroundTransparent.image); - css.add_property('background-size', backgroundTransparent.imageSize); - css.add_property('background-repeat', backgroundTransparent.imageRepeat); - css.add_property('background-attachment', backgroundTransparent.imageAttachment); - css.add_property('background-position', backgroundTransparent.imagePosition); + if ( backgroundTransparent?.size ) { + css.add_property('background-size', backgroundTransparent.size); + } else if ( backgroundTransparent?.imageSize ) { + css.add_property('background-size', backgroundTransparent.imageSize); + } + if ( backgroundTransparent?.repeat ) { + css.add_property('background-repeat', backgroundTransparent.repeat); + } else if ( backgroundTransparent?.imageRepeat ) { + css.add_property('background-repeat', backgroundTransparent.imageRepeat); + } + if ( backgroundTransparent?.attachment ) { + css.add_property('background-attachment', backgroundTransparent.attachment); + } else if ( backgroundTransparent?.imageAttachment ) { + css.add_property('background-attachment', backgroundTransparent.imageAttachment); + } + if ( backgroundTransparent?.position ) { + css.add_property('background-position', backgroundTransparent.position); + } else if ( backgroundTransparent?.imagePosition ) { + css.add_property('background-position', backgroundTransparent.imagePosition); + } } if ('normal' === backgroundTransparent?.type && backgroundTransparent?.color) { css.add_property('background-color', KadenceColorOutput(backgroundTransparent.color)); @@ -593,10 +442,26 @@ export default function BackendStyles(props) { if (previewIsSticky === '1') { if ('normal' === backgroundSticky?.type && backgroundSticky?.image) { css.add_property('background-image', backgroundSticky.image); - css.add_property('background-size', backgroundSticky.imageSize); - css.add_property('background-repeat', backgroundSticky.imageRepeat); - css.add_property('background-attachment', backgroundSticky.imageAttachment); - css.add_property('background-position', backgroundSticky.imagePosition); + if ( backgroundSticky?.size ) { + css.add_property('background-size', backgroundSticky.size); + } else if ( backgroundSticky?.imageSize ) { + css.add_property('background-size', backgroundSticky.imageSize); + } + if ( backgroundSticky?.repeat ) { + css.add_property('background-repeat', backgroundSticky.repeat); + } else if ( backgroundSticky?.imageRepeat ) { + css.add_property('background-repeat', backgroundSticky.imageRepeat); + } + if ( backgroundSticky?.attachment ) { + css.add_property('background-attachment', backgroundSticky.attachment); + } else if ( backgroundSticky?.imageAttachment ) { + css.add_property('background-attachment', backgroundSticky.imageAttachment); + } + if ( backgroundSticky?.position ) { + css.add_property('background-position', backgroundSticky.position); + } else if ( backgroundSticky?.imagePosition ) { + css.add_property('background-position', backgroundSticky.imagePosition); + } } if ('normal' === backgroundSticky?.type && backgroundSticky?.color) { css.add_property('background-color', KadenceColorOutput(backgroundSticky.color)); @@ -644,127 +509,6 @@ export default function BackendStyles(props) { css.add_property('backdrop-filter', backdropFilterString); } - css.set_selector(`.wp-block-kadence-header${uniqueID} .kb-header-container:hover`); - - if (previewIsTransparent !== '1') { - if ('normal' === backgroundHover?.type && backgroundHover?.image) { - css.add_property('background-image', backgroundHover.image); - css.add_property('background-size', backgroundHover.imageSize); - css.add_property('background-repeat', backgroundHover.imageRepeat); - css.add_property('background-attachment', backgroundHover.imageAttachment); - css.add_property('background-position', backgroundHover.imagePosition); - } - - if ('normal' === backgroundHover?.type && backgroundHover?.color) { - css.add_property('background-color', backgroundHover.color); - } - - if ('gradient' === backgroundHover?.type && backgroundHover?.gradient) { - css.add_property('background', backgroundHover.gradient); - } - - css.add_property('border-top', previewBorderHoverTop); - css.add_property('border-right', previewBorderHoverRight); - css.add_property('border-bottom', previewBorderHoverBottom); - css.add_property('border-left', previewBorderHoverLeft); - css.add_property( - 'border-top-left-radius', - getSpacingOptionOutput(previewborderHoverTopLeftRadius, borderRadiusHoverUnit) - ); - css.add_property( - 'border-top-right-radius', - getSpacingOptionOutput(previewborderHoverTopRightRadius, borderRadiusHoverUnit) - ); - css.add_property( - 'border-bottom-right-radius', - getSpacingOptionOutput(previewborderHoverBottomRightRadius, borderRadiusHoverUnit) - ); - css.add_property( - 'border-bottom-left-radius', - getSpacingOptionOutput(previewborderHoverBottomLeftRadius, borderRadiusHoverUnit) - ); - } - - if (previewIsTransparent === '1') { - if ('normal' === backgroundTransparentHover?.type && backgroundTransparentHover?.image) { - css.add_property('background-image', backgroundTransparentHover.image); - css.add_property('background-size', backgroundTransparentHover.imageSize); - css.add_property('background-repeat', backgroundTransparentHover.imageRepeat); - css.add_property('background-attachment', backgroundTransparentHover.imageAttachment); - css.add_property('background-position', backgroundTransparentHover.imagePosition); - } - - if ('normal' === backgroundTransparentHover?.type && backgroundTransparentHover?.color) { - css.add_property('background-color', backgroundTransparentHover.color); - } - - if ('gradient' === backgroundTransparentHover?.type && backgroundTransparentHover?.gradient) { - css.add_property('background', backgroundTransparentHover.gradient); - } - - css.add_property('border-top', previewBorderTransparentHoverTop); - css.add_property('border-right', previewBorderTransparentHoverRight); - css.add_property('border-bottom', previewBorderTransparentHoverBottom); - css.add_property('border-left', previewBorderTransparentHoverLeft); - - css.add_property( - 'border-top-left-radius', - getSpacingOptionOutput(previewborderHoverTopLeftRadiusTransparent, borderRadiusTransparentHoverUnit) - ); - css.add_property( - 'border-top-right-radius', - getSpacingOptionOutput(previewborderHoverTopRightRadiusTransparent, borderRadiusTransparentHoverUnit) - ); - css.add_property( - 'border-bottom-right-radius', - getSpacingOptionOutput(previewborderHoverBottomRightRadiusTransparent, borderRadiusTransparentHoverUnit) - ); - css.add_property( - 'border-bottom-left-radius', - getSpacingOptionOutput(previewborderHoverBottomLeftRadiusTransparent, borderRadiusTransparentHoverUnit) - ); - } - - if (previewIsSticky === '1') { - if ('normal' === backgroundStickyHover?.type && backgroundStickyHover?.image) { - css.add_property('background-image', backgroundStickyHover.image); - css.add_property('background-size', backgroundStickyHover.imageSize); - css.add_property('background-repeat', backgroundStickyHover.imageRepeat); - css.add_property('background-attachment', backgroundStickyHover.imageAttachment); - css.add_property('background-position', backgroundStickyHover.imagePosition); - } - - if ('normal' === backgroundStickyHover?.type && backgroundStickyHover?.color) { - css.add_property('background-color', backgroundStickyHover.color); - } - - if ('gradient' === backgroundStickyHover?.type && backgroundStickyHover?.gradient) { - css.add_property('background', backgroundStickyHover.gradient); - } - - css.add_property('border-top', previewBorderStickyHoverTop); - css.add_property('border-right', previewBorderStickyHoverRight); - css.add_property('border-bottom', previewBorderStickyHoverBottom); - css.add_property('border-left', previewBorderStickyHoverLeft); - - css.add_property( - 'border-top-left-radius', - getSpacingOptionOutput(previewborderHoverTopLeftRadiusSticky, borderRadiusStickyHoverUnit) - ); - css.add_property( - 'border-top-right-radius', - getSpacingOptionOutput(previewborderHoverTopRightRadiusSticky, borderRadiusStickyHoverUnit) - ); - css.add_property( - 'border-bottom-right-radius', - getSpacingOptionOutput(previewborderHoverBottomRightRadiusSticky, borderRadiusStickyHoverUnit) - ); - css.add_property( - 'border-bottom-left-radius', - getSpacingOptionOutput(previewborderHoverBottomLeftRadiusSticky, borderRadiusStickyHoverUnit) - ); - } - css.set_selector(`wp-block-kadence-header${uniqueID} a`); css.add_property('color', KadenceColorOutput(linkColor)); diff --git a/src/blocks/header/edit-inner.js b/src/blocks/header/edit-inner.js index 27ebae9b9..841bfaa70 100644 --- a/src/blocks/header/edit-inner.js +++ b/src/blocks/header/edit-inner.js @@ -333,7 +333,6 @@ export function EditInner(props) { const backgroundStyleControls = (size = '', suffix = '') => { //previously had hover settings in here but didn't end up neededing them for the header container. const backgroundValue = metaAttributes['background' + suffix + size]; - const backgroundHoverValue = metaAttributes['background' + suffix + 'Hover' + size]; return ( <> + onSavePosition={(value) => { setMetaAttribute({ ...backgroundValue, position: value }, 'background' + suffix + size) - } - onSaveSize={(value) => - setMetaAttribute({ ...backgroundValue, imageSize: value }, 'background' + suffix + size) - } + }} + onSaveSize={(value) => { + setMetaAttribute({ ...backgroundValue, size: value }, 'background' + suffix + size) + }} onSaveRepeat={(value) => setMetaAttribute( - { ...backgroundValue, imageRepeat: value }, + { ...backgroundValue, repeat: value }, 'background' + suffix + size ) } onSaveAttachment={(value) => setMetaAttribute( - { ...backgroundValue, imageAttachment: value }, + { ...backgroundValue, attachment: value }, 'background' + suffix + size ) } @@ -1411,15 +1410,15 @@ export function EditInner(props) { {__( - 'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.' + 'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.', 'kadence-blocks' )} - {__('Learn more about anchors')} + {__('Learn more about anchors', 'kadence-blocks')} } @@ -1436,12 +1435,12 @@ export function EditInner(props) { { setMetaAttribute(nextValue !== '' ? nextValue : undefined, 'className'); }} - help={__('Separate multiple classes with spaces.')} + help={__('Separate multiple classes with spaces.', 'kadence-blocks')} /> diff --git a/src/blocks/header/style.scss b/src/blocks/header/style.scss index 5277e5724..b3885b8f5 100644 --- a/src/blocks/header/style.scss +++ b/src/blocks/header/style.scss @@ -10,12 +10,18 @@ height: 0; .kb-header-container { - background-color: transparent; + background: var(--kb-transparent-header-bg, transparent); position: absolute; left: 0px; right: 0px; z-index: 100; } + .wp-block-kadence-header-row:not(.kb-header-row-layout-contained) { + background: var(--kb-transparent-header-row-bg, transparent); + } + .wp-block-kadence-header-row.kb-header-row-layout-contained .kadence-header-row-inner { + background: var(--kb-transparent-header-row-bg, transparent); + } } @mixin header-sticky-styles { @@ -26,8 +32,11 @@ //transition: top ease-in-out 0.05s; } - .item-is-stuck { - background: white; + .item-is-stuck:not(.kb-header-row-layout-contained) { + background: var(--kb-stuck-header-bg, var(--kb-header-bg, #fff)); + } + .item-is-stuck.kb-header-row-layout-contained .kadence-header-row-inner { + background: var(--kb-stuck-header-bg, var(--kb-header-bg, #fff)); } }