@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.50

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 (16) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/types/builder/tools/element-edit/bundle.d.ts +104 -4
  3. package/package.json +1 -1
  4. package/dist/add-products-tab copy.scss +0 -1122
  5. package/dist/allocationDetails copy.scss +0 -757
  6. package/dist/bulk-variant-picker copy.scss +0 -1121
  7. package/dist/bundle copy.scss +0 -2805
  8. package/dist/bundleDetails copy.scss +0 -1431
  9. package/dist/button copy.scss +0 -271
  10. package/dist/product-actions copy.scss +0 -2765
  11. package/dist/product-highlights copy.scss +0 -217
  12. package/dist/product-image copy.scss +0 -787
  13. package/dist/repeater copy.scss +0 -635
  14. package/dist/user-elements copy.scss +0 -1437
  15. package/dist/volume-pricing copy 2.scss +0 -1468
  16. package/dist/volume-pricing copy.scss +0 -1076
package/dist/add-products-tab copy.scss DELETED
@@ -1,1122 +0,0 @@
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
-
29
- .product-section {
30
- display: flex;
31
- justify-content: space-between;
32
- align-items: center;
33
- border-bottom: 1px solid #e0e0e0;
34
- padding: 0.5rem;
35
- .section-title {
36
- font-size: var(
37
- --_ctm-mob-dn-hr-te-ft-se,
38
- var(--_ctm-tab-dn-hr-te-ft-se, var(--_ctm-dn-hr-te-ft-se))
39
- );
40
- font-family: var(
41
- --_ctm-mob-dn-hr-te-ft-fy,
42
- var(--_ctm-tab-dn-hr-te-ft-fy, var(--_ctm-dn-hr-te-ft-fy))
43
- );
44
- font-weight: var(
45
- --_ctm-mob-dn-hr-te-ft-wt,
46
- var(--_ctm-tab-dn-hr-te-ft-wtvar(--_ctm-dn-hr-te-ft-wt))
47
- );
48
- line-height: var(
49
- --_ctm-mob-dn-hr-te-le-ht,
50
- var(--_ctm-tab-dn-hr-te-le-ht, var(--_ctm-dn-hr-te-le-ht))
51
- );
52
- letter-spacing: var(
53
- --_ctm-mob-dn-hr-te-lr-sg,
54
- var(--_ctm-tab-dn-hr-te-lr-sg, var(--_ctm-dn-hr-te-lr-sg))
55
- );
56
- color: var(--_ctm-mob-dn-hr-te-cr, var(--_ctm-tab-dn-hr-te-cr, var(--_ctm-dn-hr-te-cr)));
57
- }
58
- .search-bar {
59
- display: flex;
60
- align-items: center;
61
- gap: 0.5rem;
62
-
63
- .search-input {
64
- display: flex;
65
- align-items: center;
66
- border: 1px solid #d1d5db;
67
- border-radius: 4px;
68
- padding: 0.25rem 0.5rem;
69
- background: #fff;
70
- height: 40px;
71
-
72
- .icon {
73
- margin-right: 0.5rem;
74
- color: #6b7280;
75
- }
76
-
77
- input {
78
- border: none;
79
- outline: none;
80
- font-size: 14px;
81
- width: 160px;
82
- }
83
- }
84
-
85
- .filter-btn {
86
- border: 1px solid #d1d5db;
87
- background: white;
88
- border-radius: 4px;
89
- padding: 0.25rem 0.5rem;
90
- font-size: 18px;
91
- cursor: pointer;
92
- }
93
- }
94
- }
95
-
96
- .add-product-wrapper {
97
- display: grid;
98
- grid-template-columns: 1fr 1fr;
99
- gap: 48px;
100
- padding-top: 16px;
101
-
102
- .product-list {
103
- display: flex;
104
- flex-direction: column;
105
- gap: 48px;
106
-
107
- .product-category {
108
- display: flex;
109
- flex-direction: column;
110
- gap: 16px;
111
-
112
- .product-header {
113
- display: flex;
114
- gap: 6px;
115
- border-bottom: 0.5px solid #d0d5dd;
116
- padding-bottom: 16px;
117
- flex-direction: column;
118
-
119
- h2 {
120
- font-size: 20px;
121
- color: var(--_gray-900);
122
- font-weight: 700;
123
- line-height: 30px;
124
- }
125
- .product-subheader {
126
- display: flex;
127
- flex-direction: row;
128
- gap: 12px;
129
- word-break: keep-all;
130
- align-items: center;
131
-
132
- @media (max-width: 500px) {
133
- flex-direction: column;
134
- white-space: nowrap;
135
- align-items: flex-start;
136
- }
137
- .product-quota {
138
- font-weight: 400;
139
- font-size: 14px;
140
- line-height: 20px;
141
- letter-spacing: 0%;
142
- color: var(--_gray-500);
143
- padding-right: 12px;
144
- border-right: 1px solid var(--_border-light-color);
145
- gap: 6px;
146
- display: flex;
147
- span {
148
- font-weight: 700;
149
- font-size: 14px;
150
- line-height: 20px;
151
- color: var(--_gray-900);
152
- }
153
- }
154
- .product-payment-methods {
155
- font-weight: 400;
156
- font-size: 14px;
157
- line-height: 20px;
158
- letter-spacing: 0%;
159
- color: var(--_gray-500);
160
- gap: 6px;
161
- display: flex;
162
- span {
163
- font-weight: 700;
164
- font-size: 14px;
165
- line-height: 20px;
166
- letter-spacing: 0%;
167
- color: var(--_gray-900);
168
- }
169
- }
170
- }
171
- }
172
-
173
- .product-grid {
174
- display: grid;
175
- // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
176
- grid-template-columns: 1fr 1fr;
177
-
178
- @media (max-width: 500px) {
179
- grid-template-columns: 1fr;
180
- }
181
-
182
- .product-card {
183
- display: flex;
184
- flex-direction: column;
185
- gap: 24px;
186
- padding: 16px;
187
- border: 0.5px solid transparent;
188
- &:hover {
189
- background-color: var(--_gray-100);
190
- border: 0.5px solid var(--_primary-400);
191
- cursor: pointer;
192
- border-radius: 4px;
193
- }
194
- &.active {
195
- border: 0.5px solid #243dc6;
196
- border-radius: 4px;
197
- border-width: 0.5px;
198
-
199
- background-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-bd-cr);
200
- border-width: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-wh);
201
- border-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-cr);
202
- border-style: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-se);
203
- border-radius: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-rs);
204
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-ae)
205
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-br)
206
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-sd)
207
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-cr);
208
- }
209
-
210
- .product-image {
211
- width: 268px;
212
- height: 240px;
213
- display: flex;
214
- align-items: center;
215
- justify-content: center;
216
- align-self: center;
217
- }
218
-
219
- .product-info {
220
- gap: 4px;
221
- display: flex;
222
- flex-direction: column;
223
-
224
- .product-title {
225
- font-family: var(
226
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-fy,
227
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-te-ft-fy))
228
- );
229
- font-size: var(
230
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se,
231
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-se, var(--_ctm-dn-pt-cd-pt-cd-te-ft-se))
232
- );
233
- font-weight: var(
234
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-wt,
235
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-te-ft-wt))
236
- );
237
- color: var(
238
- --_ctm-mob-dn-pt-cd-pt-cd-te-cr,
239
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-cr, var(--_ctm-dn-pt-cd-pt-cd-te-cr))
240
- );
241
- line-height: var(
242
- --_ctm-mob-dn-pt-cd-pt-cd-te-le-ht,
243
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-le-ht, var(--_ctm-dn-pt-cd-pt-cd-te-le-ht))
244
- );
245
- letter-spacing: var(
246
- --_ctm-mob-dn-pt-cd-pt-cd-te-lr-sg,
247
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-te-lr-sg))
248
- );
249
- text-decoration: var(
250
- --_ctm-mob-dn-pt-cd-pt-cd-te-ue,
251
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ue, var(--_ctm-dn-pt-cd-pt-cd-te-ue))
252
- );
253
- font-style: var(
254
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se-ic,
255
- var(
256
- --_ctm-tab-dn-pt-cd-pt-cd-te-ft-se-ic,
257
- var(--_ctm-dn-pt-cd-pt-cd-te-ft-se-ic)
258
- )
259
- );
260
- padding: var(
261
- --_ctm-mob-dn-pt-cd-pt-cd-te-pg,
262
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-pg, var(--_ctm-dn-pt-cd-pt-cd-te-pg))
263
- );
264
- }
265
-
266
- .product-code {
267
- font-family: var(
268
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-fy,
269
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-fy))
270
- );
271
- font-size: var(
272
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se,
273
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se))
274
- );
275
- font-weight: var(
276
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-wt,
277
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-wt))
278
- );
279
- color: var(
280
- --_ctm-mob-dn-pt-cd-pt-cd-dn-cr,
281
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-cr, var(--_ctm-dn-pt-cd-pt-cd-dn-cr))
282
- );
283
- line-height: var(
284
- --_ctm-mob-dn-pt-cd-pt-cd-dn-le-ht,
285
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-le-ht, var(--_ctm-dn-pt-cd-pt-cd-dn-le-ht))
286
- );
287
- letter-spacing: var(
288
- --_ctm-mob-dn-pt-cd-pt-cd-dn-lr-sg,
289
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-dn-lr-sg))
290
- );
291
- text-decoration: var(
292
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ue,
293
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ue, var(--_ctm-dn-pt-cd-pt-cd-dn-ue))
294
- );
295
- font-style: var(
296
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se-ic,
297
- var(
298
- --_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se-ic,
299
- var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se-ic)
300
- )
301
- );
302
- padding: var(
303
- --_ctm-mob-dn-pt-cd-pt-cd-dn-pg,
304
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-pg, var(--_ctm-dn-pt-cd-pt-cd-dn-pg))
305
- );
306
- }
307
- .product-price {
308
- font-family: var(
309
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-fy,
310
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-fy))
311
- );
312
- font-size: var(
313
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se,
314
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se))
315
- );
316
- font-weight: var(
317
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-wt,
318
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-wt))
319
- );
320
- color: var(
321
- --_ctm-mob-dn-pt-cd-pt-cd-pe-cr,
322
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-cr, var(--_ctm-dn-pt-cd-pt-cd-pe-cr))
323
- );
324
- line-height: var(
325
- --_ctm-mob-dn-pt-cd-pt-cd-pe-le-ht,
326
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-le-ht, var(--_ctm-dn-pt-cd-pt-cd-pe-le-ht))
327
- );
328
- letter-spacing: var(
329
- --_ctm-mob-dn-pt-cd-pt-cd-pe-lr-sg,
330
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-pe-lr-sg))
331
- );
332
- text-decoration: var(
333
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ue,
334
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ue, var(--_ctm-dn-pt-cd-pt-cd-pe-ue))
335
- );
336
- font-style: var(
337
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se-ic,
338
- var(
339
- --_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se-ic,
340
- var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se-ic)
341
- )
342
- );
343
- padding: var(
344
- --_ctm-mob-dn-pt-cd-pt-cd-pe-pg,
345
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-pg, var(--_ctm-dn-pt-cd-pt-cd-pe-pg))
346
- );
347
- }
348
-
349
- .product-meta {
350
- font-size: 0.75rem;
351
- display: flex;
352
- gap: 0.5rem;
353
- margin-top: 0.5rem;
354
- justify-content: space-between;
355
- align-items: center;
356
- .product-views {
357
- gap: 6px;
358
- display: flex;
359
- flex-direction: row;
360
- align-items: center;
361
- span {
362
- gap: 6px;
363
- display: flex;
364
- flex-direction: row;
365
- align-items: center;
366
- .icon {
367
- display: flex;
368
- svg {
369
- width: 20px;
370
- height: 20px;
371
-
372
- path {
373
- stroke: var(--_gray-400);
374
- }
375
- }
376
- }
377
-
378
- font-weight: 700;
379
- font-size: 16px;
380
- line-height: 150%;
381
- color: var(--_gray-600);
382
- }
383
- }
384
- .product-cart {
385
- position: relative;
386
- width: 50px;
387
- height: 50px;
388
- .icon {
389
- display: flex;
390
- svg {
391
- width: 32px;
392
- height: 32px;
393
-
394
- path {
395
- stroke: var(--_gray-400);
396
- }
397
- }
398
- }
399
- .cart-badge {
400
- position: absolute;
401
- top: -5px;
402
- right: 8px;
403
- background-color: #ffd400; /* bright yellow */
404
- color: #000;
405
- border-radius: 4px;
406
- padding: 2px 6px;
407
- font-size: 14px;
408
- font-weight: bold;
409
- min-width: 20px;
410
- text-align: center;
411
- }
412
- }
413
- }
414
- }
415
- }
416
- }
417
- }
418
- }
419
-
420
- .customizer-panel {
421
- display: flex;
422
- flex-direction: column;
423
- gap: 12px;
424
- border-left: 0.5px solid #d0d5dd;
425
- padding-left: 48px;
426
-
427
- .product-header {
428
- display: flex;
429
- flex-direction: column;
430
- gap: 12px;
431
- h2 {
432
- font-family: var(
433
- --_ctm-mob-dn-pt-ds-pt-te-ft-fy,
434
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-fy, var(--_ctm-dn-pt-ds-pt-te-ft-fy))
435
- );
436
- font-size: var(
437
- --_ctm-mob-dn-pt-ds-pt-te-ft-se,
438
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-se, var(--_ctm-dn-pt-ds-pt-te-ft-se))
439
- );
440
- font-weight: var(
441
- --_ctm-mob-dn-pt-ds-pt-te-ft-wt,
442
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-wt, var(--_ctm-dn-pt-ds-pt-te-ft-wt))
443
- );
444
- color: var(
445
- --_ctm-mob-dn-pt-ds-pt-te-cr,
446
- var(--_ctm-tab-dn-pt-ds-pt-te-cr, var(--_ctm-dn-pt-ds-pt-te-cr))
447
- );
448
- line-height: var(
449
- --_ctm-mob-dn-pt-ds-pt-te-le-ht,
450
- var(--_ctm-tab-dn-pt-ds-pt-te-le-ht, var(--_ctm-dn-pt-ds-pt-te-le-ht))
451
- );
452
- letter-spacing: var(
453
- --_ctm-mob-dn-pt-ds-pt-te-lr-sg,
454
- var(--_ctm-tab-dn-pt-ds-pt-te-lr-sg, var(--_ctm-dn-pt-ds-pt-te-lr-sg))
455
- );
456
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
457
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
458
- padding: var(
459
- --_ctm-dn-mob-pt-ds-pt-te-pg,
460
- var(--_ctm-tab-dn-pt-ds-pt-te-pg, var(--_ctm-dn-pt-ds-pt-te-pg))
461
- );
462
- }
463
- p {
464
- font-family: var(
465
- --_ctm-mob-dn-pt-ds-pt-dn-ft-fy,
466
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-fy, var(--_ctm-dn-pt-ds-pt-dn-ft-fy))
467
- );
468
- font-size: var(
469
- --_ctm-mob-dn-pt-ds-pt-dn-ft-se,
470
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-se, var(--_ctm-dn-pt-ds-pt-dn-ft-se))
471
- );
472
- font-weight: var(
473
- --_ctm-mob-dn-pt-ds-pt-dn-ft-wt,
474
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-wt, var(--_ctm-dn-pt-ds-pt-dn-ft-wt))
475
- );
476
- color: var(
477
- --_ctm-mob-dn-pt-ds-pt-dn-cr,
478
- var(--_ctm-tab-dn-pt-ds-pt-dn-cr, var(--_ctm-dn-pt-ds-pt-dn-cr))
479
- );
480
- line-height: var(
481
- --_ctm-mob-dn-pt-ds-pt-dn-le-ht,
482
- var(--_ctm-tab-dn-pt-ds-pt-dn-le-ht, var(--_ctm-dn-pt-ds-pt-dn-le-ht))
483
- );
484
- letter-spacing: var(
485
- --_ctm-mob-dn-pt-ds-pt-dn-lr-sg,
486
- var(--_ctm-tab-dn-pt-ds-pt-dn-lr-sg, var(--_ctm-dn-pt-ds-pt-dn-lr-sg))
487
- );
488
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
489
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
490
- padding: var(
491
- --_ctm-dn-mob-pt-ds-pt-dn-pg,
492
- var(--_ctm-tab-dn-pt-ds-pt-dn-pg, var(--_ctm-dn-pt-ds-pt-dn-pg))
493
- );
494
- }
495
- }
496
-
497
- .price-options {
498
- display: flex;
499
- align-items: center;
500
-
501
- .price {
502
- display: flex;
503
- flex-direction: column;
504
-
505
- .amount {
506
- font-family: var(
507
- --_ctm-mob-dn-pt-ds-pt-pe-ft-fy,
508
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-fy, var(--_ctm-dn-pt-ds-pt-pe-ft-fy))
509
- );
510
- font-size: var(
511
- --_ctm-mob-dn-pt-ds-pt-pe-ft-se,
512
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-se, var(--_ctm-dn-pt-ds-pt-pe-ft-se))
513
- );
514
- font-weight: var(
515
- --_ctm-mob-dn-pt-ds-pt-pe-ft-wt,
516
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-wt, var(--_ctm-dn-pt-ds-pt-pe-ft-wt))
517
- );
518
- color: var(
519
- --_ctm-mob-dn-pt-ds-pt-pe-cr,
520
- var(--_ctm-tab-dn-pt-ds-pt-pe-cr, var(--_ctm-dn-pt-ds-pt-pe-cr))
521
- );
522
- line-height: var(
523
- --_ctm-mob-dn-pt-ds-pt-pe-le-ht,
524
- var(--_ctm-tab-dn-pt-ds-pt-pe-le-ht, var(--_ctm-dn-pt-ds-pt-pe-le-ht))
525
- );
526
- letter-spacing: var(
527
- --_ctm-mob-dn-pt-ds-pt-pe-lr-sg,
528
- var(--_ctm-tab-dn-pt-ds-pt-pe-lr-sg, var(--_ctm-dn-pt-ds-pt-pe-lr-sg))
529
- );
530
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
531
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
532
- padding: var(
533
- --_ctm-dn-mob-pt-ds-pt-pe-pg,
534
- var(--_ctm-tab-dn-pt-ds-pt-pe-pg, var(--_ctm-dn-pt-ds-pt-pe-pg))
535
- );
536
- }
537
-
538
- .note {
539
- font-weight: 500;
540
- font-size: 16px;
541
- line-height: 24px;
542
- color: var(--_success-700);
543
- }
544
- }
545
- }
546
-
547
- .color-options {
548
- display: flex;
549
- flex-direction: column;
550
- margin-top: 12px;
551
- gap: 6px;
552
-
553
- label {
554
- font-weight: 600;
555
- font-size: 16px;
556
- line-height: 24px;
557
- color: var(--_gray-600);
558
- }
559
- .colors {
560
- display: flex;
561
- flex-wrap: wrap;
562
- gap: 6px;
563
-
564
- .color-circle {
565
- width: 28px;
566
- height: 28px;
567
- border-radius: 50%;
568
- cursor: pointer;
569
-
570
- &.selected {
571
- width: 50px;
572
- height: 28px;
573
- border-radius: 100px;
574
- //border: 0.5px solid var(--_gray-600);
575
- //padding: 6px 5px;
576
- }
577
- .color-code {
578
- width: 28px;
579
- height: 28px;
580
- border-radius: 50%;
581
- cursor: pointer;
582
- &.selected {
583
- width: 50px;
584
- height: 28px;
585
- border-radius: 100px;
586
- border: 0.5px solid var(--_gray-600);
587
- padding: 6px 5px;
588
- }
589
- }
590
- }
591
- }
592
- }
593
-
594
- .fit-size-options {
595
- display: flex;
596
- flex-direction: column;
597
- margin-top: 20px;
598
- gap: 2rem;
599
-
600
- .select_fit,
601
- .fit,
602
- .size {
603
- display: flex;
604
- flex-direction: column;
605
- gap: 6px;
606
-
607
- label {
608
- font-weight: 600;
609
- font-size: 16px;
610
- line-height: 24px;
611
- color: var(--_gray-600);
612
- }
613
-
614
- .fit_options,
615
- .size_options {
616
- display: flex;
617
- gap: 12px;
618
- flex-wrap: wrap;
619
-
620
- button {
621
- padding: 8px 12px;
622
- border: 0.5px solid var(--_gray-300);
623
- border-radius: 4px;
624
- background: #fff;
625
-
626
- font-weight: 400;
627
- font-size: 16px;
628
- line-height: 24px;
629
- color: var(--_gray-600);
630
- cursor: pointer;
631
-
632
- &.selected {
633
- border: 0.5px solid var(--_primary-400);
634
- background-color: var(--_gray-200);
635
- font-weight: 600;
636
- font-size: 16px;
637
- color: var(--_primary-400);
638
- }
639
- }
640
- }
641
- }
642
- }
643
-
644
- .product_qty_wrapper {
645
- display: flex;
646
- // width: 124px;
647
- flex-direction: column;
648
- align-items: flex-start;
649
- gap: 6px;
650
- width: 120px;
651
-
652
- .product_qty_container {
653
- display: flex;
654
- align-items: flex-start;
655
- align-self: stretch;
656
- border-radius: 4px;
657
- border: 0.5px solid #d0d5dd;
658
- background: #fff;
659
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
660
-
661
- .product_qty_label {
662
- display: flex;
663
- padding: 8px 12px;
664
- align-items: center;
665
- border-radius: 8px 0px 0px 8px;
666
- p {
667
- color: #475467;
668
- font-size: 16px;
669
- font-weight: 400;
670
- line-height: 24px;
671
- }
672
- }
673
-
674
- .product_qty_number {
675
- display: flex;
676
- padding: 8px 12px;
677
- align-items: center;
678
- gap: 8px;
679
- flex: 1 0 0;
680
- align-self: stretch;
681
- border-radius: 0px 4px 4px 0px;
682
- background: #fff;
683
- border-left: 1px solid #d0d5dd;
684
- max-width: 80px;
685
- text-align: center;
686
- }
687
- }
688
- }
689
- .add-to-cart {
690
- width: 100%;
691
- height: 56;
692
- opacity: 1;
693
- border-radius: 4px;
694
- gap: 8px;
695
- padding-top: 12px;
696
- padding-right: 24px;
697
- padding-bottom: 12px;
698
- padding-left: 24px;
699
- border-width: 1px;
700
- background: #243dc6;
701
- border: 1px solid #243dc6;
702
- box-shadow: 0px 1px 2px 0px #1018280d;
703
- text-align: center;
704
- span {
705
- vertical-align: middle;
706
- }
707
- button {
708
- font-weight: 600;
709
- font-size: 16px;
710
- line-height: 24px;
711
- letter-spacing: 0%;
712
- color: #ffffff;
713
- }
714
- }
715
- }
716
-
717
- @media (max-width: 768px) {
718
- grid-template-columns: 1fr;
719
- .customizer-panel {
720
- border-left: none;
721
- padding-left: 0;
722
- margin-top: 2rem;
723
- }
724
- }
725
- }
726
-
727
- .embla {
728
- width: 100%;
729
- height: 100%;
730
- position: relative;
731
- display: flex;
732
- flex-direction: column;
733
- padding: 20px;
734
- // overflow: hidden;
735
-
736
- .embla__viewport {
737
- width: 100%;
738
- height: 100%;
739
- position: relative;
740
- display: flex;
741
- flex-direction: column;
742
-
743
- overflow: hidden;
744
-
745
- .embla__container {
746
- width: 100%;
747
- height: 100%;
748
- display: grid;
749
- grid-template-rows: 100%;
750
-
751
- grid-template-columns: repeat(
752
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
753
- calc(
754
- 100% /
755
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
756
- )
757
- );
758
-
759
- grid-auto-flow: column;
760
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
761
-
762
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
763
- height: calc(100% - calc(50px + 10px));
764
- }
765
-
766
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
767
- height: calc(100% - calc(50px + 20px));
768
- }
769
-
770
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
771
- height: calc(
772
- 100% - calc(
773
- var(
774
- --_ctm-mob-dn-pn-ds-dt-se,
775
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
776
- ) +
777
- 20px
778
- )
779
- );
780
- }
781
-
782
- .embla__slide {
783
- width: 100%;
784
- height: 100%;
785
- & > img {
786
- width: 100%;
787
- height: 100%;
788
- }
789
- }
790
- }
791
- }
792
- &:not([data-display-style="Column"]) {
793
- .embla__container {
794
- grid-auto-columns: calc(
795
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
796
- );
797
- }
798
- }
799
-
800
- .arrow-navigation {
801
- display: flex;
802
- position: absolute;
803
- top: 50%;
804
- left: 50%;
805
- width: 100%;
806
- justify-content: space-between;
807
- transform: translate(-50%, -50%);
808
- // padding-left: 20px;
809
-
810
- &[data-control-type="Bottom-Overflow"] {
811
- transform: translateX(-50%);
812
- width: 100%;
813
- justify-content: center;
814
- gap: 12px;
815
- top: unset;
816
- bottom: 6px;
817
- }
818
- &[data-control-type="Bottom"] {
819
- transform: unset;
820
- position: static;
821
- width: 100%;
822
- justify-content: center;
823
- gap: 12px;
824
- margin-top: 10px;
825
- }
826
- }
827
- &[data-control-type="Side"] {
828
- .left-button,
829
- .right-button {
830
- background-color: transparent;
831
- }
832
- }
833
- &[data-background-shape="Round"] {
834
- .left-button,
835
- .right-button {
836
- background-color: #f2f5f5;
837
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
838
- }
839
- }
840
- .left-button {
841
- padding: 10px;
842
- border-radius: 50%;
843
- border: none;
844
- width: var(
845
- --_ctm-mob-dn-pn-as-aw-se,
846
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
847
- );
848
- height: var(
849
- --_ctm-mob-dn-pn-as-aw-se,
850
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
851
- );
852
-
853
- display: flex;
854
- align-items: center;
855
- justify-content: center;
856
- cursor: pointer;
857
- outline: none;
858
- margin-left: 12px;
859
- &:disabled {
860
- & svg {
861
- path {
862
- stroke: #c3b7b7;
863
- }
864
- }
865
- }
866
- }
867
- .right-button {
868
- border-radius: 50%;
869
- border: none;
870
- width: var(
871
- --_ctm-mob-dn-pn-as-aw-se,
872
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
873
- );
874
- height: var(
875
- --_ctm-mob-dn-pn-as-aw-se,
876
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
877
- );
878
-
879
- display: flex;
880
- align-items: center;
881
- justify-content: center;
882
- cursor: pointer;
883
- outline: none;
884
- margin-right: 12px;
885
- padding: 10px;
886
-
887
- &:disabled {
888
- & svg {
889
- path {
890
- stroke: #c3b7b7;
891
- }
892
- }
893
- }
894
- }
895
- .icon {
896
- display: flex;
897
-
898
- svg {
899
- width: calc(
900
- var(
901
- --_ctm-mob-dn-pn-as-aw-se,
902
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
903
- ) *
904
- 0.5
905
- );
906
- height: calc(
907
- var(
908
- --_ctm-mob-dn-pn-as-aw-se,
909
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
910
- ) *
911
- 0.5
912
- );
913
-
914
- path {
915
- stroke: #514949;
916
- }
917
- }
918
- }
919
-
920
- &[data-control-type="Side"] {
921
- .embla__viewport {
922
- width: calc(100% - 120px);
923
- margin-inline: auto;
924
- }
925
- .left-button {
926
- position: absolute;
927
- left: 0;
928
- top: 50%;
929
- transform: translateY(-50%);
930
- }
931
- .right-button {
932
- position: absolute;
933
-
934
- right: 0;
935
- top: 50%;
936
- transform: translateY(-50%);
937
- }
938
- }
939
-
940
- &[data-thumbnail-placement="top"] {
941
- flex-direction: column-reverse;
942
- }
943
- &[data-thumbnail-placement="bottom"] {
944
- flex-direction: column;
945
- }
946
- &[data-thumbnail-placement="left"] {
947
- flex-direction: row-reverse;
948
-
949
- .embla__thumbs {
950
- width: var(--_ctm-lt-tl-se);
951
- height: 100%;
952
-
953
- & .embla__thumbs__container {
954
- flex-direction: column;
955
- height: 100%;
956
- }
957
- }
958
- }
959
- &[data-thumbnail-placement="right"] {
960
- flex-direction: row;
961
- .embla__thumbs {
962
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
963
-
964
- height: 100%;
965
-
966
- & .embla__thumbs__container {
967
- flex-direction: column;
968
- height: 100%;
969
- }
970
- }
971
- }
972
- .embla__dots {
973
- display: flex;
974
- flex-wrap: wrap;
975
- justify-content: center;
976
- align-items: center;
977
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
978
- gap: 6px;
979
-
980
- &[data-control-type="Bottom-Overflow"] {
981
- position: absolute;
982
- bottom: 10px;
983
- left: 50%;
984
- transform: translateX(-50%);
985
- width: 75%;
986
- }
987
- .embla__dot {
988
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
989
- -webkit-appearance: none;
990
- appearance: none;
991
- background-color: var(
992
- --_ctm-mob-dn-pn-ds-or-dt-cr,
993
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
994
- );
995
-
996
- touch-action: manipulation;
997
- display: inline-flex;
998
- text-decoration: none;
999
- cursor: pointer;
1000
- border: 0;
1001
- padding: 0;
1002
- margin: 0;
1003
- // width: 0.6rem;
1004
- // height: 0.6rem;
1005
- width: var(
1006
- --_ctm-mob-dn-pn-ds-dt-se,
1007
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1008
- );
1009
- height: var(
1010
- --_ctm-mob-dn-pn-ds-dt-se,
1011
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1012
- );
1013
-
1014
- display: flex;
1015
- align-items: center;
1016
- justify-content: center;
1017
- border-radius: 50%;
1018
- }
1019
- .embla__dot:after {
1020
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1021
- width: var(
1022
- --_ctm-mob-dn-pn-ds-dt-se,
1023
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1024
- );
1025
- height: var(
1026
- --_ctm-mob-dn-pn-ds-dt-se,
1027
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1028
- );
1029
-
1030
- border-radius: 50%;
1031
- display: flex;
1032
- align-items: center;
1033
- content: "";
1034
- }
1035
- .embla__dot--selected:after {
1036
- box-shadow: inset 0 0 0 1px var(--text-body);
1037
- background-color: var(
1038
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
1039
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
1040
- );
1041
- }
1042
- &[data-slider-control="Pagination Line"] {
1043
- .embla__dot {
1044
- width: var(
1045
- --_ctm-mob-dn-pn-le-le-wh,
1046
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1047
- );
1048
- height: var(
1049
- --_ctm-mob-dn-pn-le-le-ht,
1050
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1051
- );
1052
- background-color: var(
1053
- --_ctm-mob-dn-pn-le-or-le-cr,
1054
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
1055
- );
1056
- border-radius: 6px;
1057
- }
1058
-
1059
- .embla__dot--selected:after {
1060
- box-shadow: inset 0 0 0 1px var(--text-body);
1061
- border-radius: 6px;
1062
- width: var(
1063
- --_ctm-mob-dn-pn-le-le-wh,
1064
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
1065
- );
1066
- height: var(
1067
- --_ctm-mob-dn-pn-le-le-ht,
1068
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
1069
- );
1070
- background-color: var(
1071
- --_ctm-mob-dn-pn-le-ct-le-cr,
1072
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
1073
- );
1074
- }
1075
- }
1076
- }
1077
-
1078
- .embla__thumbs {
1079
- width: 100%;
1080
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1081
-
1082
- position: relative;
1083
- display: grid;
1084
- grid-template-columns: 1fr;
1085
- overflow: hidden;
1086
- // margin: 10px;
1087
- padding: 10px;
1088
-
1089
- .embla__thumbs__viewport {
1090
- width: 100%;
1091
- height: 100%;
1092
- position: relative;
1093
- display: flex;
1094
- flex-direction: column;
1095
-
1096
- overflow: hidden;
1097
- }
1098
- .embla__thumbs__container {
1099
- display: flex;
1100
- flex-direction: row;
1101
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
1102
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
1103
-
1104
- width: 100%;
1105
- // justify-content: center;
1106
- // height: 200px;
1107
-
1108
- .embla__thumbs__slide {
1109
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1110
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1111
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
1112
-
1113
- & img {
1114
- width: 100%;
1115
- height: 100%;
1116
- }
1117
- }
1118
- }
1119
- }
1120
- }
1121
- }
1122
- }