@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.77

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 (104) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +2 -2
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/enums/index.d.ts +5 -1
  91. package/dist/types/builder/index.d.ts +3 -1
  92. package/dist/types/builder/interfaces/global.d.ts +5 -0
  93. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  94. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  95. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  96. package/dist/uom-selector.scss +1569 -383
  97. package/dist/variant-picker.scss +1593 -481
  98. package/dist/video.scss +212 -53
  99. package/dist/volume-pricing.scss +775 -196
  100. package/dist/widget.scss +14 -0
  101. package/package.json +1 -1
  102. package/dist/editor-core.scss +0 -537
  103. package/dist/tab-panel.scss +0 -93
  104. package/dist/text-editor.scss +0 -331
package/dist/countdown.scss CHANGED
@@ -9,13 +9,24 @@
9
9
  // padding: var(--_lt-pg);
10
10
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
11
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
13
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
14
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
- // height: ;
12
+ width: var(
13
+ --_sf-el-wh-st-mx,
14
+ calc(
15
+ 1% *
16
+ var(
17
+ --_ctm-mob-ele-nw-wh-vl,
18
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
+ )
20
+ )
21
+ );
22
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
16
23
  aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
24
  --_aspect-ratio: calc(
18
- 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
25
+ 1 *
26
+ (
27
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
28
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
29
+ )
19
30
  );
20
31
 
21
32
  & > .wrapper {
@@ -23,57 +34,107 @@
23
34
  // overflow: clip;
24
35
  height: 100%;
25
36
  &[data-widget-shadow="true"] {
26
- box-shadow: var(--_ctm-dn-cn-wt-sw-ae, var(--_tst-dn-cn-wt-sw-ae))
27
- var(--_ctm-dn-cn-wt-sw-br, var(--_tst-vo-se-sw-br))
28
- var(--_ctm-dn-cn-wt-sw-sd, var(--_tst-vo-se-sw-sd))
29
- var(--_ctm-dn-cn-wt-sw-cr, var(--_tst-dn-cn-wt-sw-cr));
37
+ box-shadow: var(
38
+ --_ctm-mob-dn-cn-wt-sw-ae,
39
+ var(--_ctm-tab-dn-cn-wt-sw-ae, var(--_ctm-dn-cn-wt-sw-ae))
40
+ )
41
+ var(--_ctm-mob-dn-cn-wt-sw-br, var(--_ctm-tab-dn-cn-wt-sw-br, var(--_ctm-dn-cn-wt-sw-br)))
42
+ var(--_ctm-mob-dn-cn-wt-sw-sd, var(--_ctm-tab-dn-cn-wt-sw-sd, var(--_ctm-dn-cn-wt-sw-sd)))
43
+ var(--_ctm-mob-dn-cn-wt-sw-cr, var(--_ctm-tab-dn-cn-wt-sw-cr, var(--_ctm-dn-cn-wt-sw-cr)));
30
44
  }
31
45
  }
32
46
  &[data-text-container-border="true"] {
33
47
  .content__container {
34
- border-color: var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr, var(--_tst-dn-cn-wt-tt-cr-dn-br-cr));
35
- border-style: var(--_ctm-dn-cn-wt-tt-cr-dn-br-se, var(--_tst-dn-cn-wt-tt-cr-dn-br-se));
36
- border-width: var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh, var(--_tst-dn-cn-wt-tt-cr-dn-br-wh));
48
+ border-color: var(
49
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-cr,
50
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr))
51
+ );
52
+ border-style: var(
53
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-se,
54
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-se, var(--_ctm-dn-cn-wt-tt-cr-dn-br-se))
55
+ );
56
+ border-width: var(
57
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-wh,
58
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-wh, var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh))
59
+ );
37
60
  }
38
61
  }
