@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
package/dist/menu-v2.scss CHANGED
@@ -14,11 +14,14 @@ $hamburger: ".flex__menu__hamburger";
14
14
  $hamburgerActive: "[data-hamburger-active='true']";
15
15
 
16
16
  $wrapperData: (
17
- start: (left: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
17
+ start: (
18
+ left: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
18
19
  ),
19
- end: (right: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
20
+ end: (
21
+ right: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
20
22
  ),
21
- center: (left: calc(50% + #{prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px)}),
23
+ center: (
24
+ left: calc(50% + #{prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px)}),
22
25
  transform: translateX(-50%),
23
26
  ),
24
27
  );
@@ -32,7 +35,7 @@ $defaultValues: (
32
35
  display: var(--_d-flex);
33
36
  justify-content: prepareMediaVariable(--_ctm-dn-hr-os-vl-at);
34
37
 
35
- &>div {
38
+ & > div {
36
39
  &#{$wrapper} {
37
40
  position: absolute;
38
41
  // left: var(--_sf-hm-mc-lt-vl-v2, 0px);
@@ -66,13 +69,13 @@ $defaultValues: (
66
69
  overflow-y: auto;
67
70
  }
68
71
 
69
- &>#{$menuItem} {
72
+ & > #{$menuItem} {
70
73
  align-items: flex-start;
71
74
  width: 100%;
72
75
  flex-direction: column;
73
76
  gap: #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)};
74
77
 
75
- &>#{$subMenuContainer} {
78
+ & > #{$subMenuContainer} {
76
79
  width: 100% !important;
77
80
  position: static !important;
78
81
  transform: none !important;
@@ -90,7 +93,7 @@ $defaultValues: (
90
93
  }
91
94
  }
92
95
 
93
- &>#{$hamburger} {
96
+ & > #{$hamburger} {
94
97
  display: var(--_d-flex);
95
98
  }
96
99
  }
@@ -102,7 +105,7 @@ $defaultValues: (
102
105
  @include prepareMediaQueries($defaultValues);
103
106
  // var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
104
107
 
105
- &>div {
108
+ & > div {
106
109
  &.wrapper {
107
110
  width: 100%;
108
111
  // padding: #{prepareMediaVariable(--_ctm-lt-pg)};
@@ -121,7 +124,7 @@ $defaultValues: (
121
124
  // }
122
125
 
123
126
  &.hrz {
124
- &>div {
127
+ & > div {
125
128
  &#{$wrapper} {
126
129
  display: var(--_d-flex);
127
130
  flex-direction: row;
@@ -129,7 +132,7 @@ $defaultValues: (
129
132
  justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
130
133
  align-items: center;
131
134
 
132
- &>p {
135
+ & > p {
133
136
  &#{$nodatap} {
134
137
  font-size: 14px;
135
138
  color: var(--_gray-500);
@@ -140,7 +143,7 @@ $defaultValues: (
140
143
  }
141
144
 
142
145
  &.vtl {
143
- &>div {
146
+ & > div {
144
147
  &#{$wrapper} {
145
148
  display: var(--_d-flex);
146
149
  flex-direction: column;
@@ -149,7 +152,7 @@ $defaultValues: (
149
152
  }
150
153
  }
151
154
 
152
- &>div {
155
+ & > div {
153
156
  &#{$wrapper} {
154
157
  padding: #{prepareMediaVariable(--_ctm-lt-pg)};
155
158
  background: prepareMediaVariable(--_ctm-dn-mu-cr-bd-cr);
@@ -162,18 +165,27 @@ $defaultValues: (
162
165
  }
163
166
 
164
167
  &:is([data-show-boxshadow="true"] > *) {
165
- box-shadow: prepareMediaVariable(--_ctm-dn-mu-cr-sw-ae) prepareMediaVariable(--_ctm-dn-mu-cr-sw-br) prepareMediaVariable(--_ctm-dn-mu-cr-sw-sd) prepareMediaVariable(--_ctm-dn-mu-cr-sw-cr);
168
+ box-shadow: prepareMediaVariable(--_ctm-dn-mu-cr-sw-ae)
169
+ prepareMediaVariable(--_ctm-dn-mu-cr-sw-br)
170
+ prepareMediaVariable(--_ctm-dn-mu-cr-sw-sd)
171
+ prepareMediaVariable(--_ctm-dn-mu-cr-sw-cr);
166
172
  }
167
173
 
168
- &>div {
174
+ & > div {
169
175
  &#{$menuItem} {
170
176
  position: relative;
171
- padding: var(--_sf-it-at-pd,
172
- var(--_sf-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-pg)}));
173
- background: var(--_sf-it-at-bd,
174
- var(--_sf-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-bd-cr)}));
175
- border-radius: var(--_sf-it-at-br,
176
- var(--_sf-it-hr-br, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-rs)}));
177
+ padding: var(
178
+ --_sf-it-at-pd,
179
+ var(--_sf-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-pg)})
180
+ );
181
+ background: var(
182
+ --_sf-it-at-bd,
183
+ var(--_sf-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-bd-cr)})
184
+ );
185
+ border-radius: var(
186
+ --_sf-it-at-br,
187
+ var(--_sf-it-hr-br, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-rs)})
188
+ );
177
189
  display: var(--_d-flex);
178
190
  align-items: center;
179
191
 
@@ -256,87 +268,150 @@ $defaultValues: (
256
268
  }
257
269
 
258
270
  &[data-show-border="true"] {
259
- border-color: var(--_sf-it-at-brc,
260
- var(--_sf-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-cr)}));
261
- border-width: var(--_sf-it-at-bw,
262
- var(--_sf-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-wh)}));
263
- border-style: var(--_sf-it-at-bs,
264
- var(--_sf-it-hr-bs, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-se)));
271
+ border-color: var(
272
+ --_sf-it-at-brc,
273
+ var(--_sf-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-cr)})
274
+ );
275
+ border-width: var(
276
+ --_sf-it-at-bw,
277
+ var(--_sf-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-wh)})
278
+ );
279
+ border-style: var(
280
+ --_sf-it-at-bs,
281
+ var(--_sf-it-hr-bs, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-se))
282
+ );
265
283
  }
266
284
 
