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

package/dist/layouter.scss

@@ -4,50 +4,112 @@
 @use "./repeater-embla-controls.scss" as *;
 $childItemSelector: '[data-element-type="layouter-item"]';
 $sliderControlDragging: "[flex-slider-control-moving='true']";
-
 [data-div-type="element"] {
   &[data-element-type="layouter"] {
     // width: var(--_sf-con-nw-wh);
     // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: calc(1% * var(--_ctm-mob-lay-ele-nw-wh-vl,
-          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))));
+    width: calc(
+      1% *
+        var(
+          --_ctm-mob-lay-ele-nw-wh-vl,
+          var(--_ctm-tab-lay-ele-nw-wh-vl, var(--_ctm-lay-ele-nw-wh-vl, auto))
+        )
+    );
     // width: 100%;
     // height: var(--_ctm-con-lt-ht);
-    margin: var(--_ctm-mob-lay-lt-mn,
-        var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn)))));
-
+    margin: var(
+      --_ctm-mob-lay-lt-mn,
+      var(--_ctm-tab-lay-lt-mn, var(--_ctm-lay-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
+    );
+
+    // Widget Style (design.widgetStyle). The `wt-se` segment arrived when these moved
+    // off the Design tab root into their own accordion; the plain `dn-` name is kept as
+    // the fallback so pages published before the move keep their background, border,
+    // radius and shadow.
     &[data-background-type="color"] {
-      background-color: prepareMediaVariable(--_ctm-lay-dn-bd-cr);
+      background-color: prepareMediaVariable(
+        --_ctm-lay-dn-wt-se-bd-cr,
+        prepareMediaVariable(--_ctm-lay-dn-bd-cr)
+      );
     }
 
     &[data-background-type="gradient"] {
-      --_sf-lay-gradient-angle: calc(#{prepareMediaVariable(--_ctm-lay-dn-gt-ae, 90)} * 1deg);
-      --_sf-lay-gradient-start-color: #{prepareMediaVariable(--_ctm-lay-dn-gt-st-cr, transparent)};
-      --_sf-lay-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-lay-dn-gt-st-pn, 0)} * 1%);
-      --_sf-lay-gradient-end-color: #{prepareMediaVariable(--_ctm-lay-dn-gt-ed-cr, transparent)};
-      --_sf-lay-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-lay-dn-gt-ed-pn, 100)} * 1%);
-      --_sf-lay-gradient-position: #{prepareMediaVariable(--_ctm-lay-dn-gt-pn, center)};
+      --_sf-lay-gradient-angle: calc(
+        #{prepareMediaVariable(
+            --_ctm-lay-dn-wt-se-gt-ae,
+            prepareMediaVariable(--_ctm-lay-dn-gt-ae, 90)
+          )} *
+          1deg
+      );
+      --_sf-lay-gradient-start-color: #{prepareMediaVariable(
+          --_ctm-lay-dn-wt-se-gt-st-cr,
+          prepareMediaVariable(--_ctm-lay-dn-gt-st-cr, transparent)
+        )};
+      --_sf-lay-gradient-start-position: calc(
+        #{prepareMediaVariable(
+            --_ctm-lay-dn-wt-se-gt-st-pn,
+            prepareMediaVariable(--_ctm-lay-dn-gt-st-pn, 0)
+          )} *
+          1%
+      );
+      --_sf-lay-gradient-end-color: #{prepareMediaVariable(
+          --_ctm-lay-dn-wt-se-gt-ed-cr,
+          prepareMediaVariable(--_ctm-lay-dn-gt-ed-cr, transparent)
+        )};
+      --_sf-lay-gradient-end-position: calc(
+        #{prepareMediaVariable(
+            --_ctm-lay-dn-wt-se-gt-ed-pn,
+            prepareMediaVariable(--_ctm-lay-dn-gt-ed-pn, 100)
+          )} *
+          1%
+      );
+      --_sf-lay-gradient-position: #{prepareMediaVariable(
+          --_ctm-lay-dn-wt-se-gt-pn,
+          prepareMediaVariable(--_ctm-lay-dn-gt-pn, center)
+        )};
 
       &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(var(--_sf-lay-gradient-angle),
-            var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
-            var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position));
+        background-image: linear-gradient(
+          var(--_sf-lay-gradient-angle),
+          var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
+          var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
+        );
       }
 
       &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(circle at var(--_sf-lay-gradient-position),
-            var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
-            var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position));
+        background-image: radial-gradient(
+          circle at var(--_sf-lay-gradient-position),
+          var(--_sf-lay-gradient-start-color) var(--_sf-lay-gradient-start-position),
+          var(--_sf-lay-gradient-end-color) var(--_sf-lay-gradient-end-position)
+        );
       }
     }
 
     &[data-background-type="image"] {
-      background-image: prepareMediaVariable(--_ctm-lay-dn-bd-ie);
-      background-attachment: prepareMediaVariable(--_ctm-lay-dn-bd-at);
-      background-position: prepareMediaVariable(--_ctm-lay-dn-bd-pn);
-      background-position-y: prepareMediaVariable(--_ctm-lay-dn-bd-pn-y);
-      background-repeat: prepareMediaVariable(--_ctm-lay-dn-bd-rt);
-      background-size: prepareMediaVariable(--_ctm-lay-dn-bd-se);
+      background-image: prepareMediaVariable(
+        --_ctm-lay-dn-wt-se-bd-ie,
+        prepareMediaVariable(--_ctm-lay-dn-bd-ie)
+      );
+      background-attachment: prepareMediaVariable(
+        --_ctm-lay-dn-wt-se-bd-at,
+        prepareMediaVariable(--_ctm-lay-dn-bd-at)
+      );
+      background-position: prepareMediaVariable(
+        --_ctm-lay-dn-wt-se-bd-pn,
+        prepareMediaVariable(--_ctm-lay-dn-bd-pn)
+      );
+      background-position-y: prepareMediaVariable(
+        --_ctm-lay-dn-wt-se-bd-pn-y,
+        prepareMediaVariable(--_ctm-lay-dn-bd-pn-y)
+      );
+      background-repeat: prepareMediaVariable(
+        --_ctm-lay-dn-wt-se-bd-rt,
+        prepareMediaVariable(--_ctm-lay-dn-bd-rt)
+      );
+      background-size: prepareMediaVariable(
+        --_ctm-lay-dn-wt-se-bd-se,
+        prepareMediaVariable(--_ctm-lay-dn-bd-se)
+      );
     }
 
     // background-color: var(
