@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.59

package/dist/layouter-pro.scss

@@ -1,88 +1,88 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$childItemSelector: '[data-element-type="layouter-pro-item"]';
-$flex: "flx";
-$grid: "grd";
-$flexRow: "rw";
-$flexRowReverse: "rw-rv";
-$flexColumn: "cln";
-$flexColumnReverse: "cln-rv";
-[data-div-type="element"] {
-  &[data-element-type="layouter-pro"] {
-    // width: var(--_sf-con-nw-wh);
-    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
-    max-width: 100% !important;
-    // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
-    // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
-    margin: prepareMediaVariable(--_ctm-layou-lt-mn);
-    background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
-    background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
-    background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
-    background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
-    background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
-    background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
-    border-radius: prepareMediaVariable(--_ctm-layou-dn-br-rs);
-    padding: prepareMediaVariable(--_ctm-layou-lt-pg);
-
-    &[data-show-border="true"] {
-      border-color: prepareMediaVariable(--_ctm-layou-dn-br-cr);
-      border-style: prepareMediaVariable(--_ctm-layou-dn-br-se);
-      border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
-    }
-
-    &[data-show-boxshadow="true"] {
-      box-shadow: var(
-        --_hide-grid-shadow,
-        prepareMediaVariable(--_ctm-layou-dn-sw-ae) prepareMediaVariable(--_ctm-layou-dn-sw-br)
-          prepareMediaVariable(--_ctm-layou-dn-sw-sd) prepareMediaVariable(--_ctm-layou-dn-sw-cr)
-      );
-    }
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
-        column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
-        row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);
-
-        &:is(.#{$flex} > *) {
-          display: var(--_d-flex) !important;
-          flex-wrap: prepareMediaVariable(--_ctm-layou-lt-fx-wp);
-          overflow: prepareMediaVariable(--_ctm-layou-lt-fx-ow);
-
-          &.#{$flexRow} {
-            flex-direction: row;
-            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-          &.#{$flexRowReverse} {
-            flex-direction: row-reverse;
-            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-          &.#{$flexColumn} {
-            flex-direction: column;
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-          &.#{$flexColumnReverse} {
-            flex-direction: column-reverse;
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-        }
-
-        // & > div {
-        //   &#{$childItemSelector} {
-        //     // width: 100%;
-        //   }
-        // }
-        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
-        // grid-auto-rows: minmax(100px, 1fr);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$childItemSelector: '[data-element-type="layouter-pro-item"]';
+$flex: "flx";
+$grid: "grd";
+$flexRow: "rw";
+$flexRowReverse: "rw-rv";
+$flexColumn: "cln";
+$flexColumnReverse: "cln-rv";
+[data-div-type="element"] {
+  &[data-element-type="layouter-pro"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
+    max-width: 100% !important;
+    // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    margin: prepareMediaVariable(--_ctm-layou-lt-mn);
+    background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
+    background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
+    background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
+    background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
+    background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
+    background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
+    border-radius: prepareMediaVariable(--_ctm-layou-dn-br-rs);
+    padding: prepareMediaVariable(--_ctm-layou-lt-pg);
+
+    &[data-show-border="true"] {
+      border-color: prepareMediaVariable(--_ctm-layou-dn-br-cr);
+      border-style: prepareMediaVariable(--_ctm-layou-dn-br-se);
+      border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
+    }
+
+    &[data-show-boxshadow="true"] {
+      box-shadow: var(
+        --_hide-grid-shadow,
+        prepareMediaVariable(--_ctm-layou-dn-sw-ae) prepareMediaVariable(--_ctm-layou-dn-sw-br)
+          prepareMediaVariable(--_ctm-layou-dn-sw-sd) prepareMediaVariable(--_ctm-layou-dn-sw-cr)
+      );
+    }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
+        column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);
+
+        &:is(.#{$flex} > *) {
+          display: var(--_d-flex) !important;
+          flex-wrap: prepareMediaVariable(--_ctm-layou-lt-fx-wp);
+          overflow: prepareMediaVariable(--_ctm-layou-lt-fx-ow);
+
+          &.#{$flexRow} {
+            flex-direction: row;
+            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexRowReverse} {
+            flex-direction: row-reverse;
+            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexColumn} {
+            flex-direction: column;
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexColumnReverse} {
+            flex-direction: column-reverse;
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+        }
+
+        // & > div {
+        //   &#{$childItemSelector} {
+        //     // width: 100%;
+        //   }
+        // }
+        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+        // grid-auto-rows: minmax(100px, 1fr);
+      }
+    }
+  }
+}

package/dist/light-box-v2.scss

@@ -1,105 +1,105 @@
-@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;
-            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;
+            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;
+        }
+      }
+    }
+  }
+}