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

package/dist/bundleCategories.scss

@@ -0,0 +1,301 @@
+/**
+ * Bundle Categories — the category strip above a bundle's product list.
+ *
+ * Mirrors the category tabs in the Bundle Details element: a horizontal row of
+ * cards, each with the category's image, its name, how many products it holds
+ * and how many are selected. The row is an Embla carousel, so the slides are
+ * laid out by the carousel and only the card itself is styled here.
+ */
+[data-div-type="element"] {
+  &[data-element-type="bundleCategories"] {
+    // The builder writes width/height/margin/padding as --_ctm-* custom properties
+    // rather than as plain CSS. Without consuming them the Layout panel appears to
+    // do nothing — which is exactly how this element behaved.
+    //
+    // `--_sf-nw-wh` closes the chain: it is the width the element emits itself
+    // while a resize drag is in flight, before the percentage is committed.
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, 0)));
+    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, 0)));
+
+    // Show Border / Show Shadow are CONTROLS, not CSS, so the builder never turns
+    // them into `--_ctm-*` variables — the element surfaces them as data
+    // attributes and the gates below read those.
+    &[data-show-border="false"] > .wrapper {
+      border-style: none;
+    }
+
+    // A gate of its own rather than the shared `--_show-shadow`: custom properties
+    // inherit, so a parent whose shadow is switched off would silently clear this
+    // element's too.
+    &[data-show-shadow="false"] {
+      --_sf-bc-show-shadow: none;
+    }
+
+    // Background type is chosen in the Design tab and written onto the element as
+    // `data-background-type`; gradients add `data-gradient-type`. Both are gated
+    // exactly as the repeater item gates them, and like it the painted surface is
+    // the wrapper rather than the root — the root carries the builder's own
+    // `#<id>` rule and cannot be overridden from this stylesheet.
+    &[data-background-type="color"] > .wrapper {
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+    }
+
+    &[data-background-type="image"] > .wrapper {
+      background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
+    }
+
+    &[data-background-type="gradient"] > .wrapper {
+      --_sf-bc-gradient-angle: calc(
+        var(--_ctm-mob-dn-gt-ae, var(--_ctm-tab-dn-gt-ae, var(--_ctm-dn-gt-ae, 90))) * 1deg
+      );
+      --_sf-bc-gradient-start-color: var(
+        --_ctm-mob-dn-gt-st-cr,
+        var(--_ctm-tab-dn-gt-st-cr, var(--_ctm-dn-gt-st-cr, transparent))
+      );
+      --_sf-bc-gradient-start-position: calc(
+        var(--_ctm-mob-dn-gt-st-pn, var(--_ctm-tab-dn-gt-st-pn, var(--_ctm-dn-gt-st-pn, 0))) * 1%
+      );
+      --_sf-bc-gradient-end-color: var(
+        --_ctm-mob-dn-gt-ed-cr,
+        var(--_ctm-tab-dn-gt-ed-cr, var(--_ctm-dn-gt-ed-cr, transparent))
+      );
+      --_sf-bc-gradient-end-position: calc(
+        var(--_ctm-mob-dn-gt-ed-pn, var(--_ctm-tab-dn-gt-ed-pn, var(--_ctm-dn-gt-ed-pn, 100))) * 1%
+      );
+      --_sf-bc-gradient-position: var(
+        --_ctm-mob-dn-gt-pn,
+        var(--_ctm-tab-dn-gt-pn, var(--_ctm-dn-gt-pn, center))
+      );
+    }
+
+    &[data-gradient-type="Linear Gradient"] > .wrapper {
+      background-image: linear-gradient(
+        var(--_sf-bc-gradient-angle),
+        var(--_sf-bc-gradient-start-color) var(--_sf-bc-gradient-start-position),
+        var(--_sf-bc-gradient-end-color) var(--_sf-bc-gradient-end-position)
+      );
+    }
+
+    &[data-gradient-type="Radial Gradient"] > .wrapper {
+      background-image: radial-gradient(
+        circle at var(--_sf-bc-gradient-position),
+        var(--_sf-bc-gradient-start-color) var(--_sf-bc-gradient-start-position),
+        var(--_sf-bc-gradient-end-color) var(--_sf-bc-gradient-end-position)
+      );
+    }
+    background-position: var(--_ctm-mob-dn-bd-pn, var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn)));
+    background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
+    background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
+
+    border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+    border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+    border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+    border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+    // Show Border / Show Shadow are CONTROLS, not CSS, so they never become
+    // variables — the element surfaces them as data attributes instead.
+    &[data-show-border="false"] {
+      border-style: none;
+    }
+
+    // A gate of its own rather than the shared `--_show-shadow`: custom properties
+    // inherit, so a parent whose shadow is switched off would silently clear this
+    // element's too.
+    &[data-show-shadow="false"] {
+      --_sf-bc-show-shadow: none;
+    }
+
+    // Per-part fallbacks: without them one unset part invalidates the whole
+    // `box-shadow` at computed-value time and it resolves to `none`.
+    box-shadow: var(
+      --_sf-bc-show-shadow,
+      var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae, 0)))
+        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br, 0)))
+        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd, 0)))
+        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr, transparent)))
+    );
+
+    // Height goes on the wrapper, not here: the builder emits the element's own
+    // default styles as `#<id>{ height: auto }`, and an id selector outranks this
+    // stylesheet — so a height set here could never win and the top/bottom resize
+    // handles moved nothing. The wrapper is outside that rule's reach.
+    > .wrapper {
+      width: 100%;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, 100%))) !important;
+
+      // Border, radius and shadow ride on the wrapper alongside the background so
+      // the whole painted surface is one box.
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+      background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
+      background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
+      background-attachment: var(
+        --_ctm-mob-dn-bd-at,
+        var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))
+      );
+      // Position is stored as separate X and Y values, not one shorthand.
+      background-position: var(
+          --_ctm-mob-dn-bd-pn-x,
+          var(--_ctm-tab-dn-bd-pn-x, var(--_ctm-dn-bd-pn-x, center))
+        )
+        var(--_ctm-mob-dn-bd-pn-y, var(--_ctm-tab-dn-bd-pn-y, var(--_ctm-dn-bd-pn-y, center)));
+
+      // Per-part fallbacks: without them one unset part invalidates the whole
+      // `box-shadow` at computed-value time and it resolves to `none`.
+      box-shadow: var(
+        --_sf-bc-show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae, 0)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br, 0)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd, 0)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr, transparent)))
+      );
+    }
+
+    // Bundle name above the strip, matching the heading Bundle Details prints.
+    .bundle__name {
+      margin: 0 0 12px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .bundle__categories {
+      width: 100%;
+
+      // Embla's own classes. The container has to be an explicit row — otherwise
+      // the slides stack — and each slide needs a width of its own, or it
+      // collapses to the widest word and the labels wrap per character.
+      .embla__container {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .embla__slide {
+        flex: 0 0 auto;
+        min-width: 240px;
+      }
+
+      // Arrow placement is driven by the carousel's control position, which the
+      // shared EmblaCarouselBasic stamps onto `.embla` as `data-control-type`.
+      // In "Side" mode — the default this element passes — it renders the two
+      // buttons as bare children of `.embla` with no wrapper, so an earlier rule
+      // written against an `.arrow-navigation` wrapper never matched and the
+      // arrows stacked above and below the strip.
+      //
+      // Keyed and sized exactly as bundleDetails does it: the viewport gives up
+      // 120px so the absolutely-placed arrows sit beside the cards rather than
+      // on top of them.
+      .embla {
+        position: relative;
+
+        &[data-control-type="Side"] {
+          .embla__viewport {
+            width: calc(100% - 120px);
+            margin-inline: auto;
+          }
+
+          .left-button,
+          .right-button {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+          }
+
+          .left-button {
+            left: 0;
+          }
+
+          .right-button {
+            right: 0;
+          }
+        }
+      }
+    }
+
+    .bundle__category {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      font: inherit;
+      text-align: left;
+      width: 100%;
+      min-width: 240px;
+      white-space: nowrap;
+
+      // The open tab. Kept to a border rather than a fill so the strip stays quiet
+      // against the product list below it.
+      &[data-is-active="true"] {
+        border-color: #1f1f1f;
+      }
+    }
+
+    .bundle__category__image {
+      flex: 0 0 auto;
+      width: 56px;
+      height: 56px;
+      overflow: hidden;
+      border-radius: 2px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .bundle__category__text {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-width: 0;
+    }
+
+    .bundle__category__name {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-weight: 600;
+    }
+
+    .bundle__category__tick {
+      color: #2e7d32;
+    }
+
+    .bundle__category__count,
+    .bundle__category__selected {
+      font-size: 12px;
+      opacity: 0.75;
+    }
+
+    // Validation message for this category, shown after a failed add to cart.
+    // `white-space: normal` because the card itself is nowrap.
+    .bundle__category__error {
+      margin-top: 4px;
+      font-size: 12px;
+      color: #c62828;
+      white-space: normal;
+    }
+  }
+}