267
285
  &[data-show-boxshadow="true"] {
268
- box-shadow: var(--_sf-it-at-bsa,
269
- var(--_sf-it-hr-bsa, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-ae)})) var(--_sf-it-at-blr,
270
- var(--_sf-it-hr-blr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-br)})) var(--_sf-it-at-spr,
271
- var(--_sf-it-hr-spr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-sd)})) var(--_sf-it-at-bscl,
272
- var(--_sf-it-hr-bscl, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-cr)));
286
+ box-shadow: var(
287
+ --_sf-it-at-bsa,
288
+ var(--_sf-it-hr-bsa, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-ae)})
289
+ )
290
+ var(
291
+ --_sf-it-at-blr,
292
+ var(--_sf-it-hr-blr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-br)})
293
+ )
294
+ var(
295
+ --_sf-it-at-spr,
296
+ var(--_sf-it-hr-spr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-sd)})
297
+ )
298
+ var(
299
+ --_sf-it-at-bscl,
300
+ var(--_sf-it-hr-bscl, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-cr))
301
+ );
273
302
  }
274
303
 
275
- &>a {
304
+ & > a {
276
305
  display: var(--_d-flex);
277
306
  justify-content: space-between;
278
307
  align-items: center;
279
308
  gap: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-gp);
280
309
 
281
- &>span {
310
+ & > span {
282
311
  display: var(--_d-flex);
283
- font-family: var(--_sf-it-at-ff,
284
- var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-fy)}));
285
-
312
+ font-family: var(
313
+ --_sf-it-at-ff,
314
+ var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-fy)})
315
+ );
286
316
  &.flex__overflow {
287
317
  white-space: normal;
288
318
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
289
319
  }
290
-
291
- font-size: var(--_sf-it-at-fs,
292
- var(--_sf-it-hr-fs, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se)}));
293
- color: var(--_sf-it-at-fclr,
294
- var(--_sf-it-hr-fclr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-cr)}));
295
- font-weight: var(--_sf-it-at-fw,
296
- var(--_sf-it-hr-fw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-wt)}));
297
- font-style: var(--_sf-it-at-fsi,
298
- var(--_sf-it-hr-fsi,
299
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se-ic)}));
300
- text-decoration: var(--_sf-it-at-td,
301
- var(--_sf-it-hr-td, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ue)}));
302
- text-align: var(--_sf-it-at-tae,
303
- var(--_sf-it-hr-tae, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-an)}));
304
- letter-spacing: var(--_sf-it-at-ls,
305
- var(--_sf-it-hr-ls, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-lr-sg)}));
306
- line-height: var(--_sf-it-at-lh,
307
- var(--_sf-it-hr-lh, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-le-ht)}));
308
- text-transform: var(--_sf-it-at-ttm,
309
- var(--_sf-it-hr-ttm,
310
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-tm, none)}));
311
- word-wrap: var(--_sf-it-at-wwp,
312
- var(--_sf-it-hr-wwp,
313
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-wp, normal)}));
314
- word-break: var(--_sf-it-at-wbk,
315
- var(--_sf-it-hr-wbk,
316
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-bk, normal)}));
320
+ font-size: var(
321
+ --_sf-it-at-fs,
322
+ var(--_sf-it-hr-fs, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se)})
323
+ );
324
+ color: var(
325
+ --_sf-it-at-fclr,
326
+ var(--_sf-it-hr-fclr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-cr)})
327
+ );
328
+ font-weight: var(
329
+ --_sf-it-at-fw,
330
+ var(--_sf-it-hr-fw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-wt)})
331
+ );
332
+ font-style: var(
333
+ --_sf-it-at-fsi,
334
+ var(
335
+ --_sf-it-hr-fsi,
336
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se-ic)}
337
+ )
338
+ );
339
+ text-decoration: var(
340
+ --_sf-it-at-td,
341
+ var(--_sf-it-hr-td, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ue)})
342
+ );
343
+ text-align: var(
344
+ --_sf-it-at-tae,
345
+ var(--_sf-it-hr-tae, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-an)})
346
+ );
347
+ letter-spacing: var(
348
+ --_sf-it-at-ls,
349
+ var(--_sf-it-hr-ls, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-lr-sg)})
350
+ );
351
+ line-height: var(
352
+ --_sf-it-at-lh,
353
+ var(--_sf-it-hr-lh, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-le-ht)})
354
+ );
355
+ text-transform: var(
356
+ --_sf-it-at-ttm,
357
+ var(
358
+ --_sf-it-hr-ttm,
359
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-tm, none)}
360
+ )
361
+ );
362
+ word-wrap: var(
363
+ --_sf-it-at-wwp,
364
+ var(
365
+ --_sf-it-hr-wwp,
366
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-wp, normal)}
367
+ )
368
+ );
369
+ word-break: var(
370
+ --_sf-it-at-wbk,
371
+ var(
372
+ --_sf-it-hr-wbk,
373
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-bk, normal)}
374
+ )
375
+ );
317
376
 
318
377
  // The item's own leading glyph. Styled from the `Item`-suffixed
319
378
  // vars so it is sized and coloured independently of the caret
320
379
  // below, which shares this parent but reads the unsuffixed set.
321
380
  &.flex__menu__item__leading__icon {
322
381
  flex: 0 0 auto;
323
- margin-inline-end: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-gp-im,
324
- 0px);
382
+ margin-inline-end: prepareMediaVariable(
383
+ --_ctm-dn-mu-im-se-dt-se-in-gp-im,
384
+ 0px
385
+ );
325
386
 
326
387
  svg {
327
- width: var(--_sf-it-at-isz-im,
328
- var(--_sf-it-hr-isz-im,
329
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se-im)}));
330
- height: var(--_sf-it-at-isz-im,
331
- var(--_sf-it-hr-isz-im,
332
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se-im)}));
388
+ width: var(
389
+ --_sf-it-at-isz-im,
390
+ var(
391
+ --_sf-it-hr-isz-im,
392
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se-im)}
393
+ )
394
+ );
395
+ height: var(
396
+ --_sf-it-at-isz-im,
397
+ var(
398
+ --_sf-it-hr-isz-im,
399
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se-im)}
400
+ )
401
+ );
333
402
 
