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

package/dist/product-highlights copy.scss

@@ -1,217 +1,217 @@
-@use "sass:map";
-@use "sass:list";
-
-[data-div-type="element"] {
-  &[data-element-type="productHighlights"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: var(--_sf-nw-wh, var(--_tst-lt-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)))
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-    // height: ;
-    // 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)))
-    // );
-
-    & > .wrapper {
-      width: 100%;
-      // height: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-overflow-items="Scroll"] {
-      .horizontal {
-        width: 100%;
-        overflow-x: auto;
-        .item {
-          width: 100%;
-          flex-shrink: 0;
-        }
-      }
-      .vertical {
-        overflow-y: auto;
-        max-height: 30%;
-      }
-    }
-    .text-element {
-      color: #333;
-      font-family: Lato;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 18px;
-      margin-bottom: 6px;
-    }
-    .highlights__container {
-      background-color: var(
-        --_ctm-mob-dn-wt-se-bd-cr,
-        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
-      );
-
-      border-color: var(
-        --_ctm-mob-dn-wt-se-br-cr,
-        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-wt-se-br-se,
-        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-wt-se-br-wh,
-        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-wt-se-br-rs,
-        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
-          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
-          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
-          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
-      );
-
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      .stacK {
-        display: flex;
-        flex-direction: column;
-        .static {
-          font-size: 14px;
-          color: var(--_gray-700);
-        }
-        .horizontal {
-          display: flex;
-          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
-
-          .item {
-            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
-
-            // border: 1px solid #000;
-            max-width: 65px;
-            img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
-          }
-          &[data-overflow-items="Wrap"] {
-            flex-wrap: wrap;
-            .item {
-              img {
-                object-fit: contain;
-              }
-            }
-          }
-          &[data-overflow-items="Scroll"] {
-            width: 100%;
-            overflow-x: auto;
-            .item {
-              width: 100%;
-            }
-          }
-          &[divider-between-items="true"] {
-            .item {
-              &:not(:last-child) {
-                border-right: 1px solid var(--_gray-400);
-              }
-            }
-          }
-
-          &[items-content-alignement="right"] {
-            justify-content: flex-end;
-          }
-          &[items-content-alignement="left"] {
-            justify-content: flex-start;
-          }
-          &[items-content-alignement="center"] {
-            justify-content: center;
-          }
-        }
-        .vertical {
-          display: flex;
-          flex-direction: column;
-          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
-          .item {
-            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
-
-            // border: 1px solid #000;
-            max-width: 65px;
-            img {
-              width: 100%;
-              height: 100%;
-              object-fit: contain;
-            }
-          }
-          &[data-overflow-items="Scroll"] {
-            overflow-y: auto;
-          }
-          &[divider-between-items="true"] {
-            .item {
-              &:not(:last-child) {
-                border-bottom: 1px solid var(--_gray-400);
-              }
-            }
-          }
-          &[items-content-alignement="right"] {
-            align-items: flex-end;
-          }
-          &[items-content-alignement="left"] {
-            align-items: flex-start;
-          }
-          &[items-content-alignement="center"] {
-            align-items: center;
-          }
-        }
-        .grid {
-          display: grid;
-          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
-          grid-template-columns: repeat(
-            var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
-            minmax(auto, 1fr)
-          );
-
-          &[data-overflow-items="Scroll"] {
-            height: 200px;
-            overflow-y: auto;
-          }
-          .item {
-            height: 65px;
-            width: 100%;
-            border: 1px solid #000;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
-
-            border-right: 1px solid #666;
-            &:nth-child(6n) {
-              border-right: none; /* Remove the border for the last column */
-            }
-            img {
-              max-width: 100%;
-              max-height: 100%;
-              object-fit: contain;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="productHighlights"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-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)))
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    // 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)))
+    // );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    &[data-overflow-items="Scroll"] {
+      .horizontal {
+        width: 100%;
+        overflow-x: auto;
+        .item {
+          width: 100%;
+          flex-shrink: 0;
+        }
+      }
+      .vertical {
+        overflow-y: auto;
+        max-height: 30%;
+      }
+    }
+    .text-element {
+      color: #333;
+      font-family: Lato;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      margin-bottom: 6px;
+    }
+    .highlights__container {
+      background-color: var(
+        --_ctm-mob-dn-wt-se-bd-cr,
+        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
+      );
+
+      border-color: var(
+        --_ctm-mob-dn-wt-se-br-cr,
+        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-wt-se-br-se,
+        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-wt-se-br-wh,
+        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-wt-se-br-rs,
+        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
+          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
+          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
+          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
+      );
+
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      .stacK {
+        display: flex;
+        flex-direction: column;
+        .static {
+          font-size: 14px;
+          color: var(--_gray-700);
+        }
+        .horizontal {
+          display: flex;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
+
+          .item {
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+
+            // border: 1px solid #000;
+            max-width: 65px;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+          &[data-overflow-items="Wrap"] {
+            flex-wrap: wrap;
+            .item {
+              img {
+                object-fit: contain;
+              }
+            }
+          }
+          &[data-overflow-items="Scroll"] {
+            width: 100%;
+            overflow-x: auto;
+            .item {
+              width: 100%;
+            }
+          }
+          &[divider-between-items="true"] {
+            .item {
+              &:not(:last-child) {
+                border-right: 1px solid var(--_gray-400);
+              }
+            }
+          }
+
+          &[items-content-alignement="right"] {
+            justify-content: flex-end;
+          }
+          &[items-content-alignement="left"] {
+            justify-content: flex-start;
+          }
+          &[items-content-alignement="center"] {
+            justify-content: center;
+          }
+        }
+        .vertical {
+          display: flex;
+          flex-direction: column;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+          .item {
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+
+            // border: 1px solid #000;
+            max-width: 65px;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+          &[data-overflow-items="Scroll"] {
+            overflow-y: auto;
+          }
+          &[divider-between-items="true"] {
+            .item {
+              &:not(:last-child) {
+                border-bottom: 1px solid var(--_gray-400);
+              }
+            }
+          }
+          &[items-content-alignement="right"] {
+            align-items: flex-end;
+          }
+          &[items-content-alignement="left"] {
+            align-items: flex-start;
+          }
+          &[items-content-alignement="center"] {
+            align-items: center;
+          }
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
+          grid-template-columns: repeat(
+            var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
+            minmax(auto, 1fr)
+          );
+
+          &[data-overflow-items="Scroll"] {
+            height: 200px;
+            overflow-y: auto;
+          }
+          .item {
+            height: 65px;
+            width: 100%;
+            border: 1px solid #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+
+            border-right: 1px solid #666;
+            &:nth-child(6n) {
+              border-right: none; /* Remove the border for the last column */
+            }
+            img {
+              max-width: 100%;
+              max-height: 100%;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+    }
+  }
+}