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

package/dist/product-labels.scss

@@ -4,36 +4,35 @@
 
 [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)))));
+    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 {
+    & > .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;
@@ -42,28 +41,41 @@
       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))));
+      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;
@@ -77,48 +89,48 @@
           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 */
+                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 */
+                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)));
+                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))
+                );
               }
             }
           }
@@ -127,35 +139,55 @@
         .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)));
+          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;
           }
@@ -163,12 +195,10 @@
           &[data-overflow-items="Wrap"] {
             flex-wrap: wrap;
           }
-
           &[data-overflow-items="Scroll"] {
             width: 100%;
             overflow-x: auto;
           }
-
           &[data-overflow-items="Hidden"] {
             overflow-x: hidden;
           }
@@ -176,16 +206,13 @@
           &[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;
@@ -195,7 +222,6 @@
           &[data-overflow-items="Scroll"] {
             overflow-y: auto;
           }
-
           &[data-overflow-items="Hidden"] {
             overflow-y: hidden;
           }
@@ -203,37 +229,32 @@
           &[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));
+          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;
           }
@@ -241,4 +262,4 @@
       }
     }
   }
-}
+}