From 4cd951450e6195e6ee2e279743198b6fda618d3a Mon Sep 17 00:00:00 2001
From: Raphael Mattos <raphael.mattos@contextaware.com.br>
Date: Mon, 4 Dec 2023 11:32:15 -0300
Subject: [PATCH] refactor(cxl-lumo-styles): cxl-section - do not target
#view-hero
---
packages/cxl-lumo-styles/scss/_mixins.scss | 5 +++--
packages/cxl-ui/scss/cxl-section.scss | 3 +--
packages/cxl-ui/scss/global/cxl-section.scss | 6 +++---
.../storybook/cxl-ui/cxl-section/cxl-section.stories.js | 6 ++----
4 files changed, 9 insertions(+), 11 deletions(-)
diff --git a/packages/cxl-lumo-styles/scss/_mixins.scss b/packages/cxl-lumo-styles/scss/_mixins.scss
index c63eaa52..4c730b59 100644
--- a/packages/cxl-lumo-styles/scss/_mixins.scss
+++ b/packages/cxl-lumo-styles/scss/_mixins.scss
@@ -48,7 +48,8 @@
position: relative;
overflow-x: hidden;
background-repeat: no-repeat !important;
- background-size: auto clamp(65%, 40vw, 90%) !important;
+ background-size: auto clamp(22%, 20vw, 90%) !important;
+ background-position: left calc(50vw + clamp(48px, 5%, 100px)) bottom calc(25% + var(--figure-height-factor)) !important;
&::before {
position: absolute;
@@ -99,7 +100,7 @@
width: 100%;
height: clamp(calc(50% + 82px), calc(50% + var(--figure-height-factor)), calc(50% + var(--figure-height-factor)));
max-height: calc(50% + var(--figure-height-factor));
- background-image: var(--hero-image);
+ background-image: var(--cxl-hero-image);
background-repeat: no-repeat !important;
background-size: auto clamp(65%, 40vw, 100%) !important;
background-position-x: left !important;
diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss
index 12ead17b..cb0ea641 100644
--- a/packages/cxl-ui/scss/cxl-section.scss
+++ b/packages/cxl-ui/scss/cxl-section.scss
@@ -65,12 +65,11 @@
background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
}
-@media #{mq.$large} {
+@media #{mq.$medium} {
:host(#view-hero) {
@include mixins.wide-background();
@include mixins.extend-background-right();
@include mixins.wide-background-hero();
- @include mixins.wide-background-hero-image();
}
:host([theme~="cxl-hero"]) {
diff --git a/packages/cxl-ui/scss/global/cxl-section.scss b/packages/cxl-ui/scss/global/cxl-section.scss
index f005b88c..71787355 100644
--- a/packages/cxl-ui/scss/global/cxl-section.scss
+++ b/packages/cxl-ui/scss/global/cxl-section.scss
@@ -3,13 +3,13 @@
// Use more specific selector to hide cxl-section background-image.
-cxl-section.wp-block-group.wp-block-cxl-section#view-hero {
+cxl-section.wp-block-group.wp-block-cxl-section[theme~="cxl-hero"] {
background: none !important;
}
-cxl-section#view-hero, cxl-section[theme~="cxl-header"] {
+cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
.column-1 {
- @media #{mq.$large} {
+ @media #{mq.$medium} {
max-width: 45%;
}
}
diff --git a/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js b/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js
index 8ffd78ef..c234451e 100644
--- a/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js
+++ b/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js
@@ -12,12 +12,10 @@ export default {
description: {
component: 'Use `<cxl-section theme="cxl-header">` to create a section header component. \
`cxl-section` components with id="view-hero" are automatically themed as hero headers. \
- Additionally, it is necessary to add CSS code in wordpress block-editor: \
+ Additionally, it is necessary to add inline CSS code on cxl-section element: \
\
\
- `#view-hero::after { \
- background-image: url([wpv-post-featured-image size="xx-large" output="url"]); \
- }` \
+ `style="--hero-image: url([wpv-post-featured-image size="large" output="url"])"` \
',
},
}