@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/marchandiserSets.scss

@@ -4,6 +4,7 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+
 [data-div-type="element"] {
   &[data-element-type="marchandiserSets"] {
     // width: 500px;
@@ -25,117 +26,107 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     &[data-background-type="gradient"] {
       --_sf-march-gradient-angle: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-ae, 90)} * 1deg);
       --_sf-march-gradient-start-color: #{prepareMediaVariable(
-          --_ctm-march-dn-gt-st-cr,
-          transparent
-        )};
-      --_sf-march-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-march-dn-gt-st-pn, 0)} * 1%
-      );
-      --_sf-march-gradient-end-color: #{prepareMediaVariable(--_ctm-march-dn-gt-ed-cr, transparent)};
-      --_sf-march-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-march-dn-gt-ed-pn, 100)} * 1%
-      );
-      --_sf-march-gradient-position: #{prepareMediaVariable(--_ctm-march-dn-gt-pn, center)};
-
-      &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-march-gradient-angle),
-          var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
-          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
-        );
-      }
+ --_ctm-march-dn-gt-st-cr,
+      transparent)
+    }
 
-      &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-march-gradient-position),
+    ;
+    --_sf-march-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-st-pn, 0)} * 1%);
+    --_sf-march-gradient-end-color: #{prepareMediaVariable(--_ctm-march-dn-gt-ed-cr, transparent)};
+    --_sf-march-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-march-dn-gt-ed-pn, 100)} * 1%);
+    --_sf-march-gradient-position: #{prepareMediaVariable(--_ctm-march-dn-gt-pn, center)};
+
+    &[data-gradient-type="Linear Gradient"] {
+      background-image: linear-gradient(var(--_sf-march-gradient-angle),
           var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
-          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
-        );
-      }
+          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position));
     }
 
-    &[data-background-type="image"] {
-      background-image: prepareMediaVariable(--_ctm-march-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-march-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-march-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-march-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-march-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-march-dn-bd-se);
+    &[data-gradient-type="Radial Gradient"] {
+      background-image: radial-gradient(circle at var(--_sf-march-gradient-position),
+          var(--_sf-march-gradient-start-color) var(--_sf-march-gradient-start-position),
+          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position));
     }
+  }
 
