@sc-360-v2/storefront-cms-library 0.3.83 → 0.3.84

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 (4) hide show
  1. package/dist/allocations.scss +220 -147
  2. package/dist/my-templates.scss +244 -243
  3. package/dist/order-processing.scss +57 -0
  4. package/package.json +1 -1
package/dist/allocations.scss CHANGED
@@ -101,7 +101,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
101
101
  // }
102
102
  }
103
103
 
104
- .btn__with__text {
104
+ .load__more__button__container {
105
+ display: flex;
106
+ width: 100%;
107
+ margin-top: 10px;
108
+ &:hover {
109
+ --_sf-hr-bn-at: var(
110
+ --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
111
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
112
+ );
113
+ }
114
+
115
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
116
+ }
117
+
118
+ .btn__with__text[data-btn-name="redeemButton"] {
105
119
  &[data-show-shadow="false"] {
106
120
  --_show-shadow: none;
107
121
  }
@@ -297,6 +311,205 @@ $resizeActive: '[data-cms-element-resizer="true"]';
297
311
  width: 100%;
298
312
  }
299
313
  }
314
+ .btn__with__text[data-btn-name="loadMore"] {
315
+ &[data-show-shadow="false"] {
316
+ --_show-shadow: none;
317
+ }
318
+ &[data-icon-position="left"] {
319
+ --_sf-fd-bn: row;
320
+ }
321
+ &[data-icon-position="right"] {
322
+ --_sf-fd-bn: row-reverse;
323
+ }
324
+ &[data-icon-position="center"] {
325
+ --_sf-fd-bn: row;
326
+ }
327
+
328
+ &:hover {
329
+ --_sf-hr-bd-cr: var(
330
+ --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
331
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
332
+ );
333
+ --_sf-hr-br-cr: var(
334
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
335
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
336
+ );
337
+ --_sf-hr-br-se: var(
338
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
339
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
340
+ );
341
+ --_sf-hr-br-wh: var(
342
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
343
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
344
+ );
345
+ --_sf-hr-br-rs: var(
346
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
347
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
348
+ );
349
+ --_sf-hr-at: var(
350
+ --_ctm-mob-dn-ld-me-bn-hr-se-at,
351
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
352
+ );
353
+ --_sf-hr-in-ad-tt-sg: var(
354
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-ad-tt-sg,
355
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-ad-tt-sg, var(--_ctm-dn-ld-me-bn-hr-se-in-ad-tt-sg))
356
+ );
357
+
358
+ // for shadow
359
+ --_sf-hr-sw-ae: var(
360
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
361
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
362
+ );
363
+ --_sf-hr-sw-br: var(
364
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
365
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
366
+ );
367
+ --_sf-hr-sw-hr: var(
368
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
369
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
370
+ );
371
+ --_sf-hr-sw-cr: var(
372
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
373
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
374
+ );
375
+
376
+ // for font
377
+
378
+ --_sf-hr-cr: var(
379
+ --_ctm-mob-dn-ld-me-bn-hr-se-cr,
380
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
381
+ );
382
+ --_sf-hr-ft-fy: var(
383
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
384
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
385
+ );
386
+ --_sf-hr-ft-se: var(
387
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
388
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
389
+ );
390
+ --_sf-hr-ft-wt: var(
391
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
392
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
393
+ );
394
+ --_sf-hr-ft-se-ic: var(
395
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
396
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
397
+ );
398
+ --_sf-hr-tt-an: var(
399
+ --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
400
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
401
+ );
402
+ --_sf-hr-lr-sg: var(
403
+ --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
404
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
405
+ );
406
+ --_sf-hr-le-ht: var(
407
+ --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
408
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
409
+ );
410
+
411
+ --_sf-hr-in-se: var(
412
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
413
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
414
+ );
415
+ --_sf-hr-in-se: var(
416
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
417
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
418
+ );
419
+ --_sf-hr-in-c1: var(
420
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
421
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
422
+ );
423
+ --_sf-hr-ue: var(
424
+ --_ctm-mob-dn-ld-me-bn-hr-ue,
425
+ var(--_ctm-tab-dn-ld-me-bn-hr-ue, var(--_ctm-dn-ld-me-bn-hr-ue))
426
+ );
427
+
428
+ // for pading and width
429
+ --_sf-hr-pg: var(
430
+ --_ctm-mob-dn-ld-me-bn-hr-pg,
431
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
432
+ );
433
+ --_sf-hr-wh: var(
434
+ --_ctm-mob-dn-ld-me-bn-hr-wh,
435
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
436
+ );
437
+
438
+ &[data-hover-show-shadow="false"] {
439
+ --_hover-show-shadow: none;
440
+ }
441
+ &[data-hover-show-icon="false"] {
442
+ --_hover-show-icon: none;
443
+ }
444
+ }
445
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
446
+
447
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
448
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
449
+ display: flex;
450
+ flex-direction: var(--_sf-fd-bn);
451
+ align-items: center;
452
+
453
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
454
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-ad-tt-sg));
455
+
456
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
457
+
458
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
459
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
460
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
461
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
462
+
463
+ &[data-show-border="true"] {
464
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
465
+
466
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se));
467
+
468
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh));
469
+ }
470
+
471
+ .txt {
472
+ display: flex;
473
+
474
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
475
+
476
+ font-family:
477
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy)), sans-serif;
478
+
479
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
480
+
481
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
482
+
483
+ font-style: var(
484
+ --_sf-hr-ft-se-ic,
485
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
486
+ );
487
+
488
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
489
+
490
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg));
491
+
492
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
493
+
494
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
495
+ }
496
+
497
+ .icon {
498
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
499
+ svg {
500
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
501
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
502
+
503
+ path {
504
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
505
+ }
506
+ }
507
+ }
508
+ [data-element-style="Text"] {
509
+ display: inline-block;
510
+ width: 100%;
511
+ }
512
+ }
300
513
  }
