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

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 (128) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleCategories.scss +301 -301
  18. package/dist/bundleDetails.scss +3774 -5072
  19. package/dist/button.scss +79 -103
  20. package/dist/buy-for-tab-container.scss +77 -106
  21. package/dist/buyForHeaders.scss +1722 -2976
  22. package/dist/cart-details.scss +481 -1012
  23. package/dist/cart-summary.scss +2234 -2826
  24. package/dist/cart-wrapper.scss +37 -79
  25. package/dist/cart.scss +117 -225
  26. package/dist/cartAttributes.scss +1103 -1422
  27. package/dist/category-groups-element.scss +127 -108
  28. package/dist/category-groups-product-grid.scss +120 -147
  29. package/dist/category-groups-product-image.scss +1162 -1457
  30. package/dist/category-groups-product-options.scss +613 -680
  31. package/dist/category-groups-product-price.scss +1966 -3244
  32. package/dist/category-groups-quota-details.scss +210 -464
  33. package/dist/category.scss +26 -50
  34. package/dist/checkout.scss +24 -16
  35. package/dist/confirm-modal.scss +22 -2
  36. package/dist/container.scss +32 -54
  37. package/dist/countdown.scss +711 -899
  38. package/dist/coupon.scss +1160 -1519
  39. package/dist/default-dropdown.scss +12 -1
  40. package/dist/embroider-template-1-v2.scss +123 -172
  41. package/dist/embroider-template-1.scss +68 -104
  42. package/dist/embroidery.scss +30 -31
  43. package/dist/employee-bulk-order.scss +418 -142
  44. package/dist/faq.scss +228 -408
  45. package/dist/filter-results.scss +125 -265
  46. package/dist/filters.scss +2143 -3040
  47. package/dist/gallery-slider-temp.scss +1458 -1776
  48. package/dist/global-styles.scss +218 -198
  49. package/dist/grid.scss +25 -33
  50. package/dist/hotspot.scss +68 -115
  51. package/dist/image-temp.scss +21 -20
  52. package/dist/item-stock.scss +9 -16
  53. package/dist/kitDetails.scss +2719 -4299
  54. package/dist/kits.scss +24 -19
  55. package/dist/language-selector.scss +211 -361
  56. package/dist/last-x-orders.scss +95 -174
  57. package/dist/layouter-item.scss +75 -103
  58. package/dist/layouter-pro-item.scss +89 -95
  59. package/dist/layouter-pro.scss +87 -92
  60. package/dist/layouter.scss +383 -445
  61. package/dist/light-box-v2.scss +89 -104
  62. package/dist/login.scss +287 -566
  63. package/dist/map.scss +1212 -1359
  64. package/dist/marchandiserSets.scss +95 -104
  65. package/dist/mega-menu-container.scss +96 -109
  66. package/dist/mega-menu.scss +624 -731
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +507 -619
  69. package/dist/multi-select-dropdown.scss +27 -3
  70. package/dist/my-templates.scss +38 -9
  71. package/dist/option-bar.scss +215 -375
  72. package/dist/order-status.scss +1790 -2187
  73. package/dist/overflow-module.scss +6 -7
  74. package/dist/past-orders.scss +118 -149
  75. package/dist/payment-methods.scss +46 -30
  76. package/dist/pickup-locations.scss +558 -1118
  77. package/dist/position-module.scss +20 -17
  78. package/dist/prefix-list.scss +21 -10
  79. package/dist/product-actions.scss +1750 -2055
  80. package/dist/product-basic-elements.scss +108 -169
  81. package/dist/product-highlights.scss +303 -348
  82. package/dist/product-image-allocation.scss +1477 -1477
  83. package/dist/product-image-bundles.scss +337 -642
  84. package/dist/product-inventory.scss +673 -1357
  85. package/dist/product-labels.scss +84 -105
  86. package/dist/product-options.scss +1287 -1444
  87. package/dist/product-price.scss +1283 -2561
  88. package/dist/product-promotions.scss +1388 -2830
  89. package/dist/product-sizechart.scss +516 -905
  90. package/dist/product.scss +28 -61
  91. package/dist/productDetails.scss +19 -39
  92. package/dist/profile.scss +207 -447
  93. package/dist/quantity-selector.scss +837 -1074
  94. package/dist/quick-inventory-check.scss +95 -174
  95. package/dist/quick-links.scss +55 -133
  96. package/dist/quick-order-pad.scss +218 -271
  97. package/dist/quota-details.scss +152 -282
  98. package/dist/quotes.scss +814 -847
  99. package/dist/repeater-embla-controls.scss +35 -15
  100. package/dist/repeater-grid-toggle.scss +156 -166
  101. package/dist/repeater-item.scss +41 -64
  102. package/dist/repeater.scss +671 -814
  103. package/dist/request-for-quotes.scss +66 -16
  104. package/dist/responsive-behaviour.scss +3 -1
  105. package/dist/rfqs.scss +118 -181
  106. package/dist/scroll.scss +93 -172
  107. package/dist/search-results-heading.scss +309 -309
  108. package/dist/search.scss +179 -326
  109. package/dist/section.scss +27 -51
  110. package/dist/shipping-payments.scss +198 -58
  111. package/dist/simple-list.scss +74 -164
  112. package/dist/social.scss +80 -145
  113. package/dist/sort.scss +168 -176
  114. package/dist/stack.scss +23 -34
  115. package/dist/static-global.scss +44 -26
  116. package/dist/stockStatus.scss +11 -19
  117. package/dist/store-locations.scss +577 -1105
  118. package/dist/tab-container.scss +81 -108
  119. package/dist/table-common.scss +217 -408
  120. package/dist/table.scss +271 -502
  121. package/dist/text-temp.scss +8 -7
  122. package/dist/theme-classes.scss +17 -13
  123. package/dist/uom-selector.scss +489 -949
  124. package/dist/user-elements.scss +2588 -2896
  125. package/dist/variant-picker.scss +1281 -2555
  126. package/dist/volume-pricing.scss +541 -1037
  127. package/dist/widget.scss +153 -153
  128. package/package.json +1 -1
