@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/icon-list.scss

@@ -9,50 +9,36 @@ $textContaner: "flex__ili__container";
 $desc: "flex__ili__description";
 $overflowSelector: ".flex__overflow";
 $pos2: (
-  hrz: (
-    keys: (
-      0: inline,
-      after: (
-        top: 0,
+  hrz: (keys: (0: inline,
+      after: (top: 0,
         right: 0,
         height: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
         width: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
       ),
     ),
-    after: (
-      start: (
-        top: 0px,
+    after: (start: (top: 0px,
       ),
-      center: (
-        top: 50%,
+      center: (top: 50%,
         transform: translateY(-50%),
       ),
-      end: (
-        top: auto,
+      end: (top: auto,
         bottom: 0,
       ),
     ),
   ),
-  vtl: (
-    keys: (
-      0: block,
-      after: (
-        bottom: 0,
+  vtl: (keys: (0: block,
+      after: (bottom: 0,
         left: 0,
         width: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
         height: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
       ),
     ),
-    after: (
-      start: (
-        left: 0px,
+    after: (start: (left: 0px,
       ),
-      center: (
-        left: 50%,
+      center: (left: 50%,
         transform: translateX(-50%),
       ),
-      end: (
-        left: auto,
+      end: (left: auto,
         right: 0,
       ),
     ),
@@ -61,7 +47,7 @@ $pos2: (
 
 [data-div-type="element"] {
   &[data-element-type="icon-list"] {
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // gap: prepareMediaVariable(--_ctm-lt-im-gp);
       row-gap: prepareMediaVariable(--_ctm-lt-rw-gp, 0px);
@@ -95,13 +81,12 @@ $pos2: (
       background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
 
       &[data-show-boxshadow="true"] {
-        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae)
-          prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd)
-          prepareMediaVariable(--_ctm-dn-lt-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae) prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd) prepareMediaVariable(--_ctm-dn-lt-sw-cr);
       }
 
       &[data-show-divider="true"] {
-        & > .#{$item} {
+        &>.#{$item} {
+
           // &:not(:last-of-type)
           &:not(:last-child) {
             position: var(--_p-relative);
@@ -117,9 +102,7 @@ $pos2: (
                 //   #{prepareMediaVariable(--_ctm-lt-im-gp)} +
                 //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
                 // );
-                padding-#{map.get($keys, 0)}-end: calc(
-                  #{var(--_ctm-custom-lt-im-gp)} + #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
-                );
+                padding-#{map.get($keys, 0)}-end: calc(#{var(--_ctm-custom-lt-im-gp)} + #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)});
 
                 @each $k, $v in $afterKeys {
                   &::after {
@@ -149,7 +132,7 @@ $pos2: (
         }
       }
 
-      & > .#{$item} {
+      &>.#{$item} {
         display: var(--_d-flex);
         gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px));
 
@@ -173,12 +156,12 @@ $pos2: (
           --_txt-ht-wd-bk: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-wd-bk)};
         }
 
-        & > span {
+        &>span {
           &.#{$icon} {
             display: var(--_d-flex);
             align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));
 
-            & > svg {
+            &>svg {
               width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
               height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
 
@@ -191,7 +174,7 @@ $pos2: (
           }
         }
 
-        & > div {
+        &>div {
           &.#{$textContaner} {
             display: var(--_d-flex);
             flex-grow: 1;
@@ -205,13 +188,8 @@ $pos2: (
               //   #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
               //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
               // );
-              margin-inline-start: calc(
-                var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)) +
-                  var(
-                    --_ctm-mob-dn-tt-cr-dr-wt,
-                    var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
-                  )
-              );
+              margin-inline-start: calc(var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)) + var(--_ctm-mob-dn-tt-cr-dr-wt,
+                    var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))));
               position: relative;
 
               @each $key, $value in map.get(map.get($pos2, hrz), after) {
@@ -235,22 +213,16 @@ $pos2: (
                 //         #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
                 //     )
                 // );
-                left: calc(
-                  calc(
-                      -1 *
-                        var(
-                          --_ctm-mob-dn-tt-cr-dr-wt,
-                          var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))
-                        )
-                    ) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px))
-                );
+                left: calc(calc(-1 * var(--_ctm-mob-dn-tt-cr-dr-wt,
+                        var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit)))) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)));
                 width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
                 height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
                 border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
               }
             }
 
-            & > .#{$text} {
+            &>.#{$text} {
+
               &,
               * {
                 font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
@@ -262,10 +234,8 @@ $pos2: (
                 text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
                 letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
                 line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
-                text-transform: var(
-                  --_txt-ht-tt-tm,
-                  prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-tm)
-                );
+                text-transform: var(--_txt-ht-tt-tm,
+                    prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-tm));
                 word-wrap: var(--_txt-ht-wd-wp, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
                 word-break: var(--_txt-ht-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-bk));
               }
@@ -275,10 +245,14 @@ $pos2: (
               }
             }
 
-            & > .#{$desc} {
+            &>.#{$desc} {
+
               &,
               * {
                 font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
+                text-transform: prepareMediaVariable(--_ctm-dn-dn-tt-tm);
+                word-wrap: prepareMediaVariable(--_ctm-dn-dn-wd-wp);
+                word-break: prepareMediaVariable(--_ctm-dn-dn-wd-bk);
                 font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
                 color: prepareMediaVariable(--_ctm-dn-dn-cr);
                 font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
@@ -306,4 +280,4 @@ $pos2: (
       }
     }
   }
-}
+}

package/dist/image-for-product.scss

@@ -1,21 +1,21 @@
-.product_img {
-  // background-color: var(--_base-white);
-  border-radius: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // border: 1px solid var(--_gray-200);
-  overflow: hidden;
-  img {
-    max-height: 100%;
-    object-fit: contain;
-    // padding: 4px;
-  }
-  .no_image {
-    padding: 16px;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
+.product_img {
+  // background-color: var(--_base-white);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid var(--_gray-200);
+  overflow: hidden;
+  img {
+    max-height: 100%;
+    object-fit: contain;
+    // padding: 4px;
+  }
+  .no_image {
+    padding: 16px;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/dist/image-temp.scss

@@ -8,6 +8,7 @@ $fullViewOn: '[data-view-state="full"]';
 $isFlexboxElementChild: ".flx > .wrapper > *";
 
 [data-div-type="element"] {
+
   &[data-element-type="image"],
   &[data-element-type="brandImage"],
   &[data-element-type="categoryImage"],
@@ -15,6 +16,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     &:has(a) {
       cursor: pointer;
     }
+
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
@@ -31,38 +33,37 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
       // overflow: clip;
       overflow: visible;
 
-      & > .wrapper {
+      &>.wrapper {
         visibility: hidden;
         opacity: 0;
       }
     }
+
     // width: prepareMediaVariable(--_ctm-lt-wh);
     &:not(#{$resizerOn}, #{$dndOn}, #{$fullViewOn}) {
       height: prepareMediaVariable(--_ctm-lt-ht) !important;
     }
+
     // &:not([data-element-type="image"]) {
     // }
 
-    --_aspect-ratio: calc(
-      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)))
-        )
-    );
+    --_aspect-ratio: calc(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)))));
 
     &#{$fullViewOn} {
       &:not(#{$isFlexboxElementChild}) {
         aspect-ratio: 1/0.01;
       }
