From ddb7e570e3fb72787edee6aac4bb17fb924495c2 Mon Sep 17 00:00:00 2001 From: Maggie Serino Date: Thu, 9 Jan 2025 15:23:51 +0100 Subject: [PATCH 1/2] TMZ-295 force removing the background when the button type is link --- modules/content/assets/scss/hello-plus-cta.scss | 7 ++++++- modules/content/assets/scss/hello-plus-flex-hero.scss | 7 ++++++- modules/content/assets/scss/hello-plus-hero.scss | 7 ++++++- modules/content/assets/scss/hello-plus-zigzag.scss | 7 ++++++- modules/forms/assets/scss/widgets/hello-plus-forms.scss | 6 +++++- 5 files changed, 29 insertions(+), 5 deletions(-) diff --git a/modules/content/assets/scss/hello-plus-cta.scss b/modules/content/assets/scss/hello-plus-cta.scss index 73a45f5d..3f4439d6 100644 --- a/modules/content/assets/scss/hello-plus-cta.scss +++ b/modules/content/assets/scss/hello-plus-cta.scss @@ -216,9 +216,14 @@ &.is-type-link, &.is-type-link:not([href]):not([tabindex]) { - background: none !important; // Always override primary and secondary background coming from the control + background: none !important; /* Always override background color coming from the controls */ align-self: center; text-decoration: underline; + + &:hover, + &:focus { + background: none !important; /* Always override background color coming from the controls */ + } } &.is-type-button, diff --git a/modules/content/assets/scss/hello-plus-flex-hero.scss b/modules/content/assets/scss/hello-plus-flex-hero.scss index edc9f3d8..f4996231 100644 --- a/modules/content/assets/scss/hello-plus-flex-hero.scss +++ b/modules/content/assets/scss/hello-plus-flex-hero.scss @@ -416,9 +416,14 @@ &.is-type-link, &.is-type-link:not([href]):not([tabindex]) { - background: none !important; // Always override primary and secondary background coming from the control + background: none !important; /* Always override background color coming from the controls */ align-self: center; text-decoration: underline; + + &:hover, + &:focus { + background: none !important; /* Always override background color coming from the controls */ + } } &.is-type-button, diff --git a/modules/content/assets/scss/hello-plus-hero.scss b/modules/content/assets/scss/hello-plus-hero.scss index c8460ec9..c2272dbb 100644 --- a/modules/content/assets/scss/hello-plus-hero.scss +++ b/modules/content/assets/scss/hello-plus-hero.scss @@ -164,8 +164,13 @@ &.is-type-link, &.is-type-link:not([href]):not([tabindex]) { - background: none; + background: none !important; /* Always override background color coming from the controls */ text-decoration: underline; + + &:hover, + &:focus { + background: none !important; /* Always override background color coming from the controls */ + } } &.has-shape-sharp { diff --git a/modules/content/assets/scss/hello-plus-zigzag.scss b/modules/content/assets/scss/hello-plus-zigzag.scss index f76d0a90..afaa0a96 100644 --- a/modules/content/assets/scss/hello-plus-zigzag.scss +++ b/modules/content/assets/scss/hello-plus-zigzag.scss @@ -101,8 +101,13 @@ &-link, &-link:not([href]):not([tabindex]) { - background: none; + background: none !important; /* Always override background color coming from the controls */ text-decoration: underline; + + &:hover, + &:focus { + background: none !important; /* Always override background color coming from the controls */ + } } } diff --git a/modules/forms/assets/scss/widgets/hello-plus-forms.scss b/modules/forms/assets/scss/widgets/hello-plus-forms.scss index c7bde031..eccc179e 100644 --- a/modules/forms/assets/scss/widgets/hello-plus-forms.scss +++ b/modules/forms/assets/scss/widgets/hello-plus-forms.scss @@ -206,8 +206,12 @@ &-link, &-link:not([href]):not([tabindex]) { - background: none; + background: none !important; /* Always override background color coming from the controls */ + &:hover, + &:focus { + background: none !important; /* Always override background color coming from the controls */ + } .ehp-form__button-text { text-decoration: underline; From d5fd2a8247fc644859626953dc13c8d8548273fa Mon Sep 17 00:00:00 2001 From: Maggie Serino Date: Thu, 9 Jan 2025 16:39:17 +0100 Subject: [PATCH 2/2] TMZ-295 fixing buttons and links across widgets --- modules/content/assets/scss/hello-plus-cta.scss | 15 ++++----------- .../assets/scss/hello-plus-flex-hero.scss | 13 ++++--------- .../content/assets/scss/hello-plus-hero.scss | 15 +++------------ .../content/assets/scss/hello-plus-zigzag.scss | 12 ++++-------- modules/content/widgets/cta.php | 4 ++-- modules/content/widgets/flex-hero.php | 4 ++-- modules/content/widgets/hero.php | 4 ++-- modules/content/widgets/zig-zag.php | 4 ++-- .../assets/scss/widgets/hello-plus-forms.scss | 4 ++-- modules/forms/widgets/form.php | 4 ++-- .../assets/scss/hello-plus-header.scss | 17 ++++------------- modules/template-parts/widgets/ehp-header.php | 6 +++--- 12 files changed, 34 insertions(+), 68 deletions(-) diff --git a/modules/content/assets/scss/hello-plus-cta.scss b/modules/content/assets/scss/hello-plus-cta.scss index 3f4439d6..0510edf3 100644 --- a/modules/content/assets/scss/hello-plus-cta.scss +++ b/modules/content/assets/scss/hello-plus-cta.scss @@ -19,7 +19,6 @@ --cta-text-width-heading: 800px; --cta-text-width-description: 440px; - --cta-button-primary-background-color: #0052FF; --cta-button-primary-icon-spacing: 10px; --cta-button-primary-icon-size: 16px; --cta-button-primary-text-color: #FFFFFF; @@ -32,7 +31,6 @@ --cta-button-primary-padding-inline-start: 16px; --cta-button-primary-border-radius: 0; - --cta-button-secondary-background-color: transparent; --cta-button-secondary-icon-spacing: 10px; --cta-button-secondary-icon-size: 16px; --cta-button-secondary-text-color: #555963; @@ -48,7 +46,6 @@ --cta-button-text-color: var(--cta-button-primary-text-color); --cta-button-text-color-hover: var(--cta-button-primary-text-color-hover); --cta-button-border-color: var(--cta-button-primary-border-color); - --cta-button-background-color: var(--cta-button-primary-background-color); --cta-button-padding-block-end: var(--cta-button-primary-padding-block-end); --cta-button-padding-block-start: var(--cta-button-primary-padding-block-start); --cta-button-padding-inline-end: var(--cta-button-primary-padding-inline-end); @@ -182,12 +179,10 @@ width: var(--cta-button-icon-size); } - &__button, - &__button:not([href]):not([tabindex]) { + & a.ehp-cta__button, + & a.ehp-cta__button:not([href]):not([tabindex]) { align-items: center; display: flex; - font-weight: 500; - font-size: 16px; gap: var(--cta-button-icon-spacing); justify-content: center; text-decoration: none; @@ -206,7 +201,6 @@ } &.is-type-button { - background-color: var(--cta-button-background-color); padding-block-end: var(--cta-button-padding-block-end); padding-block-start: var(--cta-button-padding-block-start); padding-inline-end: var(--cta-button-padding-inline-end); @@ -216,13 +210,13 @@ &.is-type-link, &.is-type-link:not([href]):not([tabindex]) { - background: none !important; /* Always override background color coming from the controls */ + background: none; align-self: center; text-decoration: underline; &:hover, &:focus { - background: none !important; /* Always override background color coming from the controls */ + background: none; } } @@ -260,7 +254,6 @@ --cta-button-text-color: var(--cta-button-secondary-text-color); --cta-button-text-color-hover: var(--cta-button-secondary-text-color-hover); --cta-button-border-color: var(--cta-button-secondary-border-color); - --cta-button-background-color: var(--cta-button-secondary-background-color); --cta-button-padding-block-end: var(--cta-button-secondary-padding-block-end); --cta-button-padding-block-start: var(--cta-button-secondary-padding-block-start); --cta-button-padding-inline-end: var(--cta-button-secondary-padding-inline-end); diff --git a/modules/content/assets/scss/hello-plus-flex-hero.scss b/modules/content/assets/scss/hello-plus-flex-hero.scss index f4996231..56f710a5 100644 --- a/modules/content/assets/scss/hello-plus-flex-hero.scss +++ b/modules/content/assets/scss/hello-plus-flex-hero.scss @@ -19,7 +19,6 @@ --flex-hero-heading-color: #{$global-colors-secondary}; --flex-hero-subheading-color: #{$global-colors-secondary}; - --flex-hero-button-primary-background-color: #{$global-colors-accent}; --flex-hero-button-primary-icon-spacing: 10px; --flex-hero-button-primary-icon-size: 16px; --flex-hero-button-primary-text-color: #{$global-colors-white}; @@ -32,7 +31,6 @@ --flex-hero-button-primary-padding-inline-start: 16px; --flex-hero-button-primary-border-radius: 0; - --flex-hero-button-secondary-background-color: transparent; --flex-hero-button-secondary-icon-spacing: 10px; --flex-hero-button-secondary-icon-size: 16px; --flex-hero-button-secondary-text-color: #{$global-colors-secondary}; @@ -48,7 +46,6 @@ --flex-hero-button-text-color: var(--flex-hero-button-primary-text-color); --flex-hero-button-text-color-hover: var(--flex-hero-button-primary-text-color-hover); --flex-hero-button-border-color: var(--flex-hero-button-primary-border-color); - --flex-hero-button-background-color: var(--flex-hero-button-primary-background-color); --flex-hero-button-padding-block-end: var(--flex-hero-button-primary-padding-block-end); --flex-hero-button-padding-block-start: var(--flex-hero-button-primary-padding-block-start); --flex-hero-button-padding-inline-end: var(--flex-hero-button-primary-padding-inline-end); @@ -385,8 +382,8 @@ width: var(--flex-hero-button-icon-size); } - &__button, - &__button:not([href]):not([tabindex]) { + & a.ehp-flex-hero__button, + & a.ehp-flex-hero__button:not([href]):not([tabindex]) { align-items: center; display: flex; gap: var(--flex-hero-button-icon-spacing); @@ -406,7 +403,6 @@ } &.is-type-button { - background-color: var(--flex-hero-button-background-color); padding-block-end: var(--flex-hero-button-padding-block-end); padding-block-start: var(--flex-hero-button-padding-block-start); padding-inline-end: var(--flex-hero-button-padding-inline-end); @@ -416,13 +412,13 @@ &.is-type-link, &.is-type-link:not([href]):not([tabindex]) { - background: none !important; /* Always override background color coming from the controls */ + background: none; align-self: center; text-decoration: underline; &:hover, &:focus { - background: none !important; /* Always override background color coming from the controls */ + background: none; } } @@ -469,7 +465,6 @@ --flex-hero-button-text-color: var(--flex-hero-button-secondary-text-color); --flex-hero-button-text-color-hover: var(--flex-hero-button-secondary-text-color-hover); --flex-hero-button-border-color: var(--flex-hero-button-secondary-border-color); - --flex-hero-button-background-color: var(--flex-hero-button-secondary-background-color); --flex-hero-button-padding-block-end: var(--flex-hero-button-secondary-padding-block-end); --flex-hero-button-padding-block-start: var(--flex-hero-button-secondary-padding-block-start); --flex-hero-button-padding-inline-end: var(--flex-hero-button-secondary-padding-inline-end); diff --git a/modules/content/assets/scss/hello-plus-hero.scss b/modules/content/assets/scss/hello-plus-hero.scss index c2272dbb..3afceea0 100644 --- a/modules/content/assets/scss/hello-plus-hero.scss +++ b/modules/content/assets/scss/hello-plus-hero.scss @@ -24,7 +24,6 @@ --hero-button-border-width: 1px; --hero-button-border-color: #28292B; --hero-button-border-radius: 0; - --hero-button-background-color: #0052FF; --hero-button-padding-block-end: 8px; --hero-button-padding-block-start: 8px; --hero-button-padding-inline-end: 16px; @@ -129,13 +128,11 @@ width: var(--hero-button-icon-size); } - &__button, - &__button:not([href]):not([tabindex]) { + & a.ehp-hero__button, + & a.ehp-hero__button:not([href]):not([tabindex]) { align-items: center; color: var(--hero-button-text-color); display: flex; - font-weight: 500; - font-size: 16px; gap: var(--hero-button-icon-spacing); text-decoration: none; transition: $transition; @@ -154,7 +151,6 @@ } &.is-type-button { - background-color: var(--hero-button-background-color); padding-block-end: var(--hero-button-padding-block-end); padding-block-start: var(--hero-button-padding-block-start); padding-inline-end: var(--hero-button-padding-inline-end); @@ -164,13 +160,8 @@ &.is-type-link, &.is-type-link:not([href]):not([tabindex]) { - background: none !important; /* Always override background color coming from the controls */ + background: none; text-decoration: underline; - - &:hover, - &:focus { - background: none !important; /* Always override background color coming from the controls */ - } } &.has-shape-sharp { diff --git a/modules/content/assets/scss/hello-plus-zigzag.scss b/modules/content/assets/scss/hello-plus-zigzag.scss index afaa0a96..613cbaa0 100644 --- a/modules/content/assets/scss/hello-plus-zigzag.scss +++ b/modules/content/assets/scss/hello-plus-zigzag.scss @@ -8,7 +8,6 @@ --zigzag-button-border-width: 1px; --zigzag-button-border-color: #000000; --zigzag-button-border-radius: 0; - --zigzag-button-background-color: #0052FF; --zigzag-title-color: #000000; --zigzag-description-color: #000000; --zigzag-rows-spacing: 60px; @@ -64,13 +63,11 @@ width: var(--zigzag-button-icon-size); } - &__button, - &__button:not([href]):not([tabindex]) { + & a.ehp-zigzag__button, + & a.ehp-zigzag__button:not([href]):not([tabindex]) { align-items: center; color: var(--zigzag-button-text-color); display: flex; - font-weight: 500; - font-size: 16px; gap: var(--zigzag-button-icon-spacing); text-decoration: none; transition: $transition; @@ -91,7 +88,6 @@ &.is-type { &-button { - background-color: var(--zigzag-button-background-color); padding-block-end: var(--zigzag-button-padding-block-end); padding-block-start: var(--zigzag-button-padding-block-start); padding-inline-end: var(--zigzag-button-padding-inline-end); @@ -101,12 +97,12 @@ &-link, &-link:not([href]):not([tabindex]) { - background: none !important; /* Always override background color coming from the controls */ + background: none; text-decoration: underline; &:hover, &:focus { - background: none !important; /* Always override background color coming from the controls */ + background: none; } } } diff --git a/modules/content/widgets/cta.php b/modules/content/widgets/cta.php index 1e2fe5f5..5e7be6df 100644 --- a/modules/content/widgets/cta.php +++ b/modules/content/widgets/cta.php @@ -643,7 +643,7 @@ protected function add_cta_button_controls( string $type, bool $add_condition = 'name' => $type . '_button_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-cta__button--' . $type, + 'selector' => '{{WRAPPER}} .is-type-button.ehp-cta__button--' . $type, 'fields_options' => [ 'background' => [ 'default' => 'classic', @@ -691,7 +691,7 @@ protected function add_cta_button_controls( string $type, bool $add_condition = 'name' => $type . '_button_background_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-cta__button--' . $type . ':hover, {{WRAPPER}} .ehp-cta__button--' . $type . ':focus', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-cta__button--' . $type . ':hover, {{WRAPPER}} .is-type-button.ehp-cta__button--' . $type . ':focus', 'fields_options' => [ 'background' => [ 'default' => 'classic', diff --git a/modules/content/widgets/flex-hero.php b/modules/content/widgets/flex-hero.php index 533a82f8..95b4d719 100644 --- a/modules/content/widgets/flex-hero.php +++ b/modules/content/widgets/flex-hero.php @@ -819,7 +819,7 @@ protected function add_cta_button_controls( string $type, bool $add_condition = 'name' => $type . '_button_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-flex-hero__button--' . $type, + 'selector' => '{{WRAPPER}} .is-type-button.ehp-flex-hero__button--' . $type, 'fields_options' => [ 'background' => [ 'default' => 'classic', @@ -867,7 +867,7 @@ protected function add_cta_button_controls( string $type, bool $add_condition = 'name' => $type . '_button_background_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-flex-hero__button--' . $type . ':hover, {{WRAPPER}} .ehp-flex-hero__button--' . $type . ':focus', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-flex-hero__button--' . $type . ':hover, {{WRAPPER}} .is-type-button.ehp-flex-hero__button--' . $type . ':focus', 'fields_options' => [ 'background' => [ 'default' => 'classic', diff --git a/modules/content/widgets/hero.php b/modules/content/widgets/hero.php index e5d7c60c..af794fe0 100644 --- a/modules/content/widgets/hero.php +++ b/modules/content/widgets/hero.php @@ -507,7 +507,7 @@ protected function add_style_content_section() { 'name' => 'button_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-hero__button', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-hero__button', 'fields_options' => [ 'background' => [ 'default' => 'classic', @@ -553,7 +553,7 @@ protected function add_style_content_section() { 'name' => 'button_background_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-hero__button:hover, {{WRAPPER}} .ehp-hero__button:focus', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-hero__button:hover, {{WRAPPER}} .is-type-button.ehp-hero__button:focus', 'fields_options' => [ 'background' => [ 'default' => 'classic', diff --git a/modules/content/widgets/zig-zag.php b/modules/content/widgets/zig-zag.php index 1aba5a84..2fd06305 100644 --- a/modules/content/widgets/zig-zag.php +++ b/modules/content/widgets/zig-zag.php @@ -687,7 +687,7 @@ private function add_style_zigzags_section() { 'name' => 'button_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-zigzag__button', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-zigzag__button', 'fields_options' => [ 'background' => [ 'default' => 'classic', @@ -733,7 +733,7 @@ private function add_style_zigzags_section() { 'name' => 'button_background_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-zigzag__button:hover, {{WRAPPER}} .ehp-zigzag__button:focus', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-zigzag__button:hover, {{WRAPPER}} .is-type-button.ehp-zigzag__button:focus', 'fields_options' => [ 'background' => [ 'default' => 'classic', diff --git a/modules/forms/assets/scss/widgets/hello-plus-forms.scss b/modules/forms/assets/scss/widgets/hello-plus-forms.scss index eccc179e..12f55f8a 100644 --- a/modules/forms/assets/scss/widgets/hello-plus-forms.scss +++ b/modules/forms/assets/scss/widgets/hello-plus-forms.scss @@ -206,11 +206,11 @@ &-link, &-link:not([href]):not([tabindex]) { - background: none !important; /* Always override background color coming from the controls */ + background: none; &:hover, &:focus { - background: none !important; /* Always override background color coming from the controls */ + background: none; } .ehp-form__button-text { diff --git a/modules/forms/widgets/form.php b/modules/forms/widgets/form.php index a5fa5b4e..73d5f219 100644 --- a/modules/forms/widgets/form.php +++ b/modules/forms/widgets/form.php @@ -1466,7 +1466,7 @@ protected function add_style_buttons_section(): void { 'name' => 'button_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-form__button', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-form__button', 'fields_options' => [ 'background' => [ 'default' => 'classic', @@ -1512,7 +1512,7 @@ protected function add_style_buttons_section(): void { 'name' => 'button_background_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-form__button:hover, {{WRAPPER}} .ehp-form__button:focus', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-form__button:hover, {{WRAPPER}} .is-type-button.ehp-form__button:focus', 'fields_options' => [ 'background' => [ 'default' => 'classic', diff --git a/modules/template-parts/assets/scss/hello-plus-header.scss b/modules/template-parts/assets/scss/hello-plus-header.scss index cd7bb2ce..ef919a2f 100644 --- a/modules/template-parts/assets/scss/hello-plus-header.scss +++ b/modules/template-parts/assets/scss/hello-plus-header.scss @@ -22,7 +22,6 @@ --header-float-width: 100%; --header-scroll-down: 0; - --header-button-primary-background-color: #0052FF; --header-button-primary-icon-spacing: 10px; --header-button-primary-icon-size: 16px; --header-button-primary-text-color: #FFFFFF; @@ -35,7 +34,6 @@ --header-button-primary-padding-inline-start: 16px; --header-button-primary-border-radius: 0; - --header-button-secondary-background-color: transparent; --header-button-secondary-icon-spacing: 10px; --header-button-secondary-icon-size: 16px; --header-button-secondary-text-color: #555963; @@ -51,7 +49,6 @@ --header-button-text-color: var(--header-button-primary-text-color); --header-button-text-color-hover: var(--header-button-primary-text-color-hover); --header-button-border-color: var(--header-button-primary-border-color); - --header-button-background-color: var(--header-button-primary-background-color); --header-button-padding-block-end: var(--header-button-primary-padding-block-end); --header-button-padding-block-start: var(--header-button-primary-padding-block-start); --header-button-padding-inline-end: var(--header-button-primary-padding-inline-end); @@ -199,11 +196,9 @@ order: 3; } - &__button { + & a.ehp-header__button { align-items: center; display: flex; - font-weight: 500; - font-size: 16px; gap: var(--header-button-icon-spacing); text-decoration: none; transition: $transition; @@ -229,7 +224,6 @@ &.is-type { &-button { - background-color: var(--header-button-background-color); padding-block-end: var(--header-button-padding-block-end); padding-block-start: var(--header-button-padding-block-start); padding-inline-end: var(--header-button-padding-inline-end); @@ -238,12 +232,12 @@ &-link, &-link:not([href]):not([tabindex]) { - background: none !important; /* Always override background color coming from the controls */ + background: none; text-decoration: underline; &:hover, &:focus { - background: none !important; /* Always override background color coming from the controls */ + background: none; } } @@ -283,7 +277,6 @@ --header-button-text-color: var(--header-button-secondary-text-color); --header-button-text-color-hover: var(--header-button-secondary-text-color-hover); --header-button-border-color: var(--header-button-secondary-border-color); - --header-button-background-color: var(--header-button-secondary-background-color); --header-button-padding-block-end: var(--header-button-secondary-padding-block-end); --header-button-padding-block-start: var(--header-button-secondary-padding-block-start); --header-button-padding-inline-end: var(--header-button-secondary-padding-inline-end); @@ -412,7 +405,7 @@ } &__item:is(a), - &__item:is(a):is([type="button"]) { + &__item:is([type="button"]) { color: var(--header-menu-item-color); transition: $transition; @@ -426,7 +419,6 @@ .ehp-header__submenu-toggle-icon { transform: rotate(180deg); - transition: $transition; } } } @@ -508,7 +500,6 @@ fill: currentColor; margin-left: 4px; height: 12px; - transition: $transition; width: 12px; } diff --git a/modules/template-parts/widgets/ehp-header.php b/modules/template-parts/widgets/ehp-header.php index 08554eed..2e6395c5 100644 --- a/modules/template-parts/widgets/ehp-header.php +++ b/modules/template-parts/widgets/ehp-header.php @@ -1383,7 +1383,7 @@ protected function add_cta_button_controls( string $type, bool $add_condition = 'name' => $type . '_button_background', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-header__button--' . $type, + 'selector' => '{{WRAPPER}} .is-type-button.ehp-header__button--' . $type, 'fields_options' => [ 'background' => [ 'default' => 'classic', @@ -1431,7 +1431,7 @@ protected function add_cta_button_controls( string $type, bool $add_condition = 'name' => $type . '_button_background_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-header__button--' . $type . ':hover, {{WRAPPER}} .ehp-header__button--' . $type . ':focus', + 'selector' => '{{WRAPPER}} .is-type-button.ehp-header__button--' . $type . ':hover, {{WRAPPER}} .is-type-button.ehp-header__button--' . $type . ':focus', 'fields_options' => [ 'background' => [ 'default' => 'classic', @@ -1896,7 +1896,7 @@ private function add_advanced_behavior_section(): void { 'name' => 'behavior_sticky_bg', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], - 'selector' => '{{WRAPPER}} .ehp-header.scroll-down, {{WRAPPER}} .ehp-header.scroll-down .ehp-header__dropdown', + 'selector' => '{{WRAPPER}} header.ehp-header.scroll-down, {{WRAPPER}} header.ehp-header.scroll-down .ehp-header__dropdown', 'fields_options' => [ 'background' => [ 'default' => 'classic',