Fix: Flex-Hero - different values for border shape [TMZ-283] (#157)

elementor · Jan 9, 2025 · 8553d18 · 8553d18
1 parent d721c36
commit 8553d18
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 40 deletions.
diff --git a/assets/dev/scss/variables/values.scss b/assets/dev/scss/variables/values.scss
@@ -5,3 +5,8 @@ $corners-shape-sharp: 0;
 $corners-shape-rounded: 12px;
 $corners-shape-round: 32px;
 $corners-shape-oval: 50%;
+
+$corners-image-shape-rounded: 52px;
+$corners-image-shape-round: 300px;
+
+$corners-box-shape-rounded: 52px;
diff --git a/modules/content/assets/scss/hello-plus-flex-hero.scss b/modules/content/assets/scss/hello-plus-flex-hero.scss
@@ -68,18 +68,24 @@
 	--flex-hero-image-border-width: 1px;
 	--flex-hero-image-border-color: #{$global-colors-secondary};
 
-	--flex-hero-button-border-radius-block-end: 8px;
-	--flex-hero-button-border-radius-block-start: 8px;
-	--flex-hero-button-border-radius-inline-end: 8px;
-	--flex-hero-button-border-radius-inline-start: 8px;
-	--flex-hero-image-border-radius-block-end: 8px;
-	--flex-hero-image-border-radius-block-start: 8px;
-	--flex-hero-image-border-radius-inline-end: 8px;
-	--flex-hero-image-border-radius-inline-start: 8px;
-	--flex-hero-box-border-radius-block-end: 8px;
-	--flex-hero-box-border-radius-block-start: 8px;
-	--flex-hero-box-border-radius-inline-end: 8px;
-	--flex-hero-box-border-radius-inline-start: 8px;
+	--flex-hero-border-radius-default: #{$corners-shape-default};
+	--flex-hero-border-radius-sharp: #{$corners-shape-sharp};
+	--flex-hero-border-radius-rounded: #{$corners-shape-rounded};
+	--flex-hero-border-radius-round: #{$corners-shape-round};
+	--flex-hero-border-radius-oval: #{$corners-shape-oval};
+
+	--flex-hero-button-border-radius-custom-block-end: #{$corners-shape-default};
+	--flex-hero-button-border-radius-custom-block-start: #{$corners-shape-default};
+	--flex-hero-button-border-radius-custom-inline-end: #{$corners-shape-default};
+	--flex-hero-button-border-radius-custom-inline-start: #{$corners-shape-default};
+	--flex-hero-image-border-radius-custom-block-end: #{$corners-shape-sharp};
+	--flex-hero-image-border-radius-custom-block-start: #{$corners-shape-sharp};
+	--flex-hero-image-border-radius-custom-inline-end: #{$corners-shape-sharp};
+	--flex-hero-image-border-radius-custom-inline-start: #{$corners-shape-sharp};
+	--flex-hero-box-border-radius-custom-block-end: #{$corners-shape-sharp};
+	--flex-hero-box-border-radius-custom-block-start: #{$corners-shape-sharp};
+	--flex-hero-box-border-radius-custom-inline-end: #{$corners-shape-sharp};
+	--flex-hero-box-border-radius-custom-inline-start: #{$corners-shape-sharp};
 
 	display: flex;
 	gap: var(--flex-hero-gap);
@@ -145,23 +151,30 @@
 
 	@mixin shapes() {
 		&-sharp {
-			border-radius: $corners-shape-sharp;
+			border-radius: var(--flex-hero-border-radius-sharp);
 		}
 
 		&-rounded {
-			border-radius: $corners-shape-rounded;
+			border-radius: var(--flex-hero-border-radius-rounded);
 		}
 
 		&-round {
-			border-radius: $corners-shape-round;
+			border-radius: var(--flex-hero-border-radius-round);
 		}
 
 		&-default {
-			border-radius: $corners-shape-default;
+			border-radius: var(--flex-hero-border-radius-default);
 		}
 
 		&-oval {
-			border-radius: $corners-shape-oval;
+			border-radius: var(--flex-hero-border-radius-oval);
+		}
+
+		&-custom {
+			border-top-left-radius: var(--flex-hero-border-radius-block-end);
+			border-top-right-radius: var(--flex-hero-border-radius-block-start);
+			border-bottom-right-radius: var(--flex-hero-border-radius-inline-end);
+			border-bottom-left-radius: var(--flex-hero-border-radius-inline-start);
 		}
 	}
 
@@ -183,11 +196,15 @@
 	}
 
 	@mixin custom-shape-box() {
+		&-rounded {
+			--flex-hero-border-shape-rounded: #{$corners-box-shape-rounded};
+		}
+
 		&-custom {
-			border-top-left-radius: var(--flex-hero-box-border-radius-block-end);
-			border-top-right-radius: var(--flex-hero-box-border-radius-block-start);
-			border-bottom-right-radius: var(--flex-hero-box-border-radius-inline-end);
-			border-bottom-left-radius: var(--flex-hero-box-border-radius-inline-start);
+			--flex-hero-border-radius-block-end: var(--flex-hero-box-border-radius-custom-block-end);
+			--flex-hero-border-radius-block-start: var(--flex-hero-box-border-radius-custom-block-start);
+			--flex-hero-border-radius-inline-end: var(--flex-hero-box-border-radius-custom-inline-end);
+			--flex-hero-border-radius-inline-start: var(--flex-hero-box-border-radius-custom-inline-start);
 		}
 	}
 