@@ -74,39 +136,81 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     //   --_ctm-mob-lay-dn-bd-se,
     //   var(--_ctm-tab-lay-dn-bd-se, var(--_ctm-lay-dn-bd-se))
     // );
-    border-radius: var(--_ctm-mob-lay-dn-br-rs,
-      var(--_ctm-tab-lay-dn-br-rs, var(--_ctm-lay-dn-br-rs)));
-    border-color: var(--_ctm-mob-lay-dn-br-cr,
-      var(--_ctm-tab-lay-dn-br-cr, var(--_ctm-lay-dn-br-cr)));
-    border-style: var(--_ctm-mob-lay-dn-br-se,
-      var(--_ctm-tab-lay-dn-br-se, var(--_ctm-lay-dn-br-se)));
-    border-width: var(--_ctm-mob-lay-dn-br-wh,
-      var(--_ctm-tab-lay-dn-br-wh, var(--_ctm-lay-dn-br-wh)));
-    box-shadow: var(--_hover-show-shadow,
-      var(--_sf-hr-bx-sw,
-        var(--_show-shadow,
-          var(--_ctm-mob-lay-dn-sw-ae, var(--_ctm-tab-lay-dn-sw-ae, var(--_ctm-lay-dn-sw-ae))) var(--_ctm-mob-lay-dn-sw-br, var(--_ctm-tab-lay-dn-sw-br, var(--_ctm-lay-dn-sw-br))) var(--_ctm-mob-lay-dn-sw-sd, var(--_ctm-tab-lay-dn-sw-sd, var(--_ctm-lay-dn-sw-sd))) var(--_ctm-mob-lay-dn-sw-cr, var(--_ctm-tab-lay-dn-sw-cr, var(--_ctm-lay-dn-sw-cr))))));
+    border-radius: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-rs,
+      prepareMediaVariable(--_ctm-lay-dn-br-rs)
+    );
+    border-color: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-cr,
+      prepareMediaVariable(--_ctm-lay-dn-br-cr)
+    );
+    border-style: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-se,
+      prepareMediaVariable(--_ctm-lay-dn-br-se)
+    );
+    border-width: prepareMediaVariable(
+      --_ctm-lay-dn-wt-se-br-wh,
+      prepareMediaVariable(--_ctm-lay-dn-br-wh)
+    );
+    box-shadow: var(
+      --_hover-show-shadow,
+      var(
+        --_sf-hr-bx-sw,
+        var(
+          --_show-shadow,
+          prepareMediaVariable(--_ctm-lay-dn-wt-se-sw-ae, prepareMediaVariable(--_ctm-lay-dn-sw-ae))
+            prepareMediaVariable(
+              --_ctm-lay-dn-wt-se-sw-br,
+              prepareMediaVariable(--_ctm-lay-dn-sw-br)
+            )
+            prepareMediaVariable(
+              --_ctm-lay-dn-wt-se-sw-sd,
+              prepareMediaVariable(--_ctm-lay-dn-sw-sd)
+            )
+            prepareMediaVariable(
+              --_ctm-lay-dn-wt-se-sw-cr,
+              prepareMediaVariable(--_ctm-lay-dn-sw-cr)
+            )
+        )
+      )
+    );
     padding: var(--_ctm-mob-lay-lt-pg, var(--_ctm-tab-lay-lt-pg, var(--_ctm-lay-lt-pg)));
 