@@ -15,25 +15,15 @@ $overflowSelector: ".flex__overflow";
15
15
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
16
16
  // Reads the percentage the left/right resize handles write, same as FAQ. Without
17
17
  // this the handles (and the Layout > Width input) drag a value nothing consumes.
18
- width: var(
19
- --_sf-el-wh-st-mx,
20
- calc(
21
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
22
- )
23
- );
18
+ width: var(--_sf-el-wh-st-mx,
19
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
24
20
  // Floor for the width above: the two items plus their icons stop reading as a row
25
21
  // below this, and dragging past it only produced a squeezed, wrapped box.
26
22
  min-width: 300px !important;
27
23
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
28
24
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
29
25
 
30
- --_aspect-ratio: calc(
31
- 1 *
32
- (
33
- var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
34
- var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
35
- )
36
- );
26
+ --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));
37
27
  // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
38
28
  // height: var(--_ctm-lt-ht);
39
29
  // height: ;
@@ -48,64 +38,46 @@ $overflowSelector: ".flex__overflow";
48
38
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
49
39
  // }
50
40
 
51
- & > .wrapper {
41
+ &>.wrapper {
52
42
  width: 100%;
53
43
  height: auto;
54
44
  }
45
+
55
46
  &[data-show-shadow="false"] {
56
47
  --_show-shadow: none;
57
48
  }
58
49
 
59
50
  .quota__details__element {
60
- background-color: var(
61
- --_ctm-mob-dn-wt-se-bd-cr,
62
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
63
- );
51
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
52
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
64
53
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
65
54
  display: flex;
66
55
  flex-direction: column;
67
- --_sf-gp: var(
68
- --_ctm-mob-lt-im-sg,
69
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
70
- );
56
+ --_sf-gp: var(--_ctm-mob-lt-im-sg,
57
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
71
58
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
72
59
  row-gap: var(--_sf-gp);
73
60
  width: 100%;
74
61
  // width: fit-content;
75
62
  height: auto;
76
- border-color: var(
77
- --_ctm-mob-dn-wt-se-br-cr,
78
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
79
- );
80
- border-style: var(
81
- --_ctm-mob-dn-wt-se-br-se,
82
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
83
- );
84
- border-width: var(
85
- --_ctm-mob-dn-wt-se-br-wh,
86
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
87
- );
88
- border-radius: var(
89
- --_ctm-mob-dn-wt-se-br-rs,
90
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
91
- );
92
- box-shadow: var(
93
- --_show-shadow,
94
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
95
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
96
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
97
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
98
- );
63
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
64
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
65
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
66
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
67
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
68
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
69
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
70
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
71
+ box-shadow: var(--_show-shadow,
72
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
99
73
 
100
74
  .product__hilights {
101
75
  display: flex;
102
76
  align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
103
77
  // Design > Widget Style > alignment, falling back to the Layout panel's own
104
78
  // alignment so elements set up before the design control existed keep theirs.
105
- justify-content: prepareMediaVariable(
106
- --_ctm-dn-wt-se-hl-at,
107
- prepareMediaVariable(--_ctm-lt-hl-at)
108
- );
79
+ justify-content: prepareMediaVariable(--_ctm-dn-wt-se-hl-at,
80
+ prepareMediaVariable(--_ctm-lt-hl-at));
109
81
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
110
82
  width: 100%;
111
83
 
@@ -121,22 +93,20 @@ $overflowSelector: ".flex__overflow";
121
93
  // The `-dr-dr-` doubling is not a typo — the first is the `divider` node,
122
94
  // the second the `divider…` property name. These two vars were written with
123
95
  // only one, which is exactly why neither control did anything.
124
- $shapeSize: prepareMediaVariable(
125
- --_ctm-dn-dr-dr-se-se,
126
- prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px)
127
- );
128
- $shapeColor: prepareMediaVariable(
129
- --_ctm-dn-dr-dr-se-cr,
130
- prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec)
131
- );
96
+ $shapeSize: prepareMediaVariable(--_ctm-dn-dr-dr-se-se,
97
+ prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px));
98
+ $shapeColor: prepareMediaVariable(--_ctm-dn-dr-dr-se-cr,
99
+ prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec));
132
100
 
133
101
  .product__list__item {
134
102
  position: relative;
103
+
135
104
  // The rule is a pseudo-element and takes no space of its own, so a wide one
136
105
  // grew back over the item beside it — see dividerGapReserve in functions.scss.
137
106
  &:not(:last-child) {
138
107
  @include dividerGapReserve($shapeSize, right);
139
108
  }
109
+
140
110
  &:not(:last-child)::after {
141
111
  content: "";
142
112
  width: $shapeSize;
@@ -196,6 +166,7 @@ $overflowSelector: ".flex__overflow";
196
166
  // Overrides the stroke-width presentation attribute baked into the icon markup.
197
167
  stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-wh, 1.25);
198
168
  }
169
+
199
170
  &[fill]:not([fill="none"]),
200
171
  [fill]:not([fill="none"]) {
201
172
  fill: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
@@ -217,6 +188,7 @@ $overflowSelector: ".flex__overflow";
217
188
  display: none;
218
189
  }
219
190
  }