-    // background-color: var(
-    //   --_ctm-mob-march-dn-bd-cr,
-    //   var(--_ctm-tab-march-dn-bd-cr, var(--_ctm-march-dn-bd-cr))
-    // );
-    // background-image: var(
-    //   --_ctm-mob-march-dn-bd-ie,
-    //   var(--_ctm-tab-march-dn-bd-ie, var(--_ctm-march-dn-bd-ie))
-    // );
-    // background-attachment: var(
-    //   --_ctm-mob-march-dn-bd-at,
-    //   var(--_ctm-tab-march-dn-bd-at, var(--_ctm-march-dn-bd-at))
-    // );
-    // background-position: var(
-    //   --_ctm-mob-march-dn-bd-pn,
-    //   var(--_ctm-tab-march-dn-bd-pn, var(--_ctm-march-dn-bd-pn))
-    // );
-    // background-repeat: var(
-    //   --_ctm-mob-march-dn-bd-rt,
-    //   var(--_ctm-tab-march-dn-bd-rt, var(--_ctm-march-dn-bd-rt))
-    // );
-    // background-size: var(
-    //   --_ctm-mob-march-dn-bd-se,
-    //   var(--_ctm-tab-march-dn-bd-se, var(--_ctm-march-dn-bd-se))
-    // );
-    min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-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-march-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-march-dn-br-cr, transparent);
-    border-style: prepareMediaVariable(--_ctm-march-dn-br-se, none);
-    border-width: prepareMediaVariable(--_ctm-march-dn-br-wh, 0);
-    border-radius: prepareMediaVariable(--_ctm-march-dn-br-rs, 0);
-
-    box-shadow: var(
-      --_show-shadow,
-      prepareMediaVariable(--_ctm-march-dn-sw-ae, 0 0)
-        prepareMediaVariable(--_ctm-march-dn-sw-br, 0)
-        prepareMediaVariable(--_ctm-march-dn-sw-sd, 0)
-        prepareMediaVariable(--_ctm-march-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;
-    }
+  &[data-background-type="image"] {
+    background-image: prepareMediaVariable(--_ctm-march-dn-bd-ie);
+    background-attachment: prepareMediaVariable(--_ctm-march-dn-bd-at);
+    background-position: prepareMediaVariable(--_ctm-march-dn-bd-pn);
+    background-position-y: prepareMediaVariable(--_ctm-march-dn-bd-pn-y);
+    background-repeat: prepareMediaVariable(--_ctm-march-dn-bd-rt);
+    background-size: prepareMediaVariable(--_ctm-march-dn-bd-se);
+  }
+
+  // background-color: var(
+  //   --_ctm-mob-march-dn-bd-cr,
+  //   var(--_ctm-tab-march-dn-bd-cr, var(--_ctm-march-dn-bd-cr))
+  // );
+  // background-image: var(
+  //   --_ctm-mob-march-dn-bd-ie,
+  //   var(--_ctm-tab-march-dn-bd-ie, var(--_ctm-march-dn-bd-ie))
+  // );
+  // background-attachment: var(
+  //   --_ctm-mob-march-dn-bd-at,
+  //   var(--_ctm-tab-march-dn-bd-at, var(--_ctm-march-dn-bd-at))
+  // );
+  // background-position: var(
+  //   --_ctm-mob-march-dn-bd-pn,
+  //   var(--_ctm-tab-march-dn-bd-pn, var(--_ctm-march-dn-bd-pn))
+  // );
+  // background-repeat: var(
+  //   --_ctm-mob-march-dn-bd-rt,
+  //   var(--_ctm-tab-march-dn-bd-rt, var(--_ctm-march-dn-bd-rt))
+  // );
+  // background-size: var(
+  //   --_ctm-mob-march-dn-bd-se,
+  //   var(--_ctm-tab-march-dn-bd-se, var(--_ctm-march-dn-bd-se))
+  // );
+  min-height: var(--_ctm-mob-march-lt-ht, var(--_ctm-tab-march-lt-ht, var(--_ctm-march-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-march-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-march-dn-br-cr, transparent);
+  border-style: prepareMediaVariable(--_ctm-march-dn-br-se, none);
+  border-width: prepareMediaVariable(--_ctm-march-dn-br-wh, 0);
+  border-radius: prepareMediaVariable(--_ctm-march-dn-br-rs, 0);
+
+  box-shadow: var(--_show-shadow,
+    prepareMediaVariable(--_ctm-march-dn-sw-ae, 0 0) prepareMediaVariable(--_ctm-march-dn-sw-br, 0) prepareMediaVariable(--_ctm-march-dn-sw-sd, 0) prepareMediaVariable(--_ctm-march-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;
+  // }
 
-    // &:not(:has(#{$resizerId}#{$resizeActive})) {
-    //   min-height: 100px !important;
-    // }
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        height: 100%;
-        height: var(--_ctm-march-lt-ht);
-        // grid-template-rows: auto !important;
-        grid-template-columns: 100% !important;
-        // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
-      }
+  &>div {
+    &.wrapper {
+      width: 100%;
+      height: 100%;
+      height: var(--_ctm-march-lt-ht);
+      // grid-template-rows: auto !important;
+      grid-template-columns: 100% !important;
+      // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
     }
   }
 }
+}

package/dist/mega-menu-container.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 @use "./functions.scss" as *;
 $vtl: "[data-element-type='mega-menu'] > .vtl";
+
 [data-div-type="element"] {
   &[data-element-type="mgContainer"] {
     // width: var(--_sf-con-nw-wh);
@@ -17,11 +18,12 @@ $vtl: "[data-element-type='mega-menu'] > .vtl";
     &:is(#{$vtl} *) {
       --_sf-bm-gls-wdth-vl: prepareMediaVariable(--_ctm-mgcon-lt-wh);
     }
+
     width: var(--_sf-bm-gls-wdth-vl, 100vw);
     min-height: var(--_ctm-mgcon-lt-mn-ht);
     margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
 
-    & > div {
+    &>div {
       &.wrapper {
         // width: 100%;
         width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
@@ -34,119 +36,104 @@ $vtl: "[data-element-type='mega-menu'] > .vtl";
         }
 
         &:is([data-background-type="gradient"] > *).wrapper {
-          --_sf-mgcon-gradient-angle: calc(
-            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg
-          );
+          --_sf-mgcon-gradient-angle: calc(#{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg);
           --_sf-mgcon-gradient-start-color: #{prepareMediaVariable(
-              --_ctm-mgcon-dn-gt-st-cr,
-              transparent
-            )};
-          --_sf-mgcon-gradient-start-position: calc(
-            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%
-          );
-          --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
-              --_ctm-mgcon-dn-gt-ed-cr,
-              transparent
-            )};
-          --_sf-mgcon-gradient-end-position: calc(
-            #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%
-          );
-          --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
+ --_ctm-mgcon-dn-gt-st-cr,
+          transparent)
         }
 
-        &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
-          background-image: linear-gradient(
-            var(--_sf-mgcon-gradient-angle),
-            var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
-            var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
-          );
-        }
+        ;
+        --_sf-mgcon-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%);
+        --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
+ --_ctm-mgcon-dn-gt-ed-cr,
+        transparent)
+      }
 