301
514
 
302
515
  .allocations_table_wrapper {
@@ -373,51 +586,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
373
586
  );
374
587
  }
375
588
  }
376
- &[data-loadmore-button-shadow="true"] {
377
- .load__more {
378
- box-shadow: var(
379
- --_ctm-mob-dn-ld-me-bn-sw-ae,
380
- var(--_ctm-tab-dn-ld-me-bn-sw-ae, var(--_ctm-dn-ld-me-bn-sw-ae))
381
- )
382
- var(
383
- --_ctm-mob-dn-ld-me-bn-sw-br,
384
- var(--_ctm-tab-dn-ld-me-bn-sw-br, var(--_ctm-dn-ld-me-bn-sw-br))
385
- )
386
- var(
387
- --_ctm-mob-ld-me-bn-sw-sd,
388
- var(--_ctm-tab-dn-ld-me-bn-sw-sd, var(--_ctm-dn-ld-me-bn-sw-sd))
389
- )
390
- var(
391
- --_ctm-mob-dn-ld-me-bn-sw-cr,
392
- var(--_ctm-tab-dn-ld-me-bn-sw-cr, var(--_ctm-dn-ld-me-bn-sw-cr))
393
- );
394
- }
395
- }
396
- &[data-loadmore-button-border="true"] {
397
- .load__more {
398
- border-color: var(
399
- --_sf-hr-br-cr,
400
- var(
401
- --_ctm-mob-dn-ld-me-bn-br-cr,
402
- var(--_ctm-tab-dn-ld-me-bn-br-cr, var(--_ctm-dn-ld-me-bn-br-cr))
403
- )
404
- );
405
- border-style: var(
406
- --_sf-hr-br-st,
407
- var(
408
- --_ctm-mob-dn-ld-me-bn-br-se,
409
- var(--_ctm-tab-dn-ld-me-bn-br-se, var(--_ctm-dn-ld-me-bn-br-se))
410
- )
411
- );
412
- border-width: var(
413
- --_sf-hr-br-wh,
414
- var(
415
- --_ctm-mob-dn-ld-me-bn-br-wh,
416
- var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
417
- )
418
- );
419
- }
420
- }
589
+
421
590
  &[data-header-divider="true"] {
422
591
  thead tr th {
423
592
  border-bottom: 1px solid
@@ -453,7 +622,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
453
622
  }
454
623
  &[data-show-more-rows="onScroll"] {
455
624
  .table__container {
456
- overflow-y: auto;
625
+ overflow-y: scroll;
626
+ height: var(
627
+ --_ctm-mob-lt-te-ht,
628
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
629
+ ) !important;
457
630
 
458
631
  &::-webkit-scrollbar {
459
632
  width: var(
@@ -862,106 +1035,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
862
1035
  );
863
1036
  }
864
1037
  }
865
-
866
- .load__more {
867
- margin: 10px;
868
- background-color: var(
869
- --_sf-hr-bd-cr,
870
- var(
871
- --_ctm-mob-dn-ld-me-bn-bd-cr,
872
- var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
873
- )
874
- );
875
- border-radius: var(
876
- --_sf-hr-br-br,
877
- var(
878
- --_ctm-mob-dn-ld-me-bn-br-rs,
879
- var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
880
- )
881
- );
882
-
883
- h3 {
884
- color: var(
885
- --_sf-hr-fc,
886
- var(
887
- --_ctm-mob-dn-ld-me-bn-cr,
888
- var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr))
889
- )
890
- );
891
- font-family:
892
- var(
893
- --_sf-hr-ff,
894
- var(
895
- --_ctm-mob-dn-ld-me-bn-ft-fy,
896
- var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
897
- )
898
- ),
899
- sans-serif;
900
- font-size: var(
901
- --_sf-hr-fs,
902
- var(
903
- --_ctm-mob-dn-ld-me-bn-ft-se,
904
- var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
905
- )
906
- );
907
-
908
- text-decoration: var(
909
- --_ctm-mob-dn-ld-me-bn-ue,
910
- var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
911
- );
912
-
913
- font-weight: var(
914
- --_sf-hr-fw,
915
- var(
916
- --_ctm-mob-dn-ld-me-bn-ft-wt,
917
- var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
918
- )
919
- );
920
-
921
- font-style: var(
922
- --_sf-hr-ft,
923
- var(
924
- --_ctm-mob-dn-ld-me-bn-ft-se-ic,
925
- var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
926
- )
927
- );
928
-
929
- text-align: var(
930
- --_sf-hr-ta,
931
- var(
932
- --_ctm-mob-dn-ld-me-bn-tt-an,
933
- var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
934
- )
935
- );
936
-
937
- letter-spacing: var(
938
- --_sf-hr-ls,
939
- var(
940
- --_ctm-mob-dn-ld-me-bn-lr-sg,
941
- var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
942
- )
943
- );
944
-
945
- line-height: var(
946
- --_sf-hr-lh,
947
- var(
948
- --_ctm-mob-dn-ld-me-bn-le-ht,
949
- var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
950
- )
951
- );
952
- }
953
- // background-color: var(--_primary-400);
954
- // border: 1px solid var(--_primary-400);
955
- // border-radius: var(--_br-6);
956
- // padding: var(--_pd-8) var(--_pd-12);
957
- // color: var(---base-whiet);
958
- // display: inline-block;
959
- // color: var(--_base-white);
960
- // margin: 0 auto;
961
- // width: 150px;
962
- // text-align: center;
963
- // margin-top: 20px;
964
- }
965
1038
  }