191
+
220
192
  .product__list__item {
221
193
  display: flex;
222
194
  align-items: center;
@@ -230,6 +202,7 @@ $overflowSelector: ".flex__overflow";
230
202
  display: flex;
231
203
  }
232
204
  }
205
+
233
206
  .quota__left {
234
207
  .count {
235
208
  // padding-inline: var(--_sf-cd-gp);
@@ -237,144 +210,93 @@ $overflowSelector: ".flex__overflow";
237
210
  // element is narrowed, and it would also defeat the line clamp below,
238
211
  // which needs the text to wrap before it can restrict it to N lines.
239
212
  min-width: 0;
240
- color: var(
241
- --_ctm-mob-dn-qa-lt-cr,
242
- var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
243
- );
244
- font-family: var(
245
- --_ctm-mob-dn-qa-lt-ft-fy,
246
- var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
247
- );
248
- font-size: var(
249
- --_ctm-mob-dn-qa-lt-ft-se,
250
- var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
251
- );
252
- font-weight: var(
253
- --_ctm-mob-dn-qa-lt-ft-wt,
254
- var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt))
255
- );
256
- font-style: var(
257
- --_ctm-mob-dn-qa-lt-ft-se-ic,
258
- var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic))
259
- );
260
- text-align: var(
261
- --_ctm-mob-dn-qa-lt-tt-an,
262
- var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an))
263
- );
264
- letter-spacing: var(
265
- --_ctm-mob-dn-qa-lt-lr-sg,
266
- var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg))
267
- );
268
- line-height: var(
269
- --_ctm-mob-dn-qa-lt-le-ht,
270
- var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc))
271
- );
272
- text-decoration: var(
273
- --_ctm-mob-dn-qa-lt-ue,
274
- var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
275
- );
276
- text-transform: var(
277
- --_ctm-mob-dn-qa-lt-tt-tm,
278
- var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none))
279
- );
280
- word-wrap: var(
281
- --_ctm-mob-dn-qa-lt-wd-wp,
282
- var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal))
283
- );
284
- word-break: var(
285
- --_ctm-mob-dn-qa-lt-wd-bk,
286
- var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal))
287
- );
213
+ color: var(--_ctm-mob-dn-qa-lt-cr,
214
+ var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr)));
215
+ font-family: var(--_ctm-mob-dn-qa-lt-ft-fy,
216
+ var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy)));
217
+ font-size: var(--_ctm-mob-dn-qa-lt-ft-se,
218
+ var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se)));
219
+ font-weight: var(--_ctm-mob-dn-qa-lt-ft-wt,
220
+ var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt)));
221
+ font-style: var(--_ctm-mob-dn-qa-lt-ft-se-ic,
222
+ var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic)));
223
+ text-align: var(--_ctm-mob-dn-qa-lt-tt-an,
224
+ var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an)));
225
+ letter-spacing: var(--_ctm-mob-dn-qa-lt-lr-sg,
226
+ var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg)));
227
+ line-height: var(--_ctm-mob-dn-qa-lt-le-ht,
228
+ var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc)));
229
+ text-decoration: var(--_ctm-mob-dn-qa-lt-ue,
230
+ var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue)));
231
+ text-transform: var(--_ctm-mob-dn-qa-lt-tt-tm,
232
+ var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none)));
233
+ word-wrap: var(--_ctm-mob-dn-qa-lt-wd-wp,
234
+ var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal)));
235
+ word-break: var(--_ctm-mob-dn-qa-lt-wd-bk,
236
+ var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal)));
288
237
 