334
403
  path {
335
- stroke: var(--_sf-it-at-icr-im,
336
- var(--_sf-it-hr-icr-im,
337
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1-im)}));
338
- stroke-width: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-se-wh-im,
339
- 1.25);
404
+ stroke: var(
405
+ --_sf-it-at-icr-im,
406
+ var(
407
+ --_sf-it-hr-icr-im,
408
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1-im)}
409
+ )
410
+ );
411
+ stroke-width: prepareMediaVariable(
412
+ --_ctm-dn-mu-im-se-dt-se-se-wh-im,
413
+ 1.25
414
+ );
340
415
  }
341
416
  }
342
417
  }
@@ -347,19 +422,32 @@ $defaultValues: (
347
422
  }
348
423
 
349
424
  svg {
350
- width: var(--_sf-it-at-isz,
351
- var(--_sf-it-hr-isz,
352
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se)}));
353
- height: var(--_sf-it-at-isz,
354
- var(--_sf-it-hr-isz,
355
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se)}));
425
+ width: var(
426
+ --_sf-it-at-isz,
427
+ var(
428
+ --_sf-it-hr-isz,
429
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se)}
430
+ )
431
+ );
432
+ height: var(
433
+ --_sf-it-at-isz,
434
+ var(
435
+ --_sf-it-hr-isz,
436
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se)}
437
+ )
438
+ );
356
439
  transform: rotate(#{var(--_sf-svg-tr, 0deg)});
357
- transition: transform var(--_transition-duration) var(--_transition-timing-function);
440
+ transition: transform var(--_transition-duration)
441
+ var(--_transition-timing-function);
358
442
 
359
443
  path {
360
- stroke: var(--_sf-it-at-icr,
361
- var(--_sf-it-hr-icr,
362
- #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1)}));
444
+ stroke: var(
445
+ --_sf-it-at-icr,
446
+ var(
447
+ --_sf-it-hr-icr,
448
+ #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1)}
449
+ )
450
+ );
363
451
  // Overrides the stroke-width presentation attribute baked into the icon markup.
364
452
  stroke-width: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-se-wh, 1.25);
365
453
  }
@@ -370,14 +458,14 @@ $defaultValues: (
370
458
  // The row is `space-between`, so a third child would otherwise
371
459
  // spread all three apart. Letting the label absorb the free space
372
460
  // keeps the glyph beside it and the caret out at the edge.
373
- &>.flex__menu__item__leading__icon+span {
461
+ & > .flex__menu__item__leading__icon + span {
374
462
  flex: 1 1 auto;
375
463
  }
376
464
  }
377
465
 
378
466
  // Sub Item Container
379
467
 
380
- &>ul {
468
+ & > ul {
381
469
  &#{$subMenuContainer} {
382
470
  background: prepareMediaVariable(--_ctm-dn-sb-mu-cr-bd-cr);
383
471
  border-radius: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-rs);
@@ -421,467 +509,491 @@ $defaultValues: (
421
509
  }
422
510
 
423
511
  &[data-show-boxshadow="true"] {
424
- box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae) prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br) prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd) prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
512
+ box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae)
513
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br)
514
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd)
515
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
425
516
  }
426
517
 
427
- &>li {
518
+ & > li {
428
519
  &#{$subMenuItem} {
429
520
  display: var(--_d-flex);
430
521
  flex-direction: column;
431
522
 
432
- padding: var(--_sf-sb-it-at-pd,
433
- var(--_sf-sb-it-hr-pd,
434
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg)}));
435
- background: var(--_sf-sb-it-at-bd,
436
- var(--_sf-sb-it-hr-bd,
437
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)}));
438
- border-radius: var(--_sf-sb-it-at-br,
439
- var(--_sf-sb-it-hr-br,
440
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)}));
523
+ padding: var(
524
+ --_sf-sb-it-at-pd,
525
+ var(
526
+ --_sf-sb-it-hr-pd,
527
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg)}
528
+ )
529
+ );
530
+ background: var(
531
+ --_sf-sb-it-at-bd,
532
+ var(
533
+ --_sf-sb-it-hr-bd,
534
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)}
535
+ )
536
+ );
537
+ border-radius: var(
538
+ --_sf-sb-it-at-br,
539
+ var(
540
+ --_sf-sb-it-hr-br,
541
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)}
542
+ )
543
+ );
441
544
 
442
545
  &[data-show-border="true"] {
443
- border-color: var(--_sf-sb-it-at-brc,
444
- var(--_sf-sb-it-hr-brc,
445
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)}));
446
- border-width: var(--_sf-sb-it-at-bw,
447
- var(--_sf-sb-it-hr-bw,
448
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)}));
449
- border-style: var(--_sf-sb-it-at-bs,
450
- var(--_sf-sb-it-hr-bs,
451
- prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se)));
546
+ border-color: var(
547
+ --_sf-sb-it-at-brc,
548
+ var(
549
+ --_sf-sb-it-hr-brc,
550
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)}
551
+ )
552
+ );
553
+ border-width: var(
554
+ --_sf-sb-it-at-bw,
555
+ var(
556
+ --_sf-sb-it-hr-bw,
557
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)}
558
+ )
559
+ );
560
+ border-style: var(
561
+ --_sf-sb-it-at-bs,
562
+ var(
563
+ --_sf-sb-it-hr-bs,
564
+ prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se)
565
+ )
566
+ );
452
567
  }
453
568
 
454
569
  &[data-show-boxshadow="true"] {
455
- box-shadow: var(--_sf-sb-it-at-bsa,
456
- var(--_sf-sb-it-hr-bsa,
457
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)})) var(--_sf-sb-it-at-blr,
458
- var(--_sf-sb-it-hr-blr,
459
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)})) var(--_sf-sb-it-at-spr,
460
- var(--_sf-sb-it-hr-spr,
461
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)})) var(--_sf-sb-it-at-bscl,
462
- var(--_sf-sb-it-hr-bscl,
463
- prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr)));
570
+ box-shadow: var(
571
+ --_sf-sb-it-at-bsa,
572
+ var(
573
+ --_sf-sb-it-hr-bsa,
574
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)}
575
+ )
576
+ )
577
+ var(
578
+ --_sf-sb-it-at-blr,
579
+ var(
580
+ --_sf-sb-it-hr-blr,
581
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)}
582
+ )
583
+ )
584
+ var(
585
+ --_sf-sb-it-at-spr,
586
+ var(
587
+ --_sf-sb-it-hr-spr,
588
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)}
589
+ )
590
+ )
591
+ var(
592
+ --_sf-sb-it-at-bscl,
593
+ var(
594
+ --_sf-sb-it-hr-bscl,
595
+ prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr)
596
+ )
597
+ );
464
598
  }
