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

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

@@ -13,135 +13,162 @@
 //            > .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)};
-    }
-  }
-
-  // ---- 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;
+    .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)};
         }
-
-        @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;
-
-      // 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);
-      }
-    }
-
-    // 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;
+      // ---- 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)))
+              );
+          }
+        }
       }
 
-      &>button.embla__dot {
-        flex-shrink: 0;
-      }
-    }
+      // ---- 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);
+          }
+        }
 
-    &>.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)));
+        // 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);
+          }
+        }
 
-      &>.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);
+        // 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;
+          }
+        }
 
-        img {
+        & > .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);
+            img {
+              width: 100%;
+            }
+          }
         }
       }
     }
-  }
-}