289
238
  &#{$overflowSelector} {
290
239
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
291
240
  }
292
241
  }
242
+
293
243
  .label {
294
244
  // padding-inline: var(--_sf-cd-gp);
295
245
  // No `white-space: nowrap` here: it stopped the text reflowing when the
296
246
  // element is narrowed, and it would also defeat the line clamp below,
297
247
  // which needs the text to wrap before it can restrict it to N lines.
298
248
  min-width: 0;
299
- color: var(
300
- --_ctm-mob-dn-qa-lt-cr-dc-dc,
301
- var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc))
302
- );
303
- font-family: var(
304
- --_ctm-mob-dn-qa-lt-ft-fy-dc,
305
- var(--_ctm-tab-dn-qa-lt-ft-fy-dc, var(--_ctm-dn-qa-lt-ft-fy-dc))
306
- );
307
- font-size: var(
308
- --_ctm-mob-dn-qa-lt-ft-se-dc,
309
- var(--_ctm-tab-dn-qa-lt-ft-se-dc, var(--_ctm-dn-qa-lt-ft-se-dc))
310
- );
311
- font-weight: var(
312
- --_ctm-mob-dn-qa-lt-ft-wt-dc,
313
- var(--_ctm-tab-dn-qa-lt-ft-wt-dc, var(--_ctm-dn-qa-lt-ft-wt-dc))
314
- );
315
- font-style: var(
316
- --_ctm-mob-dn-qa-lt-ft-se-ic-dc,
317
- var(--_ctm-tab-dn-qa-lt-ft-se-ic-dc, var(--_ctm-dn-qa-lt-ft-se-ic-dc))
318
- );
319
- text-align: var(
320
- --_ctm-mob-dn-qa-lt-tt-an-dc,
321
- var(--_ctm-tab-dn-qa-lt-tt-an-dc, var(--_ctm-dn-qa-lt-tt-an-dc))
322
- );
323
- letter-spacing: var(
324
- --_ctm-mob-dn-qa-lt-lr-sg-dc,
325
- var(--_ctm-tab-dn-qa-lt-lr-sg-dc, var(--_ctm-dn-qa-lt-lr-sg-dc))
326
- );
327
- line-height: var(
328
- --_ctm-mob-dn-qa-lt-le-ht-dc,
329
- var(--_ctm-tab-dn-qa-lt-le-ht-dc, var(--_ctm-dn-qa-lt-le-ht-dc-dc))
330
- );
331
- text-decoration: var(
332
- --_ctm-mob-dn-qa-lt-ue-dc,
333
- var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc))
334
- );
335
- text-transform: var(
336
- --_ctm-mob-dn-qa-lt-tt-tm-dc,
337
- var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none))
338
- );
339
- word-wrap: var(
340
- --_ctm-mob-dn-qa-lt-wd-wp-dc,
341
- var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal))
342
- );
343
- word-break: var(
344
- --_ctm-mob-dn-qa-lt-wd-bk-dc,
345
- var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal))
346
- );
249
+ color: var(--_ctm-mob-dn-qa-lt-cr-dc-dc,
250
+ var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc)));
251
+ font-family: var(--_ctm-mob-dn-qa-lt-ft-fy-dc,
252
+ var(--_ctm-tab-dn-qa-lt-ft-fy-dc, var(--_ctm-dn-qa-lt-ft-fy-dc)));
253
+ font-size: var(--_ctm-mob-dn-qa-lt-ft-se-dc,
254
+ var(--_ctm-tab-dn-qa-lt-ft-se-dc, var(--_ctm-dn-qa-lt-ft-se-dc)));
255
+ font-weight: var(--_ctm-mob-dn-qa-lt-ft-wt-dc,
256
+ var(--_ctm-tab-dn-qa-lt-ft-wt-dc, var(--_ctm-dn-qa-lt-ft-wt-dc)));
257
+ font-style: var(--_ctm-mob-dn-qa-lt-ft-se-ic-dc,
258
+ var(--_ctm-tab-dn-qa-lt-ft-se-ic-dc, var(--_ctm-dn-qa-lt-ft-se-ic-dc)));
259
+ text-align: var(--_ctm-mob-dn-qa-lt-tt-an-dc,
260
+ var(--_ctm-tab-dn-qa-lt-tt-an-dc, var(--_ctm-dn-qa-lt-tt-an-dc)));
261
+ letter-spacing: var(--_ctm-mob-dn-qa-lt-lr-sg-dc,
262
+ var(--_ctm-tab-dn-qa-lt-lr-sg-dc, var(--_ctm-dn-qa-lt-lr-sg-dc)));
263
+ line-height: var(--_ctm-mob-dn-qa-lt-le-ht-dc,
264
+ var(--_ctm-tab-dn-qa-lt-le-ht-dc, var(--_ctm-dn-qa-lt-le-ht-dc-dc)));
265
+ text-decoration: var(--_ctm-mob-dn-qa-lt-ue-dc,
266
+ var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc)));
267
+ text-transform: var(--_ctm-mob-dn-qa-lt-tt-tm-dc,
268
+ var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none)));
269
+ word-wrap: var(--_ctm-mob-dn-qa-lt-wd-wp-dc,
270
+ var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal)));
271
+ word-break: var(--_ctm-mob-dn-qa-lt-wd-bk-dc,
272
+ var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal)));
347
273
 
