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

package/dist/repeater-grid-toggle.scss

@@ -1,206 +1,206 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$selector: ".repeater__view__toggle";
-$wrapper: ".tgl__wrapper";
-
-@mixin FlexRepeaterGridToggleCSS() {
-  #{$selector} {
-    position: var(--_p-absolute);
-    z-index: calc(var(--_higher-zIndex, 99999) - 2);
-    left: var(--_sf-rp-gt-t3-left-vl, 0px);
-    right: var(--_sf-rp-gt-t3-right-vl, auto);
-    bottom: var(--_sf-rp-gt-t3-bottom-vl, auto);
-    top: var(--_sf-rp-gt-t3-top-vl, 0px);
-
-    & > div {
-      &#{$wrapper} {
-        display: var(--_d-flex);
-        align-items: center;
-        // border: 1px solid var(--_gray-200);
-        // Gated on the Layout Style > Show Border switch; previously the border was
-        // unconditional, so turning the switch off changed nothing.
-        &[data-show-border="true"] {
-          border-style: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-se, solid);
-          border-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
-          border-color: prepareMediaVariable(
-            --_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
-            var(--_gray-200)
-          );
-        }
-        --_br-6: 6px;
-        --_width-40: 40px;
-        --_width-20: 20px;
-        border-radius: 4px;
-        // --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr,
-        background-color: prepareMediaVariable(
-          --_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
-          var(--_base-white)
-        );
-
-        & > button {
-          display: var(--_d-flex);
-          // $size: var(--_width-40);
-          $size: #{var(
-              --_sf-at-btn-size,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
-            )};
-          width: var(
-            --_sf-at-btn-wh,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))}
-          );
-          height: calc(#{$size} * 2);
-          align-items: center;
-          justify-content: center;
-          background: var(
-            --_sf-at-btn-bd,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
-          );
-
-          padding: var(
-            --_sf-at-btn-pg,
-            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)}
-          );
-
-          // Border / radius / shadow now come from the button's own settings. The
-          // first/last radius overrides below only apply while no radius is configured,
-          // so the default pill shape survives an unconfigured toggle.
-          &[data-show-border="true"] {
-            border-color: var(
-              --_sf-at-btn-br-cr,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)}
-            );
-            border-style: var(
-              --_sf-at-btn-br-se,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)}
-            );
-            border-width: var(
-              --_sf-at-btn-br-wh,
-              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)}
-            );
-          }
-
-          // Show Shadow / Show Icon are per-state switches on the Button accordion; they
-          // reach the markup as data attributes and gate the two variables below.
-          &[data-show-shadow="false"] {
-            --_show-shadow: none;
-          }
-          &[data-show-icon="false"] {
-            --_show-icon: none;
-          }
-
-          box-shadow: var(
-            --_show-shadow,
-            var(
-                --_sf-at-btn-sw-ae,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}
-              )
-              var(
-                --_sf-at-btn-sw-br,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
-              )
-              var(
-                --_sf-at-btn-sw-sd,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
-              )
-              var(
-                --_sf-at-btn-sw-cr,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
-              )
-          );
-
-          // Radius falls back to the pill geometry these two buttons have always had.
-          // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
-          // tails with `inherit`, so the variable would always be "set" and the
-          // per-position fallback below would never fire, collapsing the pill to 0.
-          &:first-of-type {
-            border-radius: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
-                4px 0 0 4px
-              )};
-          }
-          &:last-of-type {
-            border-radius: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
-                0 4px 4px 0
-              )};
-          }
-
-          // Hover sits between default and selected: it overrides the same
-          // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
-          // comes later in source order, so the selected button keeps its own styling
-          // while hovered rather than flipping to the hover look.
-          &:hover {
-            --_sf-at-btn-size: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
-                var(--_width-20)
-              )};
-            --_sf-at-pt-cl: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
-                var(--_gray-700)
-              )};
-            --_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
-            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
-            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
-            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
-            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
-            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
-            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
-            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
-            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
-            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
-          }
-
-          &[data-style-active="true"] {
-            // --_sf-at-pt-cl: var(--_gray-700);
-            --_sf-at-btn-size: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
-                var(--_width-20)
-              )};
-            --_sf-at-pt-cl: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
-                var(--_gray-700)
-              )};
-            --_sf-at-btn-bd: #{prepareMediaVariable(
-                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
-                var(--_gray-200)
-              )};
-            // background: var(--_gray-200);
-
-            // Selected state overrides the same properties via the --_sf-at-btn-* layer
-            // the default declarations above already read from.
-            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
-            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
-            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
-            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
-            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
-            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
-            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
-            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
-            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
-          }
-
-          // `img` covers custom uploaded toggle icons, which render as an <img>.
-          svg,
-          img {
-            display: var(--_show-icon, block);
-            width: calc(#{$size} * 1);
-            height: calc(#{$size} * 1);
-          }
-
-          svg {
-            path {
-              stroke: var(
-                --_sf-at-pt-cl,
-                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
-              );
-              // Overrides the stroke-width presentation attribute baked into the icon markup.
-              stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$selector: ".repeater__view__toggle";
+$wrapper: ".tgl__wrapper";
+
+@mixin FlexRepeaterGridToggleCSS() {
+  #{$selector} {
+    position: var(--_p-absolute);
+    z-index: calc(var(--_higher-zIndex, 99999) - 2);
+    left: var(--_sf-rp-gt-t3-left-vl, 0px);
+    right: var(--_sf-rp-gt-t3-right-vl, auto);
+    bottom: var(--_sf-rp-gt-t3-bottom-vl, auto);
+    top: var(--_sf-rp-gt-t3-top-vl, 0px);
+
+    & > div {
+      &#{$wrapper} {
+        display: var(--_d-flex);
+        align-items: center;
+        // border: 1px solid var(--_gray-200);
+        // Gated on the Layout Style > Show Border switch; previously the border was
+        // unconditional, so turning the switch off changed nothing.
+        &[data-show-border="true"] {
+          border-style: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-se, solid);
+          border-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
+          border-color: prepareMediaVariable(
+            --_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
+            var(--_gray-200)
+          );
+        }
+        --_br-6: 6px;
+        --_width-40: 40px;
+        --_width-20: 20px;
+        border-radius: 4px;
+        // --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr,
+        background-color: prepareMediaVariable(
+          --_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
+          var(--_base-white)
+        );
+
+        & > button {
+          display: var(--_d-flex);
+          // $size: var(--_width-40);
+          $size: #{var(
+              --_sf-at-btn-size,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
+            )};
+          width: var(
+            --_sf-at-btn-wh,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))}
+          );
+          height: calc(#{$size} * 2);
+          align-items: center;
+          justify-content: center;
+          background: var(
+            --_sf-at-btn-bd,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
+          );
+
+          padding: var(
+            --_sf-at-btn-pg,
+            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)}
+          );
+
+          // Border / radius / shadow now come from the button's own settings. The
+          // first/last radius overrides below only apply while no radius is configured,
+          // so the default pill shape survives an unconfigured toggle.
+          &[data-show-border="true"] {
+            border-color: var(
+              --_sf-at-btn-br-cr,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)}
+            );
+            border-style: var(
+              --_sf-at-btn-br-se,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)}
+            );
+            border-width: var(
+              --_sf-at-btn-br-wh,
+              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)}
+            );
+          }
+
+          // Show Shadow / Show Icon are per-state switches on the Button accordion; they
+          // reach the markup as data attributes and gate the two variables below.
+          &[data-show-shadow="false"] {
+            --_show-shadow: none;
+          }
+          &[data-show-icon="false"] {
+            --_show-icon: none;
+          }
+
+          box-shadow: var(
+            --_show-shadow,
+            var(
+                --_sf-at-btn-sw-ae,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-br,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-sd,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
+              )
+              var(
+                --_sf-at-btn-sw-cr,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
+              )
+          );
+
+          // Radius falls back to the pill geometry these two buttons have always had.
+          // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
+          // tails with `inherit`, so the variable would always be "set" and the
+          // per-position fallback below would never fire, collapsing the pill to 0.
+          &:first-of-type {
+            border-radius: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+                4px 0 0 4px
+              )};
+          }
+          &:last-of-type {
+            border-radius: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
+                0 4px 4px 0
+              )};
+          }
+
+          // Hover sits between default and selected: it overrides the same
+          // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
+          // comes later in source order, so the selected button keeps its own styling
+          // while hovered rather than flipping to the hover look.
+          &:hover {
+            --_sf-at-btn-size: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
+                var(--_width-20)
+              )};
+            --_sf-at-pt-cl: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
+                var(--_gray-700)
+              )};
+            --_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
+            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
+            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
+            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
+            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
+            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
+            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
+            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
+            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
+            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
+          }
+
+          &[data-style-active="true"] {
+            // --_sf-at-pt-cl: var(--_gray-700);
+            --_sf-at-btn-size: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
+                var(--_width-20)
+              )};
+            --_sf-at-pt-cl: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
+                var(--_gray-700)
+              )};
+            --_sf-at-btn-bd: #{prepareMediaVariable(
+                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
+                var(--_gray-200)
+              )};
+            // background: var(--_gray-200);
+
+            // Selected state overrides the same properties via the --_sf-at-btn-* layer
+            // the default declarations above already read from.
+            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
+            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
+            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
+            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
+            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
+            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
+            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
+            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
+            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
+          }
+
+          // `img` covers custom uploaded toggle icons, which render as an <img>.
+          svg,
+          img {
+            display: var(--_show-icon, block);
+            width: calc(#{$size} * 1);
+            height: calc(#{$size} * 1);
+          }
+
+          svg {
+            path {
+              stroke: var(
+                --_sf-at-pt-cl,
+                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
+              );
+              // Overrides the stroke-width presentation attribute baked into the icon markup.
+              stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
+            }
+          }
+        }
+      }
+    }
+  }
+}