@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

package/dist/product-labels.scss

@@ -1,265 +1,265 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-[data-div-type="element"] {
-  &[data-element-type="productLabels"] {
-    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)));
-
-    & > .wrapper {
-      width: 100%;
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-overflow-items="Scroll"] {
-      .horizontal {
-        width: 100%;
-        overflow-x: auto;
-        // Keep label chips at their natural (admin-styled) width; only prevent
-        // them from squishing in a horizontal scroll row.
-        .item {
-          flex-shrink: 0;
-        }
-      }
-      .vertical {
-        overflow-y: auto;
-        max-height: 30%;
-      }
-    }
-    .text-element {
-      color: #333;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 18px;
-      margin-bottom: 6px;
-    }
-    .labels__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)));
-      .stack {
-        display: flex;
-        flex-direction: column;
-        gap: prepareMediaVariable(--_ctm-lt-te-ad-is-sg);
-
-        // Labels are fully styled in the admin Label Builder — this element only
-        // arranges them. The .item is a transparent wrapper so each label chip
-        // renders at its own (admin-designed) size. `position: relative` is kept
-        // for the optional divider pseudo-element below.
-        .item {
-          position: relative;
-          display: inline-flex;
-        }
-        .items__container {
-          &[data-show-divider="true"] {
-            &[data-flex-direction="row"] {
-              // The divider is a pseudo-element and takes no space of its own, so a thick
-              // one grew back over the label beside it — see dividerGapReserve in functions.scss.
-              .item:not(:last-child) {
-                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
-              }
-              .item:not(:last-child)::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                bottom: 0; /* For full height divider */
-                right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
-                width: var(
-                  --_ctm-mob-dn-wt-se-dr-wt,
-                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-                ); /* Divider thickness */
-                background-color: var(
-                  --_ctm-mob-dn-wt-se-dr-cr,
-                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-                ); /* Divider color */
-              }
-            }
-            &[data-flex-direction="column"] {
-              .item:not(:last-child) {
-                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
-              }
-              .item:not(:last-child)::before {
-                content: "";
-                position: absolute;
-                left: 0;
-                right: 0;
-                bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
-                height: var(
-                  --_ctm-mob-dn-wt-se-dr-wt,
-                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-                );
-                background-color: var(
-                  --_ctm-mob-dn-wt-se-dr-cr,
-                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-                );
-              }
-            }
-          }
-        }
-
-        .title {
-          white-space: nowrap;
-          color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
-          font-family: var(
-            --_ctm-mob-dn-wt-se-ft-fy,
-            var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-wt-se-tt-tm,
-            var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-wt-se-wd-wp,
-            var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
-          );
-          word-break: var(
-            --_ctm-mob-dn-wt-se-wd-bk,
-            var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
-          );
-          font-size: var(
-            --_ctm-mob-dn-wt-se-ft-se,
-            var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-wt-se-ft-wt,
-            var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
-          );
-          font-style: var(
-            --_ctm-mob-dn-wt-se-ft-se-ic,
-            var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-wt-se-tt-an,
-            var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-wt-se-lr-sg,
-            var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
-          );
-          line-height: var(
-            --_ctm-mob-dn-wt-se-le-ht,
-            var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-wt-se-ue,
-            var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
-          );
-          padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
-        }
-        .horizontal {
-          display: flex;
-          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
-          .item {
-            flex-shrink: 0;
-          }
-
-          &[data-overflow-items="Wrap"] {
-            flex-wrap: wrap;
-          }
-          &[data-overflow-items="Scroll"] {
-            width: 100%;
-            overflow-x: auto;
-          }
-          &[data-overflow-items="Hidden"] {
-            overflow-x: hidden;
-          }
-
-          &[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)));
-          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
-
-          &[data-overflow-items="Scroll"] {
-            overflow-y: auto;
-          }
-          &[data-overflow-items="Hidden"] {
-            overflow-y: hidden;
-          }
-
-          &[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)
-          );
-          // Keep admin-styled chips at their natural size instead of stretching
-          // them to fill the grid cell.
-          justify-items: start;
-          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
-          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
-          &[data-overflow-items="Scroll"] {
-            overflow-y: auto;
-          }
-          &[data-overflow-items="Hidden"] {
-            overflow-y: hidden;
-          }
-          margin: 0px;
-          .item {
-            width: auto;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+[data-div-type="element"] {
+  &[data-element-type="productLabels"] {
+    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)));
+
+    & > .wrapper {
+      width: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    &[data-overflow-items="Scroll"] {
+      .horizontal {
+        width: 100%;
+        overflow-x: auto;
+        // Keep label chips at their natural (admin-styled) width; only prevent
+        // them from squishing in a horizontal scroll row.
+        .item {
+          flex-shrink: 0;
+        }
+      }
+      .vertical {
+        overflow-y: auto;
+        max-height: 30%;
+      }
+    }
+    .text-element {
+      color: #333;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      margin-bottom: 6px;
+    }
+    .labels__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)));
+      .stack {
+        display: flex;
+        flex-direction: column;
+        gap: prepareMediaVariable(--_ctm-lt-te-ad-is-sg);
+
+        // Labels are fully styled in the admin Label Builder — this element only
+        // arranges them. The .item is a transparent wrapper so each label chip
+        // renders at its own (admin-designed) size. `position: relative` is kept
+        // for the optional divider pseudo-element below.
+        .item {
+          position: relative;
+          display: inline-flex;
+        }
+        .items__container {
+          &[data-show-divider="true"] {
+            &[data-flex-direction="row"] {
+              // The divider is a pseudo-element and takes no space of its own, so a thick
+              // one grew back over the label beside it — see dividerGapReserve in functions.scss.
+              .item:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
+              }
+              .item:not(:last-child)::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                bottom: 0; /* For full height divider */
+                right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
+                width: var(
+                  --_ctm-mob-dn-wt-se-dr-wt,
+                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+                ); /* Divider thickness */
+                background-color: var(
+                  --_ctm-mob-dn-wt-se-dr-cr,
+                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+                ); /* Divider color */
+              }
+            }
+            &[data-flex-direction="column"] {
+              .item:not(:last-child) {
+                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
+              }
+              .item:not(:last-child)::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
+                height: var(
+                  --_ctm-mob-dn-wt-se-dr-wt,
+                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+                );
+                background-color: var(
+                  --_ctm-mob-dn-wt-se-dr-cr,
+                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+                );
+              }
+            }
+          }
+        }
+
+        .title {
+          white-space: nowrap;
+          color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
+          font-family: var(
+            --_ctm-mob-dn-wt-se-ft-fy,
+            var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
+          );
+          text-transform: var(
+            --_ctm-mob-dn-wt-se-tt-tm,
+            var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-wt-se-wd-wp,
+            var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-wt-se-wd-bk,
+            var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
+          );
+          font-size: var(
+            --_ctm-mob-dn-wt-se-ft-se,
+            var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-wt-se-ft-wt,
+            var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-wt-se-ft-se-ic,
+            var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-wt-se-tt-an,
+            var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-wt-se-lr-sg,
+            var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-wt-se-le-ht,
+            var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-wt-se-ue,
+            var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
+          );
+          padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
+        }
+        .horizontal {
+          display: flex;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
+          .item {
+            flex-shrink: 0;
+          }
+
+          &[data-overflow-items="Wrap"] {
+            flex-wrap: wrap;
+          }
+          &[data-overflow-items="Scroll"] {
+            width: 100%;
+            overflow-x: auto;
+          }
+          &[data-overflow-items="Hidden"] {
+            overflow-x: hidden;
+          }
+
+          &[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)));
+          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
+
+          &[data-overflow-items="Scroll"] {
+            overflow-y: auto;
+          }
+          &[data-overflow-items="Hidden"] {
+            overflow-y: hidden;
+          }
+
+          &[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)
+          );
+          // Keep admin-styled chips at their natural size instead of stretching
+          // them to fill the grid cell.
+          justify-items: start;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
+          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
+          &[data-overflow-items="Scroll"] {
+            overflow-y: auto;
+          }
+          &[data-overflow-items="Hidden"] {
+            overflow-y: hidden;
+          }
+          margin: 0px;
+          .item {
+            width: auto;
+          }
+        }
+      }
+    }
+  }
+}