39
62
  &[data-text-container-shadow="true"] {
40
63
  .content__container {
41
- box-shadow: var(--_ctm-dn-cn-wt-tt-cr-dn-sw-ae, var(--_tst-dn-cn-wt-tt-cr-dn-sw-ae))
42
- var(--_ctm-dn-cn-wt-tt-cr-dn-sw-br, var(--_tst-vo-se-sw-br))
43
- var(--_ctm-dn-cn-wt-tt-cr-dn-sw-sd, var(--_tst-vo-se-sw-sd))
44
- var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr, var(--_tst-dn-cn-wt-tt-cr-dn-sw-cr));
64
+ box-shadow: var(
65
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-ae,
66
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-ae))
67
+ )
68
+ var(
69
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-br,
70
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-br, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-br))
71
+ )
72
+ var(
73
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-sd,
74
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-sd))
75
+ )
76
+ var(
77
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-cr,
78
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr))
79
+ );
45
80
  }
46
81
  }
47
82
 
48
83
  &[data-widget-border="true"] {
49
84
  .countdown__container {
50
- border-color: var(--_ctm-dn-cn-wt-br-cr, var(--_tst-dn-cn-wt-br-cr));
51
- border-style: var(--_ctm-dn-cn-wt-br-se, var(--_tst-dn-cn-wt-br-se));
52
- border-width: var(--_ctm-dn-cn-wt-br-wh, var(--_tst-dn-cn-wt-br-wh));
85
+ border-color: var(
86
+ --_ctm-mob-dn-cn-wt-br-cr,
87
+ var(--_ctm-tab-dn-cn-wt-br-cr, var(--_ctm-dn-cn-wt-br-cr))
88
+ );
89
+ border-style: var(
90
+ --_ctm-mob-dn-cn-wt-br-se,
91
+ var(--_ctm-tab-dn-cn-wt-br-se, var(--_ctm-dn-cn-wt-br-se))
92
+ );
93
+ border-width: var(
94
+ --_ctm-mob-dn-cn-wt-br-wh,
95
+ var(--_ctm-tab-dn-cn-wt-br-wh, var(--_ctm-dn-cn-wt-br-wh))
96
+ );
53
97
  }
54
98
  }
55
99
 
56
100
  &[data-counter-shadow="true"] {
57
101
  .countdown__element {
58
- box-shadow: var(--_ctm-dn-cr-se-sw-ae, var(--_tst-dn-cr-se-sw-ae))
59
- var(--_ctm-dn-cr-se-sw-br, var(--_tst-vo-se-sw-br))
60
- var(--_ctm-dn-cr-se-sw-sd, var(--_tst-vo-se-sw-sd))
61
- var(--_ctm-dn-cr-se-sw-cr, var(--_tst-dn-cr-se-sw-cr));
102
+ box-shadow: var(
103
+ --_ctm-mob-dn-cr-se-sw-ae,
104
+ var(--_ctm-tab-dn-cr-se-sw-ae, var(--_ctm-dn-cr-se-sw-ae))
105
+ )
106
+ var(--_ctm-mob-dn-cr-se-sw-br, var(--_ctm-tab-dn-cr-se-sw-br, var(--_ctm-dn-cr-se-sw-br)))
107
+ var(--_ctm-mob-dn-cr-se-sw-sd, var(--_ctm-tab-dn-cr-se-sw-sd, var(--_ctm-dn-cr-se-sw-sd)))
108
+ var(--_ctm-mob-dn-cr-se-sw-cr, var(--_ctm-tab-dn-cr-se-sw-cr, var(--_ctm-dn-cr-se-sw-cr)));
62
109
  }
63
110
  }
64
111
 