-      & > .wrapper {
+
+      &>.wrapper {
         // The element trades its fixed height for an aspect-ratio here, so the
         // wrapper cannot keep tracking --_ctm-lt-ht.
         height: 100%;
-        & > div {
+
+        &>div {
           height: 100%;
         }
       }
+
       img {
         height: 100%;
         object-fit: cover;
@@ -72,6 +73,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     &[data-cms-element-resizer="true"] {
       // height: var(--_ctm-lt-ht);
       width: auto;
+
       img {
         // width: 100%;
         height: 100%;
@@ -79,12 +81,12 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     }
 
     :is(:not([data-iframe-body="true"] *)) {
-      & > .wrapper {
+      &>.wrapper {
         overflow: clip;
       }
     }
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // Padding, border and shadow below are painted on this box, so it has to
       // match the element instead of sizing to the image. Without a definite
@@ -105,13 +107,8 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
         border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
         border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-        box-shadow: var(
-          --_show-shadow,
-          var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
-            var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
-            var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
-            var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
-        );
+        box-shadow: var(--_show-shadow,
+            var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
         // &[data-show-shadow] {
         // }
 
@@ -121,9 +118,11 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         overflow: hidden;
       }
     }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     // .text-element {
     //   // background: #6d96e4;
     //   // padding: 10px;
@@ -172,6 +171,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         &[data-on-hover="Zoom Out"] {
           transform: scale(0.9998);
         }
+
         &[data-on-hover="Zoom In"] {
           transform: scale(1.08);
         }
@@ -181,8 +181,9 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
     .image__fallback__contain {
       object-fit: contain !important;
     }
+
     // .image-element:hover {
     //   padding: 30px;
     // }
   }
-}
+}

package/dist/item-stock.scss

@@ -4,22 +4,15 @@
 
 [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)))
-          )
-      )
-    );
+    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 {
+    &>.wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -32,10 +25,15 @@
       align-items: center;
       cursor: pointer;
       gap: 8px;
+
       .item__stock__heading {
         position: relative;
+
         .item__stock__text {
           font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
+          text-transform: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-tm);
+          word-wrap: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-wp);
+          word-break: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-bk);
           font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
           color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
           font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
@@ -45,6 +43,7 @@
           letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
           line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
         }
+
         .stock_message_conatainer {
           display: flex;
           padding: 2px 8px 2px 6px;
@@ -56,13 +55,13 @@
           border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd) prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
 
           .stock_messages {
             font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-bk);
             font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
             color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
@@ -84,4 +83,4 @@
       --_show-shadow: none;
     }
   }
-}
+}