diff --git a/assets/dev/scss/variables/values.scss b/assets/dev/scss/variables/values.scss index 5ed4dd0..99208d3 100644 --- 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 index 5890230..edc9f3d 100644 --- 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 index 0b9f88d..533a82f 100644 --- 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',