65
112
  &[data-counter-border="true"] {
66
113
  .countdown__element {
67
- border-color: var(--_ctm-dn-cr-se-br-cr, var(--_tst-dn-cr-se-br-cr));
68
- border-style: var(--_ctm-dn-cr-se-br-se, var(--_tst-dn-cr-se-br-se));
69
- border-width: var(--_ctm-dn-cr-se-br-wh, var(--_tst-dn-cr-se-br-wh));
114
+ border-color: var(
115
+ --_ctm-mob-dn-cr-se-br-cr,
116
+ var(--_ctm-tab-dn-cr-se-br-cr, var(--_ctm-dn-cr-se-br-cr))
117
+ );
118
+ border-style: var(
119
+ --_ctm-mob-dn-cr-se-br-se,
120
+ var(--_ctm-tab-dn-cr-se-br-se, var(--_ctm-dn-cr-se-br-se))
121
+ );
122
+ border-width: var(
123
+ --_ctm-mob-dn-cr-se-br-wh,
124
+ var(--_ctm-tab-dn-cr-se-br-wh, var(--_ctm-dn-cr-se-br-wh))
125
+ );
70
126
  }
71
127
  }
128
+
72
129
  &[data-counter-type="joined"] {
73
130
  .countdown__element {
74
- background-color: var(--_ctm-dn-cr-se-bd-cr, var(--_tst-dn-cr-se-bd-cr));
131
+ background-color: var(
132
+ --_ctm-mob-dn-cr-se-bd-cr,
133
+ var(--_ctm-tab-dn-cr-se-bd-cr, var(--_ctm-dn-cr-se-bd-cr))
134
+ );
75
135
  }
76
136
  }
137
+
77
138
  &[data-text-container-alignment="left"] {
78
139
  .content__container {
79
140
  align-items: flex-start;
@@ -143,7 +204,10 @@
143
204
 
144
205
  &[data-counter-type="seperate"] {
145
206
  .countdown__element .countdown__digit-box {
146
- background-color: var(--_ctm-dn-cr-se-bd-cr, var(--_tst-dn-cr-se-bd-cr));
207
+ background-color: var(
208
+ --_ctm-mob-dn-cr-se-bg-cr,
209
+ var(--_ctm-tab-dn-cr-se-bg-cr, var(--_ctm-dn-cr-se-bg-cr))
210
+ );
147
211
  }
148
212
  }
149
213
 
@@ -155,66 +219,162 @@
155
219
 
156
220
  &[data-countdown-animation="flip"] {
157
221
  .animation:nth-child(2) {
158
- display: inline-block; /* Ensures the element is treated as a block for transform purposes */
159
- animation: flip 1s ease-in-out infinite; /* Animation duration, timing, and repeat count */
160
- // transform-style: preserve-3d; /* Enables 3D effect */
161
- backface-visibility: hidden; /* Hides the back side when flipped */
222
+ display: inline-block;
223
+ animation: flip 1s ease-in-out infinite;
224
+ backface-visibility: hidden;
162
225
  }
163
226
  }
164
227
 
165
228
  .countdown__container {
166
229
  display: flex;
167
230
  height: 100%;
168
- gap: var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, var(--_tst-dn-cn-lt-wt-tt-ad-im-sg));
169
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
170
- background-color: var(--_ctm-dn-cn-wt-bd-cr, var(--_tst-dn-cn-wt-bd-cr));
171
- border-radius: var(--_ctm-dn-cn-wt-br-rs, var(--_tst-dn-cn-wt-br-rs));
231
+ gap: var(
232
+ --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
233
+ var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
234
+ );
235
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
236
+ background-color: var(
237
+ --_ctm-mob-dn-cn-wt-bd-cr,
238
+ var(--_ctm-tab-dn-cn-wt-bd-cr, var(--_ctm-dn-cn-wt-bd-cr))
239
+ );
240
+ border-radius: var(
241
+ --_ctm-mob-dn-cn-wt-br-rs,
242
+ var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs))
243
+ );
172
244
 
