@sc-360-v2/storefront-cms-library 0.3.53 → 0.3.55

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 (36) hide show
  1. package/dist/add-order.scss +3 -0
  2. package/dist/add-products-tab.scss +15 -1
  3. package/dist/builder.js +1 -1
  4. package/dist/buy-for-tab.scss +15 -15
  5. package/dist/buyForHeaders.scss +6 -7
  6. package/dist/cart-details.scss +32 -42
  7. package/dist/cart-products-sidebar.scss +32 -16
  8. package/dist/cart-summary.scss +2 -4
  9. package/dist/cartDropdownOverlay.scss +3 -1
  10. package/dist/checkout.scss +4 -0
  11. package/dist/confirmationModal.scss +48 -0
  12. package/dist/container.scss +15 -15
  13. package/dist/customization-tree.scss +5 -1
  14. package/dist/dropdownTemplate.scss +5 -2
  15. package/dist/employee-bulk-order.scss +3233 -319
  16. package/dist/grid.scss +36 -0
  17. package/dist/icons.js +1 -1
  18. package/dist/image-temp.scss +47 -22
  19. package/dist/index.js +1 -1
  20. package/dist/layouter-pro-item.scss +1 -1
  21. package/dist/layouter-pro.scss +5 -5
  22. package/dist/modal.scss +357 -16
  23. package/dist/order-status.scss +49 -5
  24. package/dist/section.scss +5 -1
  25. package/dist/shareCartSideBar.scss +10 -8
  26. package/dist/shipping-payments.scss +19 -15
  27. package/dist/store-locations.scss +252 -160
  28. package/dist/tab-v2.scss +15 -15
  29. package/dist/text-temp.scss +4 -1
  30. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +36 -0
  31. package/dist/types/builder/tools/element-edit/grid.d.ts +26 -0
  32. package/dist/types/builder/tools/element-edit/language-menu.d.ts +77 -0
  33. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +4 -0
  34. package/dist/types/builder/tools/element-edit/userElements.d.ts +407 -0
  35. package/dist/user-elements.scss +1449 -490
  36. package/package.json +1 -1
package/dist/layouter-pro-item.scss CHANGED
@@ -35,10 +35,10 @@ $flexColumnReverse: "cln-rv";
35
35
  background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
36
36
  border-radius: prepareMediaVariable(--_ctm-layout-dn-br-rs);
37
37
 
38
- display: var(--_d-flex) !important;
39
38
  // flex-direction: column;
40
39
  // gap: prepareMediaVariable(--_ctm-layout-lt-im-gp);
41
40
  // align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
41
+ display: var(--_d-flex) !important;
42
42
  column-gap: prepareMediaVariable(--_ctm-layout-lt-cn-gp);
43
43
  row-gap: prepareMediaVariable(--_ctm-layout-lt-rw-gp);
44
44
 
package/dist/layouter-pro.scss CHANGED
@@ -67,11 +67,11 @@ $flexColumnReverse: "cln-rv";
67
67
  }
68
68
  }
69
69
 
70
- & > div {
71
- &#{$childItemSelector} {
72
- // width: 100%;
73
- }
74
- }
70
+ // & > div {
71
+ // &#{$childItemSelector} {
72
+ // // width: 100%;
73
+ // }
74
+ // }
75
75
  // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
76
76
  // grid-auto-rows: minmax(100px, 1fr);
77
77
  }