966
1039
  }
967
1040
 
package/dist/my-templates.scss CHANGED
@@ -6,249 +6,6 @@
6
6
  width: 100% !important;
7
7
 
8
8
  & > .wrapper {
9
- .template_wrapper {
10
- width: 100%;
11
- .template_section {
12
- width: 100%;
13
- display: flex;
14
- justify-content: space-between;
15
- align-items: center;
16
- margin-bottom: 24px;
17
- h2 {
18
- font-size: 24px;
19
- }
20
- .back_to_cart {
21
- color: var(--_primary-400);
22
- &:hover {
23
- text-decoration: underline;
24
- }
25
- }
26
- }
27
- .template_body {
28
- display: flex;
29
- gap: 60px;
30
- justify-content: space-between;
31
- .template_col_left {
32
- width: 100%;
33
- height: 400px;
34
- background-color: var(--_base-white);
35
- .wishlist-modal {
36
- display: flex;
37
- flex-direction: column;
38
- width: 100%;
39
-
40
- .wishlist-modal-section {
41
- // padding: 16px 24px 24px 24px;
42
- gap: 16px !important;
43
- overflow-x: hidden;
44
- display: flex;
45
- flex-direction: column;
46
-
47
- .form-group {
48
- display: flex;
49
- flex-direction: column;
50
- gap: 8px;
51
- max-width: 500px;
52
-
53
- label {
54
- display: block;
55
- font-size: 0.875rem;
56
- font-weight: 500;
57
- color: #374151;
58
- }
59
-
60
- .primary_text_label {
61
- font-weight: 700;
62
- }
63
-
64
- input[type="radio"],
65
- textarea {
66
- width: 100%;
67
- padding: 0.5rem 0.75rem;
68
- font-size: 0.875rem;
69
- border: 1px solid #d1d5db;
70
- border-radius: 0.375rem;
71
- outline: none;
72
- box-sizing: border-box;
73
- transition: all 0.2s;
74
-
75
- &:focus {
76
- border-color: #2563eb;
77
- // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
78
- }
79
-
80
- &[type="radio"] {
81
- width: fit-content;
82
- height: fit-content;
83
- }
84
- }
85
-
86
- .radio-group {
87
- display: flex;
88
- flex-direction: column;
89
- gap: 12px;
90
- font-weight: normal;
91
-
92
- .radio-label {
93
- display: inline-flex;
94
- align-items: center;
95
- gap: 8px;
96
- cursor: pointer;
97
- width: fit-content;
98
-
99
- span {
100
- color: var(--_gray-500);
101
-
102
- span {
103
- color: var(--_gray-900);
104
- font-weight: 500;
105
- }
106
- }
107
- }
108
- }
109
-
110
- textarea {
111
- min-height: 100px;
112
- resize: vertical;
113
- }
114
-
115
- .global-can-edit {
116
- display: flex;
117
- flex-direction: column;
118
- align-items: flex-start;
119
- margin-left: 20px;
120
- margin-top: 6px;
121
- gap: 6px;
122
-
123
- input[type="checkbox"] {
124
- margin: 0;
125
- width: 16px;
126
- height: 16px;
127
- cursor: pointer;
128
- }
129
-
130
- span {
131
- font-size: 0.875rem;
132
- font-weight: 600;
133
- color: var(--_gray-900);
134
- margin-left: -15px;
135
- }
136
- }
137
- }
138
- input[type="text"] {
139
- height: 40px;
140
- border: 1px solid var(--_gray-300);
141
- border-radius: 6px;
142
- padding-inline: 16px;
143
- }
144
- }
145
- }
146
- .action-buttons {
147
- display: flex;
148
- gap: 1rem;
149
- align-items: center;
150
- // justify-content: flex-end;
151
- flex: 1 1 auto;
152
- // padding: 16px 24px;
153
- // border-top: 1px solid var(--_gray-200);
154
- gap: 12px;
155
- margin-block: 24px;
156
- padding-bottom: 24px;
157
- button {
158
- padding: 12px 16px;
159
- border-radius: 6px;
160
- }
161
- .create-btn {
162
- display: flex;
163
- justify-content: center;
164
- align-items: center;
165
- gap: 8px;
166
- background-color: var(--_primary-400);
167
- color: var(--_base-white);
168
- &.disabled {
169
- opacity: 0.5;
170
- pointer-events: none;
171
- }
172
- .loader {
173
- animation: rotate-icon 1s linear infinite;
174
- display: inline-block;
175
- transform-origin: center;
176
-
177
- svg path {
178
- stroke: var(--_primary-200);
179
- }
180
- }
181
-
182
- &:hover {
183
- background-color: var(--_primary-500);
184
- }
185
- }
186
- .discard-btn {
187
- &:hover {
188
- background-color: var(--_gray-50);
189
- color: var(--_gray-900);
190
- }
191
- }
192
- }
193
- }
194
- .template_col_right {
195
- width: 400px;
196
- height: fit-content;
197
- background-color: var(--_base-white);
198
- .template_summary_wrapper {
199
- border: 1px solid var(--_gray-300);
200
- border-radius: 4px;
201
- width: 350px;
202
- .template_summary_header {
203
- padding: 12px 16px;
204
- border-bottom: 1px solid var(--_gray-300);
205
- font-size: 16px;
206
- font-weight: 600;
207
- background-color: #f5f5f5;
208
- }
209
- .template_summary_body {
210
- .template_summary_items {
211
- padding: 16px;
212
- display: flex;
213
- flex-direction: column;
214
- gap: 8px;
215
- .template_summary_item {
216
- display: flex;
217
- justify-content: space-between;
218
- gap: 16px;
219
- .template_summary_item_details {
220
- display: flex;
221
- gap: 16px;
222
- .template_summary_item_pro_info {
223
- h5 {
224
- font-size: 16px;
225
- font-weight: 600;
226
- color: var(--_gray-900);
227
- }
228
- .template_summary_item_pro_qty {
229
- color: var(--_gray-500);
230
- font-size: 12px;
231
- span {
232
- display: block;
233
- }
234
- .qty {
235
- color: var(--_gray-900);
236
- }
237
- }
238
- }
239
- }
240
- .template_summary_item_detail_price {
241
- font-size: 16px;
242
- font-weight: 600;
243
- color: var(--_gray-900);
244
- }
245
- }
246
- }
247
- }
248
- }
249
- }
250
- }
251
- }
252
9
  }