173
245
  .content__container {
174
246
  display: flex;
175
247
  flex-direction: column;
176
- background-color: var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr, var(--_tst-dn-cn-wt-tt-cr-dn-bd-cr));
177
- border-radius: var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs, var(--_tst-dn-cn-wt-tt-cr-dn-br-rs));
178
- padding: var(--_ctm-dn-cn-wt-tt-cr-lt-tt-vl-pg, var(--_tst-dn-cn-wt-tt-cr-lt-tt-vl-pg))
179
- var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_tst-dn-cn-wt-tt-cr-lt-tt-hl-pg));
180
- gap: var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_sts-dn-cn-wt-tt-cr-lt-te-ad-dn-sg));
248
+
249
+ background-color: var(
250
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
251
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr))
252
+ );
253
+
254
+ border-radius: var(
255
+ --_ctm-mob-dn-cn-wt-tt-cr-dn-br-rs,
256
+ var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-rs, var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs))
257
+ );
258
+
259
+ padding: var(
260
+ --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-vl-pg,
261
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-vl-pg))
262
+ )
263
+ var(
264
+ --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-hl-pg,
265
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg))
266
+ );
267
+
268
+ gap: var(
269
+ --_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
270
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg))
271
+ );
181
272
  }
273
+
182
274
  .content__container {
183
275
  display: flex;
184
276
  flex-direction: column;
185
277
  width: 100%;
186
- gap: var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_tst-dn-cn-wt-tt-cr-lt-te-ad-dn-sg));
278
+
279
+ gap: var(
280
+ --_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
281
+ var(--_ctm-tab-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg))
282
+ );
283
+
187
284
  h1 {
188
- color: var(--_ctm-dn-cn-wt-cr, var(--_tst-dn-cn-wt-cr));
189
- font-family: var(--_ctm-dn-cn-wt-ft-fy, var(--_tst-dn-cn-wt-ft-fy)), sans-serif;
190
- font-size: var(--_ctm-dn-cn-wt-ft-se, var(--_tst-dn-cn-wt-ft-se));
191
- font-weight: var(--_ctm-dn-cn-wt-ft-wt, var(--_tst-dn-cn-wt-ft-wt));
192
- font-style: var(--_ctm-dn-cn-wt-ft-se-ic, var(--_tst-dn-cn-wt-ft-se-ic));
193
- text-align: var(--_ctm-dn-cn-wt-tt-an, var(--_tst-dn-cn-wt-tt-an));
194
- letter-spacing: var(--_ctm-dn-cn-wt-lr-sg, var(--_tst-dn-cn-wt-lr-sg));
195
- line-height: var(--_ctm-dn-cn-wt-le-ht, var(--_tst-dn-cn-wt-le-ht));
285
+ color: var(--_ctm-mob-dn-cn-wt-cr, var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr)));
286
+
287
+ font-family: var(
288
+ --_ctm-mob-dn-cn-wt-ft-fy,
289
+ var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy))
290
+ ),
291
+ sans-serif;
292
+
293
+ font-size: var(
294
+ --_ctm-mob-dn-cn-wt-ft-se,
295
+ var(--_ctm-tab-dn-cn-wt-ft-se, var(--_ctm-dn-cn-wt-ft-se))
296
+ );
297
+
298
+ font-weight: var(
299
+ --_ctm-mob-dn-cn-wt-ft-wt,
300
+ var(--_ctm-tab-dn-cn-wt-ft-wt, var(--_ctm-dn-cn-wt-ft-wt))
301
+ );
302
+
303
+ font-style: var(
304
+ --_ctm-mob-dn-cn-wt-ft-se-ic,
305
+ var(--_ctm-tab-dn-cn-wt-ft-se-ic, var(--_ctm-dn-cn-wt-ft-se-ic))
306
+ );
307
+
308
+ text-align: var(
309
+ --_ctm-mob-dn-cn-wt-tt-an,
310
+ var(--_ctm-tab-dn-cn-wt-tt-an, var(--_ctm-dn-cn-wt-tt-an))
311
+ );
312
+
313
+ letter-spacing: var(
314
+ --_ctm-mob-dn-cn-wt-lr-sg,
315
+ var(--_ctm-tab-dn-cn-wt-lr-sg, var(--_ctm-dn-cn-wt-lr-sg))
316
+ );
317
+
318
+ line-height: var(
319
+ --_ctm-mob-dn-cn-wt-le-ht,
320
+ var(--_ctm-tab-dn-cn-wt-le-ht, var(--_ctm-dn-cn-wt-le-ht))
321
+ );
322
+
196
323
  text-decoration: var(
197
- --_ctm-dn-cn-wt-lh,
198
- var(--_ctm-dn-cn-wt-ue),
199
- var(--_tst-dn-cn-wt-lh)
324
+ --_ctm-mob-dn-cn-wt-ue,
325
+ var(--_ctm-tab-dn-cn-wt-ue, var(--_ctm-dn-cn-wt-ue))
200
326
  );