465
599
 
466
600
  &:hover {
467
601
  --_sf-sb-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-pg)};
468
602
  --_sf-sb-it-hr-bd: #{prepareMediaVariable(
469
- --_ctm-dn-sb-mu-im-se-hr-se-bd-cr)
603
+ --_ctm-dn-sb-mu-im-se-hr-se-bd-cr
604
+ )};
605
+ --_sf-sb-it-hr-br: #{prepareMediaVariable(
606
+ --_ctm-dn-sb-mu-im-se-hr-se-br-rs
607
+ )};
608
+ --_sf-sb-it-hr-brc: #{prepareMediaVariable(
609
+ --_ctm-dn-sb-mu-im-se-hr-se-br-cr
610
+ )};
611
+ --_sf-sb-it-hr-bw: #{prepareMediaVariable(
612
+ --_ctm-dn-sb-mu-im-se-hr-se-br-wh
613
+ )};
614
+ --_sf-sb-it-hr-bs: #{prepareMediaVariable(
615
+ --_ctm-dn-sb-mu-im-se-hr-se-br-se
616
+ )};
617
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(
618
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-ae
619
+ )};
620
+ --_sf-sb-it-hr-blr: #{prepareMediaVariable(
621
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-br
622
+ )};
623
+ --_sf-sb-it-hr-spr: #{prepareMediaVariable(
624
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-sd
625
+ )};
626
+ --_sf-sb-it-hr-bscl: #{prepareMediaVariable(
627
+ --_ctm-dn-sb-mu-im-se-hr-se-sw-cr
628
+ )};
629
+
630
+ --_sf-sb-it-hr-ff: #{prepareMediaVariable(
631
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-fy
632
+ )};
633
+ --_sf-sb-it-hr-fs: #{prepareMediaVariable(
634
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-se
635
+ )};
636
+ --_sf-sb-it-hr-fclr: #{prepareMediaVariable(
637
+ --_ctm-dn-sb-mu-im-se-hr-se-cr
638
+ )};
639
+ --_sf-sb-it-hr-fw: #{prepareMediaVariable(
640
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-wt
641
+ )};
642
+
643
+ --_sf-sb-it-hr-fsi: #{prepareMediaVariable(
644
+ --_ctm-dn-sb-mu-im-se-hr-se-ft-se-ic
645
+ )};
646
+ --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ue)};
647
+ --_sf-sb-it-hr-tae: #{prepareMediaVariable(
648
+ --_ctm-dn-sb-mu-im-se-hr-se-tt-an
649
+ )};
650
+ --_sf-sb-it-hr-ls: #{prepareMediaVariable(
651
+ --_ctm-dn-sb-mu-im-se-hr-se-lr-sg
652
+ )};
653
+ --_sf-sb-it-hr-lh: #{prepareMediaVariable(
654
+ --_ctm-dn-sb-mu-im-se-hr-se-le-ht
655
+ )};
656
+ --_sf-sb-it-hr-ttm: #{prepareMediaVariable(
657
+ --_ctm-dn-sb-mu-im-se-hr-se-tt-tm
658
+ )};
659
+ --_sf-sb-it-hr-wwp: #{prepareMediaVariable(
660
+ --_ctm-dn-sb-mu-im-se-hr-se-wd-wp
661
+ )};
662
+ --_sf-sb-it-hr-wbk: #{prepareMediaVariable(
663
+ --_ctm-dn-sb-mu-im-se-hr-se-wd-bk
664
+ )};
665
+
666
+ // Per-item leading icon hover overrides.
667
+ --_sf-sb-it-hr-isz-im: #{prepareMediaVariable(
668
+ --_ctm-dn-sb-mu-im-se-hr-se-in-se-im
669
+ )};
670
+ --_sf-sb-it-hr-icr-im: #{prepareMediaVariable(
671
+ --_ctm-dn-sb-mu-im-se-hr-se-in-c1-im
672
+ )};
470
673
  }
471
674
 
