@sc-360-v2/storefront-cms-library 0.4.0 → 0.4.2

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.
@@ -481,6 +481,450 @@ $resizeActive: '[data-cms-element-resizer="true"]';
481
481
  // padding: 1rem;
482
482
 
483
483
  .cart_item_wrapper {
484
+ .cart-item-attr-grid {
485
+ display: grid;
486
+ grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
487
+ gap: 1rem;
488
+ margin-top: 24px;
489
+ .attriTitle {
490
+ font-weight: 600;
491
+ font-size: 14px;
492
+ line-height: 20px;
493
+ color: #101828;
494
+ padding-bottom: 6px;
495
+ }
496
+ .attriDes {
497
+ font-weight: 400;
498
+ font-size: 14px;
499
+ line-height: 20px;
500
+ }
501
+ .attribute {
502
+ width: 100%;
503
+ display: flex;
504
+ flex-direction: column;
505
+ gap: 6px;
506
+ border: 1px solid var(--_gray-100);
507
+ border-radius: 4px;
508
+ padding: 10px;
509
+ .label {
510
+ display: block;
511
+ color: var(--_gray-700);
512
+ font-weight: 500;
513
+ font-size: 14px;
514
+ line-height: 20px;
515
+ &.required::after {
516
+ content: " *";
517
+ color: var(--_error-500);
518
+ }
519
+ }
520
+ .attribute_field {
521
+ width: 100% !important;
522
+ input {
523
+ background-color: var(--_base-white);
524
+ padding: 8px 12px;
525
+ border: 1px solid var(--_gray-300);
526
+ border-radius: 4px;
527
+ transition:
528
+ background-color 0.2s,
529
+ color 0.2s,
530
+ border-color 0.2s,
531
+ box-shadow 0.2s;
532
+ &::placeholder {
533
+ color: var(--_gray-500);
534
+ font-weight: 500;
535
+ font-size: 14px;
536
+ line-height: 24px;
537
+ }
538
+ &:focus {
539
+ outline: 0 none;
540
+ outline-offset: 0;
541
+ border-radius: 4px;
542
+ box-shadow:
543
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
544
+ 0px 0px 0px 2px var(--primary-100);
545
+ border: 1px solid var(--primary-300);
546
+ }
547
+ }
548
+ .date_picker_container {
549
+ position: relative;
550
+ .svg_icon {
551
+ position: absolute;
552
+ left: 8px;
553
+ top: 9px;
554
+ }
555
+ .react-datepicker-wrapper {
556
+ .react-datepicker__input-container {
557
+ input {
558
+ padding-left: 32px !important;
559
+ }
560
+ }
561
+ }
562
+ }
563
+ .color-picker-container {
564
+ .custom_hex_color_picker_div {
565
+ margin-top: 8px;
566
+ label {
567
+ display: inline-block;
568
+ margin-bottom: 4px;
569
+ color: var(--_gray-700);
570
+ font-size: 14px;
571
+ font-weight: 500;
572
+ line-height: 20px;
573
+ }
574
+ }
575
+ .custom__div {
576
+ display: grid;
577
+ grid-template-columns: repeat(4, 1fr);
578
+ gap: 0;
579
+
580
+ label {
581
+ display: flex;
582
+ flex-direction: column;
583
+ color: var(--_gray-700);
584
+ font-size: 14px;
585
+ font-weight: 500;
586
+
587
+ input {
588
+ border: none;
589
+ border: 1px solid var(--_gray-300);
590
+ padding: 8px;
591
+ outline: none;
592
+ text-align: center;
593
+ border-radius: 0;
594
+ transition:
595
+ background-color 0.2s,
596
+ color 0.2s,
597
+ border-color 0.2s,
598
+ box-shadow 0.2s;
599
+
600
+ &:focus {
601
+ outline: 0 none;
602
+ outline-offset: 0;
603
+ border-radius: 4px;
604
+ box-shadow:
605
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
606
+ 0px 0px 0px 2px var(--primary-100);
607
+ border: 1px solid var(--primary-300);
608
+ }
609
+ }
610
+
611
+ &:first-child input {
612
+ border-right: none;
613
+ border-top-left-radius: 4px;
614
+ border-bottom-left-radius: 4px;
615
+ }
616
+
617
+ &:last-child input {
618
+ border-left: none;
619
+ border-top-right-radius: 4px;
620
+ border-bottom-right-radius: 4px;
621
+ }
622
+
623
+ &:not(:first-child):not(:last-child) input {
624
+ border-radius: 0;
625
+ }
626
+ }
627
+ }
628
+ }
629
+ .attribute_form_field {
630
+ background-color: var(--_base-white);
631
+ padding: 8px 12px;
632
+ border: 1px solid var(--_gray-300);
633
+ border-radius: 4px;
634
+ height: 40px;
635
+ }
636
+ .attribute_text_area_field {
637
+ width: 100% !important;
638
+ transition:
639
+ background-color 0.2s,
640
+ color 0.2s,
641
+ border-color 0.2s,
642
+ box-shadow 0.2s;
643
+ &:focus {
644
+ outline: 0 none;
645
+ outline-offset: 0;
646
+ border-radius: 4px;
647
+ box-shadow:
648
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
649
+ 0px 0px 0px 2px var(--primary-100);
650
+ border: 1px solid var(--primary-300);
651
+ }
652
+ }
653
+ .dropdown-input-section {
654
+ height: 40px;
655
+ background-color: var(--_base-white);
656
+ padding: 8px 12px;
657
+ border: 1px solid var(--_gray-300);
658
+ border-radius: 4px;
659
+ cursor: pointer;
660
+ transition:
661
+ background-color 0.2s,
662
+ color 0.2s,
663
+ border-color 0.2s,
664
+ box-shadow 0.2s;
665
+ &::placeholder {
666
+ color: var(--_gray-500);
667
+ font-weight: 500;
668
+ font-size: 14px;
669
+ line-height: 24px;
670
+ }
671
+ &:focus-within {
672
+ outline: 0 none;
673
+ outline-offset: 0;
674
+ border-radius: 4px;
675
+ box-shadow:
676
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
677
+ 0px 0px 0px 2px var(--primary-100);
678
+ border: 1px solid var(--primary-300);
679
+ }
680
+ input {
681
+ border: none;
682
+ padding: 0;
683
+ &:focus {
684
+ box-shadow: none;
685
+ border: none;
686
+ }
687
+ }
688
+ .dropdown__icon {
689
+ .icon {
690
+ transition: rotate 0.4s ease-in-out;
691
+ }
692
+ }
693
+ }
694
+ &:focus {
695
+ border-color: var(--_primary-400);
696
+ outline: 2px solid var(--_primary-200);
697
+ }
698
+ &.error {
699
+ border-color: #dc2626;
700
+ background-color: #fef2f2;
701
+ }
702
+ .react-datepicker-wrapper {
703
+ width: 100%;
704
+ .react-datepicker__close-icon::after {
705
+ background-color: transparent;
706
+ font-size: 25px;
707
+ color: var(--_gray-500);
708
+ }
709
+ }
710
+ .custom-upload {
711
+ display: flex;
712
+ // flex-direction: column;
713
+ align-items: center;
714
+ align-self: stretch;
715
+ position: relative;
716
+ padding: 16px;
717
+ gap: 12px;
718
+ background-color: var(--_base-white);
719
+ border: 1px solid var(--_gray-300);
720
+ border-radius: 4px;
721
+ .clear_upload_icon {
722
+ // display: none;
723
+ width: 30px;
724
+ height: 30px;
725
+ // position: absolute;
726
+ // right: 0;
727
+ background: #fff;
728
+ border-radius: 50%;
729
+ margin-top: 3px;
730
+ padding: 3px;
731
+ .svg_icon {
732
+ // position: absolute;
733
+ // top: 4px;
734
+ // left: 5px;
735
+ svg {
736
+ width: 20px;
737
+ height: 20px;
738
+ }
739
+ }
740
+ &:hover {
741
+ .svg_icon {
742
+ svg {
743
+ path {
744
+ stroke: var(--_error-500);
745
+ }
746
+ }
747
+ }
748
+ }
749
+ }
750
+ .preview_image {
751
+ display: flex;
752
+ align-items: center;
753
+ gap: 8px;
754
+ img {
755
+ width: 40px;
756
+ height: 40px;
757
+
758
+ border-radius: 50%;
759
+ }
760
+ p {
761
+ color: var(--_gray-700);
762
+ font-size: 14px;
763
+ font-weight: 400;
764
+ line-height: 150%;
765
+ display: -webkit-box;
766
+ -webkit-box-orient: vertical;
767
+ -webkit-line-clamp: 1;
768
+ overflow: hidden;
769
+ }
770
+ }
771
+ &:hover {
772
+ .clear_upload_icon {
773
+ display: block;
774
+ }
775
+ }
776
+ .file_upload_text {
777
+ text-align: center;
778
+ display: flex;
779
+ flex-direction: column;
780
+ gap: 4px;
781
+ p {
782
+ strong {
783
+ color: var(--_primary-400);
784
+ font-size: 14px;
785
+ font-weight: 600;
786
+ line-height: 150%;
787
+ }
788
+ }
789
+ span {
790
+ color: var(--_gray-600);
791
+ font-size: 12px;
792
+ font-weight: 400;
793
+ line-height: 150%;
794
+ }
795
+ }
796
+ .uploadicon {
797
+ // padding: 10px;
798
+ // background: #f2f4f7;
799
+ display: inline-block;
800
+ // border-radius: 50%;
801
+ // color: var(--_gray-600);
802
+ }
803
+ .preview_file {
804
+ display: flex;
805
+ align-items: center;
806
+ gap: 8px;
807
+ .file_extension {
808
+ color: var(--_gray-700);
809
+ font-size: 14px;
810
+ font-weight: 400;
811
+ line-height: 150%;
812
+ display: -webkit-box;
813
+ -webkit-box-orient: vertical;
814
+ -webkit-line-clamp: 1;
815
+ overflow: hidden;
816
+ }
817
+ }
818
+ }
819
+ .has-file {
820
+ justify-content: space-between;
821
+ }
822
+ }
823
+
824
+ .input_percent_a {
825
+ position: relative;
826
+ .svg_icon {
827
+ position: absolute;
828
+ top: 12px;
829
+ right: 10px;
830
+ background-color: var(--_base-white);
831
+ }
832
+ }
833
+ // toggle styles
834
+ .input_toggle_switch_container {
835
+ display: flex;
836
+ gap: 10px;
837
+ padding: 16px;
838
+ .input_toggle_switch {
839
+ position: relative;
840
+ display: inline-block;
841
+ width: 68px;
842
+ height: 24px;
843
+
844
+ input[type="checkbox"] {
845
+ opacity: 0;
846
+ width: 0;
847
+ height: 0;
848
+
849
+ &:checked + .slider {
850
+ background-color: var(--_primary-700);
851
+
852
+ &::before {
853
+ transform: translateX(17px);
854
+ }
855
+ }
856
+ }
857
+
858
+ .slider {
859
+ position: absolute;
860
+ cursor: pointer;
861
+ top: 0;
862
+ left: 0;
863
+ right: 0;
864
+ bottom: 0;
865
+ background-color: #ccc;
866
+ transition: 0.4s;
867
+ border-radius: 28px;
868
+
869
+ &::before {
870
+ position: absolute;
871
+ content: "";
872
+ height: 20px;
873
+ width: 20px;
874
+ left: 3px;
875
+ bottom: 2px;
876
+ background-color: white;
877
+ border-radius: 50%;
878
+ transition: 0.4s;
879
+ }
880
+ }
881
+ }
882
+ .input_toggle_switch_text {
883
+ gap: 2px;
884
+ display: flex;
885
+ flex-direction: column;
886
+ .checkbox_title {
887
+ color: var(--_gray-700);
888
+ font-size: 16px;
889
+ font-weight: 500;
890
+ line-height: 24px;
891
+ }
892
+ .checkbox_des {
893
+ color: var(--_gray-600);
894
+ font-size: 16px;
895
+ font-weight: 400;
896
+ line-height: 24px;
897
+ }
898
+ }
899
+ &.active {
900
+ border: 1px solid var(--_primary-500);
901
+ border-radius: 4px;
902
+ background: var(--_primary-25);
903
+ }
904
+ }
905
+ }
906
+ .error-text {
907
+ font-size: 12px;
908
+ color: var(--_error-500);
909
+ }
910
+ .text_area_attribute {
911
+ width: 100%;
912
+ .input_textarea_a {
913
+ width: 100%;
914
+ }
915
+ }
916
+ .cart_item_attr_disabled {
917
+ pointer-events: none;
918
+
919
+ opacity: 0.5;
920
+ cursor: auto;
921
+ }
922
+
923
+ // .attr-grid-item input {
924
+ // border: 1px solid#000 !important;
925
+ // height: 40px;
926
+ // }
927
+ }
484
928
  border-radius: 4px;
485
929
  box-shadow: var(--_ctm-dn-ct-im-ss-sw-ae) var(--_ctm-dn-ct-im-ss-sw-br)
486
930
  var(--_ctm-dn-ct-im-ss-sw-sd) var(--_ctm-dn-ct-im-ss-sw-cr);
@@ -880,7 +1324,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
880
1324
  flex-direction: column;
881
1325
  align-items: flex-start;
882
1326
  gap: 6px;
883
- width: 120px;
1327
+ width: 113px;
884
1328
 
885
1329
  .product_qty_container {
886
1330
  display: flex;
@@ -903,19 +1347,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
903
1347
  line-height: 24px;
904
1348
  }
905
1349
  }
906
-
907
- .product_qty_number {
1350
+ .product_qty_input_container {
1351
+ height: 40px;
908
1352
  display: flex;
909
- padding: 8px 12px;
910
- align-items: center;
911
- gap: 8px;
912
- flex: 1 0 0;
913
- align-self: stretch;
1353
+ position: relative;
1354
+ max-width: 55px;
914
1355
  border-radius: 0px 4px 4px 0px;
915
1356
  background: #fff;
916
1357
  border-left: 1px solid #d0d5dd;
917
- max-width: 80px;
1358
+ padding: 8px 12px;
1359
+ .svg_icon {
1360
+ position: absolute;
1361
+ top: 8px;
1362
+ right: 0px;
1363
+ g {
1364
+ rect {
1365
+ fill: var(--_gray-500);
1366
+ width: 10px;
1367
+ height: 10px;
1368
+ }
1369
+ }
1370
+ }
1371
+ }
1372
+ .product_qty_number {
1373
+ // display: flex;
1374
+ // padding: 8px 12px;
1375
+ align-items: center;
1376
+ // gap: 8px;
1377
+ // flex: 1 0 0;
1378
+ // align-self: stretch;
1379
+ // border-radius: 0px 4px 4px 0px;
1380
+ // background: #fff;
1381
+ // border-left: 1px solid #d0d5dd;
1382
+ // max-width: 80px;
918
1383
  text-align: center;
1384
+ width: 75%;
919
1385
  &::-webkit-outer-spin-button,
920
1386
  &::-webkit-inner-spin-button {
921
1387
  -webkit-appearance: none;
@@ -1776,20 +2242,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1776
2242
  // }
1777
2243
  // }
1778
2244
 
1779
- .cart-item-attr-grid {
1780
- display: grid;
1781
- grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
1782
- gap: 1rem;
1783
- margin-top: 24px;
1784
-
1785
- .attr-grid-item {
1786
- padding: 1rem;
1787
- border: 1px solid var(--_gray-200);
1788
- border-radius: 6px;
1789
- background-color: var(--_base-white);
1790
- }
1791
- }
1792
-
1793
2245
  // cart wrapper styles
1794
2246
 
1795
2247
  .wrapper {
@@ -1032,6 +1032,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1032
1032
  --_ctm-mob-dn-pt-wt-pt-pe-pg,
1033
1033
  var(--_ctm-tab-dn-pt-wt-pt-pe-pg, var(--_ctm-dn-pt-wt-pt-pe-pg))
1034
1034
  );
1035
+ margin-top: 2px;
1035
1036
  }
1036
1037
  .cart_summary_product_text {
1037
1038
  font-family: var(
@@ -0,0 +1,53 @@
1
+ .error_container {
2
+ display: flex;
3
+ align-items: center;
4
+ height: 100%;
5
+ width: 100%;
6
+ .error_section {
7
+ display: flex;
8
+ align-items: center;
9
+ gap: 48px;
10
+ .error_img {
11
+ width: 150px;
12
+ height: 150px;
13
+ object-fit: contain;
14
+ background-color: var(--_gray-100);
15
+ border-radius: 16px;
16
+ }
17
+ .error_text {
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 16px;
21
+ h5 {
22
+ font-size: 16px;
23
+ color: var(--_primary-500);
24
+ font-weight: normal;
25
+ }
26
+ .error_title {
27
+ color: var(--_gray-900);
28
+ font-size: 64px;
29
+ font-weight: 800;
30
+ line-height: 125%;
31
+ }
32
+ .error_subtitle {
33
+ color: var(--_gray-900);
34
+ font-size: 36px;
35
+ font-weight: 400;
36
+ line-height: 125%;
37
+ }
38
+ .error_description {
39
+ color: var(--_gray-900);
40
+ font-size: 16px;
41
+ font-weight: 500;
42
+ line-height: 24px;
43
+ }
44
+ .error_button {
45
+ padding: 12px;
46
+ border: 1px solid var(--_gray-200);
47
+ border-radius: 4px;
48
+ background-color: var(--_base-white);
49
+ margin-top: 36px;
50
+ }
51
+ }
52
+ }
53
+ }