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

package/dist/section.scss

@@ -55,10 +55,34 @@ section {
         var(--_ctm-mob-sec-dn-sw-sd, var(--_ctm-tab-sec-dn-sw-sd, var(--_ctm-sec-dn-sw-sd)))
         var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-sec-dn-sw-cr)))
     );
-    background: var(
+    background-color: var(
       --_ctm-mob-sec-dn-bd-cr,
       var(--_ctm-tab-sec-dn-bd-cr, var(--_ctm-sec-dn-bd-cr))
     );
+    background-image: var(
+      --_ctm-mob-sec-dn-bd-ie,
+      var(--_ctm-tab-sec-dn-bd-ie, var(--_ctm-sec-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-sec-dn-bd-at,
+      var(--_ctm-tab-sec-dn-bd-at, var(--_ctm-sec-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-sec-dn-bd-pn,
+      var(--_ctm-tab-sec-dn-bd-pn, var(--_ctm-sec-dn-bd-pn))
+    );
+    background-position-y: var(
+      --_ctm-mob-sec-dn-bd-pn-y,
+      var(--_ctm-tab-sec-dn-bd-pn-y, var(--_ctm-sec-dn-bd-pn-y))
+    );
+    background-repeat: var(
+      --_ctm-mob-sec-dn-bd-rt,
+      var(--_ctm-tab-sec-dn-bd-rt, var(--_ctm-sec-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-sec-dn-bd-se,
+      var(--_ctm-tab-sec-dn-bd-se, var(--_ctm-sec-dn-bd-se))
+    );
     border-radius: var(
       --_ctm-mob-sec-dn-br-rs,
       var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))

package/dist/shareCartSideBar.scss

@@ -0,0 +1,230 @@
+@use "sass:map";
+@use "sass:list";
+
+// Variables
+$primary-color: #243dc6;
+$text-color: #2d2d2d;
+$background-color: #ffffff;
+$border-radius: 8px;
+$input-border: #e0e0e0;
+$error-color: #e53935;
+$hint-color: #7d7d7d;
+$shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+
+.sidebar_container_glass_overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  background: rgba(112, 112, 112, 0.13);
+  z-index: 9999;
+}
+
+// Container overlay
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(20, 20, 20, 0.4); // Glass effect
+  backdrop-filter: blur(3px);
+  z-index: 1000;
+}
+
+// Sidebar slide-in
+.sidebar-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 400px;
+  max-width: 100%;
+  height: 100vh;
+  background: $background-color;
+  box-shadow: $shadow;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  animation: slide-in 0.3s ease-out;
+  .container {
+    padding: 0px 24px;
+    overflow-y: auto;
+    width: 100%;
+    height: calc(100vh - 40px);
+  }
+
+  @keyframes slide-in {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+}
+
+// Header
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0px;
+  position: sticky;
+  top: 0px;
+  background: #fff;
+  margin: 0 -14px;
+
+  h2 {
+    font-size: 18px;
+    font-weight: 600;
+    color: $text-color;
+  }
+
+  .close-btn {
+    font-size: 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $text-color;
+  }
+}
+
+// Form fields
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+
+  label {
+    font-weight: 500;
+    margin-bottom: 6px;
+    color: $text-color;
+  }
+
+  input {
+    padding: 10px 12px;
+    font-size: 14px;
+    border-radius: $border-radius;
+    border: 1px solid $input-border;
+    outline: none;
+
+    &:focus {
+      border-color: $primary-color;
+    }
+  }
+
+  .hint {
+    font-size: 12px;
+    color: $hint-color;
+    margin-top: 4px;
+  }
+
+  .error {
+    color: $error-color;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+}
+
+// Chip Input
+.input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 0px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  min-height: 44px;
+  cursor: text;
+}
+
+.chips-input-wrapper:focus-within {
+  border-color: $primary-color;
+}
+
+.chips-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  min-width: 120px;
+  font-size: 14px;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  background-color: #f1f1f1;
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-size: 13px;
+
+  button {
+    margin-left: 6px;
+    background: transparent;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    line-height: 1;
+  }
+}
+
+// Footer buttons
+.sidebar-footer {
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+  border-top: 1px solid #eee;
+
+  .discard-btn {
+    background: none;
+    border: none;
+    color: $text-color;
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  .share-btn {
+    background: $primary-color;
+    color: $background-color;
+    border: none;
+    padding: 10px 16px;
+    border-radius: $border-radius;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background 0.2s;
+    //  if it needed import the darken function from sass
+    // &:hover {
+    //   background: darken($primary-color, 5%);
+    // }
+  }
+}
+
+// PhoneInput override
+.react-tel-input {
+  input {
+    width: 100% !important;
+    border-radius: $border-radius !important;
+    border-color: $input-border !important;
+  }
+}
+
+.form-group.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 8px; // spacing between checkbox and label
+  margin-top: 12px;
+
+  input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  label {
+    font-size: 14px;
+    color: $text-color;
+    cursor: pointer;
+  }
+}

package/dist/shipping-estimator.scss

@@ -8,8 +8,12 @@
     // margin: var(--_lt-mn);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    aspect-ratio: calc(
+      1 / var(--_ctm-mob-sf-aspect-ratio, var(--_ctm-tab-sf-aspect-ratio, var(--_sf-aspect-ratio)))
+    );
+
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -31,7 +35,7 @@
       color: rgba(75, 69, 70, 1);
     }
     .shipping__estimator {
-      padding: var(--_ctm-lt-pg);
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     }
   }
 }