472
- ;
473
- --_sf-sb-it-hr-br: #{prepareMediaVariable(
474
- --_ctm-dn-sb-mu-im-se-hr-se-br-rs)
475
- }
675
+ &.active {
676
+ --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
677
+ --_sf-sb-it-at-bd: #{prepareMediaVariable(
678
+ --_ctm-dn-sb-mu-im-se-sd-se-bd-cr
679
+ )};
680
+ --_sf-sb-it-at-br: #{prepareMediaVariable(
681
+ --_ctm-dn-sb-mu-im-se-sd-se-br-rs
682
+ )};
683
+ --_sf-sb-it-at-brc: #{prepareMediaVariable(
684
+ --_ctm-dn-sb-mu-im-se-sd-se-br-cr
685
+ )};
686
+ --_sf-sb-it-at-bw: #{prepareMediaVariable(
687
+ --_ctm-dn-sb-mu-im-se-sd-se-br-wh
688
+ )};
689
+ --_sf-sb-it-at-bs: #{prepareMediaVariable(
690
+ --_ctm-dn-sb-mu-im-se-sd-se-br-se
691
+ )};
692
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(
693
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-ae
694
+ )};
695
+ --_sf-sb-it-at-blr: #{prepareMediaVariable(
696
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-br
697
+ )};
698
+ --_sf-sb-it-at-spr: #{prepareMediaVariable(
699
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-sd
700
+ )};
701
+ --_sf-sb-it-at-bscl: #{prepareMediaVariable(
702
+ --_ctm-dn-sb-mu-im-se-sd-se-sw-cr
703
+ )};
704
+
705
+ --_sf-sb-it-at-ff: #{prepareMediaVariable(
706
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-fy
707
+ )};
708
+ --_sf-sb-it-at-fs: #{prepareMediaVariable(
709
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-se
710
+ )};
711
+ --_sf-sb-it-at-fclr: #{prepareMediaVariable(
712
+ --_ctm-dn-sb-mu-im-se-sd-se-cr
713
+ )};
714
+ --_sf-sb-it-at-fw: #{prepareMediaVariable(
715
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-wt
716
+ )};
717
+ --_sf-sb-it-at-fsi: #{prepareMediaVariable(
718
+ --_ctm-dn-sb-mu-im-se-sd-se-ft-se-ic
719
+ )};
720
+ --_sf-sb-it-at-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ue)};
721
+ --_sf-sb-it-at-tae: #{prepareMediaVariable(
722
+ --_ctm-dn-sb-mu-im-se-sd-se-tt-an
723
+ )};
724
+ --_sf-sb-it-at-ls: #{prepareMediaVariable(
725
+ --_ctm-dn-sb-mu-im-se-sd-se-lr-sg
726
+ )};
727
+ --_sf-sb-it-at-lh: #{prepareMediaVariable(
728
+ --_ctm-dn-sb-mu-im-se-sd-se-le-ht
729
+ )};
730
+ --_sf-sb-it-at-ttm: #{prepareMediaVariable(
731
+ --_ctm-dn-sb-mu-im-se-sd-se-tt-tm
732
+ )};
733
+ --_sf-sb-it-at-wwp: #{prepareMediaVariable(
734
+ --_ctm-dn-sb-mu-im-se-sd-se-wd-wp
735
+ )};
736
+ --_sf-sb-it-at-wbk: #{prepareMediaVariable(
737
+ --_ctm-dn-sb-mu-im-se-sd-se-wd-bk
738
+ )};
739
+
740
+ // Per-item leading icon selected-state overrides.
741
+ --_sf-sb-it-at-isz-im: #{prepareMediaVariable(
742
+ --_ctm-dn-sb-mu-im-se-sd-se-in-se-im
743
+ )};
744
+ --_sf-sb-it-at-icr-im: #{prepareMediaVariable(
745
+ --_ctm-dn-sb-mu-im-se-sd-se-in-c1-im
746
+ )};
747
+ }
476
748
 
477
- ;
478
- --_sf-sb-it-hr-brc: #{prepareMediaVariable(
479
- --_ctm-dn-sb-mu-im-se-hr-se-br-cr)
749
+ & > a {
750
+ display: var(--_d-flex);
751
+ justify-content: space-between;
752
+ align-items: center;
753
+
754
+ & > span {
755
+ display: var(--_d-flex);
756
+
757
+ // Per-item leading glyph, styled from the sub-menu item
758
+ // scope's own `Item` vars.
759
+ &.flex__sub__menu__item__leading__icon {
760
+ flex: 0 0 auto;
761
+ margin-inline-end: prepareMediaVariable(
762
+ --_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
763
+ 0px
764
+ );
765
+
766
+ svg {
767
+ width: var(
768
+ --_sf-sb-it-at-isz-im,
769
+ var(
770
+ --_sf-sb-it-hr-isz-im,
771
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
772
+ )
773
+ );
774
+ height: var(
775
+ --_sf-sb-it-at-isz-im,
776
+ var(
777
+ --_sf-sb-it-hr-isz-im,
778
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
779
+ )
780
+ );
781
+
782
+ path {
783
+ stroke: var(
784
+ --_sf-sb-it-at-icr-im,
785
+ var(
786
+ --_sf-sb-it-hr-icr-im,
787
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}
788
+ )
789
+ );
790
+ stroke-width: prepareMediaVariable(
791
+ --_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
792
+ 1.25
793
+ );
794
+ }
795
+ }
796
+ }
797
+
798
+ &#{$subMenuItemText} {
799
+ width: 100%;
800
+ flex: 1 1 auto;
801
+ font-family: var(
802
+ --_sf-it-at-ff,
803
+ var(
804
+ --_sf-it-hr-ff,
805
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)}
806
+ )
807
+ );
808
+ &.flex__overflow {
809
+ white-space: normal;
810
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
811
+ }
812
+ font-size: var(
813
+ --_sf-sb-it-at-fs,
814
+ var(
815
+ --_sf-sb-it-hr-fs,
816
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}
817
+ )
818
+ );
819
+ color: var(
820
+ --_sf-sb-it-at-fclr,
821
+ var(
822
+ --_sf-sb-it-hr-fclr,
823
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}
824
+ )
825
+ );
826
+ font-weight: var(
827
+ --_sf-sb-it-at-fw,
828
+ var(
829
+ --_sf-sb-it-hr-fw,
830
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-wt)}
831
+ )
832
+ );
833
+ font-style: var(
834
+ --_sf-sb-it-at-fsi,
835
+ var(
836
+ --_sf-sb-it-hr-fsi,
837
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}
838
+ )
839
+ );
840
+ text-decoration: var(
841
+ --_sf-sb-it-at-td,
842
+ var(
843
+ --_sf-sb-it-hr-td,
844
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)}
845
+ )
846
+ );
847
+ text-align: var(
848
+ --_sf-sb-it-at-tae,
849
+ var(
850
+ --_sf-sb-it-hr-tae,
851
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
852
+ )
853
+ );
854
+ letter-spacing: var(
855
+ --_sf-sb-it-at-ls,
856
+ var(
857
+ --_sf-sb-it-hr-ls,
858
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}
859
+ )
860
+ );
861
+ line-height: var(
862
+ --_sf-sb-it-at-lh,
863
+ var(
864
+ --_sf-sb-it-hr-lh,
865
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
866
+ )
867
+ );
868
+ text-transform: var(
869
+ --_sf-sb-it-at-ttm,
870
+ var(
871
+ --_sf-sb-it-hr-ttm,
872
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm, none)}
873
+ )
874
+ );
875
+ word-wrap: var(
876
+ --_sf-sb-it-at-wwp,
877
+ var(
878
+ --_sf-sb-it-hr-wwp,
879
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp, normal)}
880
+ )
881
+ );
882
+ word-break: var(
883
+ --_sf-sb-it-at-wbk,
884
+ var(
885
+ --_sf-sb-it-hr-wbk,
886
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk, normal)}
887
+ )
888
+ );
889
+ display: -webkit-box;
890
+ -webkit-line-clamp: 1;
891
+ -webkit-box-orient: vertical;
892
+ overflow: hidden;
893
+ }
894
+ }
895
+ }
896
+ }
480
897
  }
