refactor(cxl-lumo-styles): cxl-section - avoid !important, hide old b…

…ackground-image
conversionxl · Dec 5, 2023 · ea5e829 · ea5e829
1 parent a19be96
commit ea5e829
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/packages/cxl-lumo-styles/scss/_mixins.scss b/packages/cxl-lumo-styles/scss/_mixins.scss
@@ -47,8 +47,7 @@
 @mixin wide-background {
   position: relative;
   overflow-x: hidden;
-  background-repeat: no-repeat !important;
-  background-size: auto clamp(65%, 40vw, 90%) !important;
+  background: unset !important;
 
   &::before {
     position: absolute;
@@ -90,7 +89,7 @@
   }
 }
 
-// Use ::after pseudo element to add hero background image. url must be set to CSS custom property --hero-image
+// Use ::after pseudo element to add hero background image. url must be set to CSS custom property --cxl-hero-image
 @mixin wide-background-hero-image {
   &::after {
     content: "";
@@ -99,10 +98,10 @@
     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-repeat: no-repeat !important;
-    background-size: auto clamp(65%, 40vw, 100%) !important;
-    background-position-x: left !important;
+    background-image: var(--cxl-hero-image);
+    background-repeat: no-repeat;
+    background-size: auto clamp(65%, 40vw, 100%) ;
+    background-position-x: left;
     background-position-y: bottom;
     overflow: visible;
     z-index: -1;

diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss
@@ -65,7 +65,7 @@
   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();

diff --git a/packages/cxl-ui/scss/global/cxl-section.scss b/packages/cxl-ui/scss/global/cxl-section.scss
@@ -1,15 +1,9 @@
 /* stylelint-disable selector-no-qualifying-type */
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
 
-
-// Use more specific selector to hide cxl-section background-image.
-cxl-section.wp-block-group.wp-block-cxl-section#view-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,14 @@ 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 custom CSS code on cxl-section element, for each page: \
           \
           \
-          `#view-hero::after { \
-            background-image: url([wpv-post-featured-image size="xx-large" output="url"]); \
-          }` \
+           <style> \
+            cxl-section { \
+              --cxl-hero-image: url([wpv-post-featured-image size="large" output="url"]) \
+            } \
+          </style> \
         ',
       },
     }