Fix buttons background and links styling across all widgets [TMZ-295] (…

…#159)
elementor · Jan 9, 2025 · 0372884 · 0372884
1 parent 93c527b
commit 0372884
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 56 deletions.
diff --git 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,9 +210,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;
 			align-self: center;
 			text-decoration: underline;
+
+			&:hover,
+			&:focus {
+				background: none;
+			}
 		}
 
 		&.is-type-button,
@@ -255,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
@@ -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,9 +412,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;
 			align-self: center;
 			text-decoration: underline;
+
+			&:hover,
+			&:focus {
+				background: none;
+			}
 		}
 
 		&.is-type-button,
@@ -464,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
@@ -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);

diff --git 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);
@@ -103,6 +99,11 @@
 			&-link:not([href]):not([tabindex]) {
 				background: none;
 				text-decoration: underline;
+
+				&:hover,
+				&:focus {
+					background: none;
+				}
 			}
 		}
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -208,6 +208,10 @@
 			&-link:not([href]):not([tabindex]) {
 				background: none;
 
+				&:hover,
+				&:focus {
+					background: none;
+				}
 
 				.ehp-form__button-text {
 					text-decoration: underline;

diff --git 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',