481
-
482
- ;
483
- --_sf-sb-it-hr-bw: #{prepareMediaVariable(
484
- --_ctm-dn-sb-mu-im-se-hr-se-br-wh)
485
898
  }
486
-
487
- ;
488
- --_sf-sb-it-hr-bs: #{prepareMediaVariable(
489
- --_ctm-dn-sb-mu-im-se-hr-se-br-se)
490
899
  }
491
-
492
- ;
493
- --_sf-sb-it-hr-bsa: #{prepareMediaVariable(
494
- --_ctm-dn-sb-mu-im-se-hr-se-sw-ae)
495
900
  }
496
-
497
- ;
498
- --_sf-sb-it-hr-blr: #{prepareMediaVariable(
499
- --_ctm-dn-sb-mu-im-se-hr-se-sw-br)
500
901
  }
501
-
502
- ;
503
- --_sf-sb-it-hr-spr: #{prepareMediaVariable(
504
- --_ctm-dn-sb-mu-im-se-hr-se-sw-sd)
505
902
  }
506
-
507
- ;
508
- --_sf-sb-it-hr-bscl: #{prepareMediaVariable(
509
- --_ctm-dn-sb-mu-im-se-hr-se-sw-cr)
510
903
  }
511
904
 
512
- ;
513
-
514
- --_sf-sb-it-hr-ff: #{prepareMediaVariable(
515
- --_ctm-dn-sb-mu-im-se-hr-se-ft-fy)
516
- }
517
-
518
- ;
519
- --_sf-sb-it-hr-fs: #{prepareMediaVariable(
520
- --_ctm-dn-sb-mu-im-se-hr-se-ft-se)
521
- }
522
-
523
- ;
524
- --_sf-sb-it-hr-fclr: #{prepareMediaVariable(
525
- --_ctm-dn-sb-mu-im-se-hr-se-cr)
526
- }
527
-
528
- ;
529
- --_sf-sb-it-hr-fw: #{prepareMediaVariable(
530
- --_ctm-dn-sb-mu-im-se-hr-se-ft-wt)
531
- }
532
-
533
- ;
534
-
535
- --_sf-sb-it-hr-fsi: #{prepareMediaVariable(
536
- --_ctm-dn-sb-mu-im-se-hr-se-ft-se-ic)
537
- }
538
-
539
- ;
540
- --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ue)};
541
- --_sf-sb-it-hr-tae: #{prepareMediaVariable(
542
- --_ctm-dn-sb-mu-im-se-hr-se-tt-an)
543
- }
544
-
545
- ;
546
- --_sf-sb-it-hr-ls: #{prepareMediaVariable(
547
- --_ctm-dn-sb-mu-im-se-hr-se-lr-sg)
548
- }
549
-
550
- ;
551
- --_sf-sb-it-hr-lh: #{prepareMediaVariable(
552
- --_ctm-dn-sb-mu-im-se-hr-se-le-ht)
553
- }
554
-
555
- ;
556
- --_sf-sb-it-hr-ttm: #{prepareMediaVariable(
557
- --_ctm-dn-sb-mu-im-se-hr-se-tt-tm)
558
- }
559
-
560
- ;
561
- --_sf-sb-it-hr-wwp: #{prepareMediaVariable(
562
- --_ctm-dn-sb-mu-im-se-hr-se-wd-wp)
563
- }
564
-
565
- ;
566
- --_sf-sb-it-hr-wbk: #{prepareMediaVariable(
567
- --_ctm-dn-sb-mu-im-se-hr-se-wd-bk)
568
- }
569
-
570
- ;
571
-
572
- // Per-item leading icon hover overrides.
573
- --_sf-sb-it-hr-isz-im: #{prepareMediaVariable(
574
- --_ctm-dn-sb-mu-im-se-hr-se-in-se-im)
575
- }
576
-
577
- ;
578
- --_sf-sb-it-hr-icr-im: #{prepareMediaVariable(
579
- --_ctm-dn-sb-mu-im-se-hr-se-in-c1-im)
580
- }
581
-
582
- ;
583
- }
584
-
585
- &.active {
586
- --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
587
- --_sf-sb-it-at-bd: #{prepareMediaVariable(
588
- --_ctm-dn-sb-mu-im-se-sd-se-bd-cr)
589
- }
590
-
591
- ;
592
- --_sf-sb-it-at-br: #{prepareMediaVariable(
593
- --_ctm-dn-sb-mu-im-se-sd-se-br-rs)
594
- }
595
-
596
- ;
597
- --_sf-sb-it-at-brc: #{prepareMediaVariable(
598
- --_ctm-dn-sb-mu-im-se-sd-se-br-cr)
599
- }
600
-
601
- ;
602
- --_sf-sb-it-at-bw: #{prepareMediaVariable(
603
- --_ctm-dn-sb-mu-im-se-sd-se-br-wh)
604
- }
605
-
606
- ;
607
- --_sf-sb-it-at-bs: #{prepareMediaVariable(
608
- --_ctm-dn-sb-mu-im-se-sd-se-br-se)
609
- }
610
-
611
- ;
612
- --_sf-sb-it-hr-bsa: #{prepareMediaVariable(
613
- --_ctm-dn-sb-mu-im-se-sd-se-sw-ae)
614
- }
615
-
616
- ;
617
- --_sf-sb-it-at-blr: #{prepareMediaVariable(
618
- --_ctm-dn-sb-mu-im-se-sd-se-sw-br)
619
- }
620
-
621
- ;
622
- --_sf-sb-it-at-spr: #{prepareMediaVariable(
623
- --_ctm-dn-sb-mu-im-se-sd-se-sw-sd)
624
- }
625
-
626
- ;
627
- --_sf-sb-it-at-bscl: #{prepareMediaVariable(
628
- --_ctm-dn-sb-mu-im-se-sd-se-sw-cr)
629
- }
630
-
631
- ;
632
-
633
- --_sf-sb-it-at-ff: #{prepareMediaVariable(
634
- --_ctm-dn-sb-mu-im-se-sd-se-ft-fy)
635
- }
636
-
637
- ;
638
- --_sf-sb-it-at-fs: #{prepareMediaVariable(
639
- --_ctm-dn-sb-mu-im-se-sd-se-ft-se)
640
- }
641
-
642
- ;
643
- --_sf-sb-it-at-fclr: #{prepareMediaVariable(
644
- --_ctm-dn-sb-mu-im-se-sd-se-cr)
645
- }
646
-
647
- ;
648
- --_sf-sb-it-at-fw: #{prepareMediaVariable(
649
- --_ctm-dn-sb-mu-im-se-sd-se-ft-wt)
650
- }
651
-
652
- ;
653
- --_sf-sb-it-at-fsi: #{prepareMediaVariable(
654
- --_ctm-dn-sb-mu-im-se-sd-se-ft-se-ic)
655
- }
905
+ & > #{$hamburger} {
906
+ display: var(--_d-none);
907
+ padding: var(--_sf-hm-hr-pd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-pg)});
908
+ border-radius: var(--_sf-hm-hr-br, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-rs)});
909
+ background: var(--_sf-hm-hr-bd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-bd-cr)});
656
910
 