253
10
  &[data-show-shadow="false"] {
254
11
  --_show-shadow: none;
@@ -295,4 +52,248 @@
295
52
  // );
296
53
  // }
297
54
  }
55
+
56
+ .template_wrapper {
57
+ width: 100%;
58
+ .template_section {
59
+ width: 100%;
60
+ display: flex;
61
+ justify-content: space-between;
62
+ align-items: center;
63
+ margin-bottom: 24px;
64
+ h2 {
65
+ font-size: 24px;
66
+ }
67
+ .back_to_cart {
68
+ color: var(--_primary-400);
69
+ &:hover {
70
+ text-decoration: underline;
71
+ }
72
+ }
73
+ }
74
+ .template_body {
75
+ display: flex;
76
+ gap: 60px;
77
+ justify-content: space-between;
78
+ .template_col_left {
79
+ width: 100%;
80
+ height: 400px;
81
+ background-color: var(--_base-white);
82
+ .wishlist-modal {
83
+ display: flex;
84
+ flex-direction: column;
85
+ width: 100%;
86
+
87
+ .wishlist-modal-section {
88
+ // padding: 16px 24px 24px 24px;
89
+ gap: 16px !important;
90
+ overflow-x: hidden;
91
+ display: flex;
92
+ flex-direction: column;
93
+
94
+ .form-group {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 8px;
98
+ max-width: 500px;
99
+
100
+ label {
101
+ display: block;
102
+ font-size: 0.875rem;
103
+ font-weight: 500;
104
+ color: #374151;
105
+ }
106
+
107
+ .primary_text_label {
108
+ font-weight: 700;
109
+ }
110
+
111
+ input[type="radio"],
112
+ textarea {
113
+ width: 100%;
114
+ padding: 0.5rem 0.75rem;
115
+ font-size: 0.875rem;
116
+ border: 1px solid #d1d5db;
117
+ border-radius: 0.375rem;
118
+ outline: none;
119
+ box-sizing: border-box;
120
+ transition: all 0.2s;
121
+
122
+ &:focus {
123
+ border-color: #2563eb;
124
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
125
+ }
126
+
127
+ &[type="radio"] {
128
+ width: fit-content;
129
+ height: fit-content;
130
+ }
131
+ }
132
+
133
+ .radio-group {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 12px;
137
+ font-weight: normal;
138
+
139
+ .radio-label {
140
+ display: inline-flex;
141
+ align-items: center;
142
+ gap: 8px;
143
+ cursor: pointer;
144
+ width: fit-content;
145
+
146
+ span {
147
+ color: var(--_gray-500);
148
+
149
+ span {
150
+ color: var(--_gray-900);
151
+ font-weight: 500;
152
+ }
153
+ }
154
+ }
155
+ }
156
+
157
+ textarea {
158
+ min-height: 100px;
159
+ resize: vertical;
160
+ }
161
+
162
+ .global-can-edit {
163
+ display: flex;
164
+ flex-direction: column;
165
+ align-items: flex-start;
166
+ margin-left: 20px;
167
+ margin-top: 6px;
168
+ gap: 6px;
169
+
170
+ input[type="checkbox"] {
171
+ margin: 0;
172
+ width: 16px;
173
+ height: 16px;
174
+ cursor: pointer;
175
+ }
176
+
177
+ span {
178
+ font-size: 0.875rem;
179
+ font-weight: 600;
180
+ color: var(--_gray-900);
181
+ margin-left: -15px;
182
+ }
183
+ }
184
+ }
185
+ input[type="text"] {
186
+ height: 40px;
187
+ border: 1px solid var(--_gray-300);
188
+ border-radius: 6px;
189
+ padding-inline: 16px;
190
+ }
191
+ }
192
+ }
193
+ .action-buttons {
194
+ display: flex;
195
+ gap: 1rem;
196
+ align-items: center;
197
+ // justify-content: flex-end;
198
+ flex: 1 1 auto;
199
+ // padding: 16px 24px;
200
+ // border-top: 1px solid var(--_gray-200);
201
+ gap: 12px;
202
+ margin-block: 24px;
203
+ padding-bottom: 24px;
204
+ button {
205
+ padding: 12px 16px;
206
+ border-radius: 6px;
207
+ }
208
+ .create-btn {
209
+ display: flex;
210
+ justify-content: center;
211
+ align-items: center;
212
+ gap: 8px;
213
+ background-color: var(--_primary-400);
214
+ color: var(--_base-white);
215
+ &.disabled {
216
+ opacity: 0.5;
217
+ pointer-events: none;
218
+ }
219
+ .loader {
220
+ animation: rotate-icon 1s linear infinite;
221
+ display: inline-block;
222
+ transform-origin: center;
223
+
224
+ svg path {
225
+ stroke: var(--_primary-200);
226
+ }
227
+ }
228
+
229
+ &:hover {
230
+ background-color: var(--_primary-500);
231
+ }
232
+ }
233
+ .discard-btn {
234
+ &:hover {
235
+ background-color: var(--_gray-50);
236
+ color: var(--_gray-900);
237
+ }
238
+ }
239
+ }
240
+ }
241
+ .template_col_right {
242
+ width: 400px;
243
+ height: fit-content;
244
+ background-color: var(--_base-white);
245
+ .template_summary_wrapper {
246
+ border: 1px solid var(--_gray-300);
247
+ border-radius: 4px;
248
+ width: 350px;
249
+ .template_summary_header {
250
+ padding: 12px 16px;
251
+ border-bottom: 1px solid var(--_gray-300);
252
+ font-size: 16px;
253
+ font-weight: 600;
254
+ background-color: #f5f5f5;
255
+ }
256
+ .template_summary_body {
257
+ .template_summary_items {
258
+ padding: 16px;
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 8px;
262
+ .template_summary_item {
263
+ display: flex;
264
+ justify-content: space-between;
265
+ gap: 16px;
266
+ .template_summary_item_details {
267
+ display: flex;
268
+ gap: 16px;
269
+ .template_summary_item_pro_info {
270
+ h5 {
271
+ font-size: 16px;
272
+ font-weight: 600;
273
+ color: var(--_gray-900);
274
+ }
275
+ .template_summary_item_pro_qty {
276
+ color: var(--_gray-500);
277
+ font-size: 12px;
278
+ span {
279
+ display: block;
280
+ }
281
+ .qty {
282
+ color: var(--_gray-900);
283
+ }
284
+ }
285
+ }
286
+ }
287
+ .template_summary_item_detail_price {
288
+ font-size: 16px;
289
+ font-weight: 600;
290
+ color: var(--_gray-900);
291
+ }
292
+ }
293
+ }
294
+ }
295
+ }
296
+ }
297
+ }
298
+ }
298
299
  }
