@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.39

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 (35) hide show
  1. package/dist/add-products-tab.scss +388 -0
  2. package/dist/badge.scss +84 -82
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +29 -34
  5. package/dist/cart-details.scss +54 -57
  6. package/dist/cart-products-sidebar.scss +113 -83
  7. package/dist/cartAttributes.scss +180 -183
  8. package/dist/cartDropdownOverlay.scss +49 -27
  9. package/dist/checkout.scss +127 -38
  10. package/dist/customization-tree.scss +42 -10
  11. package/dist/dropdownTemplate.scss +35 -25
  12. package/dist/employee-bulk-order.scss +219 -47
  13. package/dist/empty-states.scss +66 -66
  14. package/dist/functions.scss +7 -5
  15. package/dist/icons.js +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/item-stock.scss +27 -28
  18. package/dist/menu-v2.scss +2 -2
  19. package/dist/modal.scss +104 -75
  20. package/dist/past-orders.scss +272 -258
  21. package/dist/payment-methods.scss +70 -71
  22. package/dist/prefix-list.scss +1 -0
  23. package/dist/product-actions.scss +68 -68
  24. package/dist/product-sizechart.scss +13 -13
  25. package/dist/quick-links.scss +47 -48
  26. package/dist/quick-order-pad.scss +51 -51
  27. package/dist/quotes.scss +118 -116
  28. package/dist/rfqs.scss +118 -116
  29. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  30. package/dist/types/builder/enums/index.d.ts +2 -0
  31. package/dist/types/builder/index.d.ts +2 -1
  32. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +418 -0
  33. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  34. package/dist/widget.scss +1 -0
  35. package/package.json +1 -1
