@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

package/dist/productDetails.scss

@@ -97,6 +97,39 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     // );
     min-height: var(--_ctm-mob-prod-lt-ht, var(--_ctm-tab-prod-lt-ht, var(--_ctm-prod-lt-ht)));
 
+    // Layout padding, and the design section's border and shadow. None of these were
+    // consumed here before — the schema declares all of them, but this stylesheet only
+    // handled width, margin, min-height and the background, so Padding, Border Style,
+    // Border Radius and Box Shadow each had nothing reading the value they wrote.
+    // Every variable carries an explicit fallback so elements saved before this keep
+    // rendering bare rather than inheriting the parent's border or background.
+    padding: prepareMediaVariable(--_ctm-prod-lt-pg, 0);
+    // Padding and border are drawn inside the width and height set in layout instead of
+    // adding to them, so the element keeps the size the user asked for.
+    box-sizing: border-box;
+
+    border-color: prepareMediaVariable(--_ctm-prod-dn-br-cr, transparent);
+    border-style: prepareMediaVariable(--_ctm-prod-dn-br-se, none);
+    border-width: prepareMediaVariable(--_ctm-prod-dn-br-wh, 0);
+    border-radius: prepareMediaVariable(--_ctm-prod-dn-br-rs, 0);
+
+    box-shadow: var(
+      --_show-shadow,
+      prepareMediaVariable(--_ctm-prod-dn-sw-ae, 0 0) prepareMediaVariable(--_ctm-prod-dn-sw-br, 0)
+        prepareMediaVariable(--_ctm-prod-dn-sw-sd, 0)
+        prepareMediaVariable(--_ctm-prod-dn-sw-cr, transparent)
+    );
+
+    // "Show Border" / "Show Shadow" switches, surfaced as data attributes by the
+    // element since the properties above are painted from variables.
+    &[data-show-border="false"] {
+      border-width: 0;
+      border-style: none;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
     // &:not(:has(#{$resizerId}#{$resizeActive})) {
     //   min-height: 100px !important;
     // }

package/dist/quick-links.scss

@@ -78,7 +78,6 @@
         border-width: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh);
         border-color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr);
         border-style: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se);
-        border-radius: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs);
       }
     }
 
@@ -94,7 +93,6 @@
         border-width: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-wh);
         border-color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-cr);
         border-style: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-se);
-        border-radius: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-rs);
       }
     }
 
@@ -185,6 +183,7 @@
         gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
       }
     }
+
     &[data-display-style="Wrap Horizontal"] {
       .quick__links__container .items__container {
         display: flex;
@@ -199,45 +198,54 @@
         flex-direction: column;
       }
     }
+
     &[data-text-position="bottom"] {
       .quick__links__container {
         flex-direction: column-reverse;
       }
     }
+
     &[data-text-position="left"] {
       .quick__links__container {
         flex-direction: row;
       }
+
       &[data-widget-alignment="top"] {
         .quick__links__container {
           align-items: flex-start;
         }
       }
+
       &[data-widget-alignment="center"] {
         .quick__links__container {
           align-items: center;
         }
       }
+
       &[data-widget-alignment="bottom"] {
         .quick__links__container {
           align-items: flex-end;
         }
       }
     }
+
     &[data-text-position="right"] {
       .quick__links__container {
         flex-direction: row-reverse;
       }
+
       &[data-widget-alignment="top"] {
         .quick__links__container {
           align-items: flex-start;
         }
       }
+
       &[data-widget-alignment="center"] {
         .quick__links__container {
           align-items: center;
         }
       }
+
       &[data-widget-alignment="bottom"] {
         .quick__links__container {
           align-items: flex-end;
@@ -297,11 +305,13 @@
     &[data-content-shadow="false"] {
       --_show-text-content-shadow: none;
     }
+
     &[data-icon-background-shape="circle"] {
       .video__icon {
         border-radius: 50%;
       }
     }
+
     &[data-icon-background-shape="rectange"] {
       .video__icon {
         border-radius: 6px;
@@ -398,6 +408,7 @@
               var(--_ctm-tab-dn-qk-ls-tt-cr-dn-sw-cr, var(--_ctm-dn-qk-ls-tt-cr-dn-sw-cr))
             )
         );
+
         h3 {
           font-family: prepareMediaVariable(--_ctm-dn-qk-ls-wt-dn-ft-fy);
           font-size: prepareMediaVariable(--_ctm-dn-qk-ls-wt-dn-ft-se);
@@ -502,6 +513,10 @@
       }
 
       .items__container {
+        .dropdown__container {
+          width: prepareMediaVariable(--_ctm-lt-dn-wh);
+        }
+
         .links__item,
         .dropdown__container .est__dropdown__main .est__dropdown .list .list__option {
           display: block;
@@ -517,6 +532,7 @@
           background-color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-bd-cr);
           padding: prepareMediaVariable(--_ctm-dn-im-se-dt-se-pg);
           width: fit-content;
+          border-radius: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs);
 
           &:hover {
             font-family: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ft-fy);
@@ -530,9 +546,11 @@
             line-height: prepareMediaVariable(--_ctm-dn-im-se-hr-se-le-ht);
             background-color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-bd-cr);
             padding: prepareMediaVariable(--_ctm-dn-im-se-hr-se-pg);
+            border-radius: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-rs);
           }
         }
       }
+
       .placeholder__text {
         display: flex !important;
         justify-content: space-between !important;
@@ -543,12 +561,14 @@
         background-color: #fff !important;
         width: 100% !important;
       }
+
       .est__dropdown .list {
         gap: var(
           --_ctm-mob-lt-dn-gp-bn-is,
           var(--_ctm-tab-lt-dn-gp-bn-is, var(--_ctm-lt-dn-gp-bn-is))
         );
       }
+
       .items__container {
         .dropdown__container {
           .est__dropdown__main {
@@ -561,6 +581,7 @@
                   padding: 0px !important;
                   background-color: transparent;
                 }
+
                 .list {
                   width: var(
                     --_ctm-mob-lt-dn-wh,