657
- ;
658
- --_sf-sb-it-at-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ue)};
659
- --_sf-sb-it-at-tae: #{prepareMediaVariable(
660
- --_ctm-dn-sb-mu-im-se-sd-se-tt-an)
661
- }
662
-
663
- ;
664
- --_sf-sb-it-at-ls: #{prepareMediaVariable(
665
- --_ctm-dn-sb-mu-im-se-sd-se-lr-sg)
666
- }
667
-
668
- ;
669
- --_sf-sb-it-at-lh: #{prepareMediaVariable(
670
- --_ctm-dn-sb-mu-im-se-sd-se-le-ht)
671
- }
911
+ &[data-show-border="true"] {
912
+ border-style: var(--_sf-hm-hr-bs, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-se)});
913
+ border-width: var(--_sf-hm-hr-bw, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-wh)});
914
+ border-color: var(--_sf-hm-hr-bc, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-cr)});
915
+ }
672
916
 
673
- ;
674
- --_sf-sb-it-at-ttm: #{prepareMediaVariable(
675
- --_ctm-dn-sb-mu-im-se-sd-se-tt-tm)
676
- }
917
+ &[data-show-boxshadow="true"] {
918
+ box-shadow: var(--_sf-hm-hr-bsa, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-ae)})
919
+ var(--_sf-hm-hr-blr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-br)})
920
+ var(--_sf-hm-hr-spr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-sd)})
921
+ var(--_sf-hm-hr-bscl, prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-cr));
922
+ }
677
923
 
678
- ;
679
- --_sf-sb-it-at-wwp: #{prepareMediaVariable(
680
- --_ctm-dn-sb-mu-im-se-sd-se-wd-wp)
681
- }
924
+ &:hover {
925
+ & > span {
926
+ }
682
927
 
683
- ;
684
- --_sf-sb-it-at-wbk: #{prepareMediaVariable(
685
- --_ctm-dn-sb-mu-im-se-sd-se-wd-bk)
686
- }
928
+ svg {
929
+ --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
930
+ // Published on the <svg> rather than on <path>: custom properties
931
+ // inherit, so whatever shapes the glyph is drawn with will read them.
932
+ --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
933
+ }
687
934
 
688
- ;
935
+ // --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
936
+ // --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
689
937
 
690
- // Per-item leading icon selected-state overrides.
691
- --_sf-sb-it-at-isz-im: #{prepareMediaVariable(
692
- --_ctm-dn-sb-mu-im-se-sd-se-in-se-im)
693
- }
938
+ --_sf-hm-hr-pd: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-pg)};
939
+ --_sf-hm-hr-br: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-rs)};
940
+ --_sf-hm-hr-bd: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-bd-cr)};
694
941
 
695
- ;
696
- --_sf-sb-it-at-icr-im: #{prepareMediaVariable(
697
- --_ctm-dn-sb-mu-im-se-sd-se-in-c1-im)
698
- }
942
+ --_sf-hm-hr-bs: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-se)};
943
+ --_sf-hm-hr-bw: #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-wh)};
944
+ --_sf-hm-hr-bc: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-cr)};
699
945
 
700
- ;
701
- }
946
+ --_sf-hm-hr-bsa: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-ae)};
947
+ --_sf-hm-hr-blr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-br)};
948
+ --_sf-hm-hr-spr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-sd)};
949
+ --_sf-hm-hr-bscl: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-cr)};
950
+ }
702
951
 
703
- &>a {
704
- display: var(--_d-flex);
705
- justify-content: space-between;
706
- align-items: center;
952
+ & > span {
953
+ display: var(--_d-flex);
954
+ align-items: center;
955
+ justify-content: center;
956
+ }
707
957
 
708
- &>span {
709
- display: var(--_d-flex);
958
+ svg {
959
+ width: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
960
+ height: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
961
+
962
+ // Reaches every stroked shape, not just <path>: the built-in glyphs are
963
+ // paths, but a custom (Sirv-hosted) hamburger is arbitrary markup and is
964
+ // inlined by SirvIcon just the same, so <line>/<rect>/<circle> icons have
965
+ // to pick up Icon Color and Stroke Width too.
966
+ path,
967
+ line,
968
+ polyline,
969
+ polygon,
970
+ circle,
971
+ ellipse,
972
+ rect {
973
+ stroke: var(--_sf-hm-hr-ic-clr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-c1)});
974
+ stroke-width: #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-se-wh, 1.25)};
975
+ }
976
+ }
977
+ }
710
978
 
711
- // Per-item leading glyph, styled from the sub-menu item
712
- // scope's own `Item` vars.
713
- &.flex__sub__menu__item__leading__icon {
714
- flex: 0 0 auto;
715
- margin-inline-end: prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
716
- 0px);
717
-
718
- svg {
719
- width: var(--_sf-sb-it-at-isz-im,
720
- var(--_sf-sb-it-hr-isz-im,
721
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}));
722
- height: var(--_sf-sb-it-at-isz-im,
723
- var(--_sf-sb-it-hr-isz-im,
724
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}));
725
-
726
- path {
727
- stroke: var(--_sf-sb-it-at-icr-im,
728
- var(--_sf-sb-it-hr-icr-im,
729
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}));
730
- stroke-width: prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
731
- 1.25);
979
+ @media only screen and (min-width: 10px) {
980
+ &.dk {
981
+ @include hamburgerCSS();
982
+ }
732
983
  }