-    --_sf-ic-sz-nn: var(--_ctm-mob-lay-lt-aw-in-se,
-      var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px)));
+    --_sf-ic-sz-nn: var(
+      --_ctm-mob-lay-lt-aw-in-se,
+      var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px))
+    );
 
-    --_sf-ed-vl-sz: var(--_ctm-mob-lay-lt-dt-se,
-      var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px)));
+    --_sf-ed-vl-sz: var(
+      --_ctm-mob-lay-lt-dt-se,
+      var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px))
+    );
 
     &.grd {
-      &>div {
+      & > div {
         &.wrapper {
           width: 100%;
           display: grid;
-          grid-template-columns: repeat(auto-fit,
-              minmax(var(--_ctm-mob-lay-lt-mn-cn-wh,
-                  var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))),
-                1fr));
-          grid-template-rows: repeat(auto-fit,
-              minmax(var(--_ctm-mob-lay-lt-mn-rw-ht,
-                  var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))),
-                1fr));
+          grid-template-columns: repeat(
+            auto-fit,
+            minmax(
+              var(
+                --_ctm-mob-lay-lt-mn-cn-wh,
+                var(--_ctm-tab-lay-lt-mn-cn-wh, var(--_ctm-lay-lt-mn-cn-wh))
+              ),
+              1fr
+            )
+          );
+          grid-template-rows: repeat(
+            auto-fit,
+            minmax(
+              var(
+                --_ctm-mob-lay-lt-mn-rw-ht,
+                var(--_ctm-tab-lay-lt-mn-rw-ht, var(--_ctm-lay-lt-mn-rw-ht))
+              ),
+              1fr
+            )
+          );
 
           justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
           align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
