@sc-360-v2/storefront-cms-library 0.5.15 → 0.5.17

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

@@ -0,0 +1,186 @@
+@use "./functions.scss" as *;
+@use "./repeater-embla-controls.scss" as *;
+
+// Category Groups product grid — display styles (Grid / Cards / Slider) ported
+// (light) from the Repeater, rebound to the productGridDesign.layout CSS-variable
+// paths (--_ctm-catego-dn-pt-gd-dn-lt-*). Items-per-row / min-column-width /
+// gaps are responsive (mob/tab/desktop var fallback). The container box
+// (padding + fill/border/radius/shadow) stays on .cg_product_grid in
+// category-groups-element.scss. @imported there within the categoryGroups scope.
+//
+// DOM: .cg_product_grid (root, gets grd|crds|sld + embla + data-control-type)
+//        > .cg_product_grid_wrapper (gets embla__container in slider mode)
+//            > .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;
+        }
+        @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;
+      }
+      & > 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);
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}