@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.77

package/dist/item-stock.scss

@@ -0,0 +1,125 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="itemStock"] {
+    width: var(
+      --_sf-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)))
+          )
+      )
+    );
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    position: relative;
+
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .item__stock__section {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      gap: 8px;
+      .item__stock__heading {
+        position: relative;
+        .item__stock__text {
+          color: var(
+            --_ctm-mob-dn-im-sk-tt-cr,
+            var(--_ctm-tab-dn-im-sk-tt-cr, var(--_ctm-dn-im-sk-tt-cr))
+          );
+          font-family: var(
+              --_ctm-mob-dn-im-sk-tt-ft-fy,
+              var(--_ctm-tab-dn-im-sk-tt-ft-fy, var(--_ctm-dn-im-sk-tt-ft-fy))
+            ),
+            sans-serif;
+          font-size: var(
+            --_ctm-mob-dn-im-sk-tt-ft-se,
+            var(--_ctm-tab-dn-im-sk-tt-ft-se, var(--_ctm-dn-im-sk-tt-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-im-sk-tt-ft-wt,
+            var(--_ctm-tab-dn-im-sk-tt-ft-wt, var(--_ctm-dn-im-sk-tt-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-im-sk-tt-ft-se-ic,
+            var(--_ctm-tab-dn-im-sk-tt-ft-se-ic, var(--_ctm-dn-im-sk-tt-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-im-sk-tt-tt-an,
+            var(--_ctm-tab-dn-im-sk-tt-tt-an, var(--_ctm-dn-im-sk-tt-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-im-sk-tt-lr-sg,
+            var(--_ctm-tab-dn-im-sk-tt-lr-sg, var(--_ctm-dn-im-sk-tt-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-im-sk-tt-le-ht,
+            var(--_ctm-tab-dn-im-sk-tt-le-ht, var(--_ctm-dn-im-sk-tt-le-ht))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-im-sk-tt-ue,
+            var(--_ctm-tab-dn-im-sk-tt-ue, var(--_ctm-dn-im-sk-tt-ue))
+          );
+          background-color: var(
+            --_ctm-mob-dn-im-sk-tt-bd-cr,
+            var(--_ctm-tab-dn-im-sk-tt-bd-cr, var(--_ctm-dn-im-sk-tt-bd-cr))
+          );
+          border-color: var(
+            --_ctm-mob-dn-im-sk-tt-br-cr,
+            var(--_ctm-tab-dn-im-sk-tt-br-cr, var(--_ctm-dn-im-sk-tt-br-cr))
+          );
+          border-style: var(
+            --_ctm-mob-dn-im-sk-tt-br-se,
+            var(--_ctm-tab-dn-im-sk-tt-br-se, var(--_ctm-dn-im-sk-tt-br-se))
+          );
+          border-width: var(
+            --_ctm-mob-dn-im-sk-tt-br-wh,
+            var(--_ctm-tab-dn-im-sk-tt-br-wh, var(--_ctm-dn-im-sk-tt-br-wh))
+          );
+          border-radius: var(
+            --_ctm-mob-dn-im-sk-tt-br-rs,
+            var(--_ctm-tab-dn-im-sk-tt-br-rs, var(--_ctm-dn-im-sk-tt-br-rs))
+          );
+          box-shadow: var(
+            --_show-text-content-shadow,
+            var(
+                --_ctm-mob-dn-im-sk-tt-sw-ae,
+                var(--_ctm-tab-dn-im-sk-tt-sw-ae, var(--_ctm-dn-im-sk-tt-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-im-sk-tt-sw-br,
+                var(--_ctm-tab-dn-im-sk-tt-sw-br, var(--_ctm-dn-im-sk-tt-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-im-sk-tt-sw-sd,
+                var(--_ctm-tab-dn-im-sk-tt-sw-sd, var(--_ctm-dn-im-sk-tt-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-im-sk-tt-sw-cr,
+                var(--_ctm-tab-dn-im-sk-tt-sw-cr, var(--_ctm-dn-im-sk-tt-sw-cr))
+              )
+          );
+        }
+      }
+    }
+
+    &[data-widget-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/layouter-item.scss

@@ -16,8 +16,32 @@
       &.wrapper {
         width: 100%;
         height: 100%;
-        padding: var(--_ctm-layo-lt-pg);
-        background: var(--_ctm-layo-dn-bd-cr);
+        padding: var(--_ctm-mob-layo-lt-pg, var(--_ctm-tab-layo-lt-pg, var(--_ctm-layo-lt-pg)));
+
+        background-color: var(
+          --_ctm-mob-layo-dn-bd-cr,
+          var(--_ctm-tab-layo-dn-bd-cr, var(--_ctm-layo-dn-bd-cr))
+        );
+        background-image: var(
+          --_ctm-mob-layo-dn-bd-ie,
+          var(--_ctm-tab-layo-dn-bd-ie, var(--_ctm-layo-dn-bd-ie))
+        );
+        background-attachment: var(
+          --_ctm-mob-layo-dn-bd-at,
+          var(--_ctm-tab-layo-dn-bd-at, var(--_ctm-layo-dn-bd-at))
+        );
+        background-position: var(
+          --_ctm-mob-layo-dn-bd-pn,
+          var(--_ctm-tab-layo-dn-bd-pn, var(--_ctm-layo-dn-bd-pn))
+        );
+        background-repeat: var(
+          --_ctm-mob-layo-dn-bd-rt,
+          var(--_ctm-tab-layo-dn-bd-rt, var(--_ctm-layo-dn-bd-rt))
+        );
+        background-size: var(
+          --_ctm-mob-layo-dn-bd-se,
+          var(--_ctm-tab-layo-dn-bd-se, var(--_ctm-layo-dn-bd-se))
+        );
         border-radius: var(
           --_ctm-mob-layo-dn-br-rs,
           var(--_ctm-tab-layo-dn-br-rs, var(--_ctm-layo-dn-br-rs))

package/dist/layouter.scss

@@ -19,10 +19,30 @@ $childItemSelector: '[data-element-type="layouter-item"]';
       --_ctm-mob-lay-lt-mn,
       var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
     );
-    background: var(
+    background-color: var(
       --_ctm-mob-lay-dn-bd-cr,
       var(--_ctm-tab-lay-dn-bd-cr, var(--_ctm-lay-dn-bd-cr))
     );
+    background-image: var(
+      --_ctm-mob-lay-dn-bd-ie,
+      var(--_ctm-tab-lay-dn-bd-ie, var(--_ctm-lay-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-lay-dn-bd-at,
+      var(--_ctm-tab-lay-dn-bd-at, var(--_ctm-lay-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-lay-dn-bd-pn,
+      var(--_ctm-tab-lay-dn-bd-pn, var(--_ctm-lay-dn-bd-pn))
+    );
+    background-repeat: var(
+      --_ctm-mob-lay-dn-bd-rt,
+      var(--_ctm-tab-lay-dn-bd-rt, var(--_ctm-lay-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-lay-dn-bd-se,
+      var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
+    );
     border-radius: var(
       --_ctm-mob-lay-dn-br-rs,
       var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs))
@@ -94,6 +114,10 @@ $childItemSelector: '[data-element-type="layouter-item"]';
               width: 100%;
             }
           }
+
+          @media only screen and (max-width: 767px) {
+            grid-template-rows: auto;
+          }
         }
       }
     }
@@ -101,6 +125,7 @@ $childItemSelector: '[data-element-type="layouter-item"]';
     &.sld {
       overflow: clip;
       height: auto;
+      min-height: 50px !important;
       --_sf-sl-ct-ic-dt-at-cl: var(
         --_ctm-mob-lay-lt-cl-ae-cr,
         var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))

package/dist/light-box-v2.scss

@@ -11,6 +11,11 @@ $activeElementSelector: "[data-has-clicked='true']";
   position: var(--_p-fixed);
   inset: 0 0 0 0;
   z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi));
+  --_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
+  );
 
   &:has(#{$activeElementSelector}) {
     // border: 1px solid var(--_accent-color-2-500);
@@ -20,7 +25,7 @@ $activeElementSelector: "[data-has-clicked='true']";
     &#{$mnwr} {
       position: var(--_p-absolute);
       inset: 0 0 0 0;
-      background: rgba(0, 0, 0, 0.7);
+      background: var(--_sf-bg-ol-cr, rgba(0, 0, 0, 0.7));
       display: var(--_d-grid);
       grid-template-columns: 1fr;
       grid-template-rows: 1fr;
@@ -44,9 +49,29 @@ $activeElementSelector: "[data-has-clicked='true']";
             );
             max-width: 100%;
             max-height: 9999px;
-            background: var(
+            background-color: var(
               --_ctm-mob-lig-dn-bd-cr,
-              var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr, #fff))
+              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: 10px;
             position: var(--_p-relative);
@@ -61,6 +86,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                 overflow-y: auto;
                 scrollbar-width: none;
                 width: 100%;
+                height: 100%;
               }
             }
           }

package/dist/lightbox.scss

@@ -3,8 +3,24 @@
 
 [data-div-type="element"] {
   &[data-element-type="lightbox"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    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 {

package/dist/line.scss

@@ -0,0 +1,165 @@
+[data-div-type="element"][data-element-type="line"] {
+  // width: 100%;
+  width: var(
+    --_sf-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)))
+        )
+    )
+  );
+  height: var(--_ctm-lt-ht);
+
+  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%;
+    height: var(--_ctm-lt-ht);
+  }
+
+  .line__container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    background-color: var(
+      --_ctm-mob-dn-le-wt-bd-cr,
+      var(--_ctm-tab-dn-le-wt-bd-cr, var(--_ctm-dn-le-wt-bd-cr))
+    );
+    border-radius: var(
+      --_ctm-mob-dn-le-wt-br-rs,
+      var(--_ctm-tab-dn-le-wt-br-rs, var(--_ctm-dn-le-wt-br-rs))
+    );
+
+    .line__core {
+      display: block;
+      background-color: transparent;
+    }
+  }
+
+  &[data-widget-border="true"] {
+    .line__container {
+      border-color: var(
+        --_ctm-mob-dn-le-wt-br-cr,
+        var(--_ctm-tab-dn-le-wt-br-cr, var(--_ctm-dn-le-wt-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-dn-le-wt-br-se,
+        var(--_ctm-tab-dn-le-wt-br-se, var(--_ctm-dn-le-wt-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-dn-le-wt-br-wh,
+        var(--_ctm-tab-dn-le-wt-br-wh, var(--_ctm-dn-le-wt-br-wh))
+      );
+    }
+  }
+
+  &[data-widget-shadow="true"] {
+    .line__container {
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-le-wt-sw-ae, var(--_ctm-tab-dn-le-wt-sw-ae, var(--_ctm-dn-le-wt-sw-ae)))
+          var(--_ctm-mob-dn-le-wt-sw-br, var(--_ctm-tab-dn-le-wt-sw-br, var(--_ctm-dn-le-wt-sw-br)))
+          var(--_ctm-mob-dn-le-wt-sw-sd, var(--_ctm-tab-dn-le-wt-sw-sd, var(--_ctm-dn-le-wt-sw-sd)))
+          var(--_ctm-mob-dn-le-wt-sw-cr, var(--_ctm-tab-dn-le-wt-sw-cr, var(--_ctm-dn-le-wt-sw-cr)))
+      );
+    }
+  }
+
+  // ─── Horizontal Line ─────────────────────
+  &[data-line-direction="horizontal"] {
+    .line__core {
+      width: 100%;
+      height: 0;
+      border-top: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
+    }
+
+    &[data-line-style="dashed"] .line__core {
+      border-top-style: dashed;
+    }
+
+    &[data-line-style="dotted"] .line__core {
+      border-top-style: dotted;
+    }
+
+    &[data-show-line-end-points="true"] {
+      .line__container::before,
+      .line__container::after {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background-color: var(--_ctm-dn-le-cr-ud);
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: 50%;
+      }
+
+      .line__container::before {
+        left: 0;
+      }
+
+      .line__container::after {
+        right: 0;
+      }
+
+      &[data-line-end-points="square"] .line__container::before,
+      &[data-line-end-points="square"] .line__container::after {
+        border-radius: 0;
+      }
+    }
+  }
+
+  // ─── Vertical Line ───────────────────────
+  &[data-line-direction="vertical"] {
+    .line__core {
+      width: 0;
+      height: 100%;
+      border-left: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
+    }
+
+    &[data-line-style="dashed"] .line__core {
+      border-left-style: dashed;
+    }
+
+    &[data-line-style="dotted"] .line__core {
+      border-left-style: dotted;
+    }
+
+    &[data-show-line-end-points="true"] {
+      .line__container::before,
+      .line__container::after {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background-color: var(--_ctm-dn-le-cr-ud);
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: 50%; // Default is circle
+      }
+
+      .line__container::before {
+        top: 0;
+      }
+
+      .line__container::after {
+        bottom: 0;
+      }
+
+      &[data-line-end-points="square"] .line__container::before,
+      &[data-line-end-points="square"] .line__container::after {
+        border-radius: 0;
+      }
+    }
+  }
+}

package/dist/login.scss

@@ -5,9 +5,17 @@
   &[data-element-type="login"],
   &[data-element-type="resetPassword"],
   &[data-element-type="forgotPassword"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    //height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    width: var(
+      --_sf-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);
     position: relative;
 
@@ -175,12 +183,14 @@
       // Login Box
       .loginBox {
         width: 100%;
+        background-color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-bd-cr)));
       }
 
       // Title Styles
       .title {
         // text-align: center;
-        color: var(--_gray-900);
+        // color: var(--_gray-900);
+        color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
         font-size: 24px;
         margin-bottom: 8px;
       }
@@ -290,6 +300,7 @@
         padding: 12px;
         background-color: var(--_primary-500);
         color: #fff;
+        //  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
         border-radius: 6px;
         border: none;
         cursor: pointer;
@@ -531,25 +542,6 @@
       .text__center {
         text-align: center;
       }
-
-      // .rounded__fill {
-      //   @extend .element__center;
-      //   width: 60px;
-      //   height: 60px;
-      //   background-color: var(--_success-50);
-      //   border-radius: 50%;
-      //   margin-bottom: 24px;
-      //   svg {
-      //     width: 26px;
-      //     height: 26px;
-      //     path {
-      //       stroke: var(--_success-600);
-      //     }
-      //   }
-      //   &.remove__bg {
-      //     background-color: transparent;
-      //   }
-      // }
     }
   }
 }