733
- }
734
- }
735
984
 
736
- &#{$subMenuItemText} {
737
- width: 100%;
738
- flex: 1 1 auto;
739
- font-family: var(--_sf-it-at-ff,
740
- var(--_sf-it-hr-ff,
741
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)}));
985
+ @media only screen and (min-width: 10px) and (max-width: 1023px) {
986
+ &.tb {
987
+ @include hamburgerCSS();
988
+ }
989
+ }
742
990
 
743
- &.flex__overflow {
744
- white-space: normal;
745
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
991
+ @media only screen and (min-width: 10px) and (max-width: 767px) {
992
+ &.mb {
993
+ @include hamburgerCSS();
994
+ }
995
+ }
746
996
  }
747
-
748
- font-size: var(--_sf-sb-it-at-fs,
749
- var(--_sf-sb-it-hr-fs,
750
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}));
751
- color: var(--_sf-sb-it-at-fclr,
752
- var(--_sf-sb-it-hr-fclr,
753
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}));
754
- font-weight: var(--_sf-sb-it-at-fw,
755
- var(--_sf-sb-it-hr-fw,
756
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-wt)}));
757
- font-style: var(--_sf-sb-it-at-fsi,
758
- var(--_sf-sb-it-hr-fsi,
759
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}));
760
- text-decoration: var(--_sf-sb-it-at-td,
761
- var(--_sf-sb-it-hr-td,
762
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)}));
763
- text-align: var(--_sf-sb-it-at-tae,
764
- var(--_sf-sb-it-hr-tae,
765
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}));
766
- letter-spacing: var(--_sf-sb-it-at-ls,
767
- var(--_sf-sb-it-hr-ls,
768
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}));
769
- line-height: var(--_sf-sb-it-at-lh,
770
- var(--_sf-sb-it-hr-lh,
771
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}));
772
- text-transform: var(--_sf-sb-it-at-ttm,
773
- var(--_sf-sb-it-hr-ttm,
774
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm, none)}));
775
- word-wrap: var(--_sf-sb-it-at-wwp,
776
- var(--_sf-sb-it-hr-wwp,
777
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp, normal)}));
778
- word-break: var(--_sf-sb-it-at-wbk,
779
- var(--_sf-sb-it-hr-wbk,
780
- #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk, normal)}));
781
- display: -webkit-box;
782
- -webkit-line-clamp: 1;
783
- -webkit-box-orient: vertical;
784
- overflow: hidden;
785
- }
786
- }
787
- }
788
- }
789
- }
790
- }
791
- }
792
- }
793
- }
794
- }
795
- }
796
-
797
- &>#{$hamburger} {
798
- display: var(--_d-none);
799
- padding: var(--_sf-hm-hr-pd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-pg)});
800
- border-radius: var(--_sf-hm-hr-br, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-rs)});
801
- background: var(--_sf-hm-hr-bd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-bd-cr)});
802
-
803
- &[data-show-border="true"] {
804
- border-style: var(--_sf-hm-hr-bs, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-se)});
805
- border-width: var(--_sf-hm-hr-bw, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-wh)});
806
- border-color: var(--_sf-hm-hr-bc, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-cr)});
807
- }
808
-
809
- &[data-show-boxshadow="true"] {
810
- box-shadow: var(--_sf-hm-hr-bsa, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-ae)}) var(--_sf-hm-hr-blr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-br)}) var(--_sf-hm-hr-spr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-sd)}) var(--_sf-hm-hr-bscl, prepareMediaVariable(--_ctm-dn-hr-se-dt-se-sw-cr));
811
- }
812
-
813
- &:hover {
814
- &>span {}
815
-
816
- svg {
817
- --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
818
- // Published on the <svg> rather than on <path>: custom properties
819
- // inherit, so whatever shapes the glyph is drawn with will read them.
820
- --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
821
997
  }
822
-
823
- // --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
824
- // --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
825
-
826
- --_sf-hm-hr-pd: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-pg)};
827
- --_sf-hm-hr-br: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-rs)};
828
- --_sf-hm-hr-bd: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-bd-cr)};
829
-
830
- --_sf-hm-hr-bs: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-se)};
831
- --_sf-hm-hr-bw: #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-wh)};
832
- --_sf-hm-hr-bc: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-br-cr)};
833
-
834
- --_sf-hm-hr-bsa: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-ae)};
835
- --_sf-hm-hr-blr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-br)};
836
- --_sf-hm-hr-spr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-sd)};
837
- --_sf-hm-hr-bscl: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-cr)};
838
998
  }
839
-
840
- &>span {
841
- display: var(--_d-flex);
842
- align-items: center;
843
- justify-content: center;
844
- }
845
-
846
- svg {
847
- width: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
848
- height: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});
849
-
850
- // Reaches every stroked shape, not just <path>: the built-in glyphs are
851
- // paths, but a custom (Sirv-hosted) hamburger is arbitrary markup and is
852
- // inlined by SirvIcon just the same, so <line>/<rect>/<circle> icons have
853
- // to pick up Icon Color and Stroke Width too.
854
- path,
855
- line,
856
- polyline,
857
- polygon,
858
- circle,
859
- ellipse,
860
- rect {
861
- stroke: var(--_sf-hm-hr-ic-clr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-c1)});
862
- stroke-width: #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-se-wh, 1.25)};
863
- }
864
- }
865
- }
866
-
867
- @media only screen and (min-width: 10px) {
868
- &.dk {
869
- @include hamburgerCSS();
870
- }
871
- }
872
-
873
- @media only screen and (min-width: 10px) and (max-width: 1023px) {
874
- &.tb {
875
- @include hamburgerCSS();
876
- }
877
- }
878
-
879
- @media only screen and (min-width: 10px) and (max-width: 767px) {
880
- &.mb {
881
- @include hamburgerCSS();
882
- }
883
- }
884
- }
885
- }
886
999
  }
887
- }