@@ -418,10 +435,10 @@
 
 		@mixin custom-shape-button() {
 			&-custom {
-				border-top-left-radius: var(--flex-hero-button-border-radius-block-end);
-				border-top-right-radius: var(--flex-hero-button-border-radius-block-start);
-				border-bottom-right-radius: var(--flex-hero-button-border-radius-inline-end);
-				border-bottom-left-radius: var(--flex-hero-button-border-radius-inline-start);
+				--flex-hero-border-radius-block-end: var(--flex-hero-button-border-radius-custom-block-end);
+				--flex-hero-border-radius-block-start: var(--flex-hero-button-border-radius-custom-block-start);
+				--flex-hero-border-radius-inline-end: var(--flex-hero-button-border-radius-custom-inline-end);
+				--flex-hero-border-radius-inline-start: var(--flex-hero-button-border-radius-custom-inline-start);
 			}
 		}
 
@@ -471,11 +488,19 @@
 			width: var(--flex-hero-image-width);
 
 			@mixin custom-shape-image() {
+				&-rounded {
+					--flex-hero-border-shape-rounded: #{$corners-image-shape-rounded};
+				}
+
+				&-round {
+					--flex-hero-border-shape-round: #{$corners-image-shape-round};
+				}
+
 				&-custom {
-					border-top-left-radius: var(--flex-hero-image-border-radius-block-end);
-					border-top-right-radius: var(--flex-hero-image-border-radius-block-start);
-					border-bottom-right-radius: var(--flex-hero-image-border-radius-inline-end);
-					border-bottom-left-radius: var(--flex-hero-image-border-radius-inline-start);
+					--flex-hero-border-radius-block-end: var(--flex-hero-image-border-radius-custom-block-end);
+					--flex-hero-border-radius-block-start: var(--flex-hero-image-border-radius-custom-block-start);
+					--flex-hero-border-radius-inline-end: var(--flex-hero-image-border-radius-custom-inline-end);
+					--flex-hero-border-radius-inline-start: var(--flex-hero-image-border-radius-custom-inline-start);
 				}
 			}
 

