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

package/dist/scroll.scss

@@ -7,12 +7,16 @@ $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)));
 
@@ -29,91 +33,154 @@ $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-i1-se-wh, 1.25);
+                stroke-width: prepareMediaVariable(
+                  --_ctm-dn-i#{$i}-se-wh,
+                  #{prepareMediaVariable(--_ctm-dn-i1-se-wh)}
+                );
               }
             }
           }
@@ -144,11 +211,29 @@ $max-items: 20;
 
         .scrolling {
           flex-direction: column;
+          // Full width so the items have room to sit left, centre or right inside the
+          // container. Left to size itself, the track is only as wide as its widest
+          // item and Horizontal Alignment would have no space to move anything in.
+          width: 100%;
           animation-name: marquee-vertical;
           padding-right: 0;
           padding-bottom: 10px;
         }
 
+        // Horizontal Alignment. The track is a column here, so its cross axis is the
+        // horizontal one and `align-items` is what places the items across it.
+        &[data-horizontal-alignment="left"] .scrolling {
+          align-items: flex-start;
+        }
+
+        &[data-horizontal-alignment="center"] .scrolling {
+          align-items: center;
+        }
+
+        &[data-horizontal-alignment="right"] .scrolling {
+          align-items: flex-end;
+        }
+
         // The container is sized with `min-height`, which is right for a row (content
         // never exceeds it) but wrong for a column: the stack would simply grow the box,
         // nothing would overflow, and the marquee would look frozen. Pin the height.
@@ -172,15 +257,12 @@ $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;
       }
@@ -188,7 +270,6 @@ $max-items: 20;
       &[data-repeat-elements="true"] .scrolling {
         animation-iteration-count: infinite;
       }
-
       &[data-repeat-elements="false"] .scrolling {
         animation-iteration-count: 1;
       }
@@ -204,18 +285,24 @@ $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))
+        );
       }
     }
 
@@ -229,10 +316,14 @@ $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;
@@ -257,18 +348,26 @@ $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 {
@@ -276,17 +375,27 @@ $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))
+            );
           }
         }
       }
 
+      // Divider Style > Stroke Width. Scoped to the dividers, which sit as direct
+      // children of the track — the items' own icons carry the same `.icon` class, so
+      // 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 {
+        stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
+      }
+
       @keyframes marquee {
         0% {
           transform: translateX(0);
         }
-
         100% {
           transform: translateX(var(--_marquee-tx, -50%));
         }
@@ -296,11 +405,10 @@ $max-items: 20;
         0% {
           transform: translateY(0);
         }
-
         100% {
           transform: translateY(var(--_marquee-ty, -50%));
         }
       }
     }
   }
-}
+}