@@ -128,44 +232,129 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
       &:is(:not(#{$sliderControlDragging} *)) {
         overflow: clip;
       }
-
       // overflow: clip;
       height: auto;
       min-height: 50px !important;
-      --_sf-sl-ct-ic-dt-at-cl: var(--_ctm-mob-lay-lt-cl-ae-cr,
-        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr)));
-
+      --_sf-sl-ct-ic-dt-at-cl: var(
+        --_ctm-mob-lay-lt-cl-ae-cr,
+        var(--_ctm-tab-lay-lt-cl-ae-cr, var(--_ctm-lay-lt-cl-ae-cr))
+      );
+
+      // Design > Pagination Dots. Dot Size replaces the layout tab's Dot Size the
+      // same way Arrow Size replaces Arrow Icon Size, with the old var as fallback
+      // for elements saved before the section existed. The two colours had no layout
+      // equivalent: the selected dot used to follow Control Active Color, which still
+      // colours the arrow hover and the unselected dot border.
+      --_sf-ed-vl-sz: #{prepareMediaVariable(
+          --_ctm-lay-dn-pn-ds-dt-se,
+          var(--_ctm-mob-lay-lt-dt-se, var(--_ctm-tab-lay-lt-dt-se, var(--_ctm-lay-lt-dt-se, 10px)))
+        )};
+      --_sf-dt-ae-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-ct-dt-cr, #162578)};
+      --_sf-dt-ie-bg: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-or-dt-cr, #fff)};
+
+      // Design > Pagination Arrows.
+      //
+      // Arrow Size and the layout tab's Arrow Icon Size drive the same button box, so
+      // the design value wins and the layout value is the fallback — an element saved
+      // before this section existed has no `dn-pn-as-aw-se` var and keeps its
+      // `lt-aw-in-se` size. Both schema defaults are 40px.
+      --_sf-ic-sz-nn: #{prepareMediaVariable(
+          --_ctm-lay-dn-pn-as-aw-se,
+          var(
+            --_ctm-mob-lay-lt-aw-in-se,
+            var(--_ctm-tab-lay-lt-aw-in-se, var(--_ctm-lay-lt-aw-in-se, 40px))
+          )
+        )};
+      // Resting stroke of the chevrons; hover still switches to Control Active Color.
+      --_sf-sl-ct-aw-in-cl: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-aw-cr, #667085)};
+      // Background Color, as the gallery slider uses it: the button is a 10% tint of
+      // the chosen colour and 20% on hover (see the hover rule further down), not the
+      // flat colour. Kept in its own variable so both tints read the same source.
+      --_sf-lay-as-bg-cr: #{prepareMediaVariable(--_ctm-lay-dn-pn-as-bd-cr, #fff)};
+      --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-lay-as-bg-cr) 10%, transparent);
+
+      // Background Shape of the arrow buttons, matching the gallery slider's mapping:
+      // Round is the mixin's own 50% default, None squares the button off and Square
+      // rounds the corners slightly. Elements without this section have no attribute
+      // at all and stay round.
+      button.embla__btn {
+        &[data-background-shape="None"] {
+          --_sf-nv-ic-br: 0px;
+        }
+        &[data-background-shape="Square"] {
+          --_sf-nv-ic-br: 4px;
+        }
+      }
       // &:is([data-control-type="1"]) {
       //   @include CMSRepeaterEmblaControlStyles(1);
       // }
       @for $i from 1 through 3 {
         &:is([data-control-type="#{$i}"]) {
-          @if ($i ==3) {
+          @if ($i == 3) {
             overflow-y: visible;
           }
-
           @include CMSRepeaterEmblaControlStyles($i);
         }
       }
 
-      &>div {
+      // Overrides of the shared control mixin. `:is([data-control-type])` matches the
+      // specificity of the rules being replaced, and this block comes after the
+      // @include, so on the tie these win.
+      &:is([data-control-type]) {
+        // Hover of the arrow buttons. The mixin tints them with Control Active Color,
+        // which ignores the Background Color the Pagination Arrows section sets; the
+        // gallery slider instead deepens that same colour from 10% to 20%. The icon
+        // stroke still switches to Control Active Color — the mixin's own rule.
+        button.embla__btn:hover:not(:disabled) {
+          @include BgColorLighter(var(--_sf-lay-as-bg-cr), 20%);
+        }
+
+        // Design > Pagination Dots > Border and Shadow.
+        //
+        // Both are gated on the container attributes the control components publish
+        // from the Show Border / Show Shadow toggles: with the border off the dots keep
+        // the hairline the mixin derives from Control Active Color, and with it on
+        // these longhands take over.
+        .pagination__v1[data-show-border="true"] > button.embla__dot {
+          border-width: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-wh, 0px)};
+          border-style: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-se, solid)};
+          border-color: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-br-cr, transparent)};
+        }
+
+        .pagination__v1[data-show-shadow="true"] > button.embla__dot {
+          box-shadow: #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-ae, 0px 0px)}
+            #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-br, 0px)}
+            #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-sd, 0px)}
+            #{prepareMediaVariable(--_ctm-lay-dn-pn-ds-sw-cr, transparent)};
+        }
+      }
+
+      & > div {
         &.wrapper {
           justify-content: prepareMediaVariable(--_ctm-lay-lt-jy-ct);
           align-items: prepareMediaVariable(--_ctm-lay-lt-an-is);
-
           &.embla__container {
             display: flex !important;
-            --_embla-slide-space: var(--_ctm-mob-lay-lt-im-gp,
-                var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px)));
-            --_embla-col-count: var(--_ctm-mob-lay-lt-st-is-pr-se,
-                var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3)));
+            --_embla-slide-space: var(
+              --_ctm-mob-lay-lt-im-gp,
+              var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
+            );
+            --_embla-col-count: var(
+              --_ctm-mob-lay-lt-st-is-pr-se,
+              var(--_ctm-tab-lay-lt-st-is-pr-se, var(--_ctm-lay-lt-st-is-pr-se, 3))
+            );
             // gap: 0px !important;
             // margin-left: calc(var(--_embla-slide-space, 10px) * -1);
             width: 100%;
             height: 100%;