package/dist/add-products-tab.scss ADDED
@@ -0,0 +1,388 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ // $defaultValues: (
8
+ // --_dm-flt: getListOfResponsive(flex-end, flex-start),
9
+ // );
10
+ [data-div-type="element"] {
11
+ &[data-element-type="addProductsTab"] {
12
+ // width: var(
13
+ // --_sf-el-wh-st-mx,
14
+ // calc(
15
+ // 1% *
16
+ // var(
17
+ // --_mob-ctm-ele-nw-wh-vl,
18
+ // var(--_tab-ctm-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)));
23
+ & > div {
24
+ &.wrapper {
25
+ width: 100%;
26
+ }
27
+ }
28
+ .add-product-wrapper {
29
+ display: grid;
30
+ grid-template-columns: 1fr 1fr;
31
+ gap: 48px;
32
+ padding: 5px;
33
+
34
+ .product-list {
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: 48px;
38
+
39
+ .product-category {
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: 16px;
43
+
44
+ .product-header {
45
+ display: flex;
46
+ gap: 6px;
47
+ border-bottom: 0.5px solid #d0d5dd;
48
+ padding-bottom: 16px;
49
+ flex-direction: column;
50
+
51
+ h2 {
52
+ font-family: "Lato";
53
+ font-size: 20px;
54
+ color: var(--_gray-900);
55
+ font-weight: 700;
56
+ line-height: 30px;
57
+ }
58
+ .product-subheader {
59
+ display: flex;
60
+ flex-direction: row;
61
+ gap: 12px;
62
+ word-break: keep-all;
63
+ align-items: center;
64
+
65
+ @media (max-width: 500px) {
66
+ flex-direction: column;
67
+ white-space: nowrap;
68
+ align-items: flex-start;
69
+ }
70
+ .product-quota {
71
+ font-family: "Lato";
72
+ font-weight: 400;
73
+ font-size: 14px;
74
+ line-height: 20px;
75
+ letter-spacing: 0%;
76
+ color: var(--_gray-500);
77
+ padding-right: 12px;
78
+ border-right: 1px solid var(--_border-light-color);
79
+ gap: 6px;
80
+ display: flex;
81
+ span {
82
+ font-family: "Lato";
83
+ font-weight: 700;
84
+ font-size: 14px;
85
+ line-height: 20px;
86
+ color: var(--_gray-900);
87
+ }
88
+ }
89
+ .product-payment-methods {
90
+ font-family: "Lato";
91
+ font-weight: 400;
92
+ font-size: 14px;
93
+ line-height: 20px;
94
+ letter-spacing: 0%;
95
+ color: var(--_gray-500);
96
+ gap: 6px;
97
+ display: flex;
98
+ span {
99
+ font-family: "Lato";
100
+ font-weight: 700;
101
+ font-size: 14px;
102
+ line-height: 20px;
103
+ letter-spacing: 0%;
104
+ color: var(--_gray-900);
105
+ }
106
+ }
107
+ }
108
+ }
109
+
110
+ .product-grid {
111
+ display: grid;
112
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
113
+
114
+ @media (max-width: 500px) {
115
+ grid-template-columns: 1fr;
116
+ }
117
+
118
+ .product-card {
119
+ display: flex;
120
+ flex-direction: column;
121
+ gap: 24px;
122
+ padding: 16px;
123
+ border: 0.5px solid transparent;
124
+ &:hover {
125
+ background-color: var(--_gray-100);
126
+ border: 0.5px solid var(--_primary-400);
127
+ cursor: pointer;
128
+ border-radius: 4px;
129
+ }
130
+ &.active {
131
+ border: 0.5px solid #243dc6;
132
+ border-radius: 4px;
133
+ border-width: 0.5px;
134
+
135
+ background-color: prepareMediaVariable(dn-pt-im-ss-bd-cr);
136
+ border-width: prepareMediaVariable(dn-pt-im-ss-br-wh);
137
+ border-color: prepareMediaVariable(dn-pt-im-ss-br-cr);
138
+ border-style: prepareMediaVariable(dn-pt-im-ss-br-se);
139
+ border-radius: prepareMediaVariable(dn-pt-im-ss-br-rs);
140
+ box-shadow: prepareMediaVariable(dn-pt-im-ss-sw-ae)
141
+ prepareMediaVariable(dn-pt-im-ss-sw-br) prepareMediaVariable(dn-pt-im-ss-sw-sd)
142
+ prepareMediaVariable(dn-pt-im-ss-sw-cr);
143
+ }
144
+
145
+ .product-image {
146
+ width: 268px;
147
+ height: 240px;
148
+ display: flex;
149
+ align-items: center;
150
+ justify-content: center;
151
+ align-self: center;
152
+ }
153
+
154
+ .product-info {
155
+ gap: 4px;
156
+ display: flex;
157
+ flex-direction: column;
158
+
159
+ .product-title {
160
+ font-family: "Lato";
161
+ font-weight: 600;
162
+ font-size: 16px;
163
+ line-height: 150%;
164
+ color: var(--_gray-900);
165
+ }
166
+
167
+ .product-code {
168
+ font-family: "Lato";
169
+ font-size: 12px;
170
+ line-height: 100%;
171
+ color: var(--_gray-500);
172
+ }
173
+
174
+ .product-price {
175
+ font-family: "Lato";
176
+ font-weight: 700;
177
+ font-size: 20px;
178
+ line-height: 150%;
179
+ margin-top: 8px;
180
+ color: var(--_gray-900);
181
+ }
182
+
183
+ .product-meta {
184
+ font-size: 0.75rem;
185
+ display: flex;
186
+ gap: 0.5rem;
187
+ margin-top: 0.5rem;
188
+ justify-content: space-between;
189
+ align-items: center;
190
+ .product-views {
191
+ gap: 6px;
192
+ display: flex;
193
+ flex-direction: row;
194
+ align-items: center;
195
+ span {
196
+ gap: 6px;
197
+ display: flex;
198
+ flex-direction: row;
199
+ align-items: center;
200
+ .icon {
201
+ display: flex;
202
+ svg {
203
+ width: 20px;
204
+ height: 20px;
205
+
206
+ path {
207
+ stroke: var(--_gray-400);
208
+ }
209
+ }
210
+ }
211
+
212
+ font-family: "Lato";
213
+ font-weight: 700;
214
+ font-size: 16px;
215
+ line-height: 150%;
216
+ color: var(--_gray-600);
217
+ }
218
+ }
219
+ .product-cart {
220
+ .icon {
221
+ display: flex;
222
+ svg {
223
+ width: 32px;
224
+ height: 32px;
225
+
226
+ path {
227
+ stroke: var(--_gray-400);
228
+ }
229
+ }
230
+ }
231
+ }
232
+ }
233
+ }
234
+ }
235
+ }
236
+ }
237
+ }
238
+
239
+ .customizer-panel {
240
+ display: flex;
241
+ flex-direction: column;
242
+ gap: 12px;
243
+ border-left: 0.5px solid #d0d5dd;
244
+ padding-left: 48px;
245
+
246
+ .product-header {
247
+ display: flex;
248
+ flex-direction: column;
249
+ gap: 12px;
250
+ h2 {
251
+ font-family: "Lato";
252
+ font-weight: 400;
253
+ font-size: 20px;
254
+ line-height: 30px;
255
+ color: var(--_gray-600);
256
+ }
257
+ p {
258
+ font-family: "Lato";
259
+ font-weight: 400;
260
+ font-size: 14px;
261
+ line-height: 20px;
262
+ color: var(--_gray-900);
263
+ }
264
+ }
265
+
266
+ .price-options {
267
+ display: flex;
268
+ align-items: center;
269
+
270
+ .price {
271
+ display: flex;
272
+ flex-direction: column;
273
+
274
+ .amount {
275
+ font-family: "Lato";
276
+ font-weight: 700;
277
+ font-size: 36px;
278
+ line-height: 44px;
279
+ letter-spacing: -2%;
280
+ color: var(--_gray-900);
281
+ }
282
+
283
+ .note {
284
+ font-family: "Lato";
285
+ font-weight: 500;
286
+ font-size: 16px;
287
+ line-height: 24px;
288
+ color: var(--_success-700);
289
+ }
290
+ }
291
+ }
292
+
293
+ .color-options {
294
+ display: flex;
295
+ flex-direction: column;
296
+ margin-top: 12px;
297
+ gap: 6px;
298
+
299
+ label {
300
+ font-family: "Lato";
301
+ font-weight: 600;
302
+ font-size: 16px;
303
+ line-height: 24px;
304
+ color: var(--_gray-600);
305
+ }
306
+ .colors {
307
+ display: flex;
308
+ flex-wrap: wrap;
309
+ gap: 6px;
310
+
311
+ .color-circle {
312
+ width: 28px;
313
+ height: 28px;
314
+ border-radius: 50%;
315
+ cursor: pointer;
316
+
317
+ &.selected {
318
+ width: 50px;
319
+ height: 28px;
320
+ border-radius: 100px;
321
+ border: 0.5px solid var(--_gray-600);
322
+ padding: 6px 5px;
323
+ }
324
+ }
325
+ }
326
+ }
327
+
328
+ .fit-size-options {
329
+ display: flex;
330
+ flex-direction: column;
331
+ margin-top: 20px;
332
+ gap: 2rem;
333
+
334
+ .fit,
335
+ .size {
336
+ display: flex;
337
+ flex-direction: column;
338
+ gap: 6px;
339
+
340
+ label {
341
+ font-family: "Lato";
342
+ font-weight: 600;
343
+ font-size: 16px;
344
+ line-height: 24px;
345
+ color: var(--_gray-600);
346
+ }
347
+
348
+ .options {
349
+ display: flex;
350
+ gap: 12px;
351
+ flex-wrap: wrap;
352
+
353
+ button {
354
+ padding: 8px 12px;
355
+ border: 0.5px solid var(--_gray-300);
356
+ border-radius: 4px;
357
+ background: #fff;
358
+ font-family: "Lato";
359
+ font-weight: 400;
360
+ font-size: 16px;
361
+ line-height: 24px;
362
+ color: var(--_gray-600);
363
+ cursor: pointer;
364
+
365
+ &.selected {
366
+ border: 0.5px solid var(--_primary-400);
367
+ background-color: var(--_gray-200);
368
+ font-weight: 600;
369
+ font-size: 16px;
370
+ color: var(--_primary-400);
371
+ }
372
+ }
373
+ }
374
+ }
375
+ }
376
+ }
377
+
378
+ @media (max-width: 768px) {
379
+ grid-template-columns: 1fr;
380
+ .customizer-panel {
381
+ border-left: none;
382
+ padding-left: 0;
383
+ margin-top: 2rem;
384
+ }
385
+ }
386
+ }
387
+ }
388
+ }
package/dist/badge.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @function ctm-var($base) {
4
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
5
- }
3
+ @use "./functions.scss" as *;
6
4
 
