@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

package/dist/light-box-v2.scss

@@ -1,155 +1,155 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$lbMain: "#cms_lt_bx_mn";
-$mnwr: ".cms_lt_wr";
-$es: '[data-div-type="element"]';
-$le: '[data-element-type="lightboxv2"]';
-$activeElementSelector: "[data-has-clicked='true']";
-
-#{$lbMain} {
-  position: var(--_p-fixed);
-  inset: 0 0 0 0;
-  z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi, 1));
-  --_cms-section-add-button-zIndex: var(--_higher-zIndex);
-  --_cms-sl-df-zIndex: 1;
-  --_cms-element-active-zIndex: calc(
-    var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3
-  );
-  --_sf-element-vt-pd: max(
-    0.5px,
-    0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-  );
-
-  // &:has(#{$activeElementSelector}) {
-  //   // border: 1px solid var(--_accent-color-2-500);
-  // }
-
-  & > div {
-    &#{$mnwr} {
-      position: var(--_p-absolute);
-      inset: 0 0 0 0;
-      background: var(--_sf-bg-ol-cr, rgba(0, 0, 0, 0.7));
-      display: var(--_d-grid);
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr;
-
-      & > div {
-        &#{$es} {
-          &#{$le} {
-            display: var(--_d-grid);
-            grid-template-rows: 1fr;
-            grid-template-columns: 1fr;
-            width: calc(
-              1% *
-                var(
-                  --_ctm-mob-lig-ele-nw-wh-vl,
-                  var(--_ctm-tab-lig-ele-nw-wh-vl, var(--_ctm-lig-ele-nw-wh-vl, 30))
-                )
-            );
-            height: var(
-              --_ctm-mob-lig-lt-ht,
-              var(--_ctm-tab-lig-lt-ht, var(--_ctm-lig-lt-ht, 400px))
-            );
-            max-width: 100%;
-            max-height: 9999px;
-            padding: prepareMediaVariable(--_ctm-lig-lt-pg);
-            &[data-background-type="color"] {
-              background-color: prepareMediaVariable(--_ctm-lig-dn-bd-cr);
-            }
-
-            &[data-background-type="gradient"] {
-              --_sf-lig-gradient-angle: calc(
-                #{prepareMediaVariable(--_ctm-lig-dn-gt-ae, 90)} * 1deg
-              );
-              --_sf-lig-gradient-start-color: #{prepareMediaVariable(
-                  --_ctm-lig-dn-gt-st-cr,
-                  transparent
-                )};
-              --_sf-lig-gradient-start-position: calc(
-                #{prepareMediaVariable(--_ctm-lig-dn-gt-st-pn, 0)} * 1%
-              );
-              --_sf-lig-gradient-end-color: #{prepareMediaVariable(
-                  --_ctm-lig-dn-gt-ed-cr,
-                  transparent
-                )};
-              --_sf-lig-gradient-end-position: calc(
-                #{prepareMediaVariable(--_ctm-lig-dn-gt-ed-pn, 100)} * 1%
-              );
-              --_sf-lig-gradient-position: #{prepareMediaVariable(--_ctm-lig-dn-gt-pn, center)};
-
-              &[data-gradient-type="Linear Gradient"] {
-                background-image: linear-gradient(
-                  var(--_sf-lig-gradient-angle),
-                  var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
-                  var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
-                );
-              }
-
-              &[data-gradient-type="Radial Gradient"] {
-                background-image: radial-gradient(
-                  circle at var(--_sf-lig-gradient-position),
-                  var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
-                  var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
-                );
-              }
-            }
-
-            &[data-background-type="image"] {
-              background-image: prepareMediaVariable(--_ctm-lig-dn-bd-ie);
-              background-attachment: prepareMediaVariable(--_ctm-lig-dn-bd-at);
-              background-position: prepareMediaVariable(--_ctm-lig-dn-bd-pn);
-              background-position-y: prepareMediaVariable(--_ctm-lig-dn-bd-pn-y);
-              background-repeat: prepareMediaVariable(--_ctm-lig-dn-bd-rt);
-              background-size: prepareMediaVariable(--_ctm-lig-dn-bd-se);
-            }
-            // background-color: var(
-            //   --_ctm-mob-lig-dn-bd-cr,
-            //   var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr))
-            // );
-            // background-image: var(
-            //   --_ctm-mob-lig-dn-bd-ie,
-            //   var(--_ctm-tab-lig-dn-bd-ie, var(--_ctm-lig-dn-bd-ie))
-            // );
-            // background-attachment: var(
-            //   --_ctm-mob-lig-dn-bd-at,
-            //   var(--_ctm-tab-lig-dn-bd-at, var(--_ctm-lig-dn-bd-at))
-            // );
-            // background-position: var(
-            //   --_ctm-mob-lig-dn-bd-pn,
-            //   var(--_ctm-tab-lig-dn-bd-pn, var(--_ctm-lig-dn-bd-pn))
-            // );
-            // background-repeat: var(
-            //   --_ctm-mob-lig-dn-bd-rt,
-            //   var(--_ctm-tab-lig-dn-bd-rt, var(--_ctm-lig-dn-bd-rt))
-            // );
-            // background-size: var(
-            //   --_ctm-mob-lig-dn-bd-se,
-            //   var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
-            // );
-            border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
-            border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
-            border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
-            border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
-            position: var(--_p-relative);
-
-            // margin-inline-start: 35%;
-            // margin-block-start: 2%;
-
-            margin: var(--_ctm-mob-lig-lt-mn, var(--_ctm-tab-lig-lt-mn, var(--_ctm-lig-lt-mn)));
-
-            & > div {
-              &.wrapper {
-                overflow-y: auto;
-                scrollbar-width: none;
-                width: 100%;
-                height: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$lbMain: "#cms_lt_bx_mn";
+$mnwr: ".cms_lt_wr";
+$es: '[data-div-type="element"]';
+$le: '[data-element-type="lightboxv2"]';
+$activeElementSelector: "[data-has-clicked='true']";
+
+#{$lbMain} {
+  position: var(--_p-fixed);
+  inset: 0 0 0 0;
+  z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi, 1));
+  --_cms-section-add-button-zIndex: var(--_higher-zIndex);
+  --_cms-sl-df-zIndex: 1;
+  --_cms-element-active-zIndex: calc(
+    var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3
+  );
+  --_sf-element-vt-pd: max(
+    0.5px,
+    0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+  );
+
+  // &:has(#{$activeElementSelector}) {
+  //   // border: 1px solid var(--_accent-color-2-500);
+  // }
+
+  & > div {
+    &#{$mnwr} {
+      position: var(--_p-absolute);
+      inset: 0 0 0 0;
+      background: var(--_sf-bg-ol-cr, rgba(0, 0, 0, 0.7));
+      display: var(--_d-grid);
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr;
+
+      & > div {
+        &#{$es} {
+          &#{$le} {
+            display: var(--_d-grid);
+            grid-template-rows: 1fr;
+            grid-template-columns: 1fr;
+            width: calc(
+              1% *
+                var(
+                  --_ctm-mob-lig-ele-nw-wh-vl,
+                  var(--_ctm-tab-lig-ele-nw-wh-vl, var(--_ctm-lig-ele-nw-wh-vl, 30))
+                )
+            );
+            height: var(
+              --_ctm-mob-lig-lt-ht,
+              var(--_ctm-tab-lig-lt-ht, var(--_ctm-lig-lt-ht, 400px))
+            );
+            max-width: 100%;
+            max-height: 9999px;
+            padding: prepareMediaVariable(--_ctm-lig-lt-pg);
+            &[data-background-type="color"] {
+              background-color: prepareMediaVariable(--_ctm-lig-dn-bd-cr);
+            }
+
+            &[data-background-type="gradient"] {
+              --_sf-lig-gradient-angle: calc(
+                #{prepareMediaVariable(--_ctm-lig-dn-gt-ae, 90)} * 1deg
+              );
+              --_sf-lig-gradient-start-color: #{prepareMediaVariable(
+                  --_ctm-lig-dn-gt-st-cr,
+                  transparent
+                )};
+              --_sf-lig-gradient-start-position: calc(
+                #{prepareMediaVariable(--_ctm-lig-dn-gt-st-pn, 0)} * 1%
+              );
+              --_sf-lig-gradient-end-color: #{prepareMediaVariable(
+                  --_ctm-lig-dn-gt-ed-cr,
+                  transparent
+                )};
+              --_sf-lig-gradient-end-position: calc(
+                #{prepareMediaVariable(--_ctm-lig-dn-gt-ed-pn, 100)} * 1%
+              );
+              --_sf-lig-gradient-position: #{prepareMediaVariable(--_ctm-lig-dn-gt-pn, center)};
+
+              &[data-gradient-type="Linear Gradient"] {
+                background-image: linear-gradient(
+                  var(--_sf-lig-gradient-angle),
+                  var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
+                  var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
+                );
+              }
+
+              &[data-gradient-type="Radial Gradient"] {
+                background-image: radial-gradient(
+                  circle at var(--_sf-lig-gradient-position),
+                  var(--_sf-lig-gradient-start-color) var(--_sf-lig-gradient-start-position),
+                  var(--_sf-lig-gradient-end-color) var(--_sf-lig-gradient-end-position)
+                );
+              }
+            }
+
+            &[data-background-type="image"] {
+              background-image: prepareMediaVariable(--_ctm-lig-dn-bd-ie);
+              background-attachment: prepareMediaVariable(--_ctm-lig-dn-bd-at);
+              background-position: prepareMediaVariable(--_ctm-lig-dn-bd-pn);
+              background-position-y: prepareMediaVariable(--_ctm-lig-dn-bd-pn-y);
+              background-repeat: prepareMediaVariable(--_ctm-lig-dn-bd-rt);
+              background-size: prepareMediaVariable(--_ctm-lig-dn-bd-se);
+            }
+            // background-color: var(
+            //   --_ctm-mob-lig-dn-bd-cr,
+            //   var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr))
+            // );
+            // background-image: var(
+            //   --_ctm-mob-lig-dn-bd-ie,
+            //   var(--_ctm-tab-lig-dn-bd-ie, var(--_ctm-lig-dn-bd-ie))
+            // );
+            // background-attachment: var(
+            //   --_ctm-mob-lig-dn-bd-at,
+            //   var(--_ctm-tab-lig-dn-bd-at, var(--_ctm-lig-dn-bd-at))
+            // );
+            // background-position: var(
+            //   --_ctm-mob-lig-dn-bd-pn,
+            //   var(--_ctm-tab-lig-dn-bd-pn, var(--_ctm-lig-dn-bd-pn))
+            // );
+            // background-repeat: var(
+            //   --_ctm-mob-lig-dn-bd-rt,
+            //   var(--_ctm-tab-lig-dn-bd-rt, var(--_ctm-lig-dn-bd-rt))
+            // );
+            // background-size: var(
+            //   --_ctm-mob-lig-dn-bd-se,
+            //   var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
+            // );
+            border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
+            border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
+            border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
+            border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
+            position: var(--_p-relative);
+
+            // margin-inline-start: 35%;
+            // margin-block-start: 2%;
+
+            margin: var(--_ctm-mob-lig-lt-mn, var(--_ctm-tab-lig-lt-mn, var(--_ctm-lig-lt-mn)));
+
+            & > div {
+              &.wrapper {
+                overflow-y: auto;
+                scrollbar-width: none;
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/lightbox.scss

@@ -1,78 +1,78 @@
-@use "sass:map";
-@use "sass:list";
-
-[data-div-type="element"] {
-  &[data-element-type="lightbox"] {
-    width: var(
-      --_ctm-mob-el-wh-st-mx,
-      var(
-        --_ctm-tab-el-wh-st-mx,
-        var(
-          --_ctm-el-wh-st-mx,
-          calc(
-            1% *
-              var(
-                --_ctm-mob-ele-nw-wh-vl,
-                var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-              )
-          )
-        )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-
-    & > .wrapper {
-      width: 100%;
-      height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    .modal__content__container {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      .content__left {
-        background-image: url("https://res.cloudinary.com/dg78ao4vi/image/upload/v1733726837/unsplash_bBiuSdck8tU_ssntkv.png");
-        background-size: cover;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: start;
-        gap: 10px;
-        color: white;
-        width: 60%;
-        padding: 20px 40px;
-        p {
-          font-size: 20px;
-          color: white;
-          font-weight: 200;
-        }
-        .left__button {
-          background-color: white;
-          color: black;
-          border-radius: 10px;
-          float: left;
-          margin-top: 20px;
-          width: 150px;
-          height: 40px;
-          font-size: 15px;
-        }
-      }
-      .content__right {
-        width: 40%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="lightbox"] {
+    width: var(
+      --_ctm-mob-el-wh-st-mx,
+      var(
+        --_ctm-tab-el-wh-st-mx,
+        var(
+          --_ctm-el-wh-st-mx,
+          calc(
+            1% *
+              var(
+                --_ctm-mob-ele-nw-wh-vl,
+                var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+              )
+          )
+        )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+    & > .wrapper {
+      width: 100%;
+      height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    .modal__content__container {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      .content__left {
+        background-image: url("https://res.cloudinary.com/dg78ao4vi/image/upload/v1733726837/unsplash_bBiuSdck8tU_ssntkv.png");
+        background-size: cover;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: start;
+        gap: 10px;
+        color: white;
+        width: 60%;
+        padding: 20px 40px;
+        p {
+          font-size: 20px;
+          color: white;
+          font-weight: 200;
+        }
+        .left__button {
+          background-color: white;
+          color: black;
+          border-radius: 10px;
+          float: left;
+          margin-top: 20px;
+          width: 150px;
+          height: 40px;
+          font-size: 15px;
+        }
+      }
+      .content__right {
+        width: 40%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}

package/dist/loader.scss

@@ -1,37 +1,37 @@
-@use "sass:map";
-@use "sass:list";
-
-[data-div-type="element"] {
-  &[data-element-type="loader"] {
-    // width: var(
-    //   --_ctm-mob-ele-nw-wh-st-mx,
-    //   var(
-    //     --_ctm-tab-ele-nw-wh-st-mx,
-    //     var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
-    //   )
-    // );
-
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-
-    // aspect-ratio: var(
-    //   --_ctm-mob-aspect-ratio,
-    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
-    // );
-
-    position: relative;
-
-    & > .wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="loader"] {
+    // width: var(
+    //   --_ctm-mob-ele-nw-wh-st-mx,
+    //   var(
+    //     --_ctm-tab-ele-nw-wh-st-mx,
+    //     var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
+    //   )
+    // );
+
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+
+    // aspect-ratio: var(
+    //   --_ctm-mob-aspect-ratio,
+    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
+    // );
+
+    position: relative;
+
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/login.scss

@@ -243,15 +243,18 @@
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
-        gap: prepareMediaVariable(
-          --_ctm-dn-ln-wt-im-gp,
-          prepareMediaVariable(--_ctm-dn-wt-im-gp, 0px)
-        );
-
-        padding: prepareMediaVariable(
-          --_ctm-dn-ln-wt-pg,
-          prepareMediaVariable(--_ctm-dn-wt-pg, 0px)
+        // gap: prepareMediaVariable(
+        //   --_ctm-dn-ln-wt-im-gp,
+        //   prepareMediaVariable(--_ctm-dn-wt-im-gp, 0px)
+        // );
+        gap: var(
+          --_ctm-mob-dn-fm-cr-im-gp,
+          var(--_ctm-tab-dn-fm-cr-im-gp, var(--_ctm-dn-fm-cr-im-gp))
         );
+        // padding: prepareMediaVariable(
+        //   --_ctm-dn-ln-wt-pg,
+        //   prepareMediaVariable(--_ctm-dn-wt-pg, 0px)
+        // );
       }
 
       .login_box_header {
@@ -399,7 +402,6 @@
       .sso_verify {
         border: 1px solid red;
       }
-
       .form_fields {
         // margin-top: 36px;
         gap: var(
@@ -411,7 +413,7 @@
 
         .btn__with__text[data-btn-name="resetButton"] {
           width: 100%;
-          margin-top: 10px;
+          // margin-top: 10px;
 
           &[data-show-shadow="false"] {
             --_show-shadow: none;
@@ -610,6 +612,19 @@
         }
       }
 
+      // The form tag itself - Design > Form > Container, on both the Login and Reset
+      // Password widgets. Its gap spaces the form's own children: the field stack and the
+      // button below it, which nothing else was setting. It sits after `.form_fields`
+      // because the reset form carries both classes, so this gap is the one that wins.
+      .form__container {
+        display: flex;
+        flex-direction: column;
+        gap: var(
+          --_ctm-mob-dn-fm-cr-im-gp,
+          var(--_ctm-tab-dn-fm-cr-im-gp, var(--_ctm-dn-fm-cr-im-gp))
+        );
+      }
+
       // Form Group (For Email and Password)
       .field__group {
         // margin-bottom: 16px;
@@ -1015,7 +1030,7 @@
 
       // Submit Button
       .btn__with__text[data-btn-name="Login"] {
-        margin-top: 10px;
+        // margin-top: 10px;
         width: 100%;
         --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr))};
 
@@ -1171,6 +1186,9 @@
           // opacity: 0;
           display: none;
         }
+
+        // padding: var(--_ctm-mob-dn-fm-cr-pg, var(--_ctm-tab-dn-fm-cr-pg, var(--_ctm-dn-fm-cr-pg)));
+        // padding: 60px !important;
       }
 
       // .submitButton {