package/dist/social.scss

@@ -4,11 +4,27 @@
 [data-div-type="element"] {
   &[data-element-type="social"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    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(
+      --_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);
+
     --_aspect-ratio: calc(
-      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+      1 *
+        (
+          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
+            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
+        )
     );
 
     & > .wrapper {
@@ -92,75 +108,169 @@
 
     &[data-widget-border="true"] {
       .social__container {
-        border-color: var(--_ctm-dn-sl-wt-br-cr, var(--_tst-dn-sl-wt-br-cr));
-        border-style: var(--_ctm-dn-sl-wt-br-se, var(--_tst-dn-sl-wt-br-se));
-        border-width: var(--_ctm-dn-sl-wt-br-wh, var(--_tst-dn-sl-wt-br-wh));
+        border-color: var(
+          --_ctm-mob-dn-sl-wt-br-cr,
+          var(--_ctm-tab-dn-sl-wt-br-cr, var(--_ctm-dn-sl-wt-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-sl-wt-br-se,
+          var(--_ctm-tab-dn-sl-wt-br-se, var(--_ctm-dn-sl-wt-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-sl-wt-br-wh,
+          var(--_ctm-tab-dn-sl-wt-br-wh, var(--_ctm-dn-sl-wt-br-wh))
+        );
+      }
+    }
+    &[data-item-show-icon-color="true"] {
+      .social__container {
+        & svg {
+          path {
+            stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
+          }
+        }
       }
     }
     &[data-widget-shadow="true"] {
       .social__container {
         box-shadow: var(
           --_show-shadow,
-          var(--_ctm-dn-sl-wt-sw-ae, var(--_tst-dn-sl-wt-sw-ae))
-            var(--_ctm-dn-sl-wt-sw-br, var(--_tst-vo-se-sw-br))
-            var(--_ctm-dn-sl-wt-sw-sd, var(--_tst-vo-se-sw-sd))
-            var(--_ctm-dn-sl-wt-sw-cr, var(--_tst-dn-sl-wt-sw-cr))
+          var(--_ctm-mob-dn-sl-wt-sw-ae, var(--_ctm-tab-dn-sl-wt-sw-ae, var(--_ctm-dn-sl-wt-sw-ae)))
+            var(
+              --_ctm-mob-dn-sl-wt-sw-br,
+              var(--_ctm-tab-dn-sl-wt-sw-br, var(--_ctm-dn-sl-wt-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-sl-wt-sw-sd,
+              var(--_ctm-tab-dn-sl-wt-sw-sd, var(--_ctm-dn-sl-wt-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-sl-wt-sw-cr,
+              var(--_ctm-tab-dn-sl-wt-sw-cr, var(--_ctm-dn-sl-wt-sw-cr))
+            )
         );
       }
     }
     &[data-item-border="true"] {
       .social__item {
-        border-color: var(--_ctm-dn-im-se-br-cr, var(--_tst-dn-im-se-br-cr));
-        border-style: var(--_ctm-dn-im-se-br-se, var(--_tst-dn-im-se-br-se));
-        border-width: var(--_ctm-dn-im-se-br-wh, var(--_tst-dn-im-se-br-wh));
+        border-color: var(
+          --_ctm-mob-dn-im-se-br-cr,
+          var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-im-se-br-se,
+          var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-im-se-br-wh,
+          var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
+        );
       }
     }
     &[data-item-shadow="true"] {
       .social__item {
         box-shadow: var(
           --_show-shadow,
-          var(--_ctm-dn-im-se-sw-ae, var(--_tst-dn-im-se-sw-ae))
-            var(--_ctm-dn-im-se-sw-br, var(--_tst-vo-se-sw-br))
-            var(--_ctm-dn-im-se-sw-sd, var(--_tst-vo-se-sw-sd))
-            var(--_ctm-dn-im-se-sw-cr, var(--_tst-dn-im-se-sw-cr))
+          var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
+            var(
+              --_ctm-mob-dn-im-se-sw-br,
+              var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-im-se-sw-sd,
+              var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-im-se-sw-cr,
+              var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
+            )
         );
       }
     }
     .social__container {
       display: flex;
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       width: 100%;
       height: 100%;
-      gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
-      background-color: var(--_ctm-dn-sl-wt-bd-cr, var(--_tst-dn-sl-wt-bd-cr));
-      border-radius: var(--_ctm-dn-sl-wt-br-rs, var(--_tst-dn-sl-wt-br-rs));
+      gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+      background-color: var(
+        --_ctm-mob-dn-sl-wt-bd-cr,
+        var(--_ctm-tab-dn-sl-wt-bd-cr, var(--_ctm-dn-sl-wt-bd-cr))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-sl-wt-br-rs,
+        var(--_ctm-tab-dn-sl-wt-br-rs, var(--_ctm-dn-sl-wt-br-rs))
+      );
+
       svg {
-        width: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
-        height: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
+        width: var(
+          --_ctm-mob-dn-im-se-in-se,
+          var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se))
+        );
+        height: var(
+          --_ctm-mob-dn-im-se-in-se,
+          var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se))
+        );
 
-        path {
-          stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
-        }
+        // path {
+        //   stroke: var(
+        //     --_ctm-mob-dn-im-se-in-c1,
+        //     var(--_ctm-tab-dn-im-se-in-c1, var(--_ctm-dn-im-se-in-c1))
+        //   );
+        // }
       }
+
       .social__item {
         width: 100%;
         height: 100%;
         flex-wrap: wrap;
         display: flex;
-        gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
-        background-color: var(--_ctm-dn-im-se-bd-cr, var(--_tst-dn-im-se-bd-cr));
-        border-radius: var(--_ctm-dn-im-se-br-rs, var(--_tst-dn-im-se-br-rs));
+        gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));
+        background-color: var(
+          --_ctm-mob-dn-im-se-bd-cr,
+          var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
+        );
+        border-radius: var(
+          --_ctm-mob-dn-im-se-br-rs,
+          var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+        );
       }
+
       .social__text {
-        color: var(--_ctm-dn-im-se-cr, var(--_tst-dn-im-se-cr));
-        font-family: var(--_ctm-dn-im-se-ft-fy, var(--_tst-dn-im-se-ft-fy)), sans-serif;
-        font-size: var(--_ctm-dn-im-se-ft-se, var(--_tst-dn-im-se-ft-se));
-        font-weight: var(--_ctm-dn-im-se-ft-wt, var(--_tst-dn-im-se-ft-wt));
-        font-style: var(--_ctm-dn-im-se-ft-se-ic, var(--_tst-dn-im-se-ft-se-ic));
-        text-align: var(--_ctm-dn-im-se-tt-an, var(--_tst-dn-im-se-tt-an));
-        letter-spacing: var(--_ctm-dn-im-se-lr-sg, var(--_tst-dn-im-se-lr-sg));
-        line-height: var(--_ctm-dn-im-se-le-ht, var(--_tst-dn-im-se-le-ht));
-        text-decoration: var(--_ctm-dn-im-se-lh, var(--_ctm-dn-im-se-ue), var(--_tst-dn-im-se-lh));
+        color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
+        font-family: var(
+            --_ctm-mob-dn-im-se-ft-fy,
+            var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
+          ),
+          sans-serif;
+        font-size: var(
+          --_ctm-mob-dn-im-se-ft-se,
+          var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-im-se-ft-wt,
+          var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
+        );
+        font-style: var(
+          --_ctm-mob-dn-im-se-ft-se-ic,
+          var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-im-se-tt-an,
+          var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-im-se-lr-sg,
+          var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-im-se-le-ht,
+          var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-im-se-lh,
+          var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-lh))
+        );
       }
     }
   }

package/dist/sort.scss

@@ -5,8 +5,17 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="sort"] {
-    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(
+      --_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)));
 
     & > div {
       &.wrapper {

package/dist/stack.scss

@@ -39,11 +39,31 @@ body {
       --_ctm-mob-sta-lt-mn,
       var(--_ctm-tab-sta-lt-mn, var(--_ctm-sta-lt-mn, var(--_ctm-lt-mn)))
     );
-    background: var(
+    // display: var(--_d-grid);
+    background-color: var(
       --_ctm-mob-sta-dn-bd-cr,
       var(--_ctm-tab-sta-dn-bd-cr, var(--_ctm-sta-dn-bd-cr))
     );
-    // display: var(--_d-grid);
+    background-image: var(
+      --_ctm-mob-sta-dn-bd-ie,
+      var(--_ctm-tab-sta-dn-bd-ie, var(--_ctm-sta-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-sta-dn-bd-at,
+      var(--_ctm-tab-sta-dn-bd-at, var(--_ctm-sta-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-sta-dn-bd-pn,
+      var(--_ctm-tab-sta-dn-bd-pn, var(--_ctm-sta-dn-bd-pn))
+    );
+    background-repeat: var(
+      --_ctm-mob-sta-dn-bd-rt,
+      var(--_ctm-tab-sta-dn-bd-rt, var(--_ctm-sta-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-sta-dn-bd-se,
+      var(--_ctm-tab-sta-dn-bd-se, var(--_ctm-sta-dn-bd-se))
+    );
 
     border-color: var(
       --_hide-grid-border,
@@ -99,7 +119,7 @@ body {
         min-height: 10px;
       }
       &.dnhsc {
-        min-height: 100px;
+        min-height: 50px;
       }
       // height: var(--_ctm-sta-lt-ht, 100px);
       // width: var(--_sf-sta-nw-wh, auto);

package/dist/static-text.scss

@@ -10,7 +10,6 @@
 
     & > .wrapper {
       width: 100%;
-      // height: 100%;
 
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));