7
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
8
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -121,15 +119,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
121
119
  display: flex;
122
120
  align-items: center;
123
121
  align-self: stretch;
124
- justify-content: var(--_sf-hr-at, ctm-var(dn-be-ct-dt-se-at));
125
- gap: ctm-var(lt-im-gp);
122
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(dn-be-ct-dt-se-at));
123
+ gap: prepareMediaVariable(lt-im-gp);
126
124
  // width: 100%;
127
125
  // height: 100%;
128
126
 
129
127
  .status_badge {
130
128
  display: flex;
131
129
  align-items: center;
132
- gap: ctm-var(lt-sg-bn-is);
130
+ gap: prepareMediaVariable(lt-sg-bn-is);
133
131
  width: 100%;
134
132
  height: 100%;
135
133
  mix-blend-mode: multiply;
@@ -146,83 +144,87 @@ $resizeActive: '[data-cms-element-resizer="true"]';
146
144
  // }
147
145
 
148
146
  &[data-producttag="New"] {
149
- background-color: ctm-var(dn-be-nw-se-bd-cr);
150
- border-width: ctm-var(dn-be-nw-se-br-wh);
151
- border-color: ctm-var(dn-be-nw-se-br-cr);
152
- border-style: ctm-var(dn-be-nw-se-br-se);
153
- border-radius: ctm-var(dn-be-nw-se-br-rs);
154
- box-shadow: ctm-var(dn-be-nw-se-sw-ae) ctm-var(dn-be-nw-se-sw-br)
155
- ctm-var(dn-be-nw-se-sw-sd) ctm-var(dn-be-nw-se-sw-cr);
147
+ background-color: prepareMediaVariable(dn-be-nw-se-bd-cr);
148
+ border-width: prepareMediaVariable(dn-be-nw-se-br-wh);
149
+ border-color: prepareMediaVariable(dn-be-nw-se-br-cr);
150
+ border-style: prepareMediaVariable(dn-be-nw-se-br-se);
151
+ border-radius: prepareMediaVariable(dn-be-nw-se-br-rs);
152
+ box-shadow: prepareMediaVariable(dn-be-nw-se-sw-ae)
153
+ prepareMediaVariable(dn-be-nw-se-sw-br) prepareMediaVariable(dn-be-nw-se-sw-sd)
154
+ prepareMediaVariable(dn-be-nw-se-sw-cr);
156
155
  .icon {
157
156
  display: var(--_hover-show-icon, var(--_show-icon, flex));
158
157
  svg {
159
- width: ctm-var(dn-be-nw-se-in-se);
160
- height: ctm-var(dn-be-nw-se-in-se);
158
+ width: prepareMediaVariable(dn-be-nw-se-in-se);
159
+ height: prepareMediaVariable(dn-be-nw-se-in-se);
161
160
  path {
162
- stroke: ctm-var(dn-be-nw-se-in-c1);
161
+ stroke: prepareMediaVariable(dn-be-nw-se-in-c1);
163
162
  }
164
163
  }
165
164
  }
166
165
  }
167
166
  &[data-producttag="Bestseller"] {
168
167
  //background-color: #f57c00;
169
- background-color: ctm-var(dn-be-br-se-bd-cr);
170
- border-width: ctm-var(dn-be-br-se-br-wh);
171
- border-color: ctm-var(dn-be-br-se-br-cr);
172
- border-style: ctm-var(dn-be-br-se-br-se);
173
- border-radius: ctm-var(dn-be-br-se-br-rs);
174
- box-shadow: ctm-var(dn-be-br-se-sw-ae) ctm-var(dn-be-br-se-sw-br)
175
- ctm-var(dn-be-br-se-sw-sd) ctm-var(dn-be-br-se-sw-cr);
168
+ background-color: prepareMediaVariable(dn-be-br-se-bd-cr);
169
+ border-width: prepareMediaVariable(dn-be-br-se-br-wh);
170
+ border-color: prepareMediaVariable(dn-be-br-se-br-cr);
171
+ border-style: prepareMediaVariable(dn-be-br-se-br-se);
172
+ border-radius: prepareMediaVariable(dn-be-br-se-br-rs);
173
+ box-shadow: prepareMediaVariable(dn-be-br-se-sw-ae)
174
+ prepareMediaVariable(dn-be-br-se-sw-br) prepareMediaVariable(dn-be-br-se-sw-sd)
175
+ prepareMediaVariable(dn-be-br-se-sw-cr);
176
176
  .icon {
177
177
  display: var(--_hover-show-icon, var(--_show-icon, flex));
178
178
  svg {
179
- width: ctm-var(dn-be-br-se-in-se);
180
- height: ctm-var(dn-be-br-se-in-se);
179
+ width: prepareMediaVariable(dn-be-br-se-in-se);
180
+ height: prepareMediaVariable(dn-be-br-se-in-se);
181
181
 
182
182
  path {
183
- stroke: ctm-var(dn-be-br-se-in-c1);
183
+ stroke: prepareMediaVariable(dn-be-br-se-in-c1);
184
184
  }
185
185
  }
186
186
  }
187
187
  }
188
188
  &[data-producttag="Limited"] {
189
189
  //background-color: #6a1b9a;
190
- background-color: ctm-var(dn-be-ld-se-bd-cr);
191
- border-width: ctm-var(dn-be-ld-se-br-wh);
192
- border-color: ctm-var(dn-be-ld-se-br-cr);
193
- border-style: ctm-var(dn-be-ld-se-br-se);
194
- border-radius: ctm-var(dn-be-ld-se-br-rs);
195
- box-shadow: ctm-var(dn-be-ld-se-sw-ae) ctm-var(dn-be-ld-se-sw-br)
196
- ctm-var(dn-be-ld-se-sw-sd) ctm-var(dn-be-ld-se-sw-cr);
190
+ background-color: prepareMediaVariable(dn-be-ld-se-bd-cr);
191
+ border-width: prepareMediaVariable(dn-be-ld-se-br-wh);
192
+ border-color: prepareMediaVariable(dn-be-ld-se-br-cr);
193
+ border-style: prepareMediaVariable(dn-be-ld-se-br-se);
194
+ border-radius: prepareMediaVariable(dn-be-ld-se-br-rs);
195
+ box-shadow: prepareMediaVariable(dn-be-ld-se-sw-ae)
196
+ prepareMediaVariable(dn-be-ld-se-sw-br) prepareMediaVariable(dn-be-ld-se-sw-sd)
197
+ prepareMediaVariable(dn-be-ld-se-sw-cr);
197
198
  .icon {
198
199
  display: var(--_hover-show-icon, var(--_show-icon, flex));
199
200
  svg {
200
- width: ctm-var(dn-be-ld-se-in-se);
201
- height: ctm-var(dn-be-ld-se-in-se);
201
+ width: prepareMediaVariable(dn-be-ld-se-in-se);
202
+ height: prepareMediaVariable(dn-be-ld-se-in-se);
202
203
 
203
204
  path {
204
- stroke: ctm-var(dn-be-ld-se-in-c1);
205
+ stroke: prepareMediaVariable(dn-be-ld-se-in-c1);
205
206
  }
206
207
  }
207
208
  }
208
209
  }
209
210
  &[data-producttag="Exclusive"] {
210
211
  //background-color: #1976d2;
211
- background-color: ctm-var(dn-be-ee-se-bd-cr);
212
- border-width: ctm-var(dn-be-ee-se-br-wh);
213
- border-color: ctm-var(dn-be-ee-se-br-cr);
214
- border-style: ctm-var(dn-be-ee-se-br-se);
215
- border-radius: ctm-var(dn-be-ee-se-br-rs);
216
- box-shadow: ctm-var(dn-be-ee-se-sw-ae) ctm-var(dn-be-ee-se-sw-br)
217
- ctm-var(dn-be-ee-se-sw-sd) ctm-var(dn-be-ee-se-sw-cr);
212
+ background-color: prepareMediaVariable(dn-be-ee-se-bd-cr);
213
+ border-width: prepareMediaVariable(dn-be-ee-se-br-wh);
214
+ border-color: prepareMediaVariable(dn-be-ee-se-br-cr);
215
+ border-style: prepareMediaVariable(dn-be-ee-se-br-se);
216
+ border-radius: prepareMediaVariable(dn-be-ee-se-br-rs);
217
+ box-shadow: prepareMediaVariable(dn-be-ee-se-sw-ae)
218
+ prepareMediaVariable(dn-be-ee-se-sw-br) prepareMediaVariable(dn-be-ee-se-sw-sd)
219
+ prepareMediaVariable(dn-be-ee-se-sw-cr);
218
220
  .icon {
219
221
  display: var(--_hover-show-icon, var(--_show-icon, flex));
220
222
  svg {
221
- width: ctm-var(dn-be-ee-se-in-se);
222
- height: ctm-var(dn-be-ee-se-in-se);
223
+ width: prepareMediaVariable(dn-be-ee-se-in-se);
224
+ height: prepareMediaVariable(dn-be-ee-se-in-se);
223
225
 
224
226
  path {
225
- stroke: ctm-var(dn-be-ee-se-in-c1);
227
+ stroke: prepareMediaVariable(dn-be-ee-se-in-c1);
226
228
  }
227
229
  }
228
230
  }
@@ -230,48 +232,48 @@ $resizeActive: '[data-cms-element-resizer="true"]';
230
232
 
231
233
  .product_tag {
232
234
  &[data-producttag="New"] {
233
- font-family: ctm-var(dn-be-nw-se-ft-fy);
234
- font-size: ctm-var(dn-be-nw-se-ft-se);
235
- color: ctm-var(dn-be-nw-se-cr);
236
- font-weight: ctm-var(dn-be-nw-se-ft-wt);
237
- font-style: ctm-var(dn-be-nw-se-ft-se-ic);
238
- text-decoration: ctm-var(dn-be-nw-se-ue);
239
- text-align: ctm-var(dn-be-nw-se-tt-an);
240
- letter-spacing: ctm-var(dn-be-nw-se-lr-sg);
241
- line-height: ctm-var(dn-be-nw-se-le-ht);
235
+ font-family: prepareMediaVariable(dn-be-nw-se-ft-fy);
236
+ font-size: prepareMediaVariable(dn-be-nw-se-ft-se);
237
+ color: prepareMediaVariable(dn-be-nw-se-cr);
238
+ font-weight: prepareMediaVariable(dn-be-nw-se-ft-wt);
239
+ font-style: prepareMediaVariable(dn-be-nw-se-ft-se-ic);
240
+ text-decoration: prepareMediaVariable(dn-be-nw-se-ue);
241
+ text-align: prepareMediaVariable(dn-be-nw-se-tt-an);
242
+ letter-spacing: prepareMediaVariable(dn-be-nw-se-lr-sg);
243
+ line-height: prepareMediaVariable(dn-be-nw-se-le-ht);
242
244
  }
243
245
  &[data-producttag="Bestseller"] {
244
- font-family: ctm-var(dn-be-br-se-ft-fy);
245
- font-size: ctm-var(dn-be-br-se-ft-se);
246
- color: ctm-var(dn-be-br-se-cr);
247
- font-weight: ctm-var(dn-be-br-se-ft-wt);
248
- font-style: ctm-var(dn-be-br-se-ft-se-ic);
249
- text-decoration: ctm-var(dn-be-br-se-ue);
250
- text-align: ctm-var(dn-be-br-se-tt-an);
251
- letter-spacing: ctm-var(dn-be-br-se-lr-sg);
252
- line-height: ctm-var(dn-be-br-se-le-ht);
246
+ font-family: prepareMediaVariable(dn-be-br-se-ft-fy);
247
+ font-size: prepareMediaVariable(dn-be-br-se-ft-se);
248
+ color: prepareMediaVariable(dn-be-br-se-cr);
249
+ font-weight: prepareMediaVariable(dn-be-br-se-ft-wt);
250
+ font-style: prepareMediaVariable(dn-be-br-se-ft-se-ic);
251
+ text-decoration: prepareMediaVariable(dn-be-br-se-ue);
252
+ text-align: prepareMediaVariable(dn-be-br-se-tt-an);
253
+ letter-spacing: prepareMediaVariable(dn-be-br-se-lr-sg);
254
+ line-height: prepareMediaVariable(dn-be-br-se-le-ht);
253
255
  }
254
256
  &[data-producttag="Limited"] {
255
- font-family: ctm-var(dn-be-ld-se-ft-fy);
256
- font-size: ctm-var(dn-be-ld-se-ft-se);
257
- color: ctm-var(dn-be-ld-se-cr);
258
- font-weight: ctm-var(dn-be-ld-se-ft-wt);
259
- font-style: ctm-var(dn-be-ld-se-ft-se-ic);
260
- text-decoration: ctm-var(dn-be-ld-se-ue);
261
- text-align: ctm-var(dn-be-ld-se-tt-an);
262
- letter-spacing: ctm-var(dn-be-ld-se-lr-sg);
263
- line-height: ctm-var(dn-be-ld-se-le-ht);
257
+ font-family: prepareMediaVariable(dn-be-ld-se-ft-fy);
258
+ font-size: prepareMediaVariable(dn-be-ld-se-ft-se);
259
+ color: prepareMediaVariable(dn-be-ld-se-cr);
260
+ font-weight: prepareMediaVariable(dn-be-ld-se-ft-wt);
261
+ font-style: prepareMediaVariable(dn-be-ld-se-ft-se-ic);
262
+ text-decoration: prepareMediaVariable(dn-be-ld-se-ue);
263
+ text-align: prepareMediaVariable(dn-be-ld-se-tt-an);
264
+ letter-spacing: prepareMediaVariable(dn-be-ld-se-lr-sg);
265
+ line-height: prepareMediaVariable(dn-be-ld-se-le-ht);
264
266
  }
265
267
  &[data-producttag="Exclusive"] {
266
- font-family: ctm-var(dn-be-ee-se-ft-fy);
267
- font-size: ctm-var(dn-be-ee-se-ft-se);
268
- color: ctm-var(dn-be-ee-se-cr);
269
- font-weight: ctm-var(dn-be-ee-se-ft-wt);
270
- font-style: ctm-var(dn-be-ee-se-ft-se-ic);
271
- text-decoration: ctm-var(dn-be-ee-se-ue);
272
- text-align: ctm-var(dn-be-ee-se-tt-an);
273
- letter-spacing: ctm-var(dn-be-ee-se-lr-sg);
274
- line-height: ctm-var(dn-be-ee-se-le-ht);
268
+ font-family: prepareMediaVariable(dn-be-ee-se-ft-fy);
269
+ font-size: prepareMediaVariable(dn-be-ee-se-ft-se);
270
+ color: prepareMediaVariable(dn-be-ee-se-cr);
271
+ font-weight: prepareMediaVariable(dn-be-ee-se-ft-wt);
272
+ font-style: prepareMediaVariable(dn-be-ee-se-ft-se-ic);
273
+ text-decoration: prepareMediaVariable(dn-be-ee-se-ue);
274
+ text-align: prepareMediaVariable(dn-be-ee-se-tt-an);
275
+ letter-spacing: prepareMediaVariable(dn-be-ee-se-lr-sg);
276
+ line-height: prepareMediaVariable(dn-be-ee-se-le-ht);
275
277
  }
276
278
  }
277
279
  }