-        &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
-          background-image: radial-gradient(
-            circle at var(--_sf-mgcon-gradient-position),
-            var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
-            var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
-          );
-        }
-        &:is([data-background-type="image"] > *).wrapper {
-          background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
-          background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
-          background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
-          background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
-          background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
-          background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
-        }
+      ;
+      --_sf-mgcon-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%);
+      --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
+    }
 
-        // background-color: var(
-        //   --_ctm-mob-mgcon-dn-bd-cr,
-        //   var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
-        // );
-        // background-image: var(
-        //   --_ctm-mob-mgcon-dn-bd-ie,
-        //   var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
-        // );
-        // background-attachment: var(
-        //   --_ctm-mob-mgcon-dn-bd-at,
-        //   var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
-        // );
-        // background-position: var(
-        //   --_ctm-mob-mgcon-dn-bd-pn,
-        //   var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
-        // );
-        // background-repeat: var(
-        //   --_ctm-mob-mgcon-dn-bd-rt,
-        //   var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
-        // );
-        // background-size: var(
-        //   --_ctm-mob-mgcon-dn-bd-se,
-        //   var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
-        // );
-        border-radius: var(
-          --_ctm-mob-mgcon-dn-br-rs,
-          var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
-        );
-        border-color: var(
-          --_ctm-mob-mgcon-dn-br-cr,
-          var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-mgcon-dn-br-se,
-          var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-mgcon-dn-br-wh,
-          var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
-        );
-        box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
-          prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
-          prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
-        // box-shadow: var(
-        //   --_hover-show-shadow,
-        //   var(
-        //     --_sf-hr-bx-sw,
-        //     var(
-        //       --_show-shadow,
-        //       var(
-        //           --_ctm-mob-dn-dt-se-sw-ae,
-        //           var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
-        //         )
-        //         var(
-        //           --_ctm-mob-dn-dt-se-sw-br,
-        //           var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
-        //         )
-        //         var(
-        //           --_ctm-mob-dn-dt-se-sw-sd,
-        //           var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
-        //         )
-        //         var(
-        //           --_ctm-mob-dn-dt-se-sw-cr,
-        //           var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
-        //         )
-        //     )
-        //   )
-        // );
-      }
+    &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
+      background-image: linear-gradient(var(--_sf-mgcon-gradient-angle),
+          var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
+          var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position));
+    }
+
+    &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
+      background-image: radial-gradient(circle at var(--_sf-mgcon-gradient-position),
+          var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
+          var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position));
     }
+
+    &:is([data-background-type="image"] > *).wrapper {
+      background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
+      background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
+      background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
+    }
+
+    // background-color: var(
+    //   --_ctm-mob-mgcon-dn-bd-cr,
+    //   var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
+    // );
+    // background-image: var(
+    //   --_ctm-mob-mgcon-dn-bd-ie,
+    //   var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
+    // );
+    // background-attachment: var(
+    //   --_ctm-mob-mgcon-dn-bd-at,
+    //   var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
+    // );
+    // background-position: var(
+    //   --_ctm-mob-mgcon-dn-bd-pn,
+    //   var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
+    // );
+    // background-repeat: var(
+    //   --_ctm-mob-mgcon-dn-bd-rt,
+    //   var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
+    // );
+    // background-size: var(
+    //   --_ctm-mob-mgcon-dn-bd-se,
+    //   var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
+    // );
+    border-radius: var(--_ctm-mob-mgcon-dn-br-rs,
+      var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs)));
+    border-color: var(--_ctm-mob-mgcon-dn-br-cr,
+      var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr)));
+    border-style: var(--_ctm-mob-mgcon-dn-br-se,
+      var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se)));
+    border-width: var(--_ctm-mob-mgcon-dn-br-wh,
+      var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh)));
+    box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae) prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd) prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
+    // box-shadow: var(
+    //   --_hover-show-shadow,
+    //   var(
+    //     --_sf-hr-bx-sw,
+    //     var(
+    //       --_show-shadow,
+    //       var(
+    //           --_ctm-mob-dn-dt-se-sw-ae,
+    //           var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
+    //         )
+    //         var(
+    //           --_ctm-mob-dn-dt-se-sw-br,
+    //           var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+    //         )
+    //         var(
+    //           --_ctm-mob-dn-dt-se-sw-sd,
+    //           var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+    //         )
+    //         var(
+    //           --_ctm-mob-dn-dt-se-sw-cr,
+    //           var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+    //         )
+    //     )
+    //   )
+    // );
   }
 }
+}
+}