@sc-360-v2/storefront-cms-library 0.5.54 → 0.5.58

package/dist/menu-v2.scss

@@ -218,6 +218,9 @@ $defaultValues: (
                   --_sf-it-hr-tae: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-tt-an)};
                   --_sf-it-hr-ls: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-lr-sg)};
                   --_sf-it-hr-lh: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-le-ht)};
+                  --_sf-it-hr-ttm: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-tt-tm)};
+                  --_sf-it-hr-wwp: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-wd-wp)};
+                  --_sf-it-hr-wbk: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-wd-bk)};
 
                   // Dropdown icon (size/color) hover overrides — consumed by
                   // the .flex__menu__item__icon svg cascade below.
@@ -247,6 +250,9 @@ $defaultValues: (
                   --_sf-it-at-tae: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-tt-an)};
                   --_sf-it-at-ls: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-lr-sg)};
                   --_sf-it-at-lh: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-le-ht)};
+                  --_sf-it-at-ttm: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-tt-tm)};
+                  --_sf-it-at-wwp: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-wd-wp)};
+                  --_sf-it-at-wbk: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-wd-bk)};
 
                   // Dropdown icon (size/color) selected-state overrides.
                   --_sf-it-at-isz: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-se)};
@@ -334,6 +340,27 @@ $defaultValues: (
                       --_sf-it-at-lh,
                       var(--_sf-it-hr-lh, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-le-ht)})
                     );
+                    text-transform: var(
+                      --_sf-it-at-ttm,
+                      var(
+                        --_sf-it-hr-ttm,
+                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-tm, none)}
+                      )
+                    );
+                    word-wrap: var(
+                      --_sf-it-at-wwp,
+                      var(
+                        --_sf-it-hr-wwp,
+                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-wp, normal)}
+                      )
+                    );
+                    word-break: var(
+                      --_sf-it-at-wbk,
+                      var(
+                        --_sf-it-hr-wbk,
+                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-bk, normal)}
+                      )
+                    );
 
                     &.flex__menu__item__icon {
                       &[data-rotate="true"] {
@@ -367,6 +394,8 @@ $defaultValues: (
                               #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1)}
                             )
                           );
+                          // Overrides the stroke-width presentation attribute baked into the icon markup.
+                          stroke-width: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-se-wh, 1.25);
                         }
                       }
                     }
@@ -563,6 +592,15 @@ $defaultValues: (
                           --_sf-sb-it-hr-lh: #{prepareMediaVariable(
                               --_ctm-dn-sb-mu-im-se-hr-se-le-ht
                             )};
+                          --_sf-sb-it-hr-ttm: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-tt-tm
+                            )};
+                          --_sf-sb-it-hr-wwp: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-wd-wp
+                            )};
+                          --_sf-sb-it-hr-wbk: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-hr-se-wd-bk
+                            )};
                         }
 
                         &.active {
@@ -620,6 +658,15 @@ $defaultValues: (
                           --_sf-sb-it-at-lh: #{prepareMediaVariable(
                               --_ctm-dn-sb-mu-im-se-sd-se-le-ht
                             )};
+                          --_sf-sb-it-at-ttm: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-tt-tm
+                            )};
+                          --_sf-sb-it-at-wwp: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-wd-wp
+                            )};
+                          --_sf-sb-it-at-wbk: #{prepareMediaVariable(
+                              --_ctm-dn-sb-mu-im-se-sd-se-wd-bk
+                            )};
                         }
 
                         & > a {
@@ -696,6 +743,27 @@ $defaultValues: (
                                   #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
                                 )
                               );
+                              text-transform: var(
+                                --_sf-sb-it-at-ttm,
+                                var(
+                                  --_sf-sb-it-hr-ttm,
+                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm, none)}
+                                )
+                              );
+                              word-wrap: var(
+                                --_sf-sb-it-at-wwp,
+                                var(
+                                  --_sf-sb-it-hr-wwp,
+                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp, normal)}
+                                )
+                              );
+                              word-break: var(
+                                --_sf-sb-it-at-wbk,
+                                var(
+                                  --_sf-sb-it-hr-wbk,
+                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk, normal)}
+                                )
+                              );
                               display: -webkit-box;
                               -webkit-line-clamp: 1;
                               -webkit-box-orient: vertical;
@@ -737,11 +805,9 @@ $defaultValues: (
 
             svg {
               --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
-
-              path {
-                --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
-                --_sf-hm-hr-ic-swh: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-se-wh)};
-              }
+              // Published on the <svg> rather than on <path>: custom properties
+              // inherit, so whatever shapes the glyph is drawn with will read them.
+              --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
             }
 
             // --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
@@ -771,12 +837,19 @@ $defaultValues: (
             width: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
             height: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
 
-            path {
+            // Reaches every stroked shape, not just <path>: the built-in glyphs are
+            // paths, but a custom (Sirv-hosted) hamburger is arbitrary markup and is
+            // inlined by SirvIcon just the same, so <line>/<rect>/<circle> icons have
+            // to pick up Icon Color and Stroke Width too.
+            path,
+            line,
+            polyline,
+            polygon,
+            circle,
+            ellipse,
+            rect {
               stroke: var(--_sf-hm-hr-ic-clr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-c1)});
-              stroke-width: var(
-                --_sf-hm-hr-ic-swh,
-                #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-se-wh)}
-              );
+              stroke-width: #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-se-wh, 1.25)};
             }
           }
         }

package/dist/order-status.scss

@@ -771,10 +771,6 @@ $defaultValues: (
                 // color: var(--_gray-900);
                 // line-height: 30px;
                 line-height: prepareMediaVariable(--_ctm-dn-or-io-or-id-le-ht, 24px);
-                // The order number and its status badge are the two items this gap spaces.
-                display: inline-flex;
-                align-items: center;
-                gap: prepareMediaVariable(--_ctm-dn-or-io-or-id-im-gp, 0);
                 font-family: var(
                   --_ctm-mob-dn-or-io-or-id-ft-fy,
                   var(--_ctm-tab-dn-or-io-or-id-ft-fy, var(--_ctm-dn-or-io-or-id-ft-fy))
@@ -831,7 +827,11 @@ $defaultValues: (
               }
 
               .status {
-                margin-left: 6px;
+                // Order Id > Item Gap spaces the badge from the number. Deliberately a
+                // margin rather than a flex `gap` on `.order_number_id`: a flex parent
+                // blockifies this badge and the parent's text-decoration would then paint
+                // through it, with the `text-decoration: none` below unable to stop it.
+                margin-left: prepareMediaVariable(--_ctm-dn-or-io-or-id-im-gp, 6px);
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-size: 12px;
@@ -840,6 +840,8 @@ $defaultValues: (
                 // background-color: #eff8ff;
                 // @include BgColorLighter(var(--_thm-cs-at-py), 5%);
                 // color: var(--_thm-cs-at-py);
+                text-decoration: none;
+                font-style: normal;
 
                 display: inline-flex;
                 align-items: center;
@@ -2106,6 +2108,12 @@ $defaultValues: (
         font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic);
         text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an);
         padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg);
+        text-transform: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-tm);
+        word-wrap: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-wr);
+        word-break: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-bk);
+        &#{$overflowSelector} {
+          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+        }
       }
       .break_up_amount {
         line-height: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-le-ht-dc);
@@ -2119,6 +2127,9 @@ $defaultValues: (
         font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic-dc);
         text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an-dc);
         padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg-dc);
+        text-transform: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-tm-dc);
+        word-wrap: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-wr-dc);
+        word-break: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-wd-bk-dc);
       }
     }
   }