@sc-360-v2/storefront-cms-library 0.4.78 → 0.4.80

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 (19) hide show
  1. package/dist/add-order.scss +377 -377
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +20 -7
  4. package/dist/buyForPopup.scss +14 -3
  5. package/dist/checkout.scss +7 -0
  6. package/dist/default-dropdown.scss +259 -240
  7. package/dist/dropdownTemplate.scss +24 -17
  8. package/dist/form-preview.scss +328 -290
  9. package/dist/language-selector.scss +2 -2
  10. package/dist/menu-v2.scss +3 -3
  11. package/dist/modal.scss +2 -2
  12. package/dist/multi-select-dropdown.scss +293 -282
  13. package/dist/order-status.scss +28 -7
  14. package/dist/phone-input.scss +167 -0
  15. package/dist/quick-order-pad.scss +15 -1
  16. package/dist/request-for-quotes.scss +827 -746
  17. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  18. package/dist/user-elements.scss +27 -0
  19. package/package.json +1 -1
package/dist/request-for-quotes.scss CHANGED
@@ -1,746 +1,827 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- [data-div-type="element"] {
5
- &[data-element-type="requestForQuote"] {
6
- margin: 0;
7
- // width: var(--_lt-wh);
8
- // height: var(--_lt-ht);
9
- // margin: var(--_lt-mn);
10
- // padding: var(--_lt-pg);
11
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
- // width: 50%;
13
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
- // width: var(
15
- // --_sf-el-wh-st-mx,
16
- // calc(
17
- // 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
18
- // )
19
- // );
20
- // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
-
22
- // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
23
- // height: var(--_ctm-lt-ht);
24
- // height: ;
25
- // height: auto;
26
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
27
- // --_aspect-ratio: calc(
28
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
29
- // );
30
-
31
- // &[data-element-sub-child="true"] {
32
- // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
33
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
34
- // }
35
-
36
- .quotes_wrapper {
37
- display: flex;
38
- flex-direction: column;
39
- gap: 24px;
40
-
41
- .quotes_header {
42
- width: 100%;
43
- display: flex;
44
-
45
- justify-content: space-between;
46
- align-items: center;
47
- h2 {
48
- font-size: 24px;
49
- color: var(--_gray-900);
50
- }
51
- .back_to_cart {
52
- color: var(--_primary-400);
53
- &:hover {
54
- text-decoration: underline;
55
- }
56
- }
57
- }
58
- .quotes_body {
59
- display: flex;
60
- // align-items: center;
61
- gap: 64px;
62
- justify-content: space-between;
63
- }
64
-
65
- .quote-items {
66
- flex: 2;
67
- .quote-item {
68
- // padding: 32px 0;
69
- display: flex;
70
- gap: 24px;
71
- &:not(:last-child) {
72
- border-bottom: 1px dotted var(--_gray-400);
73
- }
74
- &:not(:last-child) {
75
- padding-bottom: 16px;
76
- }
77
- &:not(:first-child) {
78
- padding-top: 16px;
79
- }
80
-
81
- .quote-item__image {
82
- width: 120px;
83
- height: 120px;
84
- object-fit: cover;
85
- border-radius: 4px;
86
- background-color: #f0f0f0;
87
- }
88
-
89
- .quote-item__details {
90
- flex: 1;
91
- display: flex;
92
- flex-direction: column;
93
-
94
- .quote-item__header {
95
- margin-bottom: 16px;
96
- padding-bottom: 16px;
97
- display: flex;
98
- border-bottom: 1px dotted #d0d0d0;
99
- flex-direction: column;
100
- gap: 8px;
101
-
102
- .quote-item__title {
103
- font-size: 16px;
104
- font-weight: 600;
105
- // color: #111;
106
- }
107
-
108
- .quote-item__meta {
109
- display: flex;
110
- gap: 8px;
111
- font-size: 14px;
112
- font-weight: 400;
113
- // color: var(--_gray-500);
114
- span {
115
- &:first-child {
116
- padding-right: 8px;
117
- border-right: 1px solid var(--_gray-900);
118
- }
119
- }
120
- }
121
- }
122
-
123
- .quote-item__row {
124
- display: flex;
125
- gap: 16px;
126
- align-items: flex-start;
127
-
128
- .field {
129
- display: flex;
130
- flex-direction: column;
131
- font-size: 14px;
132
- &.price_column {
133
- padding-right: 40px;
134
- }
135
-
136
- label {
137
- margin-bottom: 6px;
138
- font-weight: 500;
139
- font-size: 14px;
140
- // color: #333;
141
- }
142
-
143
- .value {
144
- // font-weight: 600;
145
- // font-size: 16px;
146
- // // color: #111;
147
- font-weight: 600;
148
- font-size: 16px;
149
- height: 39px;
150
- display: flex;
151
- align-items: center;
152
- }
153
-
154
- input {
155
- height: 40px;
156
- padding: 8px 12px;
157
- font-size: 14px;
158
- border: 1px solid #ccc;
159
- border-radius: 4px;
160
- outline: none;
161
- width: 130px;
162
-
163
- &:focus {
164
- border-color: #2563eb;
165
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
166
- }
167
- }
168
-
169
- .input-with-prefix {
170
- display: flex;
171
- align-items: center;
172
- border: 1px solid #ccc;
173
- border-radius: 4px;
174
- overflow: hidden;
175
- width: 130px;
176
- height: 40px;
177
- &:focus-within {
178
- border: 1px solid var(--_primary-300);
179
- outline: 2px solid var(--_primary-100);
180
- }
181
-
182
- span {
183
- padding: 0 8px;
184
- font-size: 15px;
185
- color: var(--_gray-500);
186
- display: flex;
187
- align-items: center;
188
- }
189
-
190
- input {
191
- border: none;
192
- width: 100%;
193
- height: 100%;
194
- padding-left: 6px;
195
- &:focus {
196
- box-shadow: none;
197
- outline: none;
198
- }
199
- }
200
- }
201
- }
202
-
203
- .quote-item__totals {
204
- display: flex;
205
- flex-direction: column;
206
- gap: 16px;
207
- text-align: right;
208
- margin-left: auto;
209
- min-width: 180px;
210
-
211
- .quote-total {
212
- display: flex;
213
- flex-direction: column;
214
- gap: 6px;
215
-
216
- > div {
217
- display: flex;
218
- justify-content: flex-end;
219
- align-items: baseline;
220
- gap: 4px;
221
-
222
- .label {
223
- font-size: 14px;
224
- // color: #444;
225
- }
226
-
227
- .amount {
228
- font-size: 18px;
229
- font-weight: 700;
230
- // color: #111;
231
- }
232
- }
233
-
234
- small {
235
- font-size: 13px;
236
- // color: #888;
237
- margin-top: 4px;
238
- text-align: right;
239
- display: flex;
240
- justify-content: end;
241
- }
242
-
243
- &.discounted {
244
- .label {
245
- color: #039855;
246
- }
247
-
248
- .amount {
249
- color: #039855;
250
- }
251
- }
252
- }
253
- }
254
- }
255
- }
256
- }
257
- }
258
-
259
- .quote-summary {
260
- background: var(--_base-white);
261
- border: 1px solid var(--_gray-300);
262
- border-radius: 4px;
263
- width: 400px;
264
- overflow: hidden;
265
- height: fit-content;
266
- position: sticky;
267
- top: 10px;
268
-
269
- &__row {
270
- display: flex;
271
- justify-content: space-between;
272
- align-items: center;
273
- padding: 12px 0;
274
- border-bottom: 1px dotted #ccc;
275
-
276
- .label {
277
- font-size: 14px;
278
- font-weight: 400;
279
- // color: #666;
280
- }
281
-
282
- .value {
283
- font-size: 14px;
284
- font-weight: 500;
285
- // color: #333;
286
-
287
- &.highlight {
288
- font-size: 14px;
289
- font-weight: 500;
290
- // color: #000;
291
- }
292
- }
293
-
294
- &--quoted {
295
- margin-bottom: 20px;
296
- }
297
- .label-quote {
298
- font-size: 14px;
299
- font-weight: 400;
300
- // font-weight: 600;
301
- }
302
- }
303
-
304
- &__notes {
305
- width: 100%;
306
- height: 100px;
307
- padding: 12px;
308
- border: 1px solid #ddd;
309
- border-radius: 4px;
310
- resize: none;
311
- font-size: 14px;
312
- font-family: inherit;
313
- margin-bottom: 20px;
314
- box-sizing: border-box;
315
- margin-top: 6px;
316
-
317
- &::placeholder {
318
- color: #999;
319
- }
320
-
321
- &:focus {
322
- outline: none;
323
- border-color: var(--_primary-500);
324
- }
325
- }
326
-
327
- &__button {
328
- width: 100%;
329
- padding: 12px;
330
- // background-color: var(--_primary-400);
331
- // color: var(--_base-white);
332
- font-size: 16px;
333
- font-weight: 600;
334
- border: none;
335
- border-radius: 4px;
336
- cursor: pointer;
337
- transition: background-color 0.2s ease;
338
-
339
- &:hover {
340
- // background-color: var(--_primary-500);
341
- }
342
- }
343
- & > h3 {
344
- font-size: 16px;
345
- font-weight: 700;
346
- // color: var(--_gray-900);
347
- background-color: #f5f5f5;
348
- padding: 12px;
349
- border-bottom: 1px solid var(--_gray-300);
350
- }
351
- .quote-summary-body {
352
- padding: 0px 16px 16px 16px;
353
- }
354
- }
355
- }
356
-
357
- .quotes_address_section {
358
- .address_card {
359
- background: var(--_base-white);
360
- border: 1px solid var(--_gray-300);
361
- border-radius: 4px;
362
- width: 400px;
363
- overflow: hidden;
364
- height: fit-content;
365
- top: 10px;
366
- margin-bottom: 24px;
367
-
368
- & > h3 {
369
- font-size: 16px;
370
- font-weight: 700;
371
- background-color: #f5f5f5;
372
- padding: 12px;
373
- border-bottom: 1px solid var(--_gray-300);
374
- }
375
-
376
- &_body {
377
- padding: 16px;
378
- // max-height: calc(100vh - 420px);
379
- // overflow: auto;
380
- }
381
-
382
- &_row {
383
- display: flex;
384
- justify-content: space-between;
385
- align-items: center;
386
- margin-bottom: 8px;
387
- }
388
-
389
- &_text {
390
- font-size: 16px;
391
- font-weight: 700;
392
- width: 273px;
393
- height: 22px;
394
- white-space: nowrap;
395
- overflow: hidden;
396
- text-overflow: ellipsis;
397
- display: inline-block;
398
- margin-top: 4px;
399
- }
400
-
401
- &_select {
402
- display: flex;
403
- align-items: center;
404
- gap: 8px;
405
- font-size: 14px;
406
- // color: var(--_primary-400);
407
- color: var(--_thm-cs-tt-ls-as);
408
- text-decoration: none;
409
- font-weight: 400;
410
- background: none;
411
- border: none;
412
- cursor: pointer;
413
- span {
414
- display: flex;
415
- }
416
-
417
- &:hover {
418
- text-decoration: underline;
419
- }
420
- }
421
- // &_divider {
422
- // border: none;
423
- // border-top: 1px dashed var(--_gray-300);
424
- // margin: 16px 0;
425
- // }
426
-
427
- &_footer {
428
- display: flex;
429
- justify-content: space-between;
430
- align-items: flex-start;
431
- gap: 16px;
432
- }
433
-
434
- &_shipping,
435
- &_quoted {
436
- display: flex;
437
- flex-direction: column;
438
- justify-content: center;
439
- }
440
-
441
- &_label {
442
- font-size: 14px;
443
- // color: var(--_gray-700);
444
- font-weight: 500;
445
- margin-bottom: 6px;
446
- }
447
-
448
- &_value {
449
- font-size: 20px;
450
- font-weight: 700;
451
- // color: var(--_gray-900);
452
- height: 40px;
453
- display: flex;
454
- align-items: center;
455
- }
456
-
457
- &_input_box {
458
- display: flex;
459
- // align-items: center;
460
- border: 1px solid var(--_gray-300);
461
- border-radius: 6px;
462
- padding: 8px 12px;
463
- width: 128px;
464
- height: 40px;
465
- }
466
-
467
- &_currency {
468
- margin-right: 6px;
469
- font-weight: 600;
470
- color: var(--_gray-700);
471
- display: flex;
472
- }
473
-
474
- &_input {
475
- border: none;
476
- outline: none;
477
- font-size: 16px;
478
- font-weight: 400;
479
- color: var(--_gray-900);
480
- width: 100%;
481
- background: transparent;
482
- }
483
-
484
- // --- Extra styles for address list ---
485
- &_list_item {
486
- display: flex;
487
- flex-direction: column;
488
- // align-items: flex-start;
489
- gap: 6px;
490
- padding-bottom: 16px;
491
- &:first-child {
492
- padding-top: 0px;
493
- }
494
- &:not(:last-child) {
495
- border-bottom: 1px dashed var(--_gray-300);
496
- margin-bottom: 16px;
497
- }
498
-
499
- .address_card_row {
500
- width: 100%;
501
- margin-bottom: 0px;
502
- }
503
- }
504
- .contact_details {
505
- gap: 6px;
506
- display: flex;
507
- flex-direction: column;
508
- padding-bottom: 24px;
509
- margin-top: 12px;
510
- .contact_title {
511
- display: flex;
512
- gap: 12px;
513
- font-weight: 600;
514
- font-size: 14px;
515
- cursor: pointer;
516
- .toggle_dropdown {
517
- display: inline-block;
518
- transition: transform 0.3s ease;
519
- svg {
520
- width: 18px;
521
- height: 18px;
522
- }
523
- &.open {
524
- transform: rotate(180deg);
525
- }
526
- }
527
- }
528
- .secondary_val {
529
- font-weight: 500;
530
- }
531
- }
532
-
533
- &_address {
534
- font-size: 14px;
535
- // color: var(--_gray-500);
536
- font-weight: 400;
537
- line-height: 20px;
538
- padding-bottom: 12x;
539
- }
540
- &_details {
541
- display: flex;
542
- align-items: center;
543
- gap: 10px;
544
- // color: var(--_gray-900);
545
- font-size: 14px;
546
- cursor: pointer;
547
- .toggle_arrow {
548
- display: flex;
549
- transition: transform 0.3s ease;
550
- &.open {
551
- transform: rotate(180deg);
552
- }
553
- }
554
- &.no_caret {
555
- caret-color: transparent; /* hides the blinking cursor */
556
- pointer-events: none; /* prevents clicking/focus */
557
- }
558
- }
559
-
560
- &_contact_container {
561
- display: flex;
562
- align-items: center;
563
- gap: 10px;
564
- cursor: pointer;
565
- }
566
- &_contact {
567
- font-size: 14px;
568
- font-weight: 600;
569
- color: var(--_gray-900);
570
- }
571
- &_shipping_details {
572
- padding-bottom: 16px;
573
- margin-bottom: 16px;
574
- border-bottom: 1px dashed var(--_gray-300);
575
- // padding: 16px;
576
- // margin-top: 10px;
577
-
578
- .no_shipping_methods {
579
- background: var(--_gray-100);
580
- border-radius: 4px;
581
- padding: 16px;
582
- text-align: center;
583
- min-height: 100px;
584
- display: flex;
585
- align-items: center;
586
- justify-content: center;
587
- span {
588
- font-size: 16px;
589
- font-weight: 600;
590
- color: var(--_gray-700);
591
- }
592
- }
593
- }
594
-
595
- &_shipping_heading {
596
- font-size: 14px;
597
- font-weight: 600;
598
- // color: var(--_gray-900);
599
- background: #f5f5f5;
600
- padding: 6px;
601
- border-radius: 4px;
602
- margin-bottom: 12px;
603
- padding-left: 12px;
604
- }
605
-
606
- &_shipping_group {
607
- margin-bottom: 16px;
608
- gap: 6px;
609
- display: flex;
610
- flex-direction: column;
611
- }
612
-
613
- &_shipping_subheading {
614
- font-size: 14px;
615
- font-weight: 700;
616
- // color: var(--_gray-900);
617
- // margin-bottom: 2px;
618
- }
619
-
620
- &_shipping_option {
621
- display: flex;
622
- align-items: center;
623
- // justify-content: space-between;
624
- // padding: 10px 8px;
625
- border-radius: 6px;
626
- cursor: pointer;
627
- font-size: 14px;
628
- // color: var(--_gray-700);
629
- // margin-bottom: 8px;
630
- transition: background 0.2s ease;
631
-
632
- input[type="radio"] {
633
- accent-color: var(--_primary-400);
634
- margin-right: 12px;
635
- width: fit-content;
636
- }
637
-
638
- &:hover {
639
- // background: var(--_gray-100);
640
- }
641
- }
642
-
643
- &_shipping_label {
644
- // flex: 1;
645
- // margin-left: 6px;
646
- font-weight: 400;
647
- font-size: 14px;
648
- // color: var(--_gray-500);
649
- }
650
-
651
- &_shipping_price {
652
- font-weight: 600;
653
- // color: var(--_gray-900);
654
- font-size: 14px;
655
- }
656
- &_shipping_selected_method {
657
- display: flex;
658
- justify-content: space-between;
659
- gap: 48px;
660
- }
661
- &_shipping_title {
662
- font-size: 14px;
663
- font-weight: 600;
664
- }
665
-
666
- &_shipping_confirm {
667
- padding: 12px;
668
- }
669
- &_shipping_method {
670
- display: flex;
671
- flex-direction: column;
672
- gap: 8px;
673
- }
674
- .confirm_button {
675
- padding: 12px 24px;
676
- border-radius: 4px;
677
- font-weight: 600;
678
- background-color: var(--_thm-py-bs-dt-se-bd-cr);
679
- color: var(--_thm-py-bs-dt-se-tt-cr);
680
- margin-block: 4px 4px;
681
- &:hover {
682
- background-color: var(--_thm-py-bs-hr-se-bd-cr);
683
- color: var(--_thm-py-bs-hr-se-tt-cr);
684
- }
685
- }
686
- }
687
- .cpn__checkmark__icon {
688
- display: flex;
689
- svg path {
690
- // stroke: var(--_thm-cs-tt-ls-as);
691
- }
692
- }
693
- }
694
-
695
- width: 100%;
696
-
697
- & > .wrapper {
698
- // width: 100%;
699
- // height: 100%;
700
- }
701
- &[data-show-shadow="false"] {
702
- --_show-shadow: none;
703
- }
704
-
705
- // .accordion-element {
706
- // background-color: var(
707
- // --_ctm-mob-dn-fq-wt-bd-cr,
708
- // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
709
- // );
710
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
711
- // display: flex;
712
- // flex-direction: column;
713
- // --_sf-gp: var(
714
- // --_ctm-mob-lt-im-sg,
715
- // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
716
- // );
717
- // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
718
- // row-gap: var(--_sf-gp);
719
- // width: 100%;
720
- // // height: 100%;
721
- // border-color: var(
722
- // --_ctm-mob-dn-fq-wt-br-cr,
723
- // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
724
- // );
725
- // border-style: var(
726
- // --_ctm-mob-dn-fq-wt-br-se,
727
- // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
728
- // );
729
- // border-width: var(
730
- // --_ctm-mob-dn-fq-wt-br-wh,
731
- // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
732
- // );
733
- // border-radius: var(
734
- // --_ctm-mob-dn-fq-wt-br-rs,
735
- // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
736
- // );
737
- // box-shadow: var(
738
- // --_show-shadow,
739
- // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
740
- // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
741
- // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
742
- // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
743
- // );
744
- // }
745
- }
746
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @import "./functions.scss";
4
+ $defaultValues: (
5
+ --_flex-box: getListOfResponsive(flex, block),
6
+ --_flex-direction: getListOfResponsive(row, column, column),
7
+ --_width-400: getListOfResponsive(350px, 100%, 100%),
8
+ --_gap: getListOfResponsive(32px, 48px, 32px),
9
+ );
10
+
11
+ [data-div-type="element"] {
12
+ &[data-element-type="requestForQuote"] {
13
+ margin: 0;
14
+ // width: var(--_lt-wh);
15
+ // height: var(--_lt-ht);
16
+ // margin: var(--_lt-mn);
17
+ // padding: var(--_lt-pg);
18
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
19
+ // width: 50%;
20
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
21
+ // width: var(
22
+ // --_sf-el-wh-st-mx,
23
+ // calc(
24
+ // 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
25
+ // )
26
+ // );
27
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
28
+
29
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
30
+ // height: var(--_ctm-lt-ht);
31
+ // height: ;
32
+ // height: auto;
33
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
34
+ // --_aspect-ratio: calc(
35
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
36
+ // );
37
+
38
+ // &[data-element-sub-child="true"] {
39
+ // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
40
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
41
+ // }
42
+
43
+ .quotes_wrapper {
44
+ display: flex;
45
+ flex-direction: column;
46
+ gap: 24px;
47
+
48
+ .quotes_header {
49
+ width: 100%;
50
+ display: flex;
51
+
52
+ justify-content: space-between;
53
+ align-items: center;
54
+ .back_to_cart {
55
+ color: var(--_thm-cs-tt-ls-as);
56
+ &:hover {
57
+ text-decoration: underline;
58
+ }
59
+ }
60
+ }
61
+ .quotes_body {
62
+ @include prepareMediaQueries($defaultValues);
63
+ display: flex;
64
+ // display: var(--_flex-box, block);
65
+ // align-items: center;
66
+ flex-direction: var(--_flex-direction);
67
+ gap: var(--_gap);
68
+ justify-content: space-between;
69
+ .empty_template {
70
+ height: auto;
71
+ }
72
+ @media (max-width: 1024px) {
73
+ .empty_template {
74
+ margin-block: 24px;
75
+ }
76
+ }
77
+ }
78
+
79
+ .quote-items {
80
+ flex: 2;
81
+ .quote-item {
82
+ // padding: 32px 0;
83
+ display: flex;
84
+ gap: 24px;
85
+ &:not(:last-child) {
86
+ border-bottom: 1px dotted var(--_thm-cs-be-se-3);
87
+ }
88
+ &:not(:last-child) {
89
+ padding-bottom: 16px;
90
+ }
91
+ &:not(:first-child) {
92
+ padding-top: 16px;
93
+ }
94
+
95
+ .quote-item__image {
96
+ width: 120px;
97
+ height: 120px;
98
+ object-fit: cover;
99
+ border-radius: 4px;
100
+ background-color: #f0f0f0;
101
+ }
102
+
103
+ .quote-item__details {
104
+ flex: 1;
105
+ display: flex;
106
+ flex-direction: column;
107
+ .quote-item__header {
108
+ margin-bottom: 16px;
109
+ padding-bottom: 16px;
110
+ display: flex;
111
+ border-bottom: 1px dotted var(--_thm-cs-be-se-3);
112
+ flex-direction: column;
113
+ gap: 8px;
114
+
115
+ .quote-item__title {
116
+ // font-size: 16px;
117
+ font-weight: 600;
118
+ // color: #111;
119
+ }
120
+
121
+ .quote-item__meta {
122
+ display: flex;
123
+ gap: 8px;
124
+ // font-size: 14px;
125
+ font-weight: 400;
126
+ // color: var(--_gray-500);
127
+ span {
128
+ &:first-child {
129
+ padding-right: 8px;
130
+ border-right: 1px solid var(var(--_primary-300));
131
+ }
132
+ }
133
+ }
134
+ }
135
+
136
+ .quote-item__row {
137
+ display: flex;
138
+ gap: 16px;
139
+ align-items: flex-start;
140
+
141
+ .field {
142
+ display: flex;
143
+ flex-direction: column;
144
+ font-size: 14px;
145
+ &.price_column {
146
+ padding-right: 24px;
147
+ }
148
+
149
+ label {
150
+ margin-bottom: 6px;
151
+ font-weight: 500;
152
+ // font-size: 14px;
153
+ // color: #333;
154
+ }
155
+
156
+ .value {
157
+ // font-weight: 600;
158
+ // font-size: 16px;
159
+ // // color: #111;
160
+ font-weight: 600;
161
+ font-size: 16px;
162
+ height: 39px;
163
+ display: flex;
164
+ align-items: center;
165
+ span {
166
+ display: inline-flex;
167
+ justify-content: flex-start;
168
+ }
169
+ }
170
+
171
+ input {
172
+ height: 40px;
173
+ padding: 8px 12px;
174
+ font-size: 14px;
175
+ border: 1px solid var(--_thm-cs-be-se-3);
176
+ border-radius: 4px;
177
+ outline: none;
178
+ width: 130px;
179
+ transition:
180
+ background-color 0.2s,
181
+ color 0.2s,
182
+ border-color 0.2s,
183
+ box-shadow 0.2s;
184
+
185
+ &:focus {
186
+ outline: 2px solid var(--_gray-100);
187
+ border: 1px solid var(--_gray-300);
188
+ }
189
+ }
190
+
191
+ .input-with-prefix {
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 4px;
195
+ border: 1px solid var(--_thm-cs-be-se-3);
196
+ border-radius: 4px;
197
+ overflow: hidden;
198
+ width: 130px;
199
+ height: 40px;
200
+ transition:
201
+ background-color 0.2s,
202
+ color 0.2s,
203
+ border-color 0.2s,
204
+ box-shadow 0.2s;
205
+ &:focus-within {
206
+ outline: 2px solid var(--_gray-100);
207
+ border: 1px solid var(--_gray-300);
208
+ }
209
+
210
+ span {
211
+ padding: 0 8px;
212
+ font-size: 15px;
213
+ color: var(--_gray-500);
214
+ display: flex;
215
+ justify-content: center;
216
+ align-items: center;
217
+ }
218
+
219
+ input {
220
+ border: none;
221
+ width: 100%;
222
+ height: 100%;
223
+ padding-left: 6px;
224
+ &:focus {
225
+ box-shadow: none;
226
+ outline: none;
227
+ }
228
+ }
229
+ }
230
+ }
231
+ }
232
+ .quote-item__totals {
233
+ display: flex;
234
+ flex-direction: column;
235
+ gap: 16px;
236
+ text-align: right;
237
+ margin-left: auto;
238
+ min-width: 180px;
239
+
240
+ .quote-total {
241
+ display: flex;
242
+ flex-direction: column;
243
+ gap: 6px;
244
+
245
+ > div {
246
+ display: flex;
247
+ justify-content: flex-end;
248
+ align-items: baseline;
249
+ gap: 4px;
250
+
251
+ .label {
252
+ // font-size: 14px;
253
+ // color: #444;
254
+ }
255
+
256
+ .amount {
257
+ font-size: 18px;
258
+ font-weight: 700;
259
+ // color: #111;
260
+ }
261
+ }
262
+
263
+ small {
264
+ font-size: 13px;
265
+ // color: #888;
266
+ margin-top: 4px;
267
+ text-align: right;
268
+ display: flex;
269
+ justify-content: end;
270
+ }
271
+
272
+ &.discounted {
273
+ .label {
274
+ color: #039855;
275
+ }
276
+
277
+ .amount {
278
+ color: #039855;
279
+ }
280
+ }
281
+ }
282
+ }
283
+
284
+ @media (min-width: 767px) and (max-width: 1023px) {
285
+ .quote-item__row {
286
+ flex-wrap: wrap;
287
+ .field {
288
+ &.price_column {
289
+ width: 100%;
290
+ }
291
+ }
292
+ }
293
+ }
294
+ @media (max-width: 767px) {
295
+ .quote-item__row {
296
+ flex-wrap: wrap;
297
+ }
298
+ .quote-item__totals {
299
+ margin-left: 0;
300
+ .quote-total {
301
+ > div {
302
+ display: inline-flex;
303
+ justify-content: flex-start;
304
+ }
305
+ small {
306
+ display: inline-flex;
307
+ justify-content: flex-start;
308
+ span {
309
+ display: inline-flex;
310
+ justify-content: flex-start;
311
+ }
312
+ }
313
+ }
314
+ }
315
+ }
316
+ }
317
+ @media (max-width: 767px) {
318
+ .quote-item__details {
319
+ .quote-item__header {
320
+ .quote-item__meta {
321
+ flex-direction: column;
322
+ }
323
+ }
324
+ }
325
+ }
326
+ }
327
+ }
328
+
329
+ .quote-summary {
330
+ background: var(--_base-white);
331
+ border: 1px solid var(--_thm-cs-be-se-3);
332
+ border-radius: 4px;
333
+ // width: 400px;
334
+ width: var(--_width-400);
335
+ overflow: hidden;
336
+ height: fit-content;
337
+ position: sticky;
338
+ top: 10px;
339
+
340
+ &__row {
341
+ display: flex;
342
+ justify-content: space-between;
343
+ align-items: center;
344
+ padding: 12px 0;
345
+ border-bottom: 1px dotted var(--_thm-cs-be-se-3);
346
+
347
+ .label {
348
+ font-size: 14px;
349
+ font-weight: 400;
350
+ // color: #666;
351
+ }
352
+
353
+ .value {
354
+ // font-size: 14px;
355
+ font-weight: 500;
356
+ // color: #333;
357
+
358
+ &.highlight {
359
+ font-size: 14px;
360
+ font-weight: 500;
361
+ // color: #000;
362
+ }
363
+ }
364
+
365
+ &--quoted {
366
+ margin-bottom: 20px;
367
+ }
368
+ .label-quote {
369
+ // font-size: 14px;
370
+ font-weight: 400;
371
+ // font-weight: 600;
372
+ }
373
+ }
374
+
375
+ &__notes {
376
+ width: 100%;
377
+ height: 100px;
378
+ padding: 12px;
379
+ border: 1px solid var(--_thm-cs-be-se-3);
380
+ border-radius: 4px;
381
+ resize: none;
382
+ font-size: 14px;
383
+ font-family: inherit;
384
+ margin-bottom: 20px;
385
+ box-sizing: border-box;
386
+ margin-top: 6px;
387
+ transition:
388
+ background-color 0.2s,
389
+ color 0.2s,
390
+ border-color 0.2s,
391
+ box-shadow 0.2s;
392
+
393
+ &::placeholder {
394
+ color: #999;
395
+ }
396
+
397
+ &:focus {
398
+ outline: 2px solid var(--_gray-100);
399
+ border: 1px solid var(--_gray-300);
400
+ }
401
+ }
402
+
403
+ &__button {
404
+ width: 100%;
405
+ padding: 12px;
406
+ // background-color: var(--_primary-400);
407
+ // color: var(--_base-white);
408
+ // font-size: 16px;
409
+ // font-weight: 600;
410
+ // border: none;
411
+ // border-radius: 4px;
412
+ // cursor: pointer;
413
+ transition: background-color 0.2s ease;
414
+
415
+ &:hover {
416
+ // background-color: var(--_primary-500);
417
+ }
418
+ }
419
+ & > h3 {
420
+ // font-size: 16px;
421
+ font-weight: 700;
422
+ // color: var(--_gray-900);
423
+ background-color: #f5f5f5;
424
+ padding: 12px;
425
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
426
+ }
427
+ .quote-summary-body {
428
+ padding: 0px 16px 16px 16px;
429
+ }
430
+ }
431
+ }
432
+
433
+ .quotes_address_section {
434
+ .address_card {
435
+ background: var(--_base-white);
436
+ border: 1px solid var(--_thm-cs-be-se-3);
437
+ border-radius: 4px;
438
+ // width: 400px;
439
+ width: var(--_width-400);
440
+ overflow: hidden;
441
+ height: fit-content;
442
+ top: 10px;
443
+ margin-bottom: 24px;
444
+
445
+ & > h3 {
446
+ // font-size: 16px;
447
+ font-weight: 700;
448
+ background-color: #f5f5f5;
449
+ padding: 12px;
450
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
451
+ }
452
+
453
+ &_body {
454
+ padding: 16px;
455
+ // max-height: calc(100vh - 420px);
456
+ // overflow: auto;
457
+ display: flex;
458
+ flex-direction: column;
459
+ gap: 16px;
460
+ }
461
+
462
+ &_row {
463
+ display: flex;
464
+ justify-content: space-between;
465
+ align-items: center;
466
+ padding-bottom: 12px;
467
+ border-bottom: 1px dashed var(--_thm-cs-be-se-3);
468
+ }
469
+
470
+ &_text {
471
+ // font-size: 16px;
472
+ font-weight: 700;
473
+ // width: 273px;
474
+ // height: 22px;
475
+ white-space: nowrap;
476
+ overflow: hidden;
477
+ text-overflow: ellipsis;
478
+ display: inline-block;
479
+ // margin-top: 4px;
480
+ }
481
+
482
+ &_select {
483
+ display: flex;
484
+ align-items: center;
485
+ gap: 8px;
486
+ font-size: 14px;
487
+ // color: var(--_primary-400);
488
+ color: var(--_thm-cs-tt-ls-as);
489
+ text-decoration: none;
490
+ font-weight: 400;
491
+ background: none;
492
+ border: none;
493
+ cursor: pointer;
494
+ span {
495
+ display: flex;
496
+ }
497
+
498
+ &:hover {
499
+ text-decoration: underline;
500
+ }
501
+ }
502
+ // &_divider {
503
+ // border: none;
504
+ // border-top: 1px dashed var(--_gray-300);
505
+ // margin: 16px 0;
506
+ // }
507
+
508
+ &_footer {
509
+ display: flex;
510
+ justify-content: space-between;
511
+ align-items: flex-start;
512
+ gap: 16px;
513
+ }
514
+
515
+ &_shipping,
516
+ &_quoted {
517
+ display: flex;
518
+ flex-direction: column;
519
+ justify-content: center;
520
+ }
521
+
522
+ &_label {
523
+ font-size: 14px;
524
+ // color: var(--_gray-700);
525
+ font-weight: 500;
526
+ margin-bottom: 6px;
527
+ }
528
+
529
+ &_value {
530
+ font-size: 20px;
531
+ font-weight: 700;
532
+ // color: var(--_gray-900);
533
+ height: 40px;
534
+ display: flex;
535
+ align-items: center;
536
+ }
537
+
538
+ &_input_box {
539
+ display: flex;
540
+ // align-items: center;
541
+ border: 1px solid var(--_thm-cs-be-se-3);
542
+ border-radius: 6px;
543
+ padding: 8px 12px;
544
+ width: 128px;
545
+ height: 40px;
546
+ }
547
+
548
+ &_currency {
549
+ margin-right: 6px;
550
+ font-weight: 600;
551
+ color: var(--_gray-700);
552
+ display: flex;
553
+ }
554
+
555
+ &_input {
556
+ border: none;
557
+ outline: none;
558
+ font-size: 16px;
559
+ font-weight: 400;
560
+ color: var(--_gray-900);
561
+ width: 100%;
562
+ background: transparent;
563
+ }
564
+
565
+ // --- Extra styles for address list ---
566
+ &_list_item {
567
+ display: flex;
568
+ flex-direction: column;
569
+ // align-items: flex-start;
570
+ gap: 6px;
571
+ padding-bottom: 16px;
572
+ &:first-child {
573
+ padding-top: 0px;
574
+ }
575
+ &:not(:last-child) {
576
+ border-bottom: 1px dashed var(--_thm-cs-be-se-3);
577
+ margin-bottom: 16px;
578
+ }
579
+
580
+ .address_card_row {
581
+ width: 100%;
582
+ margin-bottom: 0px;
583
+ }
584
+ }
585
+ .contact_details {
586
+ gap: 6px;
587
+ display: flex;
588
+ flex-direction: column;
589
+ padding-bottom: 24px;
590
+ margin-top: 12px;
591
+ .contact_title {
592
+ display: flex;
593
+ gap: 12px;
594
+ font-weight: 600;
595
+ font-size: 14px;
596
+ cursor: pointer;
597
+ .toggle_dropdown {
598
+ display: inline-block;
599
+ transition: transform 0.3s ease;
600
+ svg {
601
+ width: 18px;
602
+ height: 18px;
603
+ }
604
+ &.open {
605
+ transform: rotate(180deg);
606
+ }
607
+ }
608
+ }
609
+ .secondary_val {
610
+ font-weight: 500;
611
+ }
612
+ }
613
+
614
+ &_address {
615
+ font-size: 14px;
616
+ // color: var(--_gray-500);
617
+ font-weight: 400;
618
+ line-height: 20px;
619
+ padding-bottom: 12x;
620
+ }
621
+ &_details {
622
+ display: flex;
623
+ align-items: center;
624
+ gap: 10px;
625
+ // color: var(--_gray-900);
626
+ font-size: 14px;
627
+ cursor: pointer;
628
+ .toggle_arrow {
629
+ display: flex;
630
+ transition: transform 0.3s ease;
631
+ &.open {
632
+ transform: rotate(180deg);
633
+ }
634
+ }
635
+ &.no_caret {
636
+ caret-color: transparent; /* hides the blinking cursor */
637
+ pointer-events: none; /* prevents clicking/focus */
638
+ }
639
+ }
640
+
641
+ &_contact_container {
642
+ display: flex;
643
+ align-items: center;
644
+ gap: 10px;
645
+ cursor: pointer;
646
+ }
647
+ &_contact {
648
+ font-size: 14px;
649
+ font-weight: 600;
650
+ color: var(--_gray-900);
651
+ }
652
+ &_shipping_details {
653
+ padding-bottom: 16px;
654
+ margin-bottom: 16px;
655
+ border-bottom: 1px dashed var(--_thm-cs-be-se-3);
656
+ // padding: 16px;
657
+ // margin-top: 10px;
658
+
659
+ .no_shipping_methods {
660
+ background: var(--_gray-100);
661
+ border-radius: 4px;
662
+ padding: 16px;
663
+ text-align: center;
664
+ min-height: 100px;
665
+ display: flex;
666
+ align-items: center;
667
+ justify-content: center;
668
+ span {
669
+ font-size: 16px;
670
+ font-weight: 600;
671
+ color: var(--_gray-700);
672
+ }
673
+ }
674
+ }
675
+
676
+ &_shipping_heading {
677
+ font-size: 14px;
678
+ font-weight: 600;
679
+ // color: var(--_gray-900);
680
+ background: #f5f5f5;
681
+ padding: 6px;
682
+ border-radius: 4px;
683
+ margin-bottom: 12px;
684
+ padding-left: 12px;
685
+ }
686
+
687
+ &_shipping_group {
688
+ margin-bottom: 16px;
689
+ gap: 6px;
690
+ display: flex;
691
+ flex-direction: column;
692
+ }
693
+
694
+ &_shipping_subheading {
695
+ font-size: 14px;
696
+ font-weight: 700;
697
+ // color: var(--_gray-900);
698
+ // margin-bottom: 2px;
699
+ }
700
+
701
+ &_shipping_option {
702
+ display: flex;
703
+ align-items: center;
704
+ // justify-content: space-between;
705
+ // padding: 10px 8px;
706
+ border-radius: 6px;
707
+ cursor: pointer;
708
+ font-size: 14px;
709
+ // color: var(--_gray-700);
710
+ // margin-bottom: 8px;
711
+ transition: background 0.2s ease;
712
+
713
+ input[type="radio"] {
714
+ accent-color: var(--_primary-400);
715
+ margin-right: 12px;
716
+ width: fit-content;
717
+ }
718
+
719
+ &:hover {
720
+ // background: var(--_gray-100);
721
+ }
722
+ }
723
+
724
+ &_shipping_label {
725
+ // flex: 1;
726
+ // margin-left: 6px;
727
+ font-weight: 400;
728
+ font-size: 14px;
729
+ // color: var(--_gray-500);
730
+ }
731
+
732
+ &_shipping_price {
733
+ font-weight: 600;
734
+ // color: var(--_gray-900);
735
+ font-size: 14px;
736
+ }
737
+ &_shipping_selected_method {
738
+ display: flex;
739
+ justify-content: space-between;
740
+ gap: 48px;
741
+ }
742
+ &_shipping_title {
743
+ font-size: 14px;
744
+ font-weight: 600;
745
+ }
746
+
747
+ &_shipping_confirm {
748
+ padding: 12px;
749
+ }
750
+ &_shipping_method {
751
+ display: flex;
752
+ flex-direction: column;
753
+ gap: 8px;
754
+ }
755
+ .confirm_button {
756
+ padding: 12px 24px;
757
+ border-radius: 4px;
758
+ font-weight: 600;
759
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
760
+ color: var(--_thm-py-bs-dt-se-tt-cr);
761
+ margin-block: 4px 4px;
762
+ &:hover {
763
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
764
+ color: var(--_thm-py-bs-hr-se-tt-cr);
765
+ }
766
+ }
767
+ }
768
+ .cpn__checkmark__icon {
769
+ display: flex;
770
+ svg path {
771
+ // stroke: var(--_thm-cs-tt-ls-as);
772
+ }
773
+ }
774
+ }
775
+
776
+ width: 100%;
777
+
778
+ & > .wrapper {
779
+ // width: 100%;
780
+ // height: 100%;
781
+ }
782
+ &[data-show-shadow="false"] {
783
+ --_show-shadow: none;
784
+ }
785
+
786
+ // .accordion-element {
787
+ // background-color: var(
788
+ // --_ctm-mob-dn-fq-wt-bd-cr,
789
+ // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
790
+ // );
791
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
792
+ // display: flex;
793
+ // flex-direction: column;
794
+ // --_sf-gp: var(
795
+ // --_ctm-mob-lt-im-sg,
796
+ // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
797
+ // );
798
+ // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
799
+ // row-gap: var(--_sf-gp);
800
+ // width: 100%;
801
+ // // height: 100%;
802
+ // border-color: var(
803
+ // --_ctm-mob-dn-fq-wt-br-cr,
804
+ // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
805
+ // );
806
+ // border-style: var(
807
+ // --_ctm-mob-dn-fq-wt-br-se,
808
+ // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
809
+ // );
810
+ // border-width: var(
811
+ // --_ctm-mob-dn-fq-wt-br-wh,
812
+ // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
813
+ // );
814
+ // border-radius: var(
815
+ // --_ctm-mob-dn-fq-wt-br-rs,
816
+ // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
817
+ // );
818
+ // box-shadow: var(
819
+ // --_show-shadow,
820
+ // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
821
+ // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
822
+ // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
823
+ // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
824
+ // );
825
+ // }
826
+ }
827
+ }