apirocket 0.3.2 → 0.4.1

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/ecommerce.css +878 -632
  2. package/dist/ecommerce.js +2 -2
  3. package/dist/ecommerce.js.map +1 -1
  4. package/package.json +1 -1
package/dist/ecommerce.css CHANGED
@@ -1,116 +1,4 @@
1
- .apirocket-summary {}
2
-
3
- .apirocket-summary-top {
4
- margin-top: 56px;
5
- margin-bottom: 32px;
6
- }
7
-
8
- .apirocket-summary-header {
9
- display: flex;
10
- justify-content: flex-start;
11
- align-items: center;
12
- margin-bottom: 32px;
13
- }
14
-
15
- .apirocket-summary-header-icon {
16
- flex: 0 1;
17
- margin-right: 16px;
18
- }
19
-
20
- .apirocket-summary-header-content {}
21
-
22
- .apirocket-summary-header-title {
23
- font-size: 24px;
24
- font-weight: bold;
25
- line-height: 1.2;
26
- color: #404040;
27
- margin-bottom: 4px;
28
- }
29
-
30
- .apirocket-summary-header-subtitle {
31
- font-size: 18px;
32
- font-weight: normal;
33
- line-height: 1.2;
34
- color: #737373;
35
- }
36
-
37
- .apirocket-summary-section {
38
- margin-top: 16px;
39
- border: 1px solid #d9d9d9;
40
- border-radius: 4px;
41
- padding: 24px;
42
- }
43
-
44
- .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
45
- .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
46
-
47
- .apirocket-summary-section-title {
48
- font-size: 18px;
49
- font-weight: bold;
50
- line-height: 1.2;
51
- color: #404040;
52
- margin-bottom: 24px;
53
- }
54
-
55
- .apirocket-summary-section-subtitle {
56
- font-size: 16px;
57
- font-weight: bold;
58
- line-height: 1;
59
- color: #404040;
60
- margin-bottom: 16px;
61
- }
62
-
63
- .apirocket-summary-section-text {
64
- font-size: 14px;
65
- font-weight: normal;
66
- line-height: 18px;
67
- color: #404040;
68
- }
69
-
70
- .apirocket-summary-help {
71
- display: flex;
72
- justify-content: flex-start;
73
- align-items: center;
74
- }
75
-
76
- .apirocket-summary-help-icon {
77
- flex: 0 1;
78
- padding-right: 12px;
79
- }
80
-
81
- .apirocket-summary-help-content {
82
- font-size: 14px;
83
- font-weight: normal;
84
- line-height: 1.2;
85
- color: #404040;
86
- }
87
-
88
- .apirocket-summary-help-content a {
89
- display: block;
90
- color: #737373;
91
- }
92
-
93
- @media (max-width: 1000px) {
94
- .apirocket-summary-top { display: none; }
95
- .apirocket-summary-header { margin-top: 32px; }
96
- }
97
-
98
- @media (max-width: 720px) {
99
- .apirocket-summary-section-subtitle { margin-top: 24px; }
100
- .apirocket-summary-header {
101
- flex-direction: column;
102
- align-items: center;
103
- text-align: center;
104
- }
105
- .apirocket-summary-header-icon {
106
- margin-right: 0px;
107
- margin-bottom: 16px;
108
- }
109
- .apirocket-summary-header-title {
110
- font-size: 28px;
111
- margin-bottom: 8px;
112
- }
113
- }.apirocket-checkout * { box-sizing: content-box; }
1
+ .apirocket-checkout * { box-sizing: content-box; }
114
2
 