diff --git a/modules/content/widgets/flex-hero.php b/modules/content/widgets/flex-hero.php
@@ -967,8 +967,8 @@ protected function add_cta_button_controls( string $type, bool $add_condition =
 				'options' => [
 					'default' => esc_html__( 'Default', 'hello-plus' ),
 					'sharp' => esc_html__( 'Sharp', 'hello-plus' ),
-					'round' => esc_html__( 'Round', 'hello-plus' ),
 					'rounded' => esc_html__( 'Rounded', 'hello-plus' ),
+					'round' => esc_html__( 'Round', 'hello-plus' ),
 					'oval' => esc_html__( 'Oval', 'hello-plus' ),
 					'custom' => esc_html__( 'Custom', 'hello-plus' ),
 				],
@@ -986,7 +986,7 @@ protected function add_cta_button_controls( string $type, bool $add_condition =
 				'type' => Controls_Manager::DIMENSIONS,
 				'size_units' => [ 'px', '%', 'em', 'rem' ],
 				'selectors' => [
-					'{{WRAPPER}} .ehp-flex-hero' => '--flex-hero-button-border-radius-block-end: {{BOTTOM}}{{UNIT}}; --flex-hero-button-border-radius-block-start: {{TOP}}{{UNIT}}; --flex-hero-button-border-radius-inline-end: {{RIGHT}}{{UNIT}}; --flex-hero-button-border-radius-inline-start: {{LEFT}}{{UNIT}};',
+					'{{WRAPPER}} .ehp-flex-hero' => '--flex-hero-button-border-radius-custom-block-end: {{BOTTOM}}{{UNIT}}; --flex-hero-button-border-radius-custom-block-start: {{TOP}}{{UNIT}}; --flex-hero-button-border-radius-custom-inline-end: {{RIGHT}}{{UNIT}}; --flex-hero-button-border-radius-custom-inline-start: {{LEFT}}{{UNIT}};',
 				],
 				'separator' => 'before',
 				'condition' => array_merge([
@@ -1196,12 +1196,11 @@ protected function add_style_image_section() {
 			[
 				'label' => esc_html__( 'Shape', 'hello-plus' ),
 				'type' => Controls_Manager::SELECT,
-				'default' => 'default',
+				'default' => 'sharp',
 				'options' => [
-					'default' => esc_html__( 'Default', 'hello-plus' ),
 					'sharp' => esc_html__( 'Sharp', 'hello-plus' ),
-					'round' => esc_html__( 'Round', 'hello-plus' ),
 					'rounded' => esc_html__( 'Rounded', 'hello-plus' ),
+					'round' => esc_html__( 'Round', 'hello-plus' ),
 					'oval' => esc_html__( 'Oval', 'hello-plus' ),
 					'custom' => esc_html__( 'Custom', 'hello-plus' ),
 				],
@@ -1216,7 +1215,7 @@ protected function add_style_image_section() {
 				'type' => Controls_Manager::DIMENSIONS,
 				'size_units' => [ 'px', '%', 'em', 'rem' ],
 				'selectors' => [
-					'{{WRAPPER}} .ehp-flex-hero' => '--flex-hero-image-border-radius-block-end: {{BOTTOM}}{{UNIT}}; --flex-hero-image-border-radius-block-start: {{TOP}}{{UNIT}}; --flex-hero-image-border-radius-inline-end: {{RIGHT}}{{UNIT}}; --flex-hero-image-border-radius-inline-start: {{LEFT}}{{UNIT}};',
+					'{{WRAPPER}} .ehp-flex-hero' => '--flex-hero-image-border-radius-custom-block-end: {{BOTTOM}}{{UNIT}}; --flex-hero-image-border-radius-custom-block-start: {{TOP}}{{UNIT}}; --flex-hero-image-border-radius-custom-inline-end: {{RIGHT}}{{UNIT}}; --flex-hero-image-border-radius-custom-inline-start: {{LEFT}}{{UNIT}};',
 				],
 				'separator' => 'before',
 				'condition' => [
@@ -1452,13 +1451,10 @@ protected function add_style_box_section() {
 			[
 				'label' => esc_html__( 'Shape', 'hello-plus' ),
 				'type' => Controls_Manager::SELECT,
-				'default' => 'default',
+				'default' => 'sharp',
 				'options' => [
-					'default' => esc_html__( 'Default', 'hello-plus' ),
 					'sharp' => esc_html__( 'Sharp', 'hello-plus' ),
-					'round' => esc_html__( 'Round', 'hello-plus' ),
 					'rounded' => esc_html__( 'Rounded', 'hello-plus' ),
-					'oval' => esc_html__( 'Oval', 'hello-plus' ),
 					'custom' => esc_html__( 'Custom', 'hello-plus' ),
 				],
 				'frontend_available' => true,
@@ -1472,7 +1468,7 @@ protected function add_style_box_section() {
 				'type' => Controls_Manager::DIMENSIONS,
 				'size_units' => [ 'px', '%', 'em', 'rem' ],
 				'selectors' => [
-					'{{WRAPPER}} .ehp-flex-hero' => '--flex-hero-box-border-radius-block-end: {{BOTTOM}}{{UNIT}}; --flex-hero-box-border-radius-block-start: {{TOP}}{{UNIT}}; --flex-hero-box-border-radius-inline-end: {{RIGHT}}{{UNIT}}; --flex-hero-box-border-radius-inline-start: {{LEFT}}{{UNIT}};',
+					'{{WRAPPER}} .ehp-flex-hero' => '--flex-hero-box-border-radius-custom-block-end: {{BOTTOM}}{{UNIT}}; --flex-hero-box-border-radius-custom-block-start: {{TOP}}{{UNIT}}; --flex-hero-box-border-radius-custom-inline-end: {{RIGHT}}{{UNIT}}; --flex-hero-box-border-radius-custom-inline-start: {{LEFT}}{{UNIT}};',
 				],
 				'condition' => [
 					'box_shape' => 'custom',