package/dist/order-processing.scss ADDED
@@ -0,0 +1,57 @@
1
+ // processing payment screen
2
+ .pmnt_process_wrapper {
3
+ display: flex;
4
+ justify-content: center;
5
+ align-items: center;
6
+ height: 100vh;
7
+ width: 100%;
8
+ background-color: var(--_gray-100);
9
+ .process_loader_content {
10
+ display: flex;
11
+ flex-direction: column;
12
+ /* gap: 8px; */
13
+ justify-content: center;
14
+ align-items: center;
15
+ .processing_loader {
16
+ position: relative;
17
+ width: 64px;
18
+ height: 64px;
19
+ margin-bottom: 24px;
20
+
21
+ &::before,
22
+ &::after {
23
+ content: "";
24
+ position: absolute;
25
+ border-radius: 50%;
26
+ }
27
+
28
+ // Background stroke
29
+ &::before {
30
+ width: 100%;
31
+ height: 100%;
32
+ border: 6px solid #e0e0e0;
33
+ }
34
+
35
+ // Animated stroke
36
+ &::after {
37
+ width: 100%;
38
+ height: 100%;
39
+ border: 6px solid transparent;
40
+ border-top-color: #243dc6;
41
+ animation: processing_loader_spin 1s linear infinite;
42
+ }
43
+ p {
44
+ margin-top: 8px;
45
+ }
46
+ }
47
+
48
+ @keyframes processing_loader_spin {
49
+ 0% {
50
+ transform: rotate(0deg);
51
+ }
52
+ 100% {
53
+ transform: rotate(360deg);
54
+ }
55
+ }
56
+ }
57
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.83",
3
+ "version": "0.3.84",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {