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

package/dist/category-groups-product-grid.scss

@@ -13,162 +13,135 @@
 //            > .cg_product_card        (grid / cards)
 //            > .embla__slide > .cg_product_card (slider)
 //        > slider arrows / dots (slider mode)
-    .cg_product_grid {
-      // Slider-control intermediate vars consumed by the embla-controls mixin.
-      --_sf-ic-sz-nn: var(
-        --_ctm-mob-catego-dn-pt-gd-dn-lt-aw-in-se,
-        var(--_ctm-tab-catego-dn-pt-gd-dn-lt-aw-in-se, var(--_ctm-catego-dn-pt-gd-dn-lt-aw-in-se, 40px))
-      );
-      --_sf-ed-vl-sz: var(
-        --_ctm-mob-catego-dn-pt-gd-dn-lt-dt-se,
-        var(--_ctm-tab-catego-dn-pt-gd-dn-lt-dt-se, var(--_ctm-catego-dn-pt-gd-dn-lt-dt-se, 10px))
-      );
-
-      // ---- Grid mode: auto-fit columns by min column width ----
-      &.grd {
-        & > .cg_product_grid_wrapper {
-          width: 100%;
-          display: grid;
-          grid-template-columns: repeat(
-            auto-fit,
-            minmax(
-              var(
-                --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-cn-wh,
-                var(--_ctm-tab-catego-dn-pt-gd-dn-lt-mn-cn-wh, var(--_ctm-catego-dn-pt-gd-dn-lt-mn-cn-wh, 200px))
-              ),
-              1fr
-            )
-          );
-          grid-auto-rows: minmax(
-            var(
-              --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-rw-ht,
-              var(--_ctm-tab-catego-dn-pt-gd-dn-lt-mn-rw-ht, var(--_ctm-catego-dn-pt-gd-dn-lt-mn-rw-ht, auto))
-            ),
-            auto
-          );
-          column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
-          row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
-        }
+.cg_product_grid {
+  // Slider-control intermediate vars consumed by the embla-controls mixin.
+  --_sf-ic-sz-nn: var(--_ctm-mob-catego-dn-pt-gd-dn-lt-aw-in-se,
+      var(--_ctm-tab-catego-dn-pt-gd-dn-lt-aw-in-se, var(--_ctm-catego-dn-pt-gd-dn-lt-aw-in-se, 40px)));
+  --_sf-ed-vl-sz: var(--_ctm-mob-catego-dn-pt-gd-dn-lt-dt-se,
+      var(--_ctm-tab-catego-dn-pt-gd-dn-lt-dt-se, var(--_ctm-catego-dn-pt-gd-dn-lt-dt-se, 10px)));
+
+  // ---- Grid mode: auto-fit columns by min column width ----
+  &.grd {
+    &>.cg_product_grid_wrapper {
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(auto-fit,
+          minmax(var(--_ctm-mob-catego-dn-pt-gd-dn-lt-mn-cn-wh,
+              var(--_ctm-tab-catego-dn-pt-gd-dn-lt-mn-cn-wh, var(--_ctm-catego-dn-pt-gd-dn-lt-mn-cn-wh, 200px))),
+            1fr));
+      grid-auto-rows: minmax(var(--_ctm-mob-catego-dn-pt-gd-dn-lt-mn-rw-ht,
+            var(--_ctm-tab-catego-dn-pt-gd-dn-lt-mn-rw-ht, var(--_ctm-catego-dn-pt-gd-dn-lt-mn-rw-ht, auto))),
+          auto);
+      column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
+      row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
+    }
+  }
+
+  // ---- Cards mode: fixed items per row (flex calc) ----
+  &.crds {
+    &>.cg_product_grid_wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
+      row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
+
+      &>.cg_product_card {
+        --_col-count: var(--_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-rw,
+            var(--_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-rw, var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-rw, 3)));
+        --_col-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 0px)};
+        width: calc((100% / var(--_col-count)) - (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count))));
+        flex: 0 0 calc((100% / var(--_col-count)) - (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count))));
       }
+    }
+  }
 
-      // ---- Cards mode: fixed items per row (flex calc) ----
-      &.crds {
-        & > .cg_product_grid_wrapper {
-          display: flex;
-          flex-wrap: wrap;
-          width: 100%;
-          column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
-          row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
-          & > .cg_product_card {
-            --_col-count: var(
-              --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-rw,
-              var(--_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-rw, var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-rw, 3))
-            );
-            --_col-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 0px)};
-            width: calc(
-              (100% / var(--_col-count)) -
-                (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
-            );
-            flex: 0 0
-              calc(
-                (100% / var(--_col-count)) -
-                  (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
-              );
-          }
+  // ---- Slider mode (Embla) ----
+  &.sld {
+    position: relative;
+    overflow: clip;
+    --_sf-sl-ct-ic-dt-at-cl: var(--_ctm-mob-catego-dn-pt-gd-dn-lt-cl-ae-cr,
+        var(--_ctm-tab-catego-dn-pt-gd-dn-lt-cl-ae-cr, var(--_ctm-catego-dn-pt-gd-dn-lt-cl-ae-cr)));
+
+    @for $i from 1 through 3 {
+      &:is([data-control-type="#{$i}"]) {
+        @if ($i ==3) {
+          overflow-y: visible;
         }
+
+        @include CMSRepeaterEmblaControlStyles($i);
       }
+    }
 
-      // ---- Slider mode (Embla) ----
-      &.sld {
-        position: relative;
-        overflow: clip;
-        --_sf-sl-ct-ic-dt-at-cl: var(
-          --_ctm-mob-catego-dn-pt-gd-dn-lt-cl-ae-cr,
-          var(--_ctm-tab-catego-dn-pt-gd-dn-lt-cl-ae-cr, var(--_ctm-catego-dn-pt-gd-dn-lt-cl-ae-cr))
-        );
-
-        @for $i from 1 through 3 {
-          &:is([data-control-type="#{$i}"]) {
-            @if ($i == 3) {
-              overflow-y: visible;
-            }
-            @include CMSRepeaterEmblaControlStyles($i);
-          }
-        }
+    // Template 3: place the arrows/dots ABOVE the product list (not over the
+    // images). bottom:100% puts the control's bottom edge at the grid's top
+    // edge; +8px adds a small gap. overflow-y:visible (set above) lets it
+    // show above the grid. (Repeater gets this from a saved template.)
+    &:is([data-control-type="3"]) {
+      --_sf-rp-ct-t3-top-vl: auto;
+      --_sf-rp-ct-t3-bottom-vl: calc(100% + 8px);
+      --_sf-rp-ct-t3-right-vl: 0px;
+      --_sf-rp-ct-t3-left-vl: auto;
+      --_sf-rp-ct-t3-transform-vl: none;
 
-        // Template 3: place the arrows/dots ABOVE the product list (not over the
-        // images). bottom:100% puts the control's bottom edge at the grid's top
-        // edge; +8px adds a small gap. overflow-y:visible (set above) lets it
-        // show above the grid. (Repeater gets this from a saved template.)
-        &:is([data-control-type="3"]) {
-          --_sf-rp-ct-t3-top-vl: auto;
-          --_sf-rp-ct-t3-bottom-vl: calc(100% + 8px);
-          --_sf-rp-ct-t3-right-vl: 0px;
-          --_sf-rp-ct-t3-left-vl: auto;
-          --_sf-rp-ct-t3-transform-vl: none;
-
-          // Restyle template-3 pagination from the connected gray bar into
-          // separated circular dots + a capsule active indicator.
-          .pagination__v1 {
-            gap: 6px;
-          }
-          .pagination__v1 > button.embla__dot {
-            width: var(--_sf-ed-vl-sz, 10px);
-            height: var(--_sf-ed-vl-sz, 10px);
-            border-radius: 50%;
-            background: #d6d6d6;
-          }
-          .pagination__v1 > button.embla__dot.embla__dot--selected {
-            width: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
-            border-radius: 999px;
-            background: var(--_sf-sl-ct-ic-dt-at-cl, #7c3aed);
-          }
-        }
+      // Restyle template-3 pagination from the connected gray bar into
+      // separated circular dots + a capsule active indicator.
+      .pagination__v1 {
+        gap: 6px;
+      }
 
-        // Pagination dots: never compress. With many pages the strip scrolls
-        // horizontally (scrollbar hidden) instead of squishing the dots.
-        .pagination__v1 {
-          flex-wrap: nowrap;
-          overflow-x: auto;
-          overflow-y: hidden;
-          scrollbar-width: none;
-          &::-webkit-scrollbar {
-            display: none;
-          }
-          & > button.embla__dot {
-            flex-shrink: 0;
-          }
-        }
+      .pagination__v1>button.embla__dot {
+        width: var(--_sf-ed-vl-sz, 10px);
+        height: var(--_sf-ed-vl-sz, 10px);
+        border-radius: 50%;
+        background: #d6d6d6;
+      }
+
+      .pagination__v1>button.embla__dot.embla__dot--selected {
+        width: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
+        border-radius: 999px;
+        background: var(--_sf-sl-ct-ic-dt-at-cl, #7c3aed);
+      }
+    }
+
+    // Pagination dots: never compress. With many pages the strip scrolls
+    // horizontally (scrollbar hidden) instead of squishing the dots.
+    .pagination__v1 {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &>button.embla__dot {
+        flex-shrink: 0;
+      }
+    }
+
+    &>.cg_product_grid_wrapper.embla__container {
+      display: flex;
+      width: 100%;
+      min-height: 100px;
+      gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px)};
+      --_embla-slide-space: var(--_ctm-mob-catego-dn-pt-gd-dn-lt-im-gp,
+          var(--_ctm-tab-catego-dn-pt-gd-dn-lt-im-gp, var(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px)));
+      --_embla-col-count: var(--_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-se,
+          var(--_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-se, var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-se, 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 var(--_sf-cl-vl);
+        width: var(--_sf-cl-vl);
+        grid-template-rows: minmax(50px, auto);
+        grid-template-columns: minmax(0px, 1fr);
 
-        & > .cg_product_grid_wrapper.embla__container {
-          display: flex;
+        img {
           width: 100%;
-          min-height: 100px;
-          gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px)};
-          --_embla-slide-space: var(
-            --_ctm-mob-catego-dn-pt-gd-dn-lt-im-gp,
-            var(--_ctm-tab-catego-dn-pt-gd-dn-lt-im-gp, var(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px))
-          );
-          --_embla-col-count: var(
-            --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-se,
-            var(--_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-se, var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-se, 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 var(--_sf-cl-vl);
-            width: var(--_sf-cl-vl);
-            grid-template-rows: minmax(50px, auto);
-            grid-template-columns: minmax(0px, 1fr);
-            img {
-              width: 100%;
-            }
-          }
         }
       }
     }
+  }
+}