refactor(cxl-lumo-styles): cxl-section - do not target #view-hero

conversionxl · Dec 4, 2023 · 4cd9514 · 4cd9514
1 parent a19be96
commit 4cd9514
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"])"` \
         ',
       },
     }