201
327
  }
328
+
202
329
  p {
203
- color: var(--_ctm-dn-cn-wt-cr-dc, var(--_tst-dn-cn-wt-cr-dc));
204
- font-family: var(--_ctm-dn-cn-wt-ft-fy-dc, var(--_tst-dn-cn-wt-ft-fy-dc)), sans-serif;
205
- font-size: var(--_ctm-dn-cn-wt-ft-se-dc, var(--_tst-dn-cn-wt-ft-se-dc));
206
- font-weight: var(--_ctm-dn-cn-wt-ft-wt-dc, var(--_tst-dn-cn-wt-ft-wt-dc));
207
- font-style: var(--_ctm-dn-cn-wt-ft-se-ic-dc, var(--_tst-dn-cn-wt-ft-se-ic-dc));
208
- text-align: var(--_ctm-dn-cn-wt-tt-an-dc, var(--_tst-dn-cn-wt-tt-an-dc));
209
- letter-spacing: var(--_ctm-dn-cn-wt-lr-sg-dc, var(--_tst-dn-cn-wt-lr-sg-dc));
210
- line-height: var(--_ctm-dn-cn-wt-le-ht-dc, var(--_tst-dn-cn-wt-le-ht-dc));
330
+ color: var(
331
+ --_ctm-mob-dn-cn-wt-cr-dc,
332
+ var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc))
333
+ );
334
+
335
+ font-family: var(
336
+ --_ctm-mob-dn-cn-wt-ft-fy-dc,
337
+ var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
338
+ ),
339
+ sans-serif;
340
+
341
+ font-size: var(
342
+ --_ctm-mob-dn-cn-wt-ft-se-dc,
343
+ var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
344
+ );
345
+
346
+ font-weight: var(
347
+ --_ctm-mob-dn-cn-wt-ft-wt-dc,
348
+ var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc))
349
+ );
350
+
351
+ font-style: var(
352
+ --_ctm-mob-dn-cn-wt-ft-se-ic-dc,
353
+ var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc))
354
+ );
355
+
356
+ text-align: var(
357
+ --_ctm-mob-dn-cn-wt-tt-an-dc,
358
+ var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc))
359
+ );
360
+
361
+ letter-spacing: var(
362
+ --_ctm-mob-dn-cn-wt-lr-sg-dc,
363
+ var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc))
364
+ );
365
+
366
+ line-height: var(
367
+ --_ctm-mob-dn-cn-wt-le-ht-dc,
368
+ var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc))
369
+ );
370
+
211
371
  text-decoration: var(
212
- --_ctm-dn-cn-wt-lh-dc,
213
- var(--_ctm-dn-cn-wt-ue-dc),
214
- var(--_tst-dn-cn-wt-lh)
372
+ --_ctm-mob-dn-cn-wt-ue-dc,
373
+ var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc))
215
374
  );
216
375
  }
217
376
  }
377
+
218
378
  .countdown {
219
379
  width: 100%;
220
380
  display: grid;
@@ -243,7 +403,11 @@
243
403
  }
244
404
  }