115
3
  .apirocket-checkout {
116
4
  display: block;
@@ -646,6 +534,12 @@
646
534
  .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
647
535
  .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
648
536
 
537
+ .apirocket-checkout-text-xs { font-size: 12px !important; }
538
+ .apirocket-checkout-text-md { font-size: 14px !important; }
539
+ .apirocket-checkout-text-lg { font-size: 16px !important; }
540
+ .apirocket-checkout-text-xl { font-size: 18px !important; }
541
+ .apirocket-checkout-text-xxl { font-size: 20px !important; }
542
+
649
543
  /* Responsive */
650
544
 
651
545
  @media (max-width: 1000px) {
@@ -792,704 +686,766 @@
792
686
  }
793
687
 
794
688
 
795
- .apirocket-modal *,
796
- .apirocket-modal *::before,
797
- .apirocket-modal *::after { box-sizing: border-box; }
689
+ :root {
690
+ --cart-width: 540px;
691
+ --cart-background-color: #fff;
692
+ --cart-padding: 32px;
693
+ --cart-font-family: Arial, Helvetica, sans-serif;
798
694
 
799
- .apirocket-modal {
800
- display: flex;
801
- justify-content: center;
802
- align-items: flex-start;
695
+ --cart-header-background-color: #f5f5f5;
696
+ --cart-header-border-color: #f5f5f5;
697
+ --cart-header-border-width: 1px;
698
+ --cart-header-text-font-size: 18px;
699
+ --cart-header-text-font-weight: normal;
700
+ --cart-header-text-font-color: #404040;
701
+ --cart-header-text-close-icon-color: #a3a3a3;
702
+ --cart-header-text-close-icon-size: 24px;
703
+
704
+ --cart-footer-background-color: #fff;
705
+ --cart-footer-border-color: #e5e5e5;
706
+ --cart-footer-border-width: 1px;
707
+ --cart-footer-text-font-size: 16px;
708
+ --cart-footer-text-font-weight: lighter;
709
+ --cart-footer-text-font-color: #404040;
710
+ --cart-footer-total-font-size: 18px;
711
+ --cart-footer-total-font-weight: bold;
712
+ --cart-footer-total-font-color: #000;
713
+
714
+ --cart-item-border-color: #e5e5e5;
715
+ --cart-item-border-width: 1px;
716
+ --cart-item-padding: 32px;
717
+ --cart-item-label-font-size: 14px;
718
+ --cart-item-label-font-weight: lighter;
719
+ --cart-item-label-font-color: #737373;
720
+ --cart-item-image-display: inherit;
721
+ --cart-item-image-width: 100px;
722
+ --cart-item-image-width-fullscreen: 150px;
723
+ --cart-item-name-font-size: 18px;
724
+ --cart-item-name-font-weight: bold;
725
+ --cart-item-name-font-color: #000;
726
+ --cart-item-description-font-size: 14px;
727
+ --cart-item-description-font-weight: lighter;
728
+ --cart-item-description-font-color: #000;
729
+ --cart-item-delete-icon-color: #404040;
730
+ --cart-item-delete-icon-color-hover: #000;
731
+ --cart-item-delete-icon-size: 18px;
732
+ --cart-item-form-border-color: #e5e5e5;
733
+ --cart-item-form-border-color-hover: #000;
734
+ --cart-item-form-border-width: 1px;
735
+ --cart-item-form-text-size: 14px;
736
+ --cart-item-form-text-weight: normal;
737
+ --cart-item-form-text-color: #000;
738
+ --cart-item-quantity-icon-color: #737373;
739
+ --cart-item-quantity-icon-background-color: transparent;
740
+ --cart-item-quantity-icon-size: 16px;
741
+ --cart-item-price-font-size: 16px;
742
+ --cart-item-price-font-weight: bold;
743
+ --cart-item-price-font-color: #404040;
744
+
745
+ --cart-button-font-size: 16px;
746
+ --cart-button-font-weight: normal;
747
+ --cart-button-font-color: #737373;
748
+ --cart-button-font-color-hover: #404040;
749
+ --cart-button-border-color: #e5e5e5;
750
+ --cart-button-border-color-hover: #404040;
751
+ --cart-button-border-radius: 4px;
752
+ --cart-button-background-color: transparent;
753
+ --cart-button-background-color-hover: transparent;
754
+ --cart-button-padding-x: 16px;
755
+ --cart-button-padding-y: 16px;
756
+
757
+ --cart-button-primary-text-color: #fff;
758
+ --cart-button-primary-text-color-hover: #fff;
759
+ --cart-button-primary-border-color: #1d4ed8;
760
+ --cart-button-primary-border-color-hover: #0d59f4;
761
+ --cart-button-primary-background-color: #1d4ed8;
762
+ --cart-button-primary-background-color-hover: #0d59f4;
763
+ /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
764
+ }
765
+
766
+ .apirocket-cart * { box-sizing: content-box; }
767
+
768
+ .apirocket-cart {
803
769
  position: fixed;
804
- z-index: 10001;
770
+ z-index: 10000;
805
771
  right: 0;
806
772
  top: 0;
807
773
  overflow: hidden;
808
- overflow-y: auto;
809
- width: 100%;
774
+ width: var(--cart-width, 540px);
810
775
  height: 100vh;
776
+ box-shadow: 1px 20px 8px rgba(0,0,0,.1);
811
777
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
812
- background-color: #f5f5f5;
778
+ background-color: var(--cart-background-color, #fff);
813
779
  }
814
780
 
815
- .apirocket-modal-nav {
816
- position: absolute;
781
+ .apirocket-cart-content {
817
782
  display: flex;
818
- align-items: center;
819
- width: 90%;
820
- max-width: 1100px;
821
- height: 96px;
783
+ flex-direction: column;
784
+ height: 100%;
785
+ background-color: var(--cart-background-color, #fff);
822
786
  }
823
787
 
824
- .apirocket-modal-nav-button {
788
+ .apirocket-cart-header {
825
789
  display: flex;
790
+ flex: 0 0 96px;
791
+ align-items: center;
792
+ justify-content: space-between;
793
+ padding: 0px var(--cart-padding);
794
+ background-color: var(--cart-header-background-color, #f5f5f5);
795
+ border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
796
+ }
797
+
798
+ .apirocket-cart-header-title {
799
+ font-size: var(--cart-header-text-font-size, 18px);
800
+ font-weight: var(--cart-header-text-font-weight, normal);
801
+ color: var(--cart-header-text-font-color, #404040)
802
+ }
803
+
804
+ .apirocket-cart-header-close-icon {
805
+ height: var(--cart-header-text-close-icon-size, 24px);
806
+ width: var(--cart-header-text-close-icon-size, 24px);
807
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
808
+ cursor: pointer;
809
+ }
810
+
811
+ .apirocket-cart-header-continue {
812
+ display: none;
826
813
  align-items: center;
827
814
  text-align: left;
828
815
  color: #737373;
829
816
  font-size: 16px;
830
817
  font-weight: normal;
831
- cursor: pointer;
818
+ cursor: pointer;
832
819
  }
833
820
 
834
- .apirocket-modal-nav-button svg { margin-right: 16px; }
821
+ .apirocket-cart-header-login {
822
+ display: none;
823
+ align-items: center;
824
+ text-align: right;
825
+ color: #737373;
826
+ font-size: 16px;
827
+ font-weight: normal;
828
+ cursor: pointer;
829
+ }
835
830
 
836
- .apirocket-modal-content {
837
- display: flex;
838
- flex-flow: column;
839
- width: 480px;
840
- height: auto;
841
- padding: 32px;
842
- background-color: #fff;
843
- margin-top: 96px;
844
- margin-bottom: 32px;
845
- }
831
+ .apirocket-cart-header-login svg,
832
+ .apirocket-cart-header-continue svg { margin-right: 16px; }
846
833
 
847
- .apirocket-modal-header {
848
- position: relative;
849
- padding-bottom: 32px;
834
+ .apirocket-cart-body {
835
+ flex: 1 1 auto;
836
+ padding: 0px;
837
+ background: var(--cart-background-color, #fff);
838
+ overflow-y: auto;
850
839
  }
851
840
 
852
- .apirocket-modal-title {
841
+ .apirocket-cart-body-message {
853
842
  font-size: 18px;
854
- font-weight: bold;
855
- line-height: 1;
856
- color: #404040;
857
- margin-bottom: 8px;
843
+ font-weight: var(--cart-item-description-font-weight, lighter);
844
+ color: #666;
845
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
846
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
858
847
  }
859
848
 
860
- .apirocket-modal-subtitle {
861
- font-size: 14px;
862
- font-weight: normal;
863
- line-height: 16px;
864
- color: #737373;
849
+ .apirocket-cart-footer {
850
+ flex: 0 0 auto;
851
+ padding: var(--cart-padding, 32px);
852
+ background-color: var(--cart-footer-background-color, transparent);
853
+ border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
854
+ font-size: var(--cart-footer-text-font-size, 16px);
855
+ font-weight: var(--cart-footer-text-font-weight, lighter);
856
+ color: var(--cart-footer-text-font-color, #737373);
865
857
  }
866
858
 
867
- .apirocket-modal-close {
868
- position: absolute;
869
- right: -16px;
870
- top: -16px;
859
+ .apirocket-cart-footer-total {
860
+ font-size: var(--cart-footer-total-font-size, 18px);
861
+ font-weight: var(--cart-footer-total-font-weight, bold);
862
+ color: var(--cart-footer-total-font-color, #000);
871
863
  }
872
864
 
873
- .apirocket-modal-close-icon {
874
- height: var(--cart-header-text-close-icon-size, 24px);
875
- width: var(--cart-header-text-close-icon-size, 24px);
876
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
877
- cursor: pointer;
865
+ .apirocket-cart-row {
866
+ display: flex;
867
+ justify-content: space-between;
868
+ align-items: center;
878
869
  }
879
870
 
880
- .apirocket-modal-body-text-password {
881
- color: #404040;
882
- font-size: 14px;
883
- font-weight: normal;
884
- line-height: 16px;
885
- margin-top: -8px;text-align: right;
886
- cursor: pointer;
871
+ .apirocket-cart-col {
872
+ flex: 1 1 auto;
873
+ margin-bottom: 16px;
887
874
  }
888
875
 
889
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
876
+ .apirocket-cart-item {
877
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
878
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
879
+ }
890
880
 
891
- .apirocket-modal-footer-text {
892
- color: #a3a3a3;
893
- font-size: 14px;
894
- font-weight: normal;
895
- line-height: 16px;
896
- text-align: center;
897
- margin-top: 16px;
881
+ .apirocket-cart-item:last-child {
882
+ border-bottom: none;
883
+ margin-bottom: var(--cart-padding, 32px);
898
884
  }
899
885
 
900
- .apirocket-modal-footer-text span {
901
- color: #404040;
902
- cursor: pointer;
886
+ .apirocket-cart-item-row {
887
+ display: flex;
888
+ justify-content: space-between;
889
+ align-items: center;
903
890
  }
904
891
 
905
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
892
+ .apirocket-cart-item-col-image {
893
+ display: var(--cart-item-image-display, inherit);
894
+ flex: 0 0 var(--cart-item-image-width, 100px);
895
+ align-self: flex-start;
896
+ margin-right: 16px;
897
+ }
906
898
 
899
+ .apirocket-cart-item-col-image img {
900
+ display: block;
901
+ max-width: 100%;
902
+ }
907
903
 
908
- .apirocket-modal-body {}
904
+ .apirocket-cart-item-col-description {
905
+ align-self: flex-start;
906
+ padding-right: 32px;
907
+ flex-grow: 1;
908
+ }
909
909
 
910
- .apirocket-modal-footer {
911
- padding-top: 32px;
910
+ .apirocket-cart-item-col-description-name {
911
+ font-size: var(--cart-item-name-font-size, 18px);
912
+ font-weight: var(--cart-item-name-font-weight, bold);
913
+ color: var(--cart-item-name-font-color, #000);
912
914
  }
913
915
 
914
- .apirocket-modal-row {
915
- display: flex;
916
- justify-content: space-between;
917
- align-items: flex-start;
916
+ .apirocket-cart-item-col-description-text {
917
+ font-size: var(--cart-item-description-font-size, 14px);
918
+ font-weight: var(--cart-item-description-font-weight, lighter);
919
+ color: var(--cart-item-description-font-color, #000);
918
920
  }
919
921
 
920
- .apirocket-modal-row > * {
921
- flex: 1 1;
922
- margin-right: 16px;
922
+ .apirocket-cart-item-col-delete {
923
+ flex: 1 0 auto;
924
+ align-self: flex-start;
925
+ color: var(--cart-item-delete-icon-color, #404040);
926
+ width: var(--cart-item-delete-icon-size, 24px);
927
+ cursor: pointer;
928
+ text-align: center;
923
929
  }
924
930
 
925
- .apirocket-modal-row > *:last-child { margin-right: 0; }
931
+ .apirocket-cart-item-col-delete:hover {
932
+ color: var(--cart-item-delete-icon-color-hover, #000);
933
+ }
926
934
 
935
+ .apirocket-cart-item-col-delete svg {
936
+ width: var(--cart-item-delete-icon-size, 18px);
937
+ height: var(--cart-item-delete-icon-size, 18px);
938
+ }
927
939
 
928
- @media (max-width: 720px) {
929
- .apirocket-modal-row { display: block; }
930
- .apirocket-modal-row > * { margin-right: 0; }
940
+ .apirocket-cart-item-label {
941
+ font-size: var(--cart-item-label-font-size, 14px);
942
+ font-weight: var(--cart-item-label-font-weight, lighter);
943
+ color: var(--cart-item-label-font-color, #737373);
944
+ margin-bottom: 4px;
945
+ }
931
946
 
932
- .apirocket-modal-nav { display: none; }
947
+ .apirocket-cart-item-col-quantity {
948
+ margin-top: 16px;
949
+ }
933
950
 
934
- .apirocket-modal-content {
935
- width: 95%;
936
- margin-top: 32px;
937
- padding: 24px;
938
- }
951
+ .apirocket-cart-item-quantity-wrapper {
952
+ display: flex;
953
+ justify-content: space-between;
954
+ border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
955
+ min-width: 160px;
956
+ user-select: none;
957
+ transition-property: border-color;
958
+ transition-timing-function: ease;
959
+ transition-duration: 350ms;
960
+ }
939
961
 
940
- .apirocket-modal-close {
941
- right: -8px;
942
- top: -8px;
943
- }
962
+ .apirocket-cart-item-quantity-wrapper:hover {
963
+ border-color: var(--cart-item-form-border-color-hover, #000);
944
964
  }
945
965
 
946
- .apirocket-modal-messaje {
947
- margin-top: 32px;
948
- margin-bottom: 32px;
966
+ .apirocket-cart-item-quantity-number {
967
+ flex: 1 1 auto;
968
+ font-size: var(--cart-item-form-text-size, 14px);
969
+ font-weight: var(--cart-item-form-text-weight, normal);
970
+ color: var(--cart-item-form-text-color, #000);
971
+ padding: 16px;
972
+ line-height: 1;
949
973
  text-align: center;
950
974
  }
951
975
 
952
- .apirocket-modal-message-icon {
953
- display: inline-flex;
954
- justify-content: center;
976
+ .apirocket-cart-item-quantity-button {
977
+ display: flex;
955
978
  align-items: center;
956
- width: 48px;
957
- height: 48px;
958
- border-radius: 24px;
959
- margin: auto;
960
- margin-bottom: 32px;
979
+ background-color: var(--cart-item-quantity-icon-background-color, transparent);
980
+ padding: 0px 12px;
981
+ cursor: pointer;
961
982
  }
962
983
 
963
- .apirocket-modal-message-icon-ok {
964
- background-color: #d1fae5;
965
- color: #10b981;
984
+ .apirocket-cart-item-quantity-button svg {
985
+ color: var(--cart-item-quantity-icon-color, #737373);
986
+ width: var(--cart-item-quantity-icon-size, 16px);
987
+ height: var(--cart-item-quantity-icon-size, 16px);
966
988
  }
967
989
 
968
- .apirocket-modal-message-title {
969
- font-size: 18px;
970
- font-weight: bold;
971
- line-height: 1;
972
- text-align: center;
973
- color: #404040;
974
- margin-bottom: 16px;
990
+ .apirocket-cart-item-col-price {
991
+ margin-top: 36px;
992
+ font-size: var(--cart-item-price-font-size, 16px);
993
+ font-weight: var(--cart-item-price-font-weight, normal);
994
+ color: var(--cart-item-price-font-color, #404040);
975
995
  }
976
996
 
977
- .apirocket-modal-message-text {
978
- color: #737373;
979
- font-size: 14px;
980
- font-weight: normal;
981
- text-align: center;
982
- line-height: 16px;
983
- margin-bottom: 32px;
984
- }:root {
985
- --cart-width: 540px;
986
- --cart-background-color: #fff;
987
- --cart-padding: 32px;
988
- --cart-font-family: Arial, Helvetica, sans-serif;
989
997
 
990
- --cart-header-background-color: #f5f5f5;
991
- --cart-header-border-color: #f5f5f5;
992
- --cart-header-border-width: 1px;
993
- --cart-header-text-font-size: 18px;
994
- --cart-header-text-font-weight: normal;
995
- --cart-header-text-font-color: #404040;
996
- --cart-header-text-close-icon-color: #a3a3a3;
997
- --cart-header-text-close-icon-size: 24px;
998
+ @media (min-width: 720px) {
998
999
 
999
- --cart-footer-background-color: #fff;
1000
- --cart-footer-border-color: #e5e5e5;
1001
- --cart-footer-border-width: 1px;
1002
- --cart-footer-text-font-size: 16px;
1003
- --cart-footer-text-font-weight: lighter;
1004
- --cart-footer-text-font-color: #404040;
1005
- --cart-footer-total-font-size: 18px;
1006
- --cart-footer-total-font-weight: bold;
1007
- --cart-footer-total-font-color: #000;
1000
+ .apirocket-cart.apirocket-cart-full-screen {
1001
+ width: 100%;
1002
+ overflow-y: auto;
1003
+ }
1008
1004
 
1009
- --cart-item-border-color: #e5e5e5;
1010
- --cart-item-border-width: 1px;
1011
- --cart-item-padding: 32px;
1012
- --cart-item-label-font-size: 14px;
1013
- --cart-item-label-font-weight: lighter;
1014
- --cart-item-label-font-color: #737373;
1015
- --cart-item-image-display: inherit;
1016
- --cart-item-image-width: 100px;
1017
- --cart-item-image-width-fullscreen: 150px;
1018
- --cart-item-name-font-size: 18px;
1019
- --cart-item-name-font-weight: bold;
1020
- --cart-item-name-font-color: #000;
1021
- --cart-item-description-font-size: 14px;
1022
- --cart-item-description-font-weight: lighter;
1023
- --cart-item-description-font-color: #000;
1024
- --cart-item-delete-icon-color: #404040;
1025
- --cart-item-delete-icon-color-hover: #000;
1026
- --cart-item-delete-icon-size: 18px;
1027
- --cart-item-form-border-color: #e5e5e5;
1028
- --cart-item-form-border-color-hover: #000;
1029
- --cart-item-form-border-width: 1px;
1030
- --cart-item-form-text-size: 14px;
1031
- --cart-item-form-text-weight: normal;
1032
- --cart-item-form-text-color: #000;
1033
- --cart-item-quantity-icon-color: #737373;
1034
- --cart-item-quantity-icon-background-color: transparent;
1035
- --cart-item-quantity-icon-size: 16px;
1036
- --cart-item-price-font-size: 16px;
1037
- --cart-item-price-font-weight: bold;
1038
- --cart-item-price-font-color: #404040;
1005
+ .apirocket-cart-full-screen .apirocket-cart-content {
1006
+ display: block;
1007
+ width: 90%;
1008
+ max-width: 980px;
1009
+ margin: 0 auto;
1010
+ }
1039
1011
 
1040
- --cart-button-font-size: 16px;
1041
- --cart-button-font-weight: normal;
1042
- --cart-button-font-color: #737373;
1043
- --cart-button-font-color-hover: #404040;
1044
- --cart-button-border-color: #e5e5e5;
1045
- --cart-button-border-color-hover: #404040;
1046
- --cart-button-border-radius: 4px;
1047
- --cart-button-background-color: transparent;
1048
- --cart-button-background-color-hover: transparent;
1049
- --cart-button-padding-x: 16px;
1050
- --cart-button-padding-y: 16px;
1012
+ .apirocket-cart-full-screen .apirocket-cart-header {
1013
+ background-color: #fff;
1014
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1015
+ padding: 40px 0px;
1016
+ }
1051
1017
 
1052
- --cart-button-primary-text-color: #fff;
1053
- --cart-button-primary-text-color-hover: #fff;
1054
- --cart-button-primary-border-color: #1d4ed8;
1055
- --cart-button-primary-border-color-hover: #0d59f4;
1056
- --cart-button-primary-background-color: #1d4ed8;
1057
- --cart-button-primary-background-color-hover: #0d59f4;
1058
- /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
1018
+ .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
1019
+ .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
1020
+
1021
+ .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
1022
+
1023
+ .apirocket-cart-full-screen .apirocket-cart-footer {
1024
+ width: 40%;
1025
+ border-top: none;
1026
+ margin-left: auto;
1027
+ margin-right: 0;
1028
+ padding: 0px;
1029
+ padding-top: 32px;
1030
+ padding-bottom: 96px;
1031
+ }
1032
+
1033
+ .apirocket-cart-full-screen .apirocket-cart-item {
1034
+ display: flex;
1035
+ position: relative;
1036
+ padding-left: 0;
1037
+ padding-right: 0;
1038
+ }
1039
+
1040
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
1041
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
1042
+
1043
+ .apirocket-cart-full-screen .apirocket-cart-item:last-child {
1044
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1045
+ }
1046
+
1047
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
1048
+ .apirocket-cart-full-screen .apirocket-cart-item-col-price {
1049
+ align-self: flex-end;
1050
+ line-height: 48px;
1051
+ }
1052
+
1053
+ .apirocket-cart-full-screen .apirocket-cart-item-col-image {
1054
+ flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
1055
+ }
1056
+
1057
+ .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
1058
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
1059
+
1060
+ .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
1061
+ position: absolute;
1062
+ right: 0px;
1063
+ top: var(--cart-item-padding, 32px);
1064
+ }
1059
1065
  }
1060
1066
 
1061
- .apirocket-cart * { box-sizing: content-box; }
1067
+ @media (min-width: 720px) and (max-width: 920px) {
1068
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
1069
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
1070
+ }
1062
1071
 
1063
- .apirocket-cart {
1072
+ /* Mobile version */
1073
+
1074
+ @media (max-width: 720px) {
1075
+
1076
+ .apirocket-cart {
1077
+ width: 100%;
1078
+ box-shadow: none;
1079
+ }
1080
+
1081
+ .apirocket-cart-header-continue { display: none; }
1082
+ .apirocket-cart-header-login { display: none; }
1083
+ }.apirocket-modal *,
1084
+ .apirocket-modal *::before,
1085
+ .apirocket-modal *::after { box-sizing: border-box; }
1086
+
1087
+ .apirocket-modal {
1088
+ display: flex;
1089
+ justify-content: center;
1090
+ align-items: flex-start;
1064
1091
  position: fixed;
1065
- z-index: 10000;
1092
+ z-index: 10001;
1066
1093
  right: 0;
1067
1094
  top: 0;
1068
1095
  overflow: hidden;
1069
- width: var(--cart-width, 540px);
1096
+ overflow-y: auto;
1097
+ width: 100%;
1070
1098
  height: 100vh;
1071
- box-shadow: 1px 20px 8px rgba(0,0,0,.1);
1072
1099
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1073
- background-color: var(--cart-background-color, #fff);
1100
+ background-color: #f5f5f5;
1074
1101
  }
1075
1102
 
1076
- .apirocket-cart-content {
1103
+ .apirocket-modal-nav {
1104
+ position: absolute;
1077
1105
  display: flex;
1078
- flex-direction: column;
1079
- height: 100%;
1080
- background-color: var(--cart-background-color, #fff);
1106
+ align-items: center;
1107
+ width: 90%;
1108
+ max-width: 1100px;
1109
+ height: 96px;
1081
1110
  }
1082
1111
 
1083
- .apirocket-cart-header {
1112
+ .apirocket-modal-nav-button {
1084
1113
  display: flex;
1085
- flex: 0 0 96px;
1086
1114
  align-items: center;
1087
- justify-content: space-between;
1088
- padding: 0px var(--cart-padding);
1089
- background-color: var(--cart-header-background-color, #f5f5f5);
1090
- border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
1115
+ text-align: left;
1116
+ color: #737373;
1117
+ font-size: 16px;
1118
+ font-weight: normal;
1119
+ cursor: pointer;
1091
1120
  }
1092
1121
 
1093
- .apirocket-cart-header-title {
1094
- font-size: var(--cart-header-text-font-size, 18px);
1095
- font-weight: var(--cart-header-text-font-weight, normal);
1096
- color: var(--cart-header-text-font-color, #404040)
1122
+ .apirocket-modal-nav-button svg { margin-right: 16px; }
1123
+
1124
+ .apirocket-modal-content {
1125
+ display: flex;
1126
+ flex-flow: column;
1127
+ width: 480px;
1128
+ height: auto;
1129
+ padding: 32px;
1130
+ background-color: #fff;
1131
+ margin-top: 96px;
1132
+ margin-bottom: 32px;
1097
1133
  }
1098
1134
 
1099
- .apirocket-cart-header-close-icon {
1135
+ .apirocket-modal-header {
1136
+ position: relative;
1137
+ padding-bottom: 32px;
1138
+ }
1139
+
1140
+ .apirocket-modal-title {
1141
+ font-size: 18px;
1142
+ font-weight: bold;
1143
+ line-height: 1;
1144
+ color: #404040;
1145
+ margin-bottom: 8px;
1146
+ }
1147
+
1148
+ .apirocket-modal-subtitle {
1149
+ font-size: 14px;
1150
+ font-weight: normal;
1151
+ line-height: 16px;
1152
+ color: #737373;
1153
+ }
1154
+
1155
+ .apirocket-modal-close {
1156
+ position: absolute;
1157
+ right: -16px;
1158
+ top: -16px;
1159
+ }
1160
+
1161
+ .apirocket-modal-close-icon {
1100
1162
  height: var(--cart-header-text-close-icon-size, 24px);
1101
1163
  width: var(--cart-header-text-close-icon-size, 24px);
1102
1164
  color: var(--cart-header-text-close-icon-color, #a3a3a3);
1103
1165
  cursor: pointer;
1104
1166
  }
1105
1167
 
1106
- .apirocket-cart-header-continue {
1107
- display: none;
1108
- align-items: center;
1109
- text-align: left;
1110
- color: #737373;
1111
- font-size: 16px;
1168
+ .apirocket-modal-body-text-password {
1169
+ color: #404040;
1170
+ font-size: 14px;
1112
1171
  font-weight: normal;
1172
+ line-height: 16px;
1173
+ margin-top: -8px;text-align: right;
1113
1174
  cursor: pointer;
1114
1175
  }
1115
1176
 
1116
- .apirocket-cart-header-login {
1117
- display: none;
1118
- align-items: center;
1119
- text-align: right;
1120
- color: #737373;
1121
- font-size: 16px;
1177
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
1178
+
1179
+ .apirocket-modal-footer-text {
1180
+ color: #a3a3a3;
1181
+ font-size: 14px;
1122
1182
  font-weight: normal;
1123
- cursor: pointer;
1183
+ line-height: 16px;
1184
+ text-align: center;
1185
+ margin-top: 16px;
1124
1186
  }
1125
1187
 
1126
- .apirocket-cart-header-login svg,
1127
- .apirocket-cart-header-continue svg { margin-right: 16px; }
1128
-
1129
- .apirocket-cart-body {
1130
- flex: 1 1 auto;
1131
- padding: 0px;
1132
- background: var(--cart-background-color, #fff);
1133
- overflow-y: auto;
1188
+ .apirocket-modal-footer-text span {
1189
+ color: #404040;
1190
+ cursor: pointer;
1134
1191
  }
1135
1192
 
1136
- .apirocket-cart-body-message {
1137
- font-size: 18px;
1138
- font-weight: var(--cart-item-description-font-weight, lighter);
1139
- color: #666;
1140
- padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
1141
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1142
- }
1193
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
1143
1194
 
1144
- .apirocket-cart-footer {
1145
- flex: 0 0 auto;
1146
- padding: var(--cart-padding, 32px);
1147
- background-color: var(--cart-footer-background-color, transparent);
1148
- border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
1149
- font-size: var(--cart-footer-text-font-size, 16px);
1150
- font-weight: var(--cart-footer-text-font-weight, lighter);
1151
- color: var(--cart-footer-text-font-color, #737373);
1152
- }
1153
1195
 
1154
- .apirocket-cart-footer-total {
1155
- font-size: var(--cart-footer-total-font-size, 18px);
1156
- font-weight: var(--cart-footer-total-font-weight, bold);
1157
- color: var(--cart-footer-total-font-color, #000);
1196
+ .apirocket-modal-body {}
1197
+
1198
+ .apirocket-modal-footer {
1199
+ padding-top: 32px;
1158
1200
  }
1159
1201
 
1160
- .apirocket-cart-row {
1202
+ .apirocket-modal-row {
1161
1203
  display: flex;
1162
1204
  justify-content: space-between;
1163
- align-items: center;
1164
- }
1165
-
1166
- .apirocket-cart-col {
1167
- flex: 1 1 auto;
1168
- margin-bottom: 16px;
1205
+ align-items: flex-start;
1169
1206
  }
1170
1207
 
1171
- .apirocket-cart-item {
1172
- padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
1173
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1208
+ .apirocket-modal-row > * {
1209
+ flex: 1 1;
1210
+ margin-right: 16px;
1174
1211
  }
1175
1212
 
1176
- .apirocket-cart-item:last-child {
1177
- border-bottom: none;
1178
- margin-bottom: var(--cart-padding, 32px);
1179
- }
1213
+ .apirocket-modal-row > *:last-child { margin-right: 0; }
1180
1214
 
1181
- .apirocket-cart-item-row {
1182
- display: flex;
1183
- justify-content: space-between;
1184
- align-items: center;
1185
- }
1186
1215
 
1187
- .apirocket-cart-item-col-image {
1188
- display: var(--cart-item-image-display, inherit);
1189
- flex: 0 0 var(--cart-item-image-width, 100px);
1190
- align-self: flex-start;
1191
- margin-right: 16px;
1192
- }
1193
-
1194
- .apirocket-cart-item-col-image img {
1195
- display: block;
1196
- max-width: 100%;
1197
- }
1216
+ @media (max-width: 720px) {
1217
+ .apirocket-modal-row { display: block; }
1218
+ .apirocket-modal-row > * { margin-right: 0; }
1198
1219
 
1199
- .apirocket-cart-item-col-description {
1200
- align-self: flex-start;
1201
- padding-right: 32px;
1202
- flex-grow: 1;
1203
- }
1220
+ .apirocket-modal-nav { display: none; }
1204
1221
 
1205
- .apirocket-cart-item-col-description-name {
1206
- font-size: var(--cart-item-name-font-size, 18px);
1207
- font-weight: var(--cart-item-name-font-weight, bold);
1208
- color: var(--cart-item-name-font-color, #000);
1209
- }
1222
+ .apirocket-modal-content {
1223
+ width: 95%;
1224
+ margin-top: 32px;
1225
+ padding: 24px;
1226
+ }
1210
1227
 
1211
- .apirocket-cart-item-col-description-text {
1212
- font-size: var(--cart-item-description-font-size, 14px);
1213
- font-weight: var(--cart-item-description-font-weight, lighter);
1214
- color: var(--cart-item-description-font-color, #000);
1228
+ .apirocket-modal-close {
1229
+ right: -8px;
1230
+ top: -8px;
1231
+ }
1215
1232
  }
1216
1233
 
1217
- .apirocket-cart-item-col-delete {
1218
- flex: 1 0 auto;
1219
- align-self: flex-start;
1220
- color: var(--cart-item-delete-icon-color, #404040);
1221
- width: var(--cart-item-delete-icon-size, 24px);
1222
- cursor: pointer;
1234
+ .apirocket-modal-messaje {
1235
+ margin-top: 32px;
1236
+ margin-bottom: 32px;
1223
1237
  text-align: center;
1224
1238
  }
1225
1239
 
1226
- .apirocket-cart-item-col-delete:hover {
1227
- color: var(--cart-item-delete-icon-color-hover, #000);
1240
+ .apirocket-modal-message-icon {
1241
+ display: inline-flex;
1242
+ justify-content: center;
1243
+ align-items: center;
1244
+ width: 48px;
1245
+ height: 48px;
1246
+ border-radius: 24px;
1247
+ margin: auto;
1248
+ margin-bottom: 32px;
1228
1249
  }
1229
1250
 
1230
- .apirocket-cart-item-col-delete svg {
1231
- width: var(--cart-item-delete-icon-size, 18px);
1232
- height: var(--cart-item-delete-icon-size, 18px);
1251
+ .apirocket-modal-message-icon-ok {
1252
+ background-color: #d1fae5;
1253
+ color: #10b981;
1233
1254
  }
1234
1255
 
1235
- .apirocket-cart-item-label {
1236
- font-size: var(--cart-item-label-font-size, 14px);
1237
- font-weight: var(--cart-item-label-font-weight, lighter);
1238
- color: var(--cart-item-label-font-color, #737373);
1239
- margin-bottom: 4px;
1256
+ .apirocket-modal-message-title {
1257
+ font-size: 18px;
1258
+ font-weight: bold;
1259
+ line-height: 1;
1260
+ text-align: center;
1261
+ color: #404040;
1262
+ margin-bottom: 16px;
1240
1263
  }
1241
1264
 
1242
- .apirocket-cart-item-col-quantity {
1243
- margin-top: 16px;
1265
+ .apirocket-modal-message-text {
1266
+ color: #737373;
1267
+ font-size: 14px;
1268
+ font-weight: normal;
1269
+ text-align: center;
1270
+ line-height: 16px;
1271
+ margin-bottom: 32px;
1272
+ }.apirocket-summary {}
1273
+
1274
+ .apirocket-summary-top {
1275
+ margin-top: 56px;
1276
+ margin-bottom: 32px;
1244
1277
  }
1245
1278
 
1246
- .apirocket-cart-item-quantity-wrapper {
1279
+ .apirocket-summary-header {
1247
1280
  display: flex;
1248
- justify-content: space-between;
1249
- border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
1250
- min-width: 160px;
1251
- user-select: none;
1252
- transition-property: border-color;
1253
- transition-timing-function: ease;
1254
- transition-duration: 350ms;
1281
+ justify-content: flex-start;
1282
+ align-items: center;
1283
+ margin-bottom: 32px;
1255
1284
  }
1256
1285
 
1257
- .apirocket-cart-item-quantity-wrapper:hover {
1258
- border-color: var(--cart-item-form-border-color-hover, #000);
1286
+ .apirocket-summary-header-icon {
1287
+ flex: 0 1;
1288
+ margin-right: 16px;
1259
1289
  }
1260
1290
 
1261
- .apirocket-cart-item-quantity-number {
1262
- flex: 1 1 auto;
1263
- font-size: var(--cart-item-form-text-size, 14px);
1264
- font-weight: var(--cart-item-form-text-weight, normal);
1265
- color: var(--cart-item-form-text-color, #000);
1266
- padding: 16px;
1267
- line-height: 1;
1268
- text-align: center;
1269
- }
1291
+ .apirocket-summary-header-content {}
1270
1292
 
1271
- .apirocket-cart-item-quantity-button {
1272
- display: flex;
1273
- align-items: center;
1274
- background-color: var(--cart-item-quantity-icon-background-color, transparent);
1275
- padding: 0px 12px;
1276
- cursor: pointer;
1293
+ .apirocket-summary-header-title {
1294
+ font-size: 24px;
1295
+ font-weight: bold;
1296
+ line-height: 1.2;
1297
+ color: #404040;
1298
+ margin-bottom: 4px;
1277
1299
  }
1278
1300
 
1279
- .apirocket-cart-item-quantity-button svg {
1280
- color: var(--cart-item-quantity-icon-color, #737373);
1281
- width: var(--cart-item-quantity-icon-size, 16px);
1282
- height: var(--cart-item-quantity-icon-size, 16px);
1301
+ .apirocket-summary-header-subtitle {
1302
+ font-size: 18px;
1303
+ font-weight: normal;
1304
+ line-height: 1.2;
1305
+ color: #737373;
1283
1306
  }
1284
1307
 
1285
- .apirocket-cart-item-col-price {
1286
- margin-top: 36px;
1287
- font-size: var(--cart-item-price-font-size, 16px);
1288
- font-weight: var(--cart-item-price-font-weight, normal);
1289
- color: var(--cart-item-price-font-color, #404040);
1308
+ .apirocket-summary-section {
1309
+ margin-top: 16px;
1310
+ border: 1px solid #d9d9d9;
1311
+ border-radius: 4px;
1312
+ padding: 24px;
1290
1313
  }
1291
1314
 
1315
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
1316
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
1292
1317
 
1293
- @media (min-width: 720px) {
1294
-
1295
- .apirocket-cart.apirocket-cart-full-screen {
1296
- width: 100%;
1297
- overflow-y: auto;
1298
- }
1299
-
1300
- .apirocket-cart-full-screen .apirocket-cart-content {
1301
- display: block;
1302
- width: 90%;
1303
- max-width: 980px;
1304
- margin: 0 auto;
1305
- }
1306
-
1307
- .apirocket-cart-full-screen .apirocket-cart-header {
1308
- background-color: #fff;
1309
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1310
- padding: 40px 0px;
1311
- }
1312
-
1313
- .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
1314
- .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
1315
-
1316
- .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
1317
-
1318
- .apirocket-cart-full-screen .apirocket-cart-footer {
1319
- width: 40%;
1320
- border-top: none;
1321
- margin-left: auto;
1322
- margin-right: 0;
1323
- padding: 0px;
1324
- padding-top: 32px;
1325
- padding-bottom: 96px;
1326
- }
1327
-
1328
- .apirocket-cart-full-screen .apirocket-cart-item {
1329
- display: flex;
1330
- position: relative;
1331
- padding-left: 0;
1332
- padding-right: 0;
1333
- }
1334
-
1335
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
1336
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
1337
-
1338
- .apirocket-cart-full-screen .apirocket-cart-item:last-child {
1339
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1340
- }
1341
-
1342
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
1343
- .apirocket-cart-full-screen .apirocket-cart-item-col-price {
1344
- align-self: flex-end;
1345
- line-height: 48px;
1346
- }
1347
-
1348
- .apirocket-cart-full-screen .apirocket-cart-item-col-image {
1349
- flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
1350
- }
1351
-
1352
- .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
1353
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
1354
-
1355
- .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
1356
- position: absolute;
1357
- right: 0px;
1358
- top: var(--cart-item-padding, 32px);
1359
- }
1318
+ .apirocket-summary-section-title {
1319
+ font-size: 18px;
1320
+ font-weight: bold;
1321
+ line-height: 1.2;
1322
+ color: #404040;
1323
+ margin-bottom: 24px;
1360
1324
  }
1361
1325
 
1362
- @media (min-width: 720px) and (max-width: 920px) {
1363
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
1364
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
1326
+ .apirocket-summary-section-subtitle {
1327
+ font-size: 16px;
1328
+ font-weight: bold;
1329
+ line-height: 1;
1330
+ color: #404040;
1331
+ margin-bottom: 16px;
1365
1332
  }
1366
1333
 
1367
- /* Mobile version */
1368
-
1369
- @media (max-width: 720px) {
1370
-
1371
- .apirocket-cart {
1372
- width: 100%;
1373
- box-shadow: none;
1374
- }
1375
-
1376
- .apirocket-cart-header-continue { display: none; }
1377
- .apirocket-cart-header-login { display: none; }
1378
- }
1379
- .apirocket-button,
1380
- button.apirocket-button {
1381
- box-sizing: border-box !important;
1382
- display: block;
1383
- width: 100%;
1384
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1385
- margin: 0px;
1386
- border-radius: var(--cart-button-border-radius, 4px);
1387
- background-color: var(--cart-button-background-color, transparent);
1388
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
1389
- color: var(--cart-button-font-color, #737373);
1390
- line-height: 1;
1391
- font-size: var(--cart-button-font-size, 16px);
1392
- font-weight: var(--cart-button-font-weight, normal);
1393
- text-align: center;
1394
- transition-property: color, border-color, background-color, box-shadow;
1395
- transition-timing-function: ease;
1396
- transition-duration: 350ms;
1397
- cursor: pointer;
1334
+ .apirocket-summary-section-text {
1335
+ font-size: 14px;
1336
+ font-weight: normal;
1337
+ line-height: 18px;
1338
+ color: #404040;
1398
1339
  }
1399
1340
 
1400
- .apirocket-button:hover {
1401
- background-color: var(--cart-button-background-color-hover, transparent);
1402
- border-color: var(--cart-button-border-color-hover, #404040);
1403
- color: var(--cart-button-font-color-hover, #404040);
1341
+ .apirocket-summary-help {
1342
+ display: flex;
1343
+ justify-content: flex-start;
1344
+ align-items: center;
1404
1345
  }
1405
1346
 
1406
- .apirocket-button:focus {
1407
- outline: none;
1408
- text-decoration: underline;
1347
+ .apirocket-summary-help-icon {
1348
+ flex: 0 1;
1349
+ padding-right: 12px;
1409
1350
  }
1410
- /*
1411
- .apirocket-button-loading {
1412
- position: relative;
1413
- } */
1414
1351
 
1415
- .apirocket-button-wraper {
1416
- position: relative;
1417
- display: inline-block;
1418
- width: 32px;
1352
+ .apirocket-summary-help-content {
1353
+ font-size: 14px;
1354
+ font-weight: normal;
1355
+ line-height: 1.2;
1356
+ color: #404040;
1419
1357
  }
1420
1358
 
1421
- .apirocket-button-spinner {
1422
- position: absolute;
1423
- width: 22px;
1424
- height: 22px;
1425
- top: -11px;
1426
- left: 0;
1427
- right: 0;
1428
- bottom: 0;
1429
- margin: auto;
1430
- border: 4px solid currentColor;
1431
- border-top-color: transparent !important;
1432
- border-radius: 50%;
1433
- animation: button-loading-spinner 1s ease infinite;
1359
+ .apirocket-summary-help-content a {
1360
+ display: block;
1361
+ color: #737373;
1434
1362
  }
1435
1363
 
1436
- @keyframes button-loading-spinner {
1437
- from { transform: rotate(0turn) }
1438
- to { transform: rotate(1turn) }
1364
+ @media (max-width: 1000px) {
1365
+ .apirocket-summary-top { display: none; }
1366
+ .apirocket-summary-header { margin-top: 32px; }
1439
1367
  }
1440
1368
 
1441
- .apirocket-button-link,
1442
- button.apirocket-button-link {
1369
+ @media (max-width: 720px) {
1370
+ .apirocket-summary-section-subtitle { margin-top: 24px; }
1371
+ .apirocket-summary-header {
1372
+ flex-direction: column;
1373
+ align-items: center;
1374
+ text-align: center;
1375
+ }
1376
+ .apirocket-summary-header-icon {
1377
+ margin-right: 0px;
1378
+ margin-bottom: 16px;
1379
+ }
1380
+ .apirocket-summary-header-title {
1381
+ font-size: 28px;
1382
+ margin-bottom: 8px;
1383
+ }
1384
+ }.apirocket-tabs {
1443
1385
  display: flex;
1444
- align-items: center;
1445
- text-align: left;
1446
- justify-content: flex-start;
1447
- align-items: center;
1448
- border: none;
1449
- padding-left: 0;
1450
- padding-right: 0;
1451
- width: auto;
1452
- overflow: hidden;
1453
- white-space: nowrap;
1454
- text-overflow: ellipsis;
1386
+ position: relative;
1387
+ justify-content: center;
1388
+ border-bottom: 1px solid #e5e5e5;
1389
+ overflow-x: auto;
1455
1390
  }
1456
1391
 
1457
- .apirocket-button-link span {
1458
- margin-left: 16px;
1459
- margin-right: 16px;
1392
+ .apirocket-tab {
1393
+ color: #737373;
1394
+ padding: 16px 24px 13px 24px;
1395
+ font-size: 16px;
1396
+ border-bottom: 3px solid #fff;
1397
+ cursor: pointer;
1398
+ white-space: nowrap;
1460
1399
  }
1461
1400
 
1462
- .apirocket-button-primary,
1463
- button.apirocket-button-primary {
1464
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
1465
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
1466
- color: var(--cart-button-primary-text-color, #fff);
1401
+ .apirocket-tab-active {
1402
+ color: #404040;
1403
+ font-weight: bold;
1404
+ border-bottom: 3px solid #404040;
1467
1405
  }
1468
1406
 
1469
- button.apirocket-button-primary:disabled {
1470
- background-color: #eee;
1471
- border-color: #eee;
1472
- color: #ccc;
1407
+ .apirocket-tab-menu {
1408
+ position: absolute;
1409
+ display: none;
1410
+ right: 32px;
1411
+ top: 16px;
1412
+ color: #404040;
1473
1413
  }
1474
1414
 
1475
- .apirocket-button-primary:hover {
1476
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1477
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1478
- color: var(--cart-button-primary-text-color-hover, #fff);
1479
- box-shadow: var(--cart-shadow-button-primary-hover, none);
1415
+ .apirocket-tab-panel {
1416
+ display: none;
1417
+ padding: 32px;
1480
1418
  }
1481
1419
 
1420
+ .apirocket-tab-panel-active {
1421
+ display: block ;
1422
+ }
1482
1423
 
1483
- @media (max-width: 720px) {
1424
+ .apirocket-tab-panel-max-with {
1425
+ width: 100%;
1426
+ max-width: 592px;
1427
+ margin: auto;
1428
+ }
1484
1429
 
1485
- .apirocket-button-link {
1486
- width: 100%;
1487
- justify-content: center;
1430
+ @media (max-width: 720px) {
1431
+
1432
+ .apirocket-tabs {
1433
+ display: block;
1434
+ padding-left: 32px;
1435
+ padding-right: 32px;
1488
1436
  }
1489
1437
 
1490
- }
1438
+
1439
+ .apirocket-tab {
1440
+ border-bottom-color: #fff;
1441
+ padding-left: 0px;
1442
+ padding-right: 0;
1443
+ }
1491
1444
 
1492
- .apirocket-form-input {
1445
+ .apirocket-tab:not(.apirocket-tab-active) { display: none; }
1446
+ .apirocket-tabs.apirocket-tabs-menu-active .apirocket-tab { display: block; }
1447
+ .apirocket-tab-menu { display: block !important; }
1448
+ }.apirocket-form-input {
1493
1449
  display: block;
1494
1450
  position: relative;
1495
1451
  margin-bottom: 16px;
@@ -1878,6 +1834,296 @@ button.apirocket-button-primary:disabled {
1878
1834
  .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
1879
1835
  .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
1880
1836
 
1837
+
1838
+ .apirocket-my-account * { box-sizing: content-box; }
1839
+
1840
+ .apirocket-my-account {
1841
+ position: fixed;
1842
+ z-index: 10000;
1843
+ right: 0;
1844
+ top: 0;
1845
+ overflow: hidden;
1846
+ width: 100%;
1847
+ height: 100vh;
1848
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1849
+ background-color: #fff;
1850
+ }
1851
+
1852
+ .apirocket-my-account-content {
1853
+ display: flex;
1854
+ flex-direction: column;
1855
+ justify-content: space-between;
1856
+ height: 100%;
1857
+ overflow: hidden;
1858
+ }
1859
+
1860
+
1861
+ .apirocket-my-account-header {
1862
+ display: flex;
1863
+ flex: none;
1864
+ height: 96px;
1865
+ align-items: center;
1866
+ justify-content: space-between;
1867
+ padding: 0px 32px;
1868
+ margin-bottom: 16px;
1869
+ background-color: #f5f5f5;
1870
+ }
1871
+
1872
+ .apirocket-my-account-header-title {
1873
+ font-size: 18px;
1874
+ font-weight: normal;
1875
+ color: #404040;
1876
+ }
1877
+
1878
+ .apirocket-my-account-header-close-icon {
1879
+ height: var(--cart-header-text-close-icon-size, 24px);
1880
+ width: var(--cart-header-text-close-icon-size, 24px);
1881
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
1882
+ cursor: pointer;
1883
+ }
1884
+
1885
+ .apirocket-my-account-header-continue {
1886
+ display: none;
1887
+ align-items: center;
1888
+ text-align: left;
1889
+ color: #737373;
1890
+ font-size: 16px;
1891
+ font-weight: normal;
1892
+ cursor: pointer;
1893
+ }
1894
+
1895
+ .apirocket-my-account-header-logout {
1896
+ display: none;
1897
+ align-items: center;
1898
+ text-align: right;
1899
+ color: #737373;
1900
+ font-size: 16px;
1901
+ font-weight: normal;
1902
+ cursor: pointer;
1903
+ }
1904
+
1905
+ .apirocket-my-account-header-logout svg,
1906
+ .apirocket-my-account-header-continue svg { margin-right: 16px; }
1907
+
1908
+
1909
+
1910
+ .apirocket-my-account-body {
1911
+ flex: 1 1;
1912
+ display: flex;
1913
+ flex-direction: column;
1914
+ overflow: hidden;
1915
+ padding: 0px;
1916
+ }
1917
+
1918
+ .apirocket-my-account-body .apirocket-tabs { flex: none; }
1919
+
1920
+ .apirocket-my-account-body .apirocket-tabs-panels {
1921
+ flex: 1 1;
1922
+ overflow-y: auto;
1923
+ }
1924
+
1925
+ .apirocket-my-account-address {
1926
+ border: 1px solid #d9d9d9;
1927
+ padding: 16px 24px;
1928
+ margin-bottom: 24px;
1929
+ border-radius: 8px;
1930
+ }
1931
+
1932
+ .apirocket-my-account-address-head {
1933
+ display: flex;
1934
+ justify-content: space-between;
1935
+ margin-bottom: 16px;
1936
+ font-size: 14px;
1937
+ color: #404040;
1938
+ font-weight: bold;
1939
+ }
1940
+
1941
+ .apirocket-my-account-address-content {
1942
+ display: block;
1943
+ font-size: 14px;
1944
+ color: #737373;
1945
+ font-weight: normal;
1946
+ line-height: 1.5;
1947
+ margin-bottom: 24px;
1948
+ }
1949
+
1950
+ .apirocket-my-account-address-content strong {
1951
+ display: inline-block;
1952
+ color: #404040;
1953
+ margin-bottom: 8px;
1954
+ }
1955
+
1956
+ .apirocket-my-account-address-content div:nth-child(2) {
1957
+ margin-bottom: 8px;
1958
+ }
1959
+
1960
+ .apirocket-my-account-address-content > div { width: 100%; }
1961
+
1962
+ .apirocket-my-account-address-footer {
1963
+ display: flex;
1964
+ justify-content: space-between;
1965
+ font-size: 14px;
1966
+ color: #737373;
1967
+ font-weight: normal;
1968
+ line-height: 1.5;
1969
+ }
1970
+
1971
+ .apirocket-my-account-address-footer > div {
1972
+ text-decoration: underline;
1973
+ cursor: pointer;
1974
+ }
1975
+
1976
+ .apirocket-my-account-address-footer .apirocket-my-account-address-default {
1977
+ display: inline-block;
1978
+ background-color: #E4E4E7;
1979
+ font-size: 12px;
1980
+ color: #737373;
1981
+ font-weight: normal;
1982
+ line-height: 1;
1983
+ text-decoration: none;
1984
+ padding: 5px 12px;
1985
+ border-radius: 6px;
1986
+ }
1987
+
1988
+
1989
+
1990
+ @media (min-width: 720px) {
1991
+
1992
+ .apirocket-my-account-content {
1993
+ width: 90%;
1994
+ max-width: 980px;
1995
+ margin: 0 auto;
1996
+ }
1997
+
1998
+ .apirocket-my-account-header {
1999
+ height: 102px;
2000
+ background-color: #fff;
2001
+ margin-bottom: 0px;
2002
+ }
2003
+
2004
+ .apirocket-my-account-header-continue { display: flex; }
2005
+ .apirocket-my-account-header-logout { display: flex; }
2006
+ .apirocket-my-account-header-close { display: none; }
2007
+ }
2008
+
2009
+ @media (max-width: 720px) {
2010
+ .apirocket-my-account-header-continue { display: none; }
2011
+ .apirocket-my-account-header-login { display: none; }
2012
+ }
2013
+
2014
+ .apirocket-button,
2015
+ button.apirocket-button {
2016
+ box-sizing: border-box !important;
2017
+ display: block;
2018
+ width: 100%;
2019
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
2020
+ margin: 0px;
2021
+ border-radius: var(--cart-button-border-radius, 4px);
2022
+ background-color: var(--cart-button-background-color, transparent);
2023
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
2024
+ color: var(--cart-button-font-color, #737373);
2025
+ line-height: 1;
2026
+ font-size: var(--cart-button-font-size, 16px);
2027
+ font-weight: var(--cart-button-font-weight, normal);
2028
+ text-align: center;
2029
+ transition-property: color, border-color, background-color, box-shadow;
2030
+ transition-timing-function: ease;
2031
+ transition-duration: 350ms;
2032
+ cursor: pointer;
2033
+ }
2034
+
2035
+ .apirocket-button:hover {
2036
+ background-color: var(--cart-button-background-color-hover, transparent);
2037
+ border-color: var(--cart-button-border-color-hover, #404040);
2038
+ color: var(--cart-button-font-color-hover, #404040);
2039
+ }
2040
+
2041
+ .apirocket-button:focus {
2042
+ outline: none;
2043
+ text-decoration: underline;
2044
+ }
2045
+ /*
2046
+ .apirocket-button-loading {
2047
+ position: relative;
2048
+ } */
2049
+
2050
+ .apirocket-button-wraper {
2051
+ position: relative;
2052
+ display: inline-block;
2053
+ width: 32px;
2054
+ }
2055
+
2056
+ .apirocket-button-spinner {
2057
+ position: absolute;
2058
+ width: 22px;
2059
+ height: 22px;
2060
+ top: -11px;
2061
+ left: 0;
2062
+ right: 0;
2063
+ bottom: 0;
2064
+ margin: auto;
2065
+ border: 4px solid currentColor;
2066
+ border-top-color: transparent !important;
2067
+ border-radius: 50%;
2068
+ animation: button-loading-spinner 1s ease infinite;
2069
+ }
2070
+
2071
+ @keyframes button-loading-spinner {
2072
+ from { transform: rotate(0turn) }
2073
+ to { transform: rotate(1turn) }
2074
+ }
2075
+
2076
+ .apirocket-button-link,
2077
+ button.apirocket-button-link {
2078
+ display: flex;
2079
+ align-items: center;
2080
+ text-align: left;
2081
+ justify-content: flex-start;
2082
+ align-items: center;
2083
+ border: none;
2084
+ padding-left: 0;
2085
+ padding-right: 0;
2086
+ width: auto;
2087
+ overflow: hidden;
2088
+ white-space: nowrap;
2089
+ text-overflow: ellipsis;
2090
+ }
2091
+
2092
+ .apirocket-button-link span {
2093
+ margin-left: 16px;
2094
+ margin-right: 16px;
2095
+ }
2096
+
2097
+ .apirocket-button-primary,
2098
+ button.apirocket-button-primary {
2099
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
2100
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
2101
+ color: var(--cart-button-primary-text-color, #fff);
2102
+ }
2103
+
2104
+ button.apirocket-button-primary:disabled {
2105
+ background-color: #eee;
2106
+ border-color: #eee;
2107
+ color: #ccc;
2108
+ }
2109
+
2110
+ .apirocket-button-primary:hover {
2111
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
2112
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
2113
+ color: var(--cart-button-primary-text-color-hover, #fff);
2114
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
2115
+ }
2116
+
2117
+
2118
+ @media (max-width: 720px) {
2119
+
2120
+ .apirocket-button-link {
2121
+ width: 100%;
2122
+ justify-content: center;
2123
+ }
2124
+
2125
+ }
2126
+
1881
2127
  .apirocket-error-block {
1882
2128
  display: flex;
1883
2129
  justify-content: start;