348
274
  &#{$overflowSelector} {
349
275
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
350
276
  }
351
277
  }
278
+
352
279
  .icon {
353
280
  display: var(--_sf-show-icon-ff, flex);
281
+
354
282
  svg {
355
- width: var(
356
- --_ctm-mab-dn-qa-lt-in-se,
357
- var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
358
- );
359
- height: var(
360
- --_ctm-mob-dn-qa-lt-in-se,
361
- var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
362
- );
283
+ width: var(--_ctm-mab-dn-qa-lt-in-se,
284
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se)));
285
+ height: var(--_ctm-mob-dn-qa-lt-in-se,
286
+ var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se)));
287
+
363
288
  path {
364
- stroke: var(
365
- --_ctm-mob-dn-qa-lt-in-c1,
366
- var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
367
- );
289
+ stroke: var(--_ctm-mob-dn-qa-lt-in-c1,
290
+ var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1)));
368
291
  // Overrides the stroke-width presentation attribute baked into the
369
292
  // icon markup; 1 keeps the icon as authored when nothing is set.
370
- stroke-width: var(
371
- --_ctm-mob-dn-qa-lt-se-wh,
372
- var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1))
373
- );
293
+ stroke-width: var(--_ctm-mob-dn-qa-lt-se-wh,
294
+ var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1)));
374
295
  }
