apirocket 0.3.2 → 0.4.0

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 +393 -393
  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,3 +1,117 @@
1
+
2
+ .apirocket-button,
3
+ button.apirocket-button {
4
+ box-sizing: border-box !important;
5
+ display: block;
6
+ width: 100%;
7
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
8
+ margin: 0px;
9
+ border-radius: var(--cart-button-border-radius, 4px);
10
+ background-color: var(--cart-button-background-color, transparent);
11
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
12
+ color: var(--cart-button-font-color, #737373);
13
+ line-height: 1;
14
+ font-size: var(--cart-button-font-size, 16px);
15
+ font-weight: var(--cart-button-font-weight, normal);
16
+ text-align: center;
17
+ transition-property: color, border-color, background-color, box-shadow;
18
+ transition-timing-function: ease;
19
+ transition-duration: 350ms;
20
+ cursor: pointer;
21
+ }
22
+
23
+ .apirocket-button:hover {
24
+ background-color: var(--cart-button-background-color-hover, transparent);
25
+ border-color: var(--cart-button-border-color-hover, #404040);
26
+ color: var(--cart-button-font-color-hover, #404040);
27
+ }
28
+
29
+ .apirocket-button:focus {
30
+ outline: none;
31
+ text-decoration: underline;
32
+ }
33
+ /*
34
+ .apirocket-button-loading {
35
+ position: relative;
36
+ } */
37
+
38
+ .apirocket-button-wraper {
39
+ position: relative;
40
+ display: inline-block;
41
+ width: 32px;
42
+ }
43
+
44
+ .apirocket-button-spinner {
45
+ position: absolute;
46
+ width: 22px;
47
+ height: 22px;
48
+ top: -11px;
49
+ left: 0;
50
+ right: 0;
51
+ bottom: 0;
52
+ margin: auto;
53
+ border: 4px solid currentColor;
54
+ border-top-color: transparent !important;
55
+ border-radius: 50%;
56
+ animation: button-loading-spinner 1s ease infinite;
57
+ }
58
+
59
+ @keyframes button-loading-spinner {
60
+ from { transform: rotate(0turn) }
61
+ to { transform: rotate(1turn) }
62
+ }
63
+
64
+ .apirocket-button-link,
65
+ button.apirocket-button-link {
66
+ display: flex;
67
+ align-items: center;
68
+ text-align: left;
69
+ justify-content: flex-start;
70
+ align-items: center;
71
+ border: none;
72
+ padding-left: 0;
73
+ padding-right: 0;
74
+ width: auto;
75
+ overflow: hidden;
76
+ white-space: nowrap;
77
+ text-overflow: ellipsis;
78
+ }
79
+
80
+ .apirocket-button-link span {
81
+ margin-left: 16px;
82
+ margin-right: 16px;
83
+ }
84
+
85
+ .apirocket-button-primary,
86
+ button.apirocket-button-primary {
87
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
88
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
89
+ color: var(--cart-button-primary-text-color, #fff);
90
+ }
91
+
92
+ button.apirocket-button-primary:disabled {
93
+ background-color: #eee;
94
+ border-color: #eee;
95
+ color: #ccc;
96
+ }
97
+
98
+ .apirocket-button-primary:hover {
99
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
100
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
101
+ color: var(--cart-button-primary-text-color-hover, #fff);
102
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
103
+ }
104
+
105
+
106
+ @media (max-width: 720px) {
107
+
108
+ .apirocket-button-link {
109
+ width: 100%;
110
+ justify-content: center;
111
+ }
112
+
113
+ }
114
+
1
115
  .apirocket-summary {}
2
116
 
3
117
  .apirocket-summary-top {
@@ -792,336 +906,147 @@
792
906
  }
793
907
 
794
908
 
795
- .apirocket-modal *,
796
- .apirocket-modal *::before,
797
- .apirocket-modal *::after { box-sizing: border-box; }
909
+ :root {
910
+ --cart-width: 540px;
911
+ --cart-background-color: #fff;
912
+ --cart-padding: 32px;
913
+ --cart-font-family: Arial, Helvetica, sans-serif;
798
914
 
799
- .apirocket-modal {
800
- display: flex;
801
- justify-content: center;
802
- align-items: flex-start;
915
+ --cart-header-background-color: #f5f5f5;
916
+ --cart-header-border-color: #f5f5f5;
917
+ --cart-header-border-width: 1px;
918
+ --cart-header-text-font-size: 18px;
919
+ --cart-header-text-font-weight: normal;
920
+ --cart-header-text-font-color: #404040;
921
+ --cart-header-text-close-icon-color: #a3a3a3;
922
+ --cart-header-text-close-icon-size: 24px;
923
+
924
+ --cart-footer-background-color: #fff;
925
+ --cart-footer-border-color: #e5e5e5;
926
+ --cart-footer-border-width: 1px;
927
+ --cart-footer-text-font-size: 16px;
928
+ --cart-footer-text-font-weight: lighter;
929
+ --cart-footer-text-font-color: #404040;
930
+ --cart-footer-total-font-size: 18px;
931
+ --cart-footer-total-font-weight: bold;
932
+ --cart-footer-total-font-color: #000;
933
+
934
+ --cart-item-border-color: #e5e5e5;
935
+ --cart-item-border-width: 1px;
936
+ --cart-item-padding: 32px;
937
+ --cart-item-label-font-size: 14px;
938
+ --cart-item-label-font-weight: lighter;
939
+ --cart-item-label-font-color: #737373;
940
+ --cart-item-image-display: inherit;
941
+ --cart-item-image-width: 100px;
942
+ --cart-item-image-width-fullscreen: 150px;
943
+ --cart-item-name-font-size: 18px;
944
+ --cart-item-name-font-weight: bold;
945
+ --cart-item-name-font-color: #000;
946
+ --cart-item-description-font-size: 14px;
947
+ --cart-item-description-font-weight: lighter;
948
+ --cart-item-description-font-color: #000;
949
+ --cart-item-delete-icon-color: #404040;
950
+ --cart-item-delete-icon-color-hover: #000;
951
+ --cart-item-delete-icon-size: 18px;
952
+ --cart-item-form-border-color: #e5e5e5;
953
+ --cart-item-form-border-color-hover: #000;
954
+ --cart-item-form-border-width: 1px;
955
+ --cart-item-form-text-size: 14px;
956
+ --cart-item-form-text-weight: normal;
957
+ --cart-item-form-text-color: #000;
958
+ --cart-item-quantity-icon-color: #737373;
959
+ --cart-item-quantity-icon-background-color: transparent;
960
+ --cart-item-quantity-icon-size: 16px;
961
+ --cart-item-price-font-size: 16px;
962
+ --cart-item-price-font-weight: bold;
963
+ --cart-item-price-font-color: #404040;
964
+
965
+ --cart-button-font-size: 16px;
966
+ --cart-button-font-weight: normal;
967
+ --cart-button-font-color: #737373;
968
+ --cart-button-font-color-hover: #404040;
969
+ --cart-button-border-color: #e5e5e5;
970
+ --cart-button-border-color-hover: #404040;
971
+ --cart-button-border-radius: 4px;
972
+ --cart-button-background-color: transparent;
973
+ --cart-button-background-color-hover: transparent;
974
+ --cart-button-padding-x: 16px;
975
+ --cart-button-padding-y: 16px;
976
+
977
+ --cart-button-primary-text-color: #fff;
978
+ --cart-button-primary-text-color-hover: #fff;
979
+ --cart-button-primary-border-color: #1d4ed8;
980
+ --cart-button-primary-border-color-hover: #0d59f4;
981
+ --cart-button-primary-background-color: #1d4ed8;
982
+ --cart-button-primary-background-color-hover: #0d59f4;
983
+ /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
984
+ }
985
+
986
+ .apirocket-cart * { box-sizing: content-box; }
987
+
988
+ .apirocket-cart {
803
989
  position: fixed;
804
- z-index: 10001;
990
+ z-index: 10000;
805
991
  right: 0;
806
992
  top: 0;
807
993
  overflow: hidden;
808
- overflow-y: auto;
809
- width: 100%;
994
+ width: var(--cart-width, 540px);
810
995
  height: 100vh;
996
+ box-shadow: 1px 20px 8px rgba(0,0,0,.1);
811
997
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
812
- background-color: #f5f5f5;
998
+ background-color: var(--cart-background-color, #fff);
813
999
  }
814
1000
 
815
- .apirocket-modal-nav {
816
- position: absolute;
1001
+ .apirocket-cart-content {
817
1002
  display: flex;
818
- align-items: center;
819
- width: 90%;
820
- max-width: 1100px;
821
- height: 96px;
1003
+ flex-direction: column;
1004
+ height: 100%;
1005
+ background-color: var(--cart-background-color, #fff);
822
1006
  }
823
1007
 
824
- .apirocket-modal-nav-button {
1008
+ .apirocket-cart-header {
825
1009
  display: flex;
1010
+ flex: 0 0 96px;
1011
+ align-items: center;
1012
+ justify-content: space-between;
1013
+ padding: 0px var(--cart-padding);
1014
+ background-color: var(--cart-header-background-color, #f5f5f5);
1015
+ border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
1016
+ }
1017
+
1018
+ .apirocket-cart-header-title {
1019
+ font-size: var(--cart-header-text-font-size, 18px);
1020
+ font-weight: var(--cart-header-text-font-weight, normal);
1021
+ color: var(--cart-header-text-font-color, #404040)
1022
+ }
1023
+
1024
+ .apirocket-cart-header-close-icon {
1025
+ height: var(--cart-header-text-close-icon-size, 24px);
1026
+ width: var(--cart-header-text-close-icon-size, 24px);
1027
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
1028
+ cursor: pointer;
1029
+ }
1030
+
1031
+ .apirocket-cart-header-continue {
1032
+ display: none;
826
1033
  align-items: center;
827
1034
  text-align: left;
828
1035
  color: #737373;
829
1036
  font-size: 16px;
830
1037
  font-weight: normal;
831
- cursor: pointer;
1038
+ cursor: pointer;
832
1039
  }
833
1040
 
834
- .apirocket-modal-nav-button svg { margin-right: 16px; }
835
-
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
- }
846
-
847
- .apirocket-modal-header {
848
- position: relative;
849
- padding-bottom: 32px;
850
- }
851
-
852
- .apirocket-modal-title {
853
- font-size: 18px;
854
- font-weight: bold;
855
- line-height: 1;
856
- color: #404040;
857
- margin-bottom: 8px;
858
- }
859
-
860
- .apirocket-modal-subtitle {
861
- font-size: 14px;
862
- font-weight: normal;
863
- line-height: 16px;
864
- color: #737373;
865
- }
866
-
867
- .apirocket-modal-close {
868
- position: absolute;
869
- right: -16px;
870
- top: -16px;
871
- }
872
-
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;
878
- }
879
-
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;
887
- }
888
-
889
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
890
-
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;
898
- }
899
-
900
- .apirocket-modal-footer-text span {
901
- color: #404040;
902
- cursor: pointer;
903
- }
904
-
905
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
906
-
907
-
908
- .apirocket-modal-body {}
909
-
910
- .apirocket-modal-footer {
911
- padding-top: 32px;
912
- }
913
-
914
- .apirocket-modal-row {
915
- display: flex;
916
- justify-content: space-between;
917
- align-items: flex-start;
918
- }
919
-
920
- .apirocket-modal-row > * {
921
- flex: 1 1;
922
- margin-right: 16px;
923
- }
924
-
925
- .apirocket-modal-row > *:last-child { margin-right: 0; }
926
-
927
-
928
- @media (max-width: 720px) {
929
- .apirocket-modal-row { display: block; }
930
- .apirocket-modal-row > * { margin-right: 0; }
931
-
932
- .apirocket-modal-nav { display: none; }
933
-
934
- .apirocket-modal-content {
935
- width: 95%;
936
- margin-top: 32px;
937
- padding: 24px;
938
- }
939
-
940
- .apirocket-modal-close {
941
- right: -8px;
942
- top: -8px;
943
- }
944
- }
945
-
946
- .apirocket-modal-messaje {
947
- margin-top: 32px;
948
- margin-bottom: 32px;
949
- text-align: center;
950
- }
951
-
952
- .apirocket-modal-message-icon {
953
- display: inline-flex;
954
- justify-content: center;
955
- align-items: center;
956
- width: 48px;
957
- height: 48px;
958
- border-radius: 24px;
959
- margin: auto;
960
- margin-bottom: 32px;
961
- }
962
-
963
- .apirocket-modal-message-icon-ok {
964
- background-color: #d1fae5;
965
- color: #10b981;
966
- }
967
-
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;
975
- }
976
-
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
-
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
-
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;
1008
-
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;
1039
-
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;
1051
-
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); */
1059
- }
1060
-
1061
- .apirocket-cart * { box-sizing: content-box; }
1062
-
1063
- .apirocket-cart {
1064
- position: fixed;
1065
- z-index: 10000;
1066
- right: 0;
1067
- top: 0;
1068
- overflow: hidden;
1069
- width: var(--cart-width, 540px);
1070
- height: 100vh;
1071
- box-shadow: 1px 20px 8px rgba(0,0,0,.1);
1072
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1073
- background-color: var(--cart-background-color, #fff);
1074
- }
1075
-
1076
- .apirocket-cart-content {
1077
- display: flex;
1078
- flex-direction: column;
1079
- height: 100%;
1080
- background-color: var(--cart-background-color, #fff);
1081
- }
1082
-
1083
- .apirocket-cart-header {
1084
- display: flex;
1085
- flex: 0 0 96px;
1086
- 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);
1091
- }
1092
-
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)
1097
- }
1098
-
1099
- .apirocket-cart-header-close-icon {
1100
- height: var(--cart-header-text-close-icon-size, 24px);
1101
- width: var(--cart-header-text-close-icon-size, 24px);
1102
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
1103
- cursor: pointer;
1104
- }
1105
-
1106
- .apirocket-cart-header-continue {
1107
- display: none;
1108
- align-items: center;
1109
- text-align: left;
1110
- color: #737373;
1111
- font-size: 16px;
1112
- font-weight: normal;
1113
- cursor: pointer;
1114
- }
1115
-
1116
- .apirocket-cart-header-login {
1117
- display: none;
1118
- align-items: center;
1119
- text-align: right;
1120
- color: #737373;
1121
- font-size: 16px;
1122
- font-weight: normal;
1123
- cursor: pointer;
1124
- }
1041
+ .apirocket-cart-header-login {
1042
+ display: none;
1043
+ align-items: center;
1044
+ text-align: right;
1045
+ color: #737373;
1046
+ font-size: 16px;
1047
+ font-weight: normal;
1048
+ cursor: pointer;
1049
+ }
1125
1050
 
1126
1051
  .apirocket-cart-header-login svg,
1127
1052
  .apirocket-cart-header-continue svg { margin-right: 16px; }
@@ -1375,121 +1300,196 @@
1375
1300
 
1376
1301
  .apirocket-cart-header-continue { display: none; }
1377
1302
  .apirocket-cart-header-login { display: none; }
1378
- }
1379
- .apirocket-button,
1380
- button.apirocket-button {
1381
- box-sizing: border-box !important;
1382
- display: block;
1303
+ }.apirocket-modal *,
1304
+ .apirocket-modal *::before,
1305
+ .apirocket-modal *::after { box-sizing: border-box; }
1306
+
1307
+ .apirocket-modal {
1308
+ display: flex;
1309
+ justify-content: center;
1310
+ align-items: flex-start;
1311
+ position: fixed;
1312
+ z-index: 10001;
1313
+ right: 0;
1314
+ top: 0;
1315
+ overflow: hidden;
1316
+ overflow-y: auto;
1383
1317
  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;
1318
+ height: 100vh;
1319
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1320
+ background-color: #f5f5f5;
1398
1321
  }
1399
1322
 
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);
1323
+ .apirocket-modal-nav {
1324
+ position: absolute;
1325
+ display: flex;
1326
+ align-items: center;
1327
+ width: 90%;
1328
+ max-width: 1100px;
1329
+ height: 96px;
1404
1330
  }
1405
1331
 
1406
- .apirocket-button:focus {
1407
- outline: none;
1408
- text-decoration: underline;
1332
+ .apirocket-modal-nav-button {
1333
+ display: flex;
1334
+ align-items: center;
1335
+ text-align: left;
1336
+ color: #737373;
1337
+ font-size: 16px;
1338
+ font-weight: normal;
1339
+ cursor: pointer;
1409
1340
  }
1410
- /*
1411
- .apirocket-button-loading {
1412
- position: relative;
1413
- } */
1414
1341
 
1415
- .apirocket-button-wraper {
1342
+ .apirocket-modal-nav-button svg { margin-right: 16px; }
1343
+
1344
+ .apirocket-modal-content {
1345
+ display: flex;
1346
+ flex-flow: column;
1347
+ width: 480px;
1348
+ height: auto;
1349
+ padding: 32px;
1350
+ background-color: #fff;
1351
+ margin-top: 96px;
1352
+ margin-bottom: 32px;
1353
+ }
1354
+
1355
+ .apirocket-modal-header {
1416
1356
  position: relative;
1417
- display: inline-block;
1418
- width: 32px;
1357
+ padding-bottom: 32px;
1419
1358
  }
1420
1359
 
1421
- .apirocket-button-spinner {
1360
+ .apirocket-modal-title {
1361
+ font-size: 18px;
1362
+ font-weight: bold;
1363
+ line-height: 1;
1364
+ color: #404040;
1365
+ margin-bottom: 8px;
1366
+ }
1367
+
1368
+ .apirocket-modal-subtitle {
1369
+ font-size: 14px;
1370
+ font-weight: normal;
1371
+ line-height: 16px;
1372
+ color: #737373;
1373
+ }
1374
+
1375
+ .apirocket-modal-close {
1422
1376
  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;
1377
+ right: -16px;
1378
+ top: -16px;
1434
1379
  }
1435
1380
 
1436
- @keyframes button-loading-spinner {
1437
- from { transform: rotate(0turn) }
1438
- to { transform: rotate(1turn) }
1381
+ .apirocket-modal-close-icon {
1382
+ height: var(--cart-header-text-close-icon-size, 24px);
1383
+ width: var(--cart-header-text-close-icon-size, 24px);
1384
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
1385
+ cursor: pointer;
1439
1386
  }
1440
1387
 
1441
- .apirocket-button-link,
1442
- button.apirocket-button-link {
1443
- 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;
1388
+ .apirocket-modal-body-text-password {
1389
+ color: #404040;
1390
+ font-size: 14px;
1391
+ font-weight: normal;
1392
+ line-height: 16px;
1393
+ margin-top: -8px;text-align: right;
1394
+ cursor: pointer;
1455
1395
  }
1456
1396
 
1457
- .apirocket-button-link span {
1458
- margin-left: 16px;
1459
- margin-right: 16px;
1397
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
1398
+
1399
+ .apirocket-modal-footer-text {
1400
+ color: #a3a3a3;
1401
+ font-size: 14px;
1402
+ font-weight: normal;
1403
+ line-height: 16px;
1404
+ text-align: center;
1405
+ margin-top: 16px;
1460
1406
  }
1461
1407
 
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);
1408
+ .apirocket-modal-footer-text span {
1409
+ color: #404040;
1410
+ cursor: pointer;
1467
1411
  }
1468
1412
 
1469
- button.apirocket-button-primary:disabled {
1470
- background-color: #eee;
1471
- border-color: #eee;
1472
- color: #ccc;
1413
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
1414
+
1415
+
1416
+ .apirocket-modal-body {}
1417
+
1418
+ .apirocket-modal-footer {
1419
+ padding-top: 32px;
1473
1420
  }
1474
1421
 
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);
1422
+ .apirocket-modal-row {
1423
+ display: flex;
1424
+ justify-content: space-between;
1425
+ align-items: flex-start;
1426
+ }
1427
+
1428
+ .apirocket-modal-row > * {
1429
+ flex: 1 1;
1430
+ margin-right: 16px;
1480
1431
  }
1481
1432
 
1433
+ .apirocket-modal-row > *:last-child { margin-right: 0; }
1434
+
1482
1435
 
1483
1436
  @media (max-width: 720px) {
1437
+ .apirocket-modal-row { display: block; }
1438
+ .apirocket-modal-row > * { margin-right: 0; }
1484
1439
 
1485
- .apirocket-button-link {
1486
- width: 100%;
1487
- justify-content: center;
1440
+ .apirocket-modal-nav { display: none; }
1441
+
1442
+ .apirocket-modal-content {
1443
+ width: 95%;
1444
+ margin-top: 32px;
1445
+ padding: 24px;
1488
1446
  }
1489
1447
 
1448
+ .apirocket-modal-close {
1449
+ right: -8px;
1450
+ top: -8px;
1451
+ }
1452
+ }
1453
+
1454
+ .apirocket-modal-messaje {
1455
+ margin-top: 32px;
1456
+ margin-bottom: 32px;
1457
+ text-align: center;
1458
+ }
1459
+
1460
+ .apirocket-modal-message-icon {
1461
+ display: inline-flex;
1462
+ justify-content: center;
1463
+ align-items: center;
1464
+ width: 48px;
1465
+ height: 48px;
1466
+ border-radius: 24px;
1467
+ margin: auto;
1468
+ margin-bottom: 32px;
1469
+ }
1470
+
1471
+ .apirocket-modal-message-icon-ok {
1472
+ background-color: #d1fae5;
1473
+ color: #10b981;
1474
+ }
1475
+
1476
+ .apirocket-modal-message-title {
1477
+ font-size: 18px;
1478
+ font-weight: bold;
1479
+ line-height: 1;
1480
+ text-align: center;
1481
+ color: #404040;
1482
+ margin-bottom: 16px;
1490
1483
  }
1491
1484
 
1492
- .apirocket-form-input {
1485
+ .apirocket-modal-message-text {
1486
+ color: #737373;
1487
+ font-size: 14px;
1488
+ font-weight: normal;
1489
+ text-align: center;
1490
+ line-height: 16px;
1491
+ margin-bottom: 32px;
1492
+ }.apirocket-form-input {
1493
1493
  display: block;
1494
1494
  position: relative;
1495
1495
  margin-bottom: 16px;