-
-            &>.embla__slide {
-              --_sf-cl-vl: calc((100% / var(--_embla-col-count, 3)) - (((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) / (var(--_embla-col-count, 3))));
+            & > .embla__slide {
+              --_sf-cl-vl: calc(
+                (100% / var(--_embla-col-count, 3)) -
+                  (
+                    ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
+                      (var(--_embla-col-count, 3))
+                  )
+              );
               // flex: 0 0 calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
               // width: calc(var(--_embla-slide-width, 100%) / var(--_embla-col-count, 3));
               flex: 0 0 var(--_sf-cl-vl);
@@ -188,12 +377,13 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
         }
       }
     }
-
-    &>div {
+    & > div {
       &.wrapper {
         width: 100%;
-        gap: var(--_ctm-mob-lay-lt-im-gp,
-            var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px)));
+        gap: var(
+          --_ctm-mob-lay-lt-im-gp,
+          var(--_ctm-tab-lay-lt-im-gp, var(--_ctm-lay-lt-im-gp, 0px))
+        );
 
         &:is(.sld > *, .rws > *, .cln > *) {
           // gap: var(
@@ -202,12 +392,10 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
           // );
           gap: #{prepareMediaVariable(--_ctm-lay-lt-im-gp, 0px)};
         }
-
         &:is(.grd > *) {
           column-gap: #{prepareMediaVariable(--_ctm-lay-lt-cn-gp, 0px)};
           row-gap: #{prepareMediaVariable(--_ctm-lay-lt-rw-gp, 0px)};
         }
-
         // width: 100%;
         // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
         // grid-auto-rows: minmax(100px, 1fr);
@@ -215,8 +403,7 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     }
 
     &.rws {
-      &>.wrapper {
-
+      & > .wrapper {
         // grid-template-columns: 100%;
         // grid-template-rows:
         //   minmax(
@@ -263,7 +450,7 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
         //     ),
         //     auto
         //   );
-        &>div {
+        & > div {
           &#{$childItemSelector} {
             width: 100%;
           }
@@ -275,11 +462,9 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
       &[data-view-state="auto"] {
         height: var(--_ctm-mob-lay-lt-ht, var(--_ctm-tab-lay-lt-ht, var(--_ctm-lay-lt-ht)));
       }
-
-      &>.wrapper {
+      & > .wrapper {
         height: 100%;
-
-        &>div {
+        & > div {
           &#{$childItemSelector} {
             width: 100%;
             // align-self: flex-start;
@@ -303,4 +488,4 @@ $sliderControlDragging: "[flex-slider-control-moving='true']";
     //   }
     // }
   }
-}
+}