375
296
  }
376
297
  }
377
298
  }
299
+
378
300
  .days__left {
379
301
  .count {
380
302
  // padding-inline: var(--_sf-cd-gp);
@@ -382,140 +304,88 @@ $overflowSelector: ".flex__overflow";
382
304
  // element is narrowed, and it would also defeat the line clamp below,
383
305
  // which needs the text to wrap before it can restrict it to N lines.
384
306
  min-width: 0;
385
- color: var(
386
- --_ctm-mob-dn-ds-lt-cr,
387
- var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
388
- );
389
- font-family: var(
390
- --_ctm-mob-dn-ds-lt-ft-fy,
391
- var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
392
- );
393
- font-size: var(
394
- --_ctm-mob-dn-ds-lt-ft-se,
395
- var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))
396
- );
397
- font-weight: var(
398
- --_ctm-mob-dn-ds-lt-ft-wt,
399
- var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt))
400
- );
401
- font-style: var(
402
- --_ctm-mob-dn-ds-lt-ft-se-ic,
403
- var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic))
404
- );
405
- text-align: var(
406
- --_ctm-mob-dn-ds-lt-tt-an,
407
- var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an))
408
- );
409
- letter-spacing: var(
410
- --_ctm-mob-dn-ds-lt-lr-sg,
411
- var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg))
412
- );
413
- line-height: var(
414
- --_ctm-mob-dn-ds-lt-le-ht,
415
- var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc))
416
- );
417
- text-decoration: var(
418
- --_ctm-mob-dn-ds-lt-ue,
419
- var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
420
- );
421
- text-transform: var(
422
- --_ctm-mob-dn-ds-lt-tt-tm,
423
- var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none))
424
- );
425
- word-wrap: var(
426
- --_ctm-mob-dn-ds-lt-wd-wp,
427
- var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal))
428
- );
429
- word-break: var(
430
- --_ctm-mob-dn-ds-lt-wd-bk,
431
- var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal))
432
- );
307
+ color: var(--_ctm-mob-dn-ds-lt-cr,
308
+ var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr)));
309
+ font-family: var(--_ctm-mob-dn-ds-lt-ft-fy,
310
+ var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy)));
311
+ font-size: var(--_ctm-mob-dn-ds-lt-ft-se,
312
+ var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se)));
313
+ font-weight: var(--_ctm-mob-dn-ds-lt-ft-wt,
314
+ var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt)));
315
+ font-style: var(--_ctm-mob-dn-ds-lt-ft-se-ic,
316
+ var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic)));
317
+ text-align: var(--_ctm-mob-dn-ds-lt-tt-an,
318
+ var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an)));
319
+ letter-spacing: var(--_ctm-mob-dn-ds-lt-lr-sg,
320
+ var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg)));
321
+ line-height: var(--_ctm-mob-dn-ds-lt-le-ht,
322
+ var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc)));
323
+ text-decoration: var(--_ctm-mob-dn-ds-lt-ue,
324
+ var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue)));
325
+ text-transform: var(--_ctm-mob-dn-ds-lt-tt-tm,
326
+ var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none)));
327
+ word-wrap: var(--_ctm-mob-dn-ds-lt-wd-wp,
328
+ var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal)));
329
+ word-break: var(--_ctm-mob-dn-ds-lt-wd-bk,
330
+ var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal)));
433
331
 
