@sc-360-v2/storefront-cms-library 0.5.72 → 0.5.73

package/dist/scroll.scss

@@ -7,16 +7,12 @@ $max-items: 20;
 [data-div-type="element"] {
   &[data-element-type="scroll"] {
     // 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)))
-      )
-    );
+    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)));
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
-    & > .wrapper {
+    &>.wrapper {
       width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
       // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
 
@@ -33,154 +29,93 @@ $max-items: 20;
       // The wrapper clips (`overflow: hidden`), so it needs the same radius or its
       // square clip cuts the container's rounded corners back off — and the shadow
       // below, which is painted here, then follows the rounded shape too.
-      border-radius: var(
-        --_ctm-mob-dn-sl-cr-br-rs,
-        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
-      );
+      border-radius: var(--_ctm-mob-dn-sl-cr-br-rs,
+          var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs)));
 
       &[data-widget-shadow="true"] {
-        box-shadow: var(
-            --_ctm-mob-dn-sl-cr-sw-ae,
-            var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))
-          )
-          var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br)))
-          var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd)))
-          var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
+        box-shadow: var(--_ctm-mob-dn-sl-cr-sw-ae,
+            var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))) var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br))) var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd))) var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
       }
 
       // .scroll__container {
       @for $i from 1 through $max-items {
         .scroll-item[data-index="i#{$i}"] {
           display: flex;
-          padding: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-pg,
-            #{prepareMediaVariable(--_ctm-dn-i1-pg)}
-          );
-          gap: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-im-gp,
-            #{prepareMediaVariable(--_ctm-dn-i1-im-gp)}
-          );
-          background-color: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-bd-cr,
-            #{prepareMediaVariable(--_ctm-dn-i1-bd-cr)}
-          );
-          border-color: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-cr,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-cr)}
-          );
-          border-style: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-se,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-se)}
-          );
-          border-width: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-wh,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-wh)}
-          );
-          border-radius: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-br-rs,
-            #{prepareMediaVariable(--_ctm-dn-i1-br-rs)}
-          );
+          padding: prepareMediaVariable(--_ctm-dn-i#{$i}-pg,
+            #{prepareMediaVariable(--_ctm-dn-i1-pg)});
+          gap: prepareMediaVariable(--_ctm-dn-i#{$i}-im-gp,
+            #{prepareMediaVariable(--_ctm-dn-i1-im-gp)});
+          background-color: prepareMediaVariable(--_ctm-dn-i#{$i}-bd-cr,
+            #{prepareMediaVariable(--_ctm-dn-i1-bd-cr)});
+          border-color: prepareMediaVariable(--_ctm-dn-i#{$i}-br-cr,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-cr)});
+          border-style: prepareMediaVariable(--_ctm-dn-i#{$i}-br-se,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-se)});
+          border-width: prepareMediaVariable(--_ctm-dn-i#{$i}-br-wh,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-wh)});
+          border-radius: prepareMediaVariable(--_ctm-dn-i#{$i}-br-rs,
+            #{prepareMediaVariable(--_ctm-dn-i1-br-rs)});
           // Each item's schema has carried showShadow/shadowColor/angle/spread/blur all
           // along, but nothing ever read them — the only box-shadow declarations in this
           // file were the container's. `--_show-item-shadow` is set to `none` by the
           // item's own Show Shadow switch below.
-          box-shadow: var(
-            --_show-item-shadow,
-            prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-ae,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-ae)}
-              )
-              prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-br,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-br)}
-              )
-              prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-sd,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-sd)}
-              )
-              prepareMediaVariable(
-                --_ctm-dn-i#{$i}-sw-cr,
-                #{prepareMediaVariable(--_ctm-dn-i1-sw-cr)}
-              )
-          );
+          box-shadow: var(--_show-item-shadow,
+            prepareMediaVariable(--_ctm-dn-i#{$i}-sw-ae,
+              #{prepareMediaVariable(--_ctm-dn-i1-sw-ae)}) prepareMediaVariable(--_ctm-dn-i#{$i}-sw-br,
+              #{prepareMediaVariable(--_ctm-dn-i1-sw-br)}) prepareMediaVariable(--_ctm-dn-i#{$i}-sw-sd,
+              #{prepareMediaVariable(--_ctm-dn-i1-sw-sd)}) prepareMediaVariable(--_ctm-dn-i#{$i}-sw-cr,
+              #{prepareMediaVariable(--_ctm-dn-i1-sw-cr)}));
+
           &[data-item-shadow="false"] {
             --_show-item-shadow: none;
           }
-          color: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-cr,
-            #{prepareMediaVariable(--_ctm-dn-i1-cr)}
-          );
-          font-family: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-fy,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-fy)}
-          );
+
+          color: prepareMediaVariable(--_ctm-dn-i#{$i}-cr,
+            #{prepareMediaVariable(--_ctm-dn-i1-cr)});
+          font-family: prepareMediaVariable(--_ctm-dn-i#{$i}-ft-fy,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-fy)});
+
           &.flex__overflow {
             white-space: normal;
             @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
           }
-          font-size: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-se,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-se)}
-          );
-          font-weight: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-wt,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-wt)}
-          );
-          font-style: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ft-se-ic,
-            #{prepareMediaVariable(--_ctm-dn-i1-ft-se-ic)}
-          );
-          text-align: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-tt-an,
-            #{prepareMediaVariable(--_ctm-dn-i1-tt-an)}
-          );
-          letter-spacing: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-lr-sg,
-            #{prepareMediaVariable(--_ctm-dn-i1-lr-sg)}
-          );
-          line-height: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-le-ht,
-            #{prepareMediaVariable(--_ctm-dn-i1-le-ht)}
-          );
-          text-decoration: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-ue,
-            #{prepareMediaVariable(--_ctm-dn-i1-ue)}
-          );
+
+          font-size: prepareMediaVariable(--_ctm-dn-i#{$i}-ft-se,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-se)});
+          font-weight: prepareMediaVariable(--_ctm-dn-i#{$i}-ft-wt,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-wt)});
+          font-style: prepareMediaVariable(--_ctm-dn-i#{$i}-ft-se-ic,
+            #{prepareMediaVariable(--_ctm-dn-i1-ft-se-ic)});
+          text-align: prepareMediaVariable(--_ctm-dn-i#{$i}-tt-an,
+            #{prepareMediaVariable(--_ctm-dn-i1-tt-an)});
+          letter-spacing: prepareMediaVariable(--_ctm-dn-i#{$i}-lr-sg,
+            #{prepareMediaVariable(--_ctm-dn-i1-lr-sg)});
+          line-height: prepareMediaVariable(--_ctm-dn-i#{$i}-le-ht,
+            #{prepareMediaVariable(--_ctm-dn-i1-le-ht)});
+          text-decoration: prepareMediaVariable(--_ctm-dn-i#{$i}-ue,
+            #{prepareMediaVariable(--_ctm-dn-i1-ue)});
           // All three inherit, so setting them on the item is enough for the text node
           // (and the `.scroll-item__text` span the clamp uses) to pick them up.
-          text-transform: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-tt-tm,
-            #{prepareMediaVariable(--_ctm-dn-i1-tt-tm)}
-          );
-          word-wrap: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-wd-wr,
-            #{prepareMediaVariable(--_ctm-dn-i1-wd-wr)}
-          );
-          word-break: prepareMediaVariable(
-            --_ctm-dn-i#{$i}-wd-bk,
-            #{prepareMediaVariable(--_ctm-dn-i1-wd-bk)}
-          );
+          text-transform: prepareMediaVariable(--_ctm-dn-i#{$i}-tt-tm,
+            #{prepareMediaVariable(--_ctm-dn-i1-tt-tm)});
+          word-wrap: prepareMediaVariable(--_ctm-dn-i#{$i}-wd-wr,
+            #{prepareMediaVariable(--_ctm-dn-i1-wd-wr)});
+          word-break: prepareMediaVariable(--_ctm-dn-i#{$i}-wd-bk,
+            #{prepareMediaVariable(--_ctm-dn-i1-wd-bk)});
 
           .icon {
             svg {
-              width: prepareMediaVariable(
-                --_ctm-dn-i#{$i}-in-se,
-                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
-              );
-              height: prepareMediaVariable(
-                --_ctm-dn-i#{$i}-in-se,
-                #{prepareMediaVariable(--_ctm-dn-i1-in-se)}
-              );
+              width: prepareMediaVariable(--_ctm-dn-i#{$i}-in-se,
+                #{prepareMediaVariable(--_ctm-dn-i1-in-se)});
+              height: prepareMediaVariable(--_ctm-dn-i#{$i}-in-se,
+                #{prepareMediaVariable(--_ctm-dn-i1-in-se)});
+
               path {
-                stroke: prepareMediaVariable(
-                  --_ctm-dn-i#{$i}-in-c1,
-                  #{prepareMediaVariable(--_ctm-dn-i1-in-c1)}
-                );
+                stroke: prepareMediaVariable(--_ctm-dn-i#{$i}-in-c1,
+                  #{prepareMediaVariable(--_ctm-dn-i1-in-c1)});
                 // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(
-                  --_ctm-dn-i#{$i}-se-wh,
-                  #{prepareMediaVariable(--_ctm-dn-i1-se-wh)}
-                );
+                stroke-width: prepareMediaVariable(--_ctm-dn-i#{$i}-se-wh,
+                  #{prepareMediaVariable(--_ctm-dn-i1-se-wh)});
               }
             }
           }
@@ -257,12 +192,15 @@ $max-items: 20;
       &[data-scroll-speed="0.5x"] .scrolling {
         animation-duration: 40s;
       }
+
       &[data-scroll-speed="1x"] .scrolling {
         animation-duration: 20s;
       }
+
       &[data-scroll-speed="2x"] .scrolling {
         animation-duration: 10s;
       }
+
       &[data-scroll-speed="4x"] .scrolling {
         animation-duration: 5s;
       }
@@ -270,6 +208,7 @@ $max-items: 20;
       &[data-repeat-elements="true"] .scrolling {
         animation-iteration-count: infinite;
       }
+
       &[data-repeat-elements="false"] .scrolling {
         animation-iteration-count: 1;
       }
@@ -285,24 +224,18 @@ $max-items: 20;
     // These were previously written as `&[data-widget-shadow=...]`, which targets the
     // element root, but the attribute is emitted on `.wrapper` (unlike
     // `data-widget-border`, which is on the root) — so neither rule ever matched.
-    & > .wrapper[data-widget-shadow="false"] {
+    &>.wrapper[data-widget-shadow="false"] {
       box-shadow: none;
     }
 
     &[data-widget-border="true"] {
       .scroll__container {
-        border-color: var(
-          --_ctm-mob-dn-sl-cr-br-cr,
-          var(--_ctm-tab-dn-sl-cr-br-cr, var(--_ctm-dn-sl-cr-br-cr))
-        );
-        border-style: var(
-          --_ctm-mob-dn-sl-cr-br-se,
-          var(--_ctm-tab-dn-sl-cr-br-se, var(--_ctm-dn-sl-cr-br-se))
-        );
-        border-width: var(
-          --_ctm-mob-dn-sl-cr-br-wh,
-          var(--_ctm-tab-dn-sl-cr-br-wh, var(--_ctm-dn-sl-cr-br-wh))
-        );
+        border-color: var(--_ctm-mob-dn-sl-cr-br-cr,
+            var(--_ctm-tab-dn-sl-cr-br-cr, var(--_ctm-dn-sl-cr-br-cr)));
+        border-style: var(--_ctm-mob-dn-sl-cr-br-se,
+            var(--_ctm-tab-dn-sl-cr-br-se, var(--_ctm-dn-sl-cr-br-se)));
+        border-width: var(--_ctm-mob-dn-sl-cr-br-wh,
+            var(--_ctm-tab-dn-sl-cr-br-wh, var(--_ctm-dn-sl-cr-br-wh)));
       }
     }
 
@@ -316,14 +249,10 @@ $max-items: 20;
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      background-color: var(
-        --_ctm-mob-dn-sl-cr-bd-cr,
-        var(--_ctm-tab-dn-sl-cr-bd-cr, var(--_ctm-dn-sl-cr-bd-cr))
-      );
-      border-radius: var(
-        --_ctm-mob-dn-sl-cr-br-rs,
-        var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
-      );
+      background-color: var(--_ctm-mob-dn-sl-cr-bd-cr,
+          var(--_ctm-tab-dn-sl-cr-bd-cr, var(--_ctm-dn-sl-cr-bd-cr)));
+      border-radius: var(--_ctm-mob-dn-sl-cr-br-rs,
+          var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs)));
 
       .scrolling {
         display: flex;
@@ -348,26 +277,18 @@ $max-items: 20;
       }
 
       .divider {
-        background-color: var(
-          --_ctm-mob-dn-dr-se-bd-cr,
-          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
-        );
+        background-color: var(--_ctm-mob-dn-dr-se-bd-cr,
+            var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr)));
         padding: 3px;
-        font-size: var(
-          --_ctm-mob-dn-dr-se-se,
-          var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se))
-        );
-        color: var(
-          --_ctm-mob-dn-dr-se-dr-cr,
-          var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
-        );
+        font-size: var(--_ctm-mob-dn-dr-se-se,
+            var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
+        color: var(--_ctm-mob-dn-dr-se-dr-cr,
+            var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr)));
       }
 
       .icon {
-        background-color: var(
-          --_ctm-mob-dn-dr-se-bd-cr,
-          var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
-        );
+        background-color: var(--_ctm-mob-dn-dr-se-bd-cr,
+            var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr)));
         padding: 3px;
 
         svg {
@@ -375,10 +296,8 @@ $max-items: 20;
           height: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
 
           path {
-            stroke: var(
-              --_ctm-mob-dn-dr-se-dr-cr,
-              var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
-            );
+            stroke: var(--_ctm-mob-dn-dr-se-dr-cr,
+                var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr)));
           }
         }
       }
@@ -388,7 +307,7 @@ $max-items: 20;
       // declaring this in the block above would let the divider's setting retune every
       // item icon too. The value overrides the stroke-width baked into the icon markup;
       // 1.25 matches the schema default.
-      > .scrolling > .icon svg path {
+      >.scrolling>.icon svg path {
         stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
       }
 
@@ -396,6 +315,7 @@ $max-items: 20;
         0% {
           transform: translateX(0);
         }
+
         100% {
           transform: translateX(var(--_marquee-tx, -50%));
         }
@@ -405,10 +325,11 @@ $max-items: 20;
         0% {
           transform: translateY(0);
         }
+
         100% {
           transform: translateY(var(--_marquee-ty, -50%));
         }
       }
     }
   }
-}
+}