245
405
  .countdown__element {
246
- border-radius: var(--_ctm-dn-cr-se-br-rs, var(--_tst-dn-cr-se-br-rs));
406
+ border-radius: var(
407
+ --_ctm-mob-dn-cr-se-br-rs,
408
+ var(--_ctm-tab-dn-cr-se-br-rs, var(--_ctm-dn-cr-se-br-rs))
409
+ );
410
+
247
411
  padding: 5px;
248
412
  display: flex;
249
413
  flex-direction: row-reverse;
@@ -255,39 +419,86 @@
255
419
  label {
256
420
  width: 100%;
257
421
  display: inline-block;
258
- color: var(--_ctm-dn-cr-se-cr, var(--_tst-dn-cr-se-cr));
259
- font-family: var(--_ctm-dn-cr-se-ft-fy, var(--_tst-dn-cr-se-ft-fy)), sans-serif;
260
- font-size: var(--_ctm-dn-cr-se-ft-se, var(--_tst-dn-cr-se-ft-se));
261
- font-weight: var(--_ctm-dn-cr-se-ft-wt, var(--_tst-dn-cr-se-ft-wt));
262
- font-style: var(--_ctm-dn-cr-se-ft-se-ic, var(--_tst-dn-cr-se-ft-se-ic));
263
- text-align: var(--_ctm-dn-cr-se-tt-an, var(--_tst-dn-cr-se-tt-an));
264
- letter-spacing: var(--_ctm-dn-cr-se-lr-sg, var(--_tst-dn-cr-se-lr-sg));
265
- line-height: var(--_ctm-dn-cr-se-le-ht, var(--_tst-dn-cr-se-le-ht));
422
+ color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
423
+ font-family: var(
424
+ --_ctm-mob-dn-cr-se-ft-fy,
425
+ var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
426
+ ),
427
+ sans-serif;
428
+ font-size: var(
429
+ --_ctm-mob-dn-cr-se-ft-se,
430
+ var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
431
+ );
432
+ font-weight: var(
433
+ --_ctm-mob-dn-cr-se-ft-wt,
434
+ var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
435
+ );
436
+ font-style: var(
437
+ --_ctm-mob-dn-cr-se-ft-se-ic,
438
+ var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
439
+ );
440
+ text-align: var(
441
+ --_ctm-mob-dn-cr-se-tt-an,
442
+ var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
443
+ );
444
+ letter-spacing: var(
445
+ --_ctm-mob-dn-cr-se-lr-sg,
446
+ var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
447
+ );
448
+ line-height: var(
449
+ --_ctm-mob-dn-cr-se-le-ht,
450
+ var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
451
+ );
266
452
  padding-top: 6px;
267
453
  text-decoration: var(
268
- --_ctm-dn-cr-se-lh,
269
- var(--_ctm-dn-cr-se-ue),
270
- var(--_tst-dn-cr-se-lh)
454
+ --_ctm-mob-dn-cr-se-ue,
455
+ var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
271
456
  );
272
457
  }
458
+
273
459
  .countdown__digit-font {
274
460
  margin-top: 2px;
275
461
  width: 100%;
276
462
  display: inline-block;
277
- color: var(--_ctm-dn-cr-se-cr-dc, var(--_tst-dn-cr-se-cr-dc));
278
- font-family: var(--_ctm-dn-cr-se-ft-fy-dc, var(--_tst-dn-cr-se-ft-fy-dc)), sans-serif;
279
- font-size: var(--_ctm-dn-cr-se-ft-se-dc, var(--_tst-dn-cr-se-ft-se-dc));
280
- font-weight: var(--_ctm-dn-cr-se-ft-wt-dc, var(--_tst-dn-cr-se-ft-wt-dc));
281
- font-style: var(--_ctm-dn-cr-se-ft-se-ic-dc, var(--_tst-dn-cr-se-ft-se-ic-dc));
282
- text-align: var(--_ctm-dn-cr-se-tt-an-dc, var(--_tst-dn-cr-se-tt-an-dc));
283
- letter-spacing: var(--_ctm-dn-cr-se-lr-sg-dc, var(--_tst-dn-cr-se-lr-sg-dc));
284
- line-height: var(--_ctm-dn-cr-se-le-ht-dc, var(--_tst-dn-cr-se-le-ht-dc));
463
+ color: var(
464
+ --_ctm-mob-dn-cr-se-cr-dc,
465
+ var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
466
+ );
467
+ font-family: var(
468
+ --_ctm-mob-dn-cr-se-ft-fy-dc,
469
+ var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
470
+ ),
471
+ sans-serif;
472
+ font-size: var(
473
+ --_ctm-mob-dn-cr-se-ft-se-dc,
474
+ var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
475
+ );
476
+ font-weight: var(
477
+ --_ctm-mob-dn-cr-se-ft-wt-dc,
478
+ var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
479
+ );
480
+ font-style: var(
481
+ --_ctm-mob-dn-cr-se-ft-se-ic-dc,
482
+ var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
483
+ );
484
+ text-align: var(
485
+ --_ctm-mob-dn-cr-se-tt-an-dc,
486
+ var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
487
+ );
488
+ letter-spacing: var(
489
+ --_ctm-mob-dn-cr-se-lr-sg-dc,
490
+ var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
491
+ );
492
+ line-height: var(
493
+ --_ctm-mob-dn-cr-se-le-ht-dc,
494
+ var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
495
+ );
285
496
  text-decoration: var(
286
- --_ctm-dn-cr-se-lh-dc,
287
- var(--_ctm-dn-cr-se-ue-dc),
288
- var(--_tst-dn-cr-se-lh)
497
+ --_ctm-mob-dn-cr-se-ue-dc,
498
+ var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
289
499
  );
290
500
  }
501
+
291
502
  .countdown__digits {
292
503
  display: flex;
293
504
  // gap: 5px;
@@ -301,37 +512,83 @@
301
512
  }
302
513
 
303
514
  .countdown label {
304
- color: var(--_ctm-dn-cr-se-cr, var(--_tst-dn-cr-se-cr));
305
- font-family: var(--_ctm-dn-cr-se-ft-fy, var(--_tst-dn-cr-se-ft-fy)), sans-serif;
306
- font-size: var(--_ctm-dn-cr-se-ft-se, var(--_tst-dn-cr-se-ft-se));
307
- font-weight: var(--_ctm-dn-cr-se-ft-wt, var(--_tst-dn-cr-se-ft-wt));
308
- font-style: var(--_ctm-dn-cr-se-ft-se-ic, var(--_tst-dn-cr-se-ft-se-ic));
309
- text-align: var(--_ctm-dn-cr-se-tt-an, var(--_tst-dn-cr-se-tt-an));
310
- letter-spacing: var(--_ctm-dn-cr-se-lr-sg, var(--_tst-dn-cr-se-lr-sg));
311
- line-height: var(--_ctm-dn-cr-se-le-ht, var(--_tst-dn-cr-se-le-ht));
515
+ color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
516
+ font-family: var(
517
+ --_ctm-mob-dn-cr-se-ft-fy,
518
+ var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
519
+ ),
520
+ sans-serif;
521
+ font-size: var(
522
+ --_ctm-mob-dn-cr-se-ft-se,
523
+ var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
524
+ );
525
+ font-weight: var(
526
+ --_ctm-mob-dn-cr-se-ft-wt,
527
+ var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
528
+ );
529
+ font-style: var(
530
+ --_ctm-mob-dn-cr-se-ft-se-ic,
531
+ var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
532
+ );
533
+ text-align: var(
534
+ --_ctm-mob-dn-cr-se-tt-an,
535
+ var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
536
+ );
537
+ letter-spacing: var(
538
+ --_ctm-mob-dn-cr-se-lr-sg,
539
+ var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
540
+ );
541
+ line-height: var(
542
+ --_ctm-mob-dn-cr-se-le-ht,
543
+ var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
544
+ );
312
545
  text-decoration: var(
313
- --_ctm-dn-cr-se-lh,
314
- var(--_ctm-dn-cr-se-ue),
315
- var(--_tst-dn-cr-se-lh)
546
+ --_ctm-mob-dn-cr-se-ue,
547
+ var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
316
548
  );
317
549
  }
550
+
318
551
  .countdown p {
319
552
  margin: 5px 0px;
320
553
  font-weight: 700;
321
554
  letter-spacing: 0.3rem;
322
555
 
323
- color: var(--_ctm-dn-cr-se-cr-dc, var(--_tst-dn-cr-se-cr-dc));
324
- font-family: var(--_ctm-dn-cr-se-ft-fy-dc, var(--_tst-dn-cr-se-ft-fy-dc)), sans-serif;
325
- font-size: var(--_ctm-dn-cr-se-ft-se-dc, var(--_tst-dn-cr-se-ft-se-dc));
326
- font-weight: var(--_ctm-dn-cr-se-ft-wt-dc, var(--_tst-dn-cr-se-ft-wt-dc));
327
- font-style: var(--_ctm-dn-cr-se-ft-se-ic-dc, var(--_tst-dn-cr-se-ft-se-ic-dc));
328
- text-align: var(--_ctm-dn-cr-se-tt-an-dc, var(--_tst-dn-cr-se-tt-an-dc));
329
- letter-spacing: var(--_ctm-dn-cr-se-lr-sg-dc, var(--_tst-dn-cr-se-lr-sg-dc));
330
- line-height: var(--_ctm-dn-cr-se-le-ht-dc, var(--_tst-dn-cr-se-le-ht-dc));
556
+ color: var(
557
+ --_ctm-mob-dn-cr-se-cr-dc,
558
+ var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
559
+ );
560
+ font-family: var(
561
+ --_ctm-mob-dn-cr-se-ft-fy-dc,
562
+ var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
563
+ ),
564
+ sans-serif;
565
+ font-size: var(
566
+ --_ctm-mob-dn-cr-se-ft-se-dc,
567
+ var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
568
+ );
569
+ font-weight: var(
570
+ --_ctm-mob-dn-cr-se-ft-wt-dc,
571
+ var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
572
+ );
573
+ font-style: var(
574
+ --_ctm-mob-dn-cr-se-ft-se-ic-dc,
575
+ var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
576
+ );
577
+ text-align: var(
578
+ --_ctm-mob-dn-cr-se-tt-an-dc,
579
+ var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
580
+ );
581
+ letter-spacing: var(
582
+ --_ctm-mob-dn-cr-se-lr-sg-dc,
583
+ var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
584
+ );
585
+ line-height: var(
586
+ --_ctm-mob-dn-cr-se-le-ht-dc,
587
+ var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
588
+ );
331
589
  text-decoration: var(
332
- --_ctm-dn-cr-se-lh-dc,
333
- var(--_ctm-dn-cr-se-ue-dc),
334
- var(--_tst-dn-cr-se-lh)
590
+ --_ctm-mob-dn-cr-se-ue-dc,
591
+ var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
335
592
  );
336
593
  }
337
594
  }
@@ -340,12 +597,15 @@
340
597
  align-items: center;
341
598
  justify-content: center;
342
599
  svg {
343
- width: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
344
- height: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
600
+ width: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
601
+ height: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
345
602
  margin-top: 6px;
346
603
 
347
604
  path {
348
- stroke: var(--_ctm-dn-dr-se-in-cr, var(--_tst-dn-dr-se-in-cr));
605
+ stroke: var(
606
+ --_ctm-mob-dn-dr-se-in-cr,
607
+ var(--_ctm-tab-dn-dr-se-in-cr, var(--_ctm-dn-dr-se-in-cr))
608
+ );
349
609
  }
350
610
  }
351
611
  }