434
332
  &#{$overflowSelector} {
435
333
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
436
334
  }
437
335
  }
336
+
438
337
  .label {
439
338
  // padding-inline: var(--_sf-cd-gp);
440
339
  // No `white-space: nowrap` here: it stopped the text reflowing when the
441
340
  // element is narrowed, and it would also defeat the line clamp below,
442
341
  // which needs the text to wrap before it can restrict it to N lines.
443
342
  min-width: 0;
444
- color: var(
445
- --_ctm-mob-dn-ds-lt-cr-dc-dc,
446
- var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc))
447
- );
448
- font-family: var(
449
- --_ctm-mob-dn-ds-lt-ft-fy-dc,
450
- var(--_ctm-tab-dn-ds-lt-ft-fy-dc, var(--_ctm-dn-ds-lt-ft-fy-dc))
451
- );
452
- font-size: var(
453
- --_ctm-mob-dn-ds-lt-ft-se-dc,
454
- var(--_ctm-tab-dn-ds-lt-ft-se-dc, var(--_ctm-dn-ds-lt-ft-se-dc))
455
- );
456
- font-weight: var(
457
- --_ctm-mob-dn-ds-lt-ft-wt-dc,
458
- var(--_ctm-tab-dn-ds-lt-ft-wt-dc, var(--_ctm-dn-ds-lt-ft-wt-dc))
459
- );
460
- font-style: var(
461
- --_ctm-mob-dn-ds-lt-ft-se-ic-dc,
462
- var(--_ctm-tab-dn-ds-lt-ft-se-ic-dc, var(--_ctm-dn-ds-lt-ft-se-ic-dc))
463
- );
464
- text-align: var(
465
- --_ctm-mob-dn-ds-lt-tt-an-dc,
466
- var(--_ctm-tab-dn-ds-lt-tt-an-dc, var(--_ctm-dn-ds-lt-tt-an-dc))
467
- );
468
- letter-spacing: var(
469
- --_ctm-mob-dn-ds-lt-lr-sg-dc,
470
- var(--_ctm-tab-dn-ds-lt-lr-sg-dc, var(--_ctm-dn-ds-lt-lr-sg-dc))
471
- );
472
- line-height: var(
473
- --_ctm-mob-dn-ds-lt-le-ht-dc,
474
- var(--_ctm-tab-dn-ds-lt-le-ht-dc, var(--_ctm-dn-ds-lt-le-ht-dc-dc))
475
- );
476
- text-decoration: var(
477
- --_ctm-mob-dn-ds-lt-ue-dc,
478
- var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc))
479
- );
480
- text-transform: var(
481
- --_ctm-mob-dn-ds-lt-tt-tm-dc,
482
- var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none))
483
- );
484
- word-wrap: var(
485
- --_ctm-mob-dn-ds-lt-wd-wp-dc,
486
- var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal))
487
- );
488
- word-break: var(
489
- --_ctm-mob-dn-ds-lt-wd-bk-dc,
490
- var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal))
491
- );
343
+ color: var(--_ctm-mob-dn-ds-lt-cr-dc-dc,
344
+ var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc)));
345
+ font-family: var(--_ctm-mob-dn-ds-lt-ft-fy-dc,
346
+ var(--_ctm-tab-dn-ds-lt-ft-fy-dc, var(--_ctm-dn-ds-lt-ft-fy-dc)));
347
+ font-size: var(--_ctm-mob-dn-ds-lt-ft-se-dc,
348
+ var(--_ctm-tab-dn-ds-lt-ft-se-dc, var(--_ctm-dn-ds-lt-ft-se-dc)));
349
+ font-weight: var(--_ctm-mob-dn-ds-lt-ft-wt-dc,
350
+ var(--_ctm-tab-dn-ds-lt-ft-wt-dc, var(--_ctm-dn-ds-lt-ft-wt-dc)));
351
+ font-style: var(--_ctm-mob-dn-ds-lt-ft-se-ic-dc,
352
+ var(--_ctm-tab-dn-ds-lt-ft-se-ic-dc, var(--_ctm-dn-ds-lt-ft-se-ic-dc)));
353
+ text-align: var(--_ctm-mob-dn-ds-lt-tt-an-dc,
354
+ var(--_ctm-tab-dn-ds-lt-tt-an-dc, var(--_ctm-dn-ds-lt-tt-an-dc)));
355
+ letter-spacing: var(--_ctm-mob-dn-ds-lt-lr-sg-dc,
356
+ var(--_ctm-tab-dn-ds-lt-lr-sg-dc, var(--_ctm-dn-ds-lt-lr-sg-dc)));
357
+ line-height: var(--_ctm-mob-dn-ds-lt-le-ht-dc,
358
+ var(--_ctm-tab-dn-ds-lt-le-ht-dc, var(--_ctm-dn-ds-lt-le-ht-dc-dc)));
359
+ text-decoration: var(--_ctm-mob-dn-ds-lt-ue-dc,
360
+ var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc)));
361
+ text-transform: var(--_ctm-mob-dn-ds-lt-tt-tm-dc,
362
+ var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none)));
363
+ word-wrap: var(--_ctm-mob-dn-ds-lt-wd-wp-dc,
364
+ var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal)));
365
+ word-break: var(--_ctm-mob-dn-ds-lt-wd-bk-dc,
366
+ var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal)));
492
367
 
