@sc-360-v2/storefront-cms-library 0.5.52 → 0.5.53

package/dist/allocations.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use "sass:map";
 @use "sass:list";
 @use "./functions.scss" as *;
 
@@ -633,6 +633,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
                   );
 
+                  // Header Text > Text Transform and the word wrap/break pair that the
+                  // typography panel renders alongside it.
+                  text-transform: prepareMediaVariable(--_ctm-dn-hr-tt-tt-tm, none);
+                  word-wrap: prepareMediaVariable(--_ctm-dn-hr-tt-wd-wp, normal);
+                  word-break: prepareMediaVariable(--_ctm-dn-hr-tt-wd-bk, normal);
+
+                  // Header Text > Text Overflow. The renderer adds the class and
+                  // publishes the line count, since the control is `controls`.
+                  &.flex__overflow {
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: var(--_sf-line-clamp, 1);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+
                   &:has(.est__dropdown__main) {
                     max-width: 200px;
                   }
@@ -641,11 +657,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
             tbody {
               .tbody__row__divider {
+                // Set by CommonTable only when the caller passed onRowClick.
+                // The cells carry it too: a <td> establishes its own cursor context,
+                // so the pointer would stop at the row padding otherwise.
+                &[data-is-clickable="true"] {
+                  cursor: pointer;
+
+                  .td__col__divider,
+                  .td__col__divider * {
+                    cursor: pointer;
+                  }
+                }
+
                 background-color: var(
                   --_ctm-mob-dn-te-rw-bd-cr,
                   var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
                 );
 
+                // Table Row > Hover Background. Falls back to the default background
+                // so a row that has no hover colour set does not go transparent.
+                &:hover {
+                  background-color: var(
+                    --_ctm-mob-dn-te-rw-bd-cr-hr,
+                    var(
+                      --_ctm-tab-dn-te-rw-bd-cr-hr,
+                      var(
+                        --_ctm-dn-te-rw-bd-cr-hr,
+                        var(
+                          --_ctm-mob-dn-te-rw-bd-cr,
+                          var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
+                        )
+                      )
+                    )
+                  );
+                }
+
                 height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
 
                 .td__col__divider {
@@ -746,13 +792,101 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               justify-content: var(justify-center);
             }
 
+            // Border, radius and shadow for the pagination bar. None of these existed,
+            // so the panel's new controls had nothing to paint.
+            border-color: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr);
+            border-style: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none);
+            border-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0);
+            border-radius: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0);
+            box-shadow: var(
+              --_show-shadow,
+              prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0)
+                prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0)
+                prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0)
+                prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent)
+            );
+
+            &:hover {
+              background-color: var(
+                --_sf-bd-cr,
+                prepareMediaVariable(
+                  --_ctm-dn-pn-hr-se-bd-cr,
+                  prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)
+                )
+              );
+              border-color: prepareMediaVariable(
+                --_ctm-dn-pn-hr-se-br-cr,
+                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr)
+              );
+              border-style: prepareMediaVariable(
+                --_ctm-dn-pn-hr-se-br-se,
+                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none)
+              );
+              border-width: prepareMediaVariable(
+                --_ctm-dn-pn-hr-se-br-wh,
+                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0)
+              );
+              border-radius: prepareMediaVariable(
+                --_ctm-dn-pn-hr-se-br-rs,
+                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0)
+              );
+              box-shadow: var(
+                --_show-shadow,
+                prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0)
+                  prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0)
+                  prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0)
+                  prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent)
+              );
+            }
+
             button {
+              // Default glyph shows, hover glyph waits. Both are in the DOM so the
+              // swap costs no re-render; when no hover icon is picked the renderer
+              // falls back to the default one, so the pair looks identical.
+              .pagination__icon {
+                display: flex;
+
+                &--hover {
+                  display: none;
+                }
+              }
+
+              &:hover {
+                .pagination__icon {
+                  display: none;
+
+                  &--hover {
+                    display: flex;
+                  }
+                }
+              }
+
               svg {
-                width: var(--_width-18);
-                height: var(--_height-18);
+                // Icon Size and Icon Color live on the pagination section's states, so
+                // the variables carry a `dt-se` / `hr-se` segment. These read
+                // `--_ctm-dn-pn-in-*` — a path nothing writes — and the svg itself was
+                // pinned to a hardcoded 18px and grey, so neither control did anything.
+                width: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
+                height: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
+                path {
+                  stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500));
+                }
+              }
+
+              &:hover svg {
+                width: prepareMediaVariable(
+                  --_ctm-dn-pn-hr-se-in-se,
+                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
+                );
+                height: prepareMediaVariable(
+                  --_ctm-dn-pn-hr-se-in-se,
+                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
+                );
                 path {
-                  stroke: var(--_gray-500);
-                  // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
+                  stroke: prepareMediaVariable(
+                    --_ctm-dn-pn-hr-se-in-c1,
+                    prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500))
+                  );
                 }
               }
             }
@@ -857,16 +991,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 );
               }
             }
+            // Same wrong path as the svg rule above: the icon variables carry the
+            // section's state segment. Only the "next" button has this class in the
+            // markup, so the svg rules are what actually style both arrows — these are
+            // kept for the text colour they contribute.
             .pagination__arrows {
-              color: var(
-                --_sf-hr-fc,
-                var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
-              );
+              color: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1);
+              font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se);
 
-              font-size: var(
-                --_sf-hr-fs,
-                var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
-              );
+              &:hover {
+                color: prepareMediaVariable(
+                  --_ctm-dn-pn-hr-se-in-c1,
+                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1)
+                );
+                font-size: prepareMediaVariable(
+                  --_ctm-dn-pn-hr-se-in-se,
+                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se)
+                );
+              }
             }
           }
         }
@@ -1192,6 +1334,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           display: flex;
           align-items: center;
           gap: 12px;
+          // Stands in for the profile dropdown when there is only one
+          // profile. Matches the heading beside it so the row reads as one line.
+          .allocation_single_profile_name {
+            color: #475467;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 20px;
+            display: flex;
+            align-items: center;
+          }
+
           .slider_heading {
             height: auto;
           }
@@ -1234,6 +1387,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
 
       .allocations_slider_slide_wrapper {
+        // Clicking an allocation selects it and its profile (it replaced the
+        // Redeem button), so the whole slide is the hit area.
+        &[data-is-clickable="true"] {
+          cursor: pointer;
+        }
+
         display: flex;
         align-items: center;
         gap: 12px;