@sc-360-v2/storefront-cms-library 0.5.23 → 0.5.25

package/dist/line.scss

@@ -1,257 +1,166 @@
-[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;
-      border-top-style: solid;
-    }
-  }
-
-  &[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-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-      // border-top: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
-    }
-    
-    &[data-line-style="solid"] .line__core {
-      border-top-style: solid;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="dotted"] .line__core {
-      border-top-style: dotted;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-      &[data-line-style="dashed"] .line__core {
-      border-top-style: dashed;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-    &[data-line-style="double"] .line__core {
-      border-top-style: double;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="groove"] .line__core {
-      border-top-style: groove;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="ridge"] .line__core {
-      border-top-style: ridge;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="inset"] .line__core {
-      border-top-style: inset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="outset"] .line__core {
-      border-top-style: outset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="none"] .line__core {
-      border-top-style: none;
-    }
-
-    &[data-line-style="hidden"] .line__core {
-      border-top-style: hidden;
-    }
-    &[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-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-      // border-left: var(--_ctm-lt-le-ts) solid var(--_ctm-dn-le-cr-ud);
-    }
-    
-    &[data-line-style="solid"] .line__core {
-      border-left-style: solid;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-    
-    &[data-line-style="dotted"] .line__core {
-      border-left-style: dotted;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-     &[data-line-style="dashed"] .line__core {
-      border-left-style: dashed;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-    &[data-line-style="double"] .line__core {
-     border-left-style: double;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="groove"] .line__core {
-      border-left-style: groove;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="ridge"] .line__core {
-      border-left-style: ridge;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="inset"] .line__core {
-      border-left-style: inset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="outset"] .line__core {
-      border-left-style: outset;
-      border-width: var(--_ctm-lt-le-ts);
-      border-color: var(--_ctm-dn-le-cr-bd-cr);
-    }
-
-    &[data-line-style="none"] .line__core {
-      border-left-style: none;
-    }
-
-    &[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;
-      }
-    }
-  }
-}
+[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;
+      border-top-style: solid;
+    }
+  }
+
+  &[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="solid"] .line__core {
+      border-top-style: solid;
+    }
+
+    &[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="solid"] .line__core {
+      border-left-style: solid;
+    }
+
+    &[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/product-image.scss

@@ -3,7 +3,7 @@
 @use "./functions.scss" as *;
 
 $defaultValues: (
-  --_sf-mgn-wdth-vl: getListOfResponsive(1117px, 340px, 747px),
+  --_sf-mgn-wdth-vl: getListOfResponsive(1117px, 100%, 747px),
   --_sf-mgn-height-vl: getListOfResponsive(1400px, 700px, 1040px),
 );
 
@@ -1701,6 +1701,7 @@ body:has(.pim__main) {
     .pim__img__main {
       width: 100%;
       height: 100%;
+      position: relative;
 
       & > .pim__img__wrapper {
         height: 100%;
@@ -1709,6 +1710,52 @@ body:has(.pim__main) {
       img {
         max-width: 100%;
       }
+      .pim__nav {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: #fff;
+        border: 1px solid #98a2b3;
+        z-index: 2;
+
+        display: var(--_d-flex);
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        svg {
+          width: 16px;
+          height: 16px;
+          path {
+            color: #000;
+          }
+        }
+
+        &.pim__nav--prev {
+          left: 20px;
+        }
+
+        &.pim__nav--next {
+          right: 20px;
+        }
+      }
+
+      .pim__counter {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 4px 12px;
+        border-radius: 16px;
+        background: rgba(0, 0, 0, 0.6);
+        color: #fff;
+        font-size: 13px;
+        line-height: 1.4;
+        z-index: 2;
+      }
     }
   }
 }

package/dist/quantity-selector.scss

@@ -164,6 +164,9 @@
         );
         text-decoration: var(--_ctm-mob-dn-ll-ue, var(--_ctm-tab-dn-ll-ue, var(--_ctm-dn-ll-ue)));
         padding: prepareMediaVariable(--_ctm-dn-ll-pg);
+        text-transform: prepareMediaVariable(--_ctm-dn-ll-tt-tm);
+        word-wrap: prepareMediaVariable(--_ctm-dn-ll-wd-wp);
+        word-break: prepareMediaVariable(--_ctm-dn-ll-wd-bk);
       }
 
       .input {

package/dist/quota-details.scss

@@ -62,7 +62,7 @@
       );
       --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
       row-gap: var(--_sf-gp);
-      width: 100%;
+      width: fit-content;
       height: auto;
       border-color: var(
         --_ctm-mob-dn-wt-se-br-cr,