493
368
  &#{$overflowSelector} {
494
369
  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
495
370
  }
496
371
  }
372
+
497
373
  .icon {
498
374
  display: var(--_sf-show-icon-ff, flex);
375
+
499
376
  svg {
500
- width: var(
501
- --_ctm-mab-dn-ds-lt-in-se,
502
- var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
503
- );
504
- height: var(
505
- --_ctm-mob-dn-ds-lt-in-se,
506
- var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
507
- );
377
+ width: var(--_ctm-mab-dn-ds-lt-in-se,
378
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se)));
379
+ height: var(--_ctm-mob-dn-ds-lt-in-se,
380
+ var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se)));
381
+
508
382
  path {
509
- stroke: var(
510
- --_ctm-mob-dn-ds-lt-in-c1,
511
- var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
512
- );
383
+ stroke: var(--_ctm-mob-dn-ds-lt-in-c1,
384
+ var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1)));
513
385
  // Overrides the stroke-width presentation attribute baked into the
514
386
  // icon markup; 1 keeps the icon as authored when nothing is set.
515
- stroke-width: var(
516
- --_ctm-mob-dn-ds-lt-se-wh,
517
- var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1))
518
- );
387
+ stroke-width: var(--_ctm-mob-dn-ds-lt-se-wh,
388
+ var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1)));
519
389
  }
520
390
  }
521
391
  }
@@ -523,4 +393,4 @@ $overflowSelector: ".flex__overflow";
523
393
  }
524
394
  }
525
395
  }
526
- }
396
+ }