package/dist/modal.scss CHANGED
@@ -229,6 +229,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
229
229
  .modalV2-main {
230
230
  position: fixed;
231
231
  z-index: 30;
232
+ inset: 0;
233
+ background: rgba(0, 0, 0, 0.4);
232
234
  .modalV2-wrapper {
233
235
  overflow: hidden !important;
234
236
  position: fixed;
@@ -365,7 +367,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
365
367
  height: 100%;
366
368
  }
367
369
 
368
- .top-bar {
370
+ .top-bar-emp-bulk-order {
369
371
  position: sticky;
370
372
  top: 0;
371
373
  background: $white;
@@ -378,29 +380,26 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
378
380
  align-items: center;
379
381
  // padding: 15px 0px;
380
382
  // height: 60px;
381
- padding: 16px;
383
+ padding: 8px 16px;
382
384
 
383
385
  .left-col {
384
386
  .title {
385
- color: var(--_gray-900, #101828);
386
- font-size: 16px;
387
- font-weight: 700;
387
+ color: var(--_gray-900);
388
+ font-size: 14px;
389
+ font-weight: 600;
388
390
  line-height: 24px;
389
- text-transform: capitalize;
390
391
  display: flex;
391
- gap: 10px;
392
+ gap: 8px;
392
393
  align-items: center;
393
- // font-size: $font-size-lg;
394
- // font-weight: 600;
395
- // display: flex;
396
- // align-items: center;
397
- // gap: 6px;
398
- // color: var(--_gray-900);
399
- // line-height: 24px;
394
+ span {
395
+ display: flex;
396
+ svg {
397
+ width: 20px;
398
+ height: 20px;
399
+ }
400
+ }
400
401
 
401
402
  .modal_heading_icon {
402
- width: 36px;
403
- height: 36px;
404
403
  display: flex;
405
404
  align-items: center;
406
405
  justify-content: center;
@@ -426,6 +425,348 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
426
425
  }
427
426
  }
428
427
  }
428
+ .right_col {
429
+ display: flex;
430
+ align-items: center;
431
+ gap: 12px;
432
+ .employee_bulk_order_header {
433
+ display: flex;
434
+ justify-self: end;
435
+ align-items: center;
436
+
437
+ .single_payment_action {
438
+ display: flex;
439
+ align-items: center;
440
+ gap: 6px;
441
+ }
442
+ .svg_icon {
443
+ display: flex;
444
+ align-items: center;
445
+ cursor: pointer;
446
+ }
447
+
448
+ .employee_bulk_order_header_item {
449
+ color: #344054;
450
+ font-size: 14px;
451
+ display: flex;
452
+ justify-content: center;
453
+ align-items: center;
454
+ gap: 4px;
455
+ position: relative;
456
+ line-height: 20px;
457
+ &:after {
458
+ content: "";
459
+ width: 1px;
460
+ height: 24px;
461
+ background: #d0d5dd;
462
+ position: absolute;
463
+ right: -12px;
464
+ }
465
+
466
+ .single_checkout_sec_opt {
467
+ display: flex;
468
+ gap: 8px;
469
+ }
470
+
471
+ .disabled {
472
+ opacity: 0.4;
473
+ }
474
+ }
475
+
476
+ .emp_info {
477
+ display: flex;
478
+ .emp_info_item {
479
+ color: var(--_gray-600);
480
+ font-size: 14px;
481
+ display: flex;
482
+ justify-content: center;
483
+ align-items: center;
484
+ position: relative;
485
+ line-height: 20px;
486
+ .emp_count {
487
+ font-size: 16px;
488
+ color: var(--_gray-900);
489
+ font-weight: 600;
490
+ margin-left: 4px;
491
+ }
492
+ &:not(:last-child):after {
493
+ content: "";
494
+ background: var(--_gray-400);
495
+ width: 4px;
496
+ height: 4px;
497
+ border-radius: 50%;
498
+ margin-inline: 8px;
499
+ display: inline-block;
500
+ }
501
+
502
+ .single_checkout_sec_opt {
503
+ display: flex;
504
+ gap: 8px;
505
+ }
506
+
507
+ .disabled {
508
+ opacity: 0.4;
509
+ }
510
+ }
511
+ }
512
+ .emp_options_wrapper {
513
+ display: flex;
514
+ align-items: center;
515
+ gap: 8px;
516
+ &::after {
517
+ content: "";
518
+ display: inline-block;
519
+ height: 20px;
520
+ background-color: var(--_gray-200);
521
+ width: 1px;
522
+ margin-inline-start: 18px;
523
+ }
524
+ &::before {
525
+ content: "";
526
+ display: inline-block;
527
+ height: 20px;
528
+ background-color: var(--_gray-200);
529
+ width: 1px;
530
+ margin-inline: 8px;
531
+ }
532
+ .user_icon {
533
+ width: 30px;
534
+ height: 30px;
535
+ display: flex;
536
+ justify-content: center;
537
+ align-items: center;
538
+ cursor: pointer;
539
+ &.active {
540
+ background-color: var(--_gray-50);
541
+ }
542
+ & > span {
543
+ display: flex;
544
+ }
545
+ &:hover {
546
+ background-color: var(--_gray-100);
547
+ }
548
+ }
549
+ .emp_options {
550
+ position: absolute;
551
+ top: 44px;
552
+ width: 300px;
553
+ background-color: var(--_base-white);
554
+ border: 1px solid var(--_gray-200);
555
+ border-radius: 4px;
556
+ z-index: 10;
557
+ box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
558
+ .emp_options_header {
559
+ padding: 12px;
560
+ font-size: 14px;
561
+ font-weight: 600;
562
+ color: var(--_gray-600);
563
+ border-bottom: 1px solid var(--_gray-200);
564
+ }
565
+ .emp_options_list {
566
+ padding: 12px;
567
+ .emp_options_list_item {
568
+ display: flex;
569
+ justify-content: space-between;
570
+ align-items: center;
571
+ gap: 8px;
572
+ .emp_options_list_item_label {
573
+ display: flex;
574
+ gap: 12px;
575
+ }
576
+
577
+ // &:hover {
578
+ // background-color: var(--_primary-25);
579
+ // color: var(--_primary-400);
580
+ // }
581
+ }
582
+ p {
583
+ font-size: 12px;
584
+ color: var(--_gray-500);
585
+ padding-block: 4px 16px;
586
+ }
587
+ }
588
+ .emp_options_footer {
589
+ display: flex;
590
+ border-top: 1px solid var(--_gray-200);
591
+
592
+ & > div {
593
+ flex-basis: 50%;
594
+ display: flex;
595
+ justify-content: center;
596
+ align-items: center;
597
+ padding: 16px;
598
+ cursor: pointer;
599
+ &:first-child {
600
+ border-right: 1px solid var(--_gray-200);
601
+ }
602
+ &:hover {
603
+ background-color: var(--_primary-25);
604
+ svg path {
605
+ stroke: var(--_primary-400);
606
+ }
607
+ }
608
+ }
609
+ }
610
+ }
611
+ }
612
+
613
+ .em_or_ss_wp {
614
+ position: relative;
615
+ &:hover {
616
+ .em_or_ss_wp_cr {
617
+ display: block;
618
+ }
619
+ .em_or_ss_wp_bn {
620
+ background-color: var(--_gray-50);
621
+ }
622
+ }
623
+ .em_or_ss_wp_bn {
624
+ display: flex;
625
+ justify-content: center;
626
+ align-items: center;
627
+ /* border: 1px solid red; */
628
+ height: 30px;
629
+ width: 40px;
630
+
631
+ cursor: pointer;
632
+ top: 120%;
633
+ &.disabled {
634
+ opacity: 0.5;
635
+ pointer-events: none;
636
+ }
637
+ }
638
+ .em_or_ss_wp_cr {
639
+ position: absolute;
640
+ z-index: calc(var(--_higher-zIndex) + var(--_emp-bulk-order-settings-zIndex));
641
+ min-width: 200px;
642
+ min-height: 100px;
643
+ border-radius: 4px;
644
+ background-color: var(--_base-white);
645
+ box-shadow: 0px 0px 24px rgb(0, 0, 0, 0.1);
646
+ display: none;
647
+ .em_or_ss_wp_cr_hr {
648
+ color: var(--_gray-600);
649
+ font-weight: 600;
650
+ font-size: 14px;
651
+ padding: 12px;
652
+ border-bottom: 1px solid var(--_gray-200);
653
+ }
654
+ ul {
655
+ list-style: none;
656
+ li {
657
+ padding: 10px 12px;
658
+ font-size: 14px;
659
+ font-weight: normal;
660
+ color: var(--_gray-700);
661
+ display: flex;
662
+ align-items: center;
663
+ gap: 12px;
664
+ cursor: pointer;
665
+ margin: 4px;
666
+ border-radius: 4px;
667
+ & > span svg path {
668
+ stroke: var(--_gray-500);
669
+ }
670
+ & > span {
671
+ display: flex;
672
+ }
673
+ &:hover {
674
+ background-color: var(--_primary-25);
675
+ color: var(--_primary-400);
676
+ }
677
+ }
678
+ }
679
+ }
680
+ }
681
+
682
+ .emp_btns {
683
+ display: flex;
684
+ align-items: center;
685
+ gap: 12px;
686
+ &::after {
687
+ content: "";
688
+ display: inline-block;
689
+ height: 20px;
690
+ width: 1px;
691
+ background-color: var(--_gray-200);
692
+ }
693
+ &::before {
694
+ content: "";
695
+ display: inline-block;
696
+ height: 20px;
697
+ width: 1px;
698
+ background-color: var(--_gray-200);
699
+ }
700
+ .emp_btn {
701
+ padding: 8px 12px;
702
+ border-radius: 4px;
703
+
704
+ &.emp_primary {
705
+ color: var(--_base-white);
706
+ background-color: var(--_primary-500);
707
+ &:hover {
708
+ background-color: var(--_primary-500);
709
+ }
710
+ }
711
+ &.emp_tertiary_secondary {
712
+ color: var(--_gray-600);
713
+ margin-inline: 4px;
714
+ &:hover {
715
+ background-color: var(--_gray-50);
716
+ color: var(--_gray-900);
717
+ }
718
+ }
719
+ }
720
+ }
721
+ .emp_review_cart_btn {
722
+ padding: 8px 16px;
723
+ border: 1px solid var(--_gray-300);
724
+ border-radius: 6px;
725
+ color: var(--_gray-700);
726
+ cursor: pointer;
727
+ &:hover {
728
+ background-color: var(--_gray-50);
729
+ }
730
+ }
731
+ .emp_discard_btn {
732
+ padding-inline: 16px;
733
+ border-radius: 6px;
734
+ color: var(--_gray-700);
735
+ cursor: pointer;
736
+ height: 32px;
737
+ display: flex;
738
+ align-items: center;
739
+ &.disabled {
740
+ pointer-events: none;
741
+ opacity: 0.8;
742
+ }
743
+ &:hover {
744
+ background-color: var(--_gray-50);
745
+ }
746
+ }
747
+ .action_item {
748
+ cursor: pointer;
749
+ }
750
+ .em_order_settings_act {
751
+ width: 40px;
752
+ }
753
+ .em_btn_act {
754
+ padding-inline: 16px;
755
+ height: 32px;
756
+ border-radius: 4px;
757
+ }
758
+
759
+ .em_review_btn {
760
+ background: #243dc6;
761
+ color: #fff;
762
+ }
763
+
764
+ .em_btn_act_disabled {
765
+ pointer-events: none;
766
+ opacity: 0.8;
767
+ }
768
+ }
769
+ }
429
770
  .actions {
430
771
  display: flex;
431
772
  align-items: center;
package/dist/order-status.scss CHANGED
@@ -870,11 +870,7 @@
870
870
  );
871
871
 
872
872
  .action-button {
873
- // padding: 8px;
874
- // font-size: 14px;
875
- // border-radius: 4px;
876
- // background: none;
877
- // color: #243dc6;
873
+ width: fit-content;
878
874
  margin: var(
879
875
  --_ctm-mob-dn-qk-as-as-mn,
880
876
  var(--_ctm-tab-dn-qk-as-as-mn, var(--_ctm-dn-qk-as-as-mn))
@@ -967,6 +963,8 @@
967
963
 
968
964
  &:hover {
969
965
  color: #0d60e5;
966
+ background-color: var(--_gray-100);
967
+ border-radius: 6px;
970
968
  }
971
969
  }
972
970
  }
@@ -1553,3 +1551,49 @@
1553
1551
  }
1554
1552
  }
1555
1553
  }
1554
+
1555
+ .os-order-overlay {
1556
+ position: relative;
1557
+
1558
+ .os-order-info-wrapper {
1559
+ display: none;
1560
+ position: absolute;
1561
+ z-index: 99;
1562
+ padding: 12px;
1563
+ border: 1px solid var(--_gray-200);
1564
+ border-radius: 4px;
1565
+ bottom: 100%;
1566
+ background: var(--_base-white);
1567
+ min-width: 170px;
1568
+ max-width: 200px;
1569
+ font-size: 12px;
1570
+ box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
1571
+ ul {
1572
+ display: flex;
1573
+ flex-direction: column;
1574
+ gap: 8px;
1575
+ li {
1576
+ display: flex;
1577
+ justify-content: space-between;
1578
+ font-size: 12px;
1579
+ .key_label {
1580
+ color: var(--_gray-600);
1581
+ }
1582
+ .key_label {
1583
+ color: var(--_gray-900);
1584
+ }
1585
+ .total {
1586
+ color: var(--_gray-600);
1587
+ }
1588
+ .price {
1589
+ color: var(--_gray-900);
1590
+ font-weight: 600;
1591
+ }
1592
+ }
1593
+ }
1594
+ }
1595
+
1596
+ &:hover .os-order-info-wrapper {
1597
+ display: block;
1598
+ }
1599
+ }
package/dist/section.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  @use "./transform-properties-module.scss" as *;
9
9
 
10
10
  $activeElementSelector: "[data-has-clicked='true']";
11
+ $isFlexboxElementChild: ".flx > .wrapper > *";
11
12
  $repeterLElement: '[data-element-type="repeater"]';
12
13
  $dp: "dp_d_none";
13
14
  $tb: "tb_d_none";
@@ -110,7 +111,7 @@ section {
110
111
  }
111
112
  &[data-div-type="cms-section-wrapper"] {
112
113
  // max-width: var(--_sf-wp-mx-wt);
113
- max-width: prepareMediaVariable(--_ctm-sec-lt-wh);
114
+ max-width: prepareMediaVariable(--_ctm-sec-lt-wh) !important;
114
115
  // min-height: prepareMediaVariable(--_ctm-sec-lt-mn-ht);
115
116
  margin-inline: auto;
116
117
  position: var(--_p-relative);
@@ -142,6 +143,9 @@ div[data-div-type="element"] {
142
143
  align-self: stretch !important;
143
144
  // &:not(#{$repeterLElement}) {
144
145
  // }
146
+ &:is(#{$isFlexboxElementChild}) {
147
+ width: 100%;
148
+ }
145
149
  &:is(#{$activeElementSelector}) {
146
150
  & > div {
147
151
  &[data-div-type="wrapper__layer"] {
package/dist/shareCartSideBar.scss CHANGED
@@ -16,6 +16,8 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
16
16
  width: 100%;
17
17
  height: 100%;
18
18
  top: 0;
19
+ left: 0;
20
+ background: rgba(0, 0, 0, 0.2);
19
21
  z-index: 9999;
20
22
 
21
23
  // Container overlay
@@ -83,16 +85,16 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
83
85
  width: 32px;
84
86
  height: 32px;
85
87
  display: flex;
86
- justify-content: center;
87
- align-items: center;
88
- &:hover {
89
- background-color: var(--_gray-50);
90
- border-radius: 6px;
91
- svg path {
92
- stroke: var(--_gray-900);
88
+ justify-content: center;
89
+ align-items: center;
90
+ &:hover {
91
+ background-color: var(--_gray-50);
92
+ border-radius: 6px;
93
+ svg path {
94
+ stroke: var(--_gray-900);
95
+ }
93
96
  }
94
97
  }
95
- }
96
98
  }
97
99
 
98
100
  .share_cart_body {
package/dist/shipping-payments.scss CHANGED
@@ -596,6 +596,10 @@ $activeElementSelector: "[data-has-clicked='true']";
596
596
  display: flex;
597
597
  flex-direction: column;
598
598
  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
599
+ .gift_crd_chk_payment_option {
600
+ border: 1px solid var(--_gray-300);
601
+ border-radius: 4px;
602
+ }
599
603
  .payment_program {
600
604
  // padding: 0 12px;
601
605
  .payment_program_header {
@@ -1663,21 +1667,21 @@ $activeElementSelector: "[data-has-clicked='true']";
1663
1667
  }
1664
1668
  }
1665
1669
 
1666
- &[data-view-state="full"] {
1667
- width: auto;
1668
- margin: 0;
1669
- justify-self: stretch !important;
1670
- align-self: stretch !important;
1671
- cursor: auto;
1672
- &:is(#{$activeElementSelector}) {
1673
- & > div {
1674
- &[data-div-type="wrapper__layer"] {
1675
- --_sf-vt-zz: visible;
1676
- --_sf-op-zz: 1;
1677
- }
1678
- }
1679
- }
1680
- }
1670
+ // &[data-view-state="full"] {
1671
+ // width: auto;
1672
+ // margin: 0;
1673
+ // justify-self: stretch !important;
1674
+ // align-self: stretch !important;
1675
+ // cursor: auto;
1676
+ // &:is(#{$activeElementSelector}) {
1677
+ // & > div {
1678
+ // &[data-div-type="wrapper__layer"] {
1679
+ // --_sf-vt-zz: visible;
1680
+ // --_sf-op-zz: 1;
1681
+ // }
1682
+ // }
1683
+ // }
1684
+ // }
1681
1685
  }
1682
1686
  }
1683
1687