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

package/dist/marchandiserSets.scss

@@ -4,7 +4,6 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
-
 [data-div-type="element"] {
   &[data-element-type="marchandiserSets"] {
     // width: 500px;
@@ -26,107 +25,117 @@ $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),
+          --_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));
-    }
+          var(--_sf-march-gradient-end-color) var(--_sf-march-gradient-end-position)
+        );
+      }
 
-    &[data-gradient-type="Radial Gradient"] {
-      background-image: radial-gradient(circle at var(--_sf-march-gradient-position),
+      &[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));
+          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);
-  }
-
-  // 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);
+    }
 
-  // &:not(:has(#{$resizerId}#{$resizeActive})) {
-  //   min-height: 100px !important;
-  // }
+    // 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;
+    }
 
-  &>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;
+    // &: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;
+      }
     }
   }
 }
-}

package/dist/mega-menu-container.scss

@@ -2,7 +2,6 @@
 @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);
@@ -18,12 +17,11 @@ $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);
@@ -36,104 +34,119 @@ $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)
+              --_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)};
         }
 
-        ;
-        --_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)};
-    }
-
-    &: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="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-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);
+        }
 
-    &: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))
+        //         )
+        //     )
+        //   )
+        // );
+      }
     }
-
-    // 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))
-    //         )
-    //     )
-    //   )
-    // );
   }
 }
-}
-}