apirocket 0.2.0 → 0.2.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 +864 -864
  2. package/dist/ecommerce.js +1 -1
  3. package/dist/ecommerce.js.map +1 -1
  4. package/package.json +1 -1
package/dist/ecommerce.css CHANGED
@@ -1,438 +1,593 @@
1
- .apirocket-error-block {
1
+ :root {
2
+ --cart-width: 540px;
3
+ --cart-background-color: #fff;
4
+ --cart-padding: 32px;
5
+ --cart-font-family: Arial, Helvetica, sans-serif;
6
+
7
+ --cart-header-background-color: #f5f5f5;
8
+ --cart-header-border-color: #f5f5f5;
9
+ --cart-header-border-width: 1px;
10
+ --cart-header-text-font-size: 18px;
11
+ --cart-header-text-font-weight: normal;
12
+ --cart-header-text-font-color: #404040;
13
+ --cart-header-text-close-icon-color: #a3a3a3;
14
+ --cart-header-text-close-icon-size: 24px;
15
+
16
+ --cart-footer-background-color: #fff;
17
+ --cart-footer-border-color: #e5e5e5;
18
+ --cart-footer-border-width: 1px;
19
+ --cart-footer-text-font-size: 16px;
20
+ --cart-footer-text-font-weight: lighter;
21
+ --cart-footer-text-font-color: #404040;
22
+ --cart-footer-total-font-size: 18px;
23
+ --cart-footer-total-font-weight: bold;
24
+ --cart-footer-total-font-color: #000;
25
+
26
+ --cart-item-border-color: #e5e5e5;
27
+ --cart-item-border-width: 1px;
28
+ --cart-item-padding: 32px;
29
+ --cart-item-label-font-size: 14px;
30
+ --cart-item-label-font-weight: lighter;
31
+ --cart-item-label-font-color: #737373;
32
+ --cart-item-image-display: inherit;
33
+ --cart-item-image-width: 100px;
34
+ --cart-item-image-width-fullscreen: 150px;
35
+ --cart-item-name-font-size: 18px;
36
+ --cart-item-name-font-weight: bold;
37
+ --cart-item-name-font-color: #000;
38
+ --cart-item-description-font-size: 14px;
39
+ --cart-item-description-font-weight: lighter;
40
+ --cart-item-description-font-color: #000;
41
+ --cart-item-delete-icon-color: #404040;
42
+ --cart-item-delete-icon-color-hover: #000;
43
+ --cart-item-delete-icon-size: 18px;
44
+ --cart-item-form-border-color: #e5e5e5;
45
+ --cart-item-form-border-color-hover: #000;
46
+ --cart-item-form-border-width: 1px;
47
+ --cart-item-form-text-size: 14px;
48
+ --cart-item-form-text-weight: normal;
49
+ --cart-item-form-text-color: #000;
50
+ --cart-item-quantity-icon-color: #737373;
51
+ --cart-item-quantity-icon-background-color: transparent;
52
+ --cart-item-quantity-icon-size: 16px;
53
+ --cart-item-price-font-size: 16px;
54
+ --cart-item-price-font-weight: bold;
55
+ --cart-item-price-font-color: #404040;
56
+
57
+ --cart-button-font-size: 16px;
58
+ --cart-button-font-weight: normal;
59
+ --cart-button-font-color: #737373;
60
+ --cart-button-font-color-hover: #404040;
61
+ --cart-button-border-color: #e5e5e5;
62
+ --cart-button-border-color-hover: #404040;
63
+ --cart-button-border-radius: 4px;
64
+ --cart-button-background-color: transparent;
65
+ --cart-button-background-color-hover: transparent;
66
+ --cart-button-padding-x: 16px;
67
+ --cart-button-padding-y: 16px;
68
+
69
+ --cart-button-primary-text-color: #fff;
70
+ --cart-button-primary-text-color-hover: #fff;
71
+ --cart-button-primary-border-color: #1d4ed8;
72
+ --cart-button-primary-border-color-hover: #0d59f4;
73
+ --cart-button-primary-background-color: #1d4ed8;
74
+ --cart-button-primary-background-color-hover: #0d59f4;
75
+ /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
76
+ }
77
+
78
+ .apirocket-cart * { box-sizing: content-box; }
79
+
80
+ .apirocket-cart {
81
+ position: fixed;
82
+ z-index: 10000;
83
+ right: 0;
84
+ top: 0;
85
+ overflow: hidden;
86
+ width: var(--cart-width, 540px);
87
+ height: 100vh;
88
+ box-shadow: 1px 20px 8px rgba(0,0,0,.1);
89
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
90
+ background-color: var(--cart-background-color, #fff);
91
+ }
92
+
93
+ .apirocket-cart-content {
2
94
  display: flex;
3
- justify-content: start;
95
+ flex-direction: column;
96
+ height: 100%;
97
+ background-color: var(--cart-background-color, #fff);
98
+ }
99
+
100
+ .apirocket-cart-header {
101
+ display: flex;
102
+ flex: 0 0 96px;
4
103
  align-items: center;
5
- background-color: #fef2f2;
6
- padding: 16px;
7
- color: #dc2626;
8
- font-size: 14px;
9
- line-height: 18px;
10
- border-radius: 8px;
11
- margin-top: 16px;
12
- margin-bottom: 0px;
13
- }
104
+ justify-content: space-between;
105
+ padding: 0px var(--cart-padding);
106
+ background-color: var(--cart-header-background-color, #f5f5f5);
107
+ border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
108
+ }
14
109
 
15
- .apirocket-error-block-icon {
16
- margin-right: 12px;
110
+ .apirocket-cart-header-title {
111
+ font-size: var(--cart-header-text-font-size, 18px);
112
+ font-weight: var(--cart-header-text-font-weight, normal);
113
+ color: var(--cart-header-text-font-color, #404040)
17
114
  }
18
- .apirocket-button,
19
- button.apirocket-button {
20
- box-sizing: border-box !important;
21
- display: block;
22
- width: 100%;
23
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
24
- margin: 0px;
25
- border-radius: var(--cart-button-border-radius, 4px);
26
- background-color: var(--cart-button-background-color, transparent);
27
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
28
- color: var(--cart-button-font-color, #737373);
29
- line-height: 1;
30
- font-size: var(--cart-button-font-size, 16px);
31
- font-weight: var(--cart-button-font-weight, normal);
32
- text-align: center;
33
- transition-property: color, border-color, background-color, box-shadow;
34
- transition-timing-function: ease;
35
- transition-duration: 350ms;
115
+
116
+ .apirocket-cart-header-close-icon {
117
+ height: var(--cart-header-text-close-icon-size, 24px);
118
+ width: var(--cart-header-text-close-icon-size, 24px);
119
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
36
120
  cursor: pointer;
37
121
  }
38
122
 
39
- .apirocket-button:hover {
40
- background-color: var(--cart-button-background-color-hover, transparent);
41
- border-color: var(--cart-button-border-color-hover, #404040);
42
- color: var(--cart-button-font-color-hover, #404040);
123
+ .apirocket-cart-header-continue {
124
+ display: none;
125
+ align-items: center;
126
+ text-align: left;
127
+ color: #737373;
128
+ font-size: 16px;
129
+ font-weight: normal;
130
+ cursor: pointer;
43
131
  }
44
132
 
45
- .apirocket-button:focus {
46
- outline: none;
47
- text-decoration: underline;
133
+ .apirocket-cart-header-login {
134
+ display: none;
135
+ align-items: center;
136
+ text-align: right;
137
+ color: #737373;
138
+ font-size: 16px;
139
+ font-weight: normal;
140
+ cursor: pointer;
48
141
  }
49
- /*
50
- .apirocket-button-loading {
51
- position: relative;
52
- } */
53
142
 
54
- .apirocket-button-wraper {
55
- position: relative;
56
- display: inline-block;
57
- width: 32px;
143
+ .apirocket-cart-header-login svg,
144
+ .apirocket-cart-header-continue svg { margin-right: 16px; }
145
+
146
+ .apirocket-cart-body {
147
+ flex: 1 1 auto;
148
+ padding: 0px;
149
+ background: var(--cart-background-color, #fff);
150
+ overflow-y: auto;
58
151
  }
59
152
 
60
- .apirocket-button-spinner {
61
- position: absolute;
62
- width: 22px;
63
- height: 22px;
64
- top: -11px;
65
- left: 0;
66
- right: 0;
67
- bottom: 0;
68
- margin: auto;
69
- border: 4px solid currentColor;
70
- border-top-color: transparent !important;
71
- border-radius: 50%;
72
- animation: button-loading-spinner 1s ease infinite;
153
+ .apirocket-cart-body-message {
154
+ font-size: 18px;
155
+ font-weight: var(--cart-item-description-font-weight, lighter);
156
+ color: #666;
157
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
158
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
73
159
  }
74
160
 
75
- @keyframes button-loading-spinner {
76
- from { transform: rotate(0turn) }
77
- to { transform: rotate(1turn) }
161
+ .apirocket-cart-footer {
162
+ flex: 0 0 auto;
163
+ padding: var(--cart-padding, 32px);
164
+ background-color: var(--cart-footer-background-color, transparent);
165
+ border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
166
+ font-size: var(--cart-footer-text-font-size, 16px);
167
+ font-weight: var(--cart-footer-text-font-weight, lighter);
168
+ color: var(--cart-footer-text-font-color, #737373);
78
169
  }
79
170
 
80
- .apirocket-button-link,
81
- button.apirocket-button-link {
171
+ .apirocket-cart-footer-total {
172
+ font-size: var(--cart-footer-total-font-size, 18px);
173
+ font-weight: var(--cart-footer-total-font-weight, bold);
174
+ color: var(--cart-footer-total-font-color, #000);
175
+ }
176
+
177
+ .apirocket-cart-row {
82
178
  display: flex;
179
+ justify-content: space-between;
83
180
  align-items: center;
84
- text-align: left;
85
- justify-content: flex-start;
181
+ }
182
+
183
+ .apirocket-cart-col {
184
+ flex: 1 1 auto;
185
+ margin-bottom: 16px;
186
+ }
187
+
188
+ .apirocket-cart-item {
189
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
190
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
191
+ }
192
+
193
+ .apirocket-cart-item:last-child {
194
+ border-bottom: none;
195
+ margin-bottom: var(--cart-padding, 32px);
196
+ }
197
+
198
+ .apirocket-cart-item-row {
199
+ display: flex;
200
+ justify-content: space-between;
86
201
  align-items: center;
87
- border: none;
88
- padding-left: 0;
89
- padding-right: 0;
90
- width: auto;
91
- overflow: hidden;
92
- white-space: nowrap;
93
- text-overflow: ellipsis;
94
202
  }
95
203
 
96
- .apirocket-button-link span {
97
- margin-left: 16px;
204
+ .apirocket-cart-item-col-image {
205
+ display: var(--cart-item-image-display, inherit);
206
+ flex: 0 0 var(--cart-item-image-width, 100px);
207
+ align-self: flex-start;
98
208
  margin-right: 16px;
99
209
  }
100
210
 
101
- .apirocket-button-primary,
102
- button.apirocket-button-primary {
103
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
104
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
105
- color: var(--cart-button-primary-text-color, #fff);
211
+ .apirocket-cart-item-col-image img {
212
+ display: block;
213
+ max-width: 100%;
106
214
  }
107
215
 
108
- button.apirocket-button-primary:disabled {
109
- background-color: #eee;
110
- border-color: #eee;
111
- color: #ccc;
216
+ .apirocket-cart-item-col-description {
217
+ align-self: flex-start;
218
+ padding-right: 32px;
219
+ flex-grow: 1;
112
220
  }
113
221
 
114
- .apirocket-button-primary:hover {
115
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
116
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
117
- color: var(--cart-button-primary-text-color-hover, #fff);
118
- box-shadow: var(--cart-shadow-button-primary-hover, none);
222
+ .apirocket-cart-item-col-description-name {
223
+ font-size: var(--cart-item-name-font-size, 18px);
224
+ font-weight: var(--cart-item-name-font-weight, bold);
225
+ color: var(--cart-item-name-font-color, #000);
119
226
  }
120
227
 
228
+ .apirocket-cart-item-col-description-text {
229
+ font-size: var(--cart-item-description-font-size, 14px);
230
+ font-weight: var(--cart-item-description-font-weight, lighter);
231
+ color: var(--cart-item-description-font-color, #000);
232
+ }
121
233
 
122
- @media (max-width: 720px) {
234
+ .apirocket-cart-item-col-delete {
235
+ flex: 1 0 auto;
236
+ align-self: flex-start;
237
+ color: var(--cart-item-delete-icon-color, #404040);
238
+ width: var(--cart-item-delete-icon-size, 24px);
239
+ cursor: pointer;
240
+ text-align: center;
241
+ }
123
242
 
124
- .apirocket-button-link {
125
- width: 100%;
126
- justify-content: center;
127
- }
243
+ .apirocket-cart-item-col-delete:hover {
244
+ color: var(--cart-item-delete-icon-color-hover, #000);
245
+ }
128
246
 
247
+ .apirocket-cart-item-col-delete svg {
248
+ width: var(--cart-item-delete-icon-size, 18px);
249
+ height: var(--cart-item-delete-icon-size, 18px);
129
250
  }
130
251
 
131
- .apirocket-form-input {
132
- display: block;
133
- position: relative;
134
- margin-bottom: 16px;
252
+ .apirocket-cart-item-label {
253
+ font-size: var(--cart-item-label-font-size, 14px);
254
+ font-weight: var(--cart-item-label-font-weight, lighter);
255
+ color: var(--cart-item-label-font-color, #737373);
256
+ margin-bottom: 4px;
135
257
  }
136
258
 
137
- .apirocket-form-input input {
138
- all: unset;
139
- appearance: none;
140
- -moz-appearance: none;
141
- -webkit-appearance: none;
142
- outline: none;
143
- width: 100%;
144
- height: 46px;
145
- background: #fff;
146
- border-radius: 4px;
147
- border: 1px solid #D9D9D9;
148
- font-size: 14px;
259
+ .apirocket-cart-item-col-quantity {
260
+ margin-top: 16px;
261
+ }
262
+
263
+ .apirocket-cart-item-quantity-wrapper {
264
+ display: flex;
265
+ justify-content: space-between;
266
+ border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
267
+ min-width: 160px;
268
+ user-select: none;
269
+ transition-property: border-color;
270
+ transition-timing-function: ease;
271
+ transition-duration: 350ms;
272
+ }
273
+
274
+ .apirocket-cart-item-quantity-wrapper:hover {
275
+ border-color: var(--cart-item-form-border-color-hover, #000);
276
+ }
277
+
278
+ .apirocket-cart-item-quantity-number {
279
+ flex: 1 1 auto;
280
+ font-size: var(--cart-item-form-text-size, 14px);
281
+ font-weight: var(--cart-item-form-text-weight, normal);
282
+ color: var(--cart-item-form-text-color, #000);
283
+ padding: 16px;
149
284
  line-height: 1;
150
- padding-left: 14px;
151
- padding-right: 14px;
152
- padding-top: 14px;
153
- padding-bottom: 14px;
154
- transition: all 0.3s ease;
155
- box-sizing: border-box;
285
+ text-align: center;
156
286
  }
157
287
 
158
- .apirocket-form-input input:focus {
159
- border-color: #404040;
160
- box-shadow: 0 0 0 1px #404040;
288
+ .apirocket-cart-item-quantity-button {
289
+ display: flex;
290
+ align-items: center;
291
+ background-color: var(--cart-item-quantity-icon-background-color, transparent);
292
+ padding: 0px 12px;
293
+ cursor: pointer;
161
294
  }
162
295
 
163
- .apirocket-form-input input:not(:placeholder-shown) {
164
- padding-top: 22px;
165
- padding-bottom: 6px;
296
+ .apirocket-cart-item-quantity-button svg {
297
+ color: var(--cart-item-quantity-icon-color, #737373);
298
+ width: var(--cart-item-quantity-icon-size, 16px);
299
+ height: var(--cart-item-quantity-icon-size, 16px);
166
300
  }
167
301
 
168
- .apirocket-form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
302
+ .apirocket-cart-item-col-price {
303
+ margin-top: 36px;
304
+ font-size: var(--cart-item-price-font-size, 16px);
305
+ font-weight: var(--cart-item-price-font-weight, normal);
306
+ color: var(--cart-item-price-font-color, #404040);
307
+ }
308
+
309
+
310
+ @media (min-width: 720px) {
311
+
312
+ .apirocket-cart.apirocket-cart-full-screen {
313
+ width: 100%;
314
+ overflow-y: auto;
315
+ }
316
+
317
+ .apirocket-cart-full-screen .apirocket-cart-content {
318
+ display: block;
319
+ width: 90%;
320
+ max-width: 980px;
321
+ margin: 0 auto;
322
+ }
323
+
324
+ .apirocket-cart-full-screen .apirocket-cart-header {
325
+ background-color: #fff;
326
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
327
+ padding: 40px 0px;
328
+ }
329
+
330
+ .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
331
+ .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
332
+
333
+ .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
334
+
335
+ .apirocket-cart-full-screen .apirocket-cart-footer {
336
+ width: 40%;
337
+ border-top: none;
338
+ margin-left: auto;
339
+ margin-right: 0;
340
+ padding: 0px;
341
+ padding-top: 32px;
342
+ padding-bottom: 96px;
343
+ }
344
+
345
+ .apirocket-cart-full-screen .apirocket-cart-item {
346
+ display: flex;
347
+ position: relative;
348
+ padding-left: 0;
349
+ padding-right: 0;
350
+ }
351
+
352
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
353
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
354
+
355
+ .apirocket-cart-full-screen .apirocket-cart-item:last-child {
356
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
357
+ }
358
+
359
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
360
+ .apirocket-cart-full-screen .apirocket-cart-item-col-price {
361
+ align-self: flex-end;
362
+ line-height: 48px;
363
+ }
364
+
365
+ .apirocket-cart-full-screen .apirocket-cart-item-col-image {
366
+ flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
367
+ }
368
+
369
+ .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
370
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
169
371
 
170
- .apirocket-form-input-placeholder {
171
- position: absolute;
172
- font-size: 12px;
173
- line-height: 1;
174
- color: #737373;
175
- transform: translateY(50%);
176
- opacity: 0;
177
- top: 8px;
178
- left: 15px;
179
- transition: all 0.3s ease;
180
- overflow: hidden;
181
- white-space: nowrap;
182
- text-overflow: ellipsis;
372
+ .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
373
+ position: absolute;
374
+ right: 0px;
375
+ top: var(--cart-item-padding, 32px);
376
+ }
183
377
  }
184
378
 
185
- .apirocket-form-input input:not(:placeholder-shown) ~ span.apirocket-form-input-placeholder {
186
- opacity: 1;
187
- transform: translateY(0%);
379
+ @media (min-width: 720px) and (max-width: 920px) {
380
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
381
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
188
382
  }
189
383
 
190
- .apirocket-form-input .apirocket-form-input-error-message {
191
- display: none;
192
- font-size: 14px;
193
- line-height: 1.2;
194
- margin-top: 4px;
195
- margin-left: 8px;
196
- color: #dc2626;
197
- }
384
+ /* Mobile version */
198
385
 
199
- .apirocket-form-input.invalid.touched input {
200
- border-color: #dc2626;
201
- box-shadow: 0 0 0 1px #dc2626;
202
- }
386
+ @media (max-width: 720px) {
203
387
 
204
- .apirocket-form-input.invalid.touched .apirocket-form-input-placeholder { color: #dc2626; }
205
- .apirocket-form-input.invalid.touched .apirocket-form-input-error-message { display: block; }
388
+ .apirocket-cart {
389
+ width: 100%;
390
+ box-shadow: none;
391
+ }
206
392
 
207
- .apirocket-form-input-button {
208
- position: absolute;
393
+ .apirocket-cart-header-continue { display: none; }
394
+ .apirocket-cart-header-login { display: none; }
395
+ }.apirocket-modal *,
396
+ .apirocket-modal *::before,
397
+ .apirocket-modal *::after { box-sizing: border-box; }
398
+
399
+ .apirocket-modal {
209
400
  display: flex;
210
401
  justify-content: center;
211
- align-items: center;
212
- width: 46px;
213
- height: 46px;
402
+ align-items: flex-start;
403
+ position: fixed;
404
+ z-index: 10001;
214
405
  right: 0;
215
406
  top: 0;
216
- cursor: pointer;
217
- color: #a1a1aa;
218
- }
219
-
220
- .apirocket-form-input-button:hover { color: #52525b; }
221
-
222
- .apirocket-form-input-button + input {
223
- padding-right: 64px;
407
+ overflow: hidden;
408
+ overflow-y: auto;
409
+ width: 100%;
410
+ height: 100vh;
411
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
412
+ background-color: #f5f5f5;
224
413
  }
225
414
 
226
-
227
- .apirocket-form-checkbox {
415
+ .apirocket-modal-nav {
416
+ position: absolute;
228
417
  display: flex;
229
- align-items: flex-start;
230
- justify-content: start;
231
- position: relative;
232
- margin-bottom: 16px;
418
+ align-items: center;
419
+ width: 90%;
420
+ max-width: 1100px;
421
+ height: 96px;
233
422
  }
234
423
 
235
- .apirocket-form-checkbox-label {
236
- flex: 0 1 auto;
237
- display: block;
238
- font-size: 14px;
239
- line-height: 20px;
424
+ .apirocket-modal-nav-button {
425
+ display: flex;
426
+ align-items: center;
427
+ text-align: left;
428
+ color: #737373;
429
+ font-size: 16px;
240
430
  font-weight: normal;
241
- color: #404040;
242
- cursor: pointer;
431
+ cursor: pointer;
243
432
  }
244
433
 
245
- .apirocket-form-checkbox-label small {
246
- display: block;
247
- color: #a3a3a3;
248
- font-size: 12px;
249
- }
434
+ .apirocket-modal-nav-button svg { margin-right: 16px; }
250
435
 
251
- .apirocket-form-checkbox input {
252
- all: unset;
253
- flex: 0 0 auto;
254
- appearance: none;
255
- -moz-appearance: none;
256
- -webkit-appearance: none;
257
- position: relative;
258
- box-sizing: border-box;
259
- display: inline-block;
260
- padding: 0;
261
- margin: 0;
262
- margin-right: 12px;
263
- width: 20px;
264
- height: 20px;
265
- vertical-align: middle;
266
- outline: none;
267
- border: 1px solid #d9d9d9;
268
- border-radius: 4px;
269
- cursor: pointer;
270
- transition: all 0.3s ease;
271
- overflow: hidden;
436
+ .apirocket-modal-content {
437
+ display: flex;
438
+ flex-flow: column;
439
+ width: 480px;
440
+ height: auto;
441
+ padding: 32px;
272
442
  background-color: #fff;
443
+ margin-top: 96px;
444
+ margin-bottom: 32px;
273
445
  }
274
446
 
275
- .apirocket-form-checkbox input:focus {
276
- border-color: #404040;
277
- box-shadow: 0 0 0 1px #404040;
278
- }
279
-
280
- .apirocket-form-checkbox input:checked {
281
- background-color: #404040;
282
- border-color: #404040;
283
- }
284
-
285
- .apirocket-form-checkbox input:disabled { background-color: #f5f5f5; }
286
- .apirocket-form-checkbox input:disabled + .apirocket-form-checkbox-label { color: #a3a3a3; }
287
-
288
- .apirocket-form-checkbox input::after {
289
- display: block;
290
- position: absolute;
291
- width: 20px;
292
- height: 20px;
293
- content: "";
294
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
295
- background-repeat: no-repeat;
296
- background-position: -1px -1px;
297
- transition: all 0.3s ease;
298
- transform: scale(0);
447
+ .apirocket-modal-header {
448
+ position: relative;
449
+ padding-bottom: 32px;
299
450
  }
300
451
 
301
- .apirocket-form-checkbox input:checked::after {
302
- transform: scale(1);
452
+ .apirocket-modal-title {
453
+ font-size: 18px;
454
+ font-weight: bold;
455
+ line-height: 1;
456
+ color: #404040;
457
+ margin-bottom: 8px;
303
458
  }
304
459
 
305
- .apirocket-form-checkbox-error-message {
306
- display: none;
307
- position: absolute;
308
- left: 32px;
309
- bottom: -16px;
460
+ .apirocket-modal-subtitle {
310
461
  font-size: 14px;
311
- line-height: 1.2;
312
- color: #dc2626;
462
+ font-weight: normal;
463
+ line-height: 16px;
464
+ color: #737373;
313
465
  }
314
466
 
315
- .apirocket-form-checkbox.invalid.touched input {
316
- border-color: #dc2626;
317
- box-shadow: 0 0 0 1px #dc2626;
467
+ .apirocket-modal-close {
468
+ position: absolute;
469
+ right: -16px;
470
+ top: -16px;
318
471
  }
319
472
 
320
- .apirocket-form-checkbox.invalid.touched .apirocket-form-checkbox-error-message { display: block; }
321
-
322
- .apirocket-form-radio {
323
- display: flex;
324
- align-items: flex-start;
325
- justify-content: start;
326
- position: relative;
327
- margin-bottom: 16px;
473
+ .apirocket-modal-close-icon {
474
+ height: var(--cart-header-text-close-icon-size, 24px);
475
+ width: var(--cart-header-text-close-icon-size, 24px);
476
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
477
+ cursor: pointer;
328
478
  }
329
479
 
330
- .apirocket-form-radio-label {
331
- position: relative;
332
- flex: 0 1 auto;
333
- display: inline-block;
480
+ .apirocket-modal-body-text-password {
481
+ color: #404040;
334
482
  font-size: 14px;
335
- line-height: 20px;
336
483
  font-weight: normal;
337
- color: #404040;
484
+ line-height: 16px;
485
+ margin-top: -8px;text-align: right;
338
486
  cursor: pointer;
339
487
  }
340
488
 
341
- .apirocket-form-radio-label small {
342
- display: block;
343
- color: #a3a3a3;
344
- font-size: 12px;
345
- }
346
-
347
- .apirocket-form-radio input:checked ~ .apirocket-form-radio-label { font-weight: bold; }
348
- .apirocket-form-radio input:checked ~ .apirocket-form-radio-label small { font-weight: normal; }
349
-
350
- .apirocket-form-radio input:disabled { background-color: #f5f5f5; }
351
- .apirocket-form-radio input:disabled + .apirocket-form-radio-label { color: #a3a3a3; }
352
-
353
- .apirocket-form-radio-label img,
354
- .apirocket-form-radio-label svg {
355
- position: absolute;
356
- display: inline-block;
357
- height: 24px;
358
- min-height: 24px;
359
- top: -2px;
360
- }
489
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
361
490
 
362
- .apirocket-form-radio input {
363
- flex: 0 0 auto;
364
- appearance: none;
365
- -moz-appearance: none;
366
- -webkit-appearance: none;
367
- position: relative;
368
- box-sizing: border-box;
369
- display: inline-block;
370
- padding: 0;
371
- margin: 0;
372
- margin-right: 12px;
373
- width: 20px;
374
- height: 20px;
375
- vertical-align: middle;
376
- outline: none;
377
- border: 1px solid #d9d9d9;
378
- border-radius: 20px;
491
+ .apirocket-modal-footer-text {
492
+ color: #a3a3a3;
493
+ font-size: 14px;
494
+ font-weight: normal;
495
+ line-height: 16px;
496
+ text-align: center;
497
+ margin-top: 16px;
498
+ }
499
+
500
+ .apirocket-modal-footer-text span {
501
+ color: #404040;
379
502
  cursor: pointer;
380
- transition: all 0.3s ease;
381
- overflow: hidden;
382
- background-color: #fff;
383
503
  }
384
504
 
385
- .apirocket-form-radio input:focus {
386
- border-color: #404040;
387
- box-shadow: 0 0 0 1px #404040;
505
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
506
+
507
+
508
+ .apirocket-modal-body {}
509
+
510
+ .apirocket-modal-footer {
511
+ padding-top: 32px;
388
512
  }
389
513
 
390
- .apirocket-form-radio input:checked {
391
- background-color: #404040;
392
- border-color: #404040;
514
+ .apirocket-modal-row {
515
+ display: flex;
516
+ justify-content: space-between;
517
+ align-items: flex-start;
393
518
  }
394
519
 
395
- .apirocket-form-radio input::after {
396
- display: block;
397
- position: absolute;
398
- width: 20px;
399
- height: 20px;
400
- content: "";
401
- background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
402
- background-repeat: no-repeat;
403
- background-position: 6px 6px;
404
- transition: all 0.4s ease;
405
- transform: scale(0);
520
+ .apirocket-modal-row > * {
521
+ flex: 1 1;
522
+ margin-right: 16px;
406
523
  }
407
524
 
408
- .apirocket-form-radio input:checked::after {
409
- transform: scale(1);
525
+ .apirocket-modal-row > *:last-child { margin-right: 0; }
526
+
527
+
528
+ @media (max-width: 720px) {
529
+ .apirocket-modal-row { display: block; }
530
+ .apirocket-modal-row > * { margin-right: 0; }
531
+
532
+ .apirocket-modal-nav { display: none; }
533
+
534
+ .apirocket-modal-content {
535
+ width: 95%;
536
+ margin-top: 32px;
537
+ padding: 24px;
538
+ }
539
+
540
+ .apirocket-modal-close {
541
+ right: -8px;
542
+ top: -8px;
543
+ }
410
544
  }
411
545
 
412
- .apirocket-form-radio-error-message {
413
- display: none;
414
- position: absolute;
415
- left: 32px;
416
- bottom: -16px;
417
- font-size: 14px;
418
- line-height: 1.2;
419
- color: #dc2626;
546
+ .apirocket-modal-messaje {
547
+ margin-top: 32px;
548
+ margin-bottom: 32px;
549
+ text-align: center;
420
550
  }
421
551
 
422
- .apirocket-form-radio.invalid.touched input {
423
- border-color: #dc2626;
424
- box-shadow: 0 0 0 1px #dc2626;
552
+ .apirocket-modal-message-icon {
553
+ display: inline-flex;
554
+ justify-content: center;
555
+ align-items: center;
556
+ width: 48px;
557
+ height: 48px;
558
+ border-radius: 24px;
559
+ margin: auto;
560
+ margin-bottom: 32px;
425
561
  }
426
562
 
427
- .apirocket-form-radio.invalid.touched .apirocket-form-radio-error-message { display: block; }
563
+ .apirocket-modal-message-icon-ok {
564
+ background-color: #d1fae5;
565
+ color: #10b981;
566
+ }
428
567
 
429
- .apirocket-form-select {
568
+ .apirocket-modal-message-title {
569
+ font-size: 18px;
570
+ font-weight: bold;
571
+ line-height: 1;
572
+ text-align: center;
573
+ color: #404040;
574
+ margin-bottom: 16px;
575
+ }
576
+
577
+ .apirocket-modal-message-text {
578
+ color: #737373;
579
+ font-size: 14px;
580
+ font-weight: normal;
581
+ text-align: center;
582
+ line-height: 16px;
583
+ margin-bottom: 32px;
584
+ }.apirocket-form-input {
430
585
  display: block;
431
586
  position: relative;
432
587
  margin-bottom: 16px;
433
588
  }
434
589
 
435
- .apirocket-form-select select {
590
+ .apirocket-form-input input {
436
591
  all: unset;
437
592
  appearance: none;
438
593
  -moz-appearance: none;
@@ -440,477 +595,397 @@ button.apirocket-button-primary:disabled {
440
595
  outline: none;
441
596
  width: 100%;
442
597
  height: 46px;
598
+ background: #fff;
443
599
  border-radius: 4px;
444
600
  border: 1px solid #D9D9D9;
445
601
  font-size: 14px;
446
- line-height: 16px;
602
+ line-height: 1;
447
603
  padding-left: 14px;
448
- padding-right: 50px;
604
+ padding-right: 14px;
449
605
  padding-top: 14px;
450
606
  padding-bottom: 14px;
451
607
  transition: all 0.3s ease;
452
608
  box-sizing: border-box;
453
- cursor: pointer;
454
- }
455
-
456
- .apirocket-form-select select:focus {
457
- border-color: #404040;
458
- box-shadow: 0 0 0 1px #404040;
459
- }
460
-
461
- .apirocket-form-select select:not(:placeholder-shown) {
462
- padding-top: 22px;
463
- padding-bottom: 6px;
464
- }
465
-
466
- .apirocket-form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
467
-
468
- .apirocket-form-select::before {
469
- display: block;
470
- position: absolute;
471
- top: 8px;
472
- right: 0px;
473
- width: 40px;
474
- height: 30px;
475
- content: "";
476
- background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
477
- background-repeat: no-repeat;
478
- background-position: center;
479
- border-left: 1px solid #d9d9d9;
480
- pointer-events: none;
481
- }
482
-
483
- .apirocket-form-select-placeholder {
484
- position: absolute;
485
- font-size: 12px;
486
- line-height: 1;
487
- color: #737373;
488
- transform: translateY(50%);
489
- opacity: 0;
490
- top: 8px;
491
- left: 15px;
492
- transition: all 0.3s ease;
493
- overflow: hidden;
494
- white-space: nowrap;
495
- text-overflow: ellipsis;
496
- }
497
-
498
- .apirocket-form-select select:not(:placeholder-shown) ~ span.apirocket-form-select-placeholder {
499
- opacity: 1;
500
- transform: translateY(0%);
501
- }
502
-
503
- .apirocket-form-select .apirocket-form-select-error-message {
504
- display: none;
505
- font-size: 14px;
506
- line-height: 1.2;
507
- margin-top: 4px;
508
- margin-left: 8px;
509
- color: #dc2626;
510
- }
511
-
512
- .apirocket-form-select.invalid.touched select {
513
- border-color: #dc2626;
514
- box-shadow: 0 0 0 1px #dc2626;
515
609
  }
516
610
 
517
- .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
518
- .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
519
-
520
- :root {
521
- --cart-width: 540px;
522
- --cart-background-color: #fff;
523
- --cart-padding: 32px;
524
- --cart-font-family: Arial, Helvetica, sans-serif;
525
-
526
- --cart-header-background-color: #f5f5f5;
527
- --cart-header-border-color: #f5f5f5;
528
- --cart-header-border-width: 1px;
529
- --cart-header-text-font-size: 18px;
530
- --cart-header-text-font-weight: normal;
531
- --cart-header-text-font-color: #404040;
532
- --cart-header-text-close-icon-color: #a3a3a3;
533
- --cart-header-text-close-icon-size: 24px;
534
-
535
- --cart-footer-background-color: #fff;
536
- --cart-footer-border-color: #e5e5e5;
537
- --cart-footer-border-width: 1px;
538
- --cart-footer-text-font-size: 16px;
539
- --cart-footer-text-font-weight: lighter;
540
- --cart-footer-text-font-color: #404040;
541
- --cart-footer-total-font-size: 18px;
542
- --cart-footer-total-font-weight: bold;
543
- --cart-footer-total-font-color: #000;
544
-
545
- --cart-item-border-color: #e5e5e5;
546
- --cart-item-border-width: 1px;
547
- --cart-item-padding: 32px;
548
- --cart-item-label-font-size: 14px;
549
- --cart-item-label-font-weight: lighter;
550
- --cart-item-label-font-color: #737373;
551
- --cart-item-image-display: inherit;
552
- --cart-item-image-width: 100px;
553
- --cart-item-image-width-fullscreen: 150px;
554
- --cart-item-name-font-size: 18px;
555
- --cart-item-name-font-weight: bold;
556
- --cart-item-name-font-color: #000;
557
- --cart-item-description-font-size: 14px;
558
- --cart-item-description-font-weight: lighter;
559
- --cart-item-description-font-color: #000;
560
- --cart-item-delete-icon-color: #404040;
561
- --cart-item-delete-icon-color-hover: #000;
562
- --cart-item-delete-icon-size: 18px;
563
- --cart-item-form-border-color: #e5e5e5;
564
- --cart-item-form-border-color-hover: #000;
565
- --cart-item-form-border-width: 1px;
566
- --cart-item-form-text-size: 14px;
567
- --cart-item-form-text-weight: normal;
568
- --cart-item-form-text-color: #000;
569
- --cart-item-quantity-icon-color: #737373;
570
- --cart-item-quantity-icon-background-color: transparent;
571
- --cart-item-quantity-icon-size: 16px;
572
- --cart-item-price-font-size: 16px;
573
- --cart-item-price-font-weight: bold;
574
- --cart-item-price-font-color: #404040;
575
-
576
- --cart-button-font-size: 16px;
577
- --cart-button-font-weight: normal;
578
- --cart-button-font-color: #737373;
579
- --cart-button-font-color-hover: #404040;
580
- --cart-button-border-color: #e5e5e5;
581
- --cart-button-border-color-hover: #404040;
582
- --cart-button-border-radius: 4px;
583
- --cart-button-background-color: transparent;
584
- --cart-button-background-color-hover: transparent;
585
- --cart-button-padding-x: 16px;
586
- --cart-button-padding-y: 16px;
587
-
588
- --cart-button-primary-text-color: #fff;
589
- --cart-button-primary-text-color-hover: #fff;
590
- --cart-button-primary-border-color: #1d4ed8;
591
- --cart-button-primary-border-color-hover: #0d59f4;
592
- --cart-button-primary-background-color: #1d4ed8;
593
- --cart-button-primary-background-color-hover: #0d59f4;
594
- /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
611
+ .apirocket-form-input input:focus {
612
+ border-color: #404040;
613
+ box-shadow: 0 0 0 1px #404040;
595
614
  }
596
615
 
597
- .apirocket-cart * { box-sizing: content-box; }
616
+ .apirocket-form-input input:not(:placeholder-shown) {
617
+ padding-top: 22px;
618
+ padding-bottom: 6px;
619
+ }
598
620
 
599
- .apirocket-cart {
600
- position: fixed;
601
- z-index: 10000;
602
- right: 0;
603
- top: 0;
621
+ .apirocket-form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; }
622
+
623
+ .apirocket-form-input-placeholder {
624
+ position: absolute;
625
+ font-size: 12px;
626
+ line-height: 1;
627
+ color: #737373;
628
+ transform: translateY(50%);
629
+ opacity: 0;
630
+ top: 8px;
631
+ left: 15px;
632
+ transition: all 0.3s ease;
604
633
  overflow: hidden;
605
- width: var(--cart-width, 540px);
606
- height: 100vh;
607
- box-shadow: 1px 20px 8px rgba(0,0,0,.1);
608
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
609
- background-color: var(--cart-background-color, #fff);
634
+ white-space: nowrap;
635
+ text-overflow: ellipsis;
610
636
  }
611
637
 
612
- .apirocket-cart-content {
613
- display: flex;
614
- flex-direction: column;
615
- height: 100%;
616
- background-color: var(--cart-background-color, #fff);
638
+ .apirocket-form-input input:not(:placeholder-shown) ~ span.apirocket-form-input-placeholder {
639
+ opacity: 1;
640
+ transform: translateY(0%);
617
641
  }
618
642
 
619
- .apirocket-cart-header {
620
- display: flex;
621
- flex: 0 0 96px;
622
- align-items: center;
623
- justify-content: space-between;
624
- padding: 0px var(--cart-padding);
625
- background-color: var(--cart-header-background-color, #f5f5f5);
626
- border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
643
+ .apirocket-form-input .apirocket-form-input-error-message {
644
+ display: none;
645
+ font-size: 14px;
646
+ line-height: 1.2;
647
+ margin-top: 4px;
648
+ margin-left: 8px;
649
+ color: #dc2626;
627
650
  }
628
651
 
629
- .apirocket-cart-header-title {
630
- font-size: var(--cart-header-text-font-size, 18px);
631
- font-weight: var(--cart-header-text-font-weight, normal);
632
- color: var(--cart-header-text-font-color, #404040)
652
+ .apirocket-form-input.invalid.touched input {
653
+ border-color: #dc2626;
654
+ box-shadow: 0 0 0 1px #dc2626;
633
655
  }
634
656
 
635
- .apirocket-cart-header-close-icon {
636
- height: var(--cart-header-text-close-icon-size, 24px);
637
- width: var(--cart-header-text-close-icon-size, 24px);
638
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
639
- cursor: pointer;
640
- }
657
+ .apirocket-form-input.invalid.touched .apirocket-form-input-placeholder { color: #dc2626; }
658
+ .apirocket-form-input.invalid.touched .apirocket-form-input-error-message { display: block; }
641
659
 
642
- .apirocket-cart-header-continue {
643
- display: none;
660
+ .apirocket-form-input-button {
661
+ position: absolute;
662
+ display: flex;
663
+ justify-content: center;
644
664
  align-items: center;
645
- text-align: left;
646
- color: #737373;
647
- font-size: 16px;
648
- font-weight: normal;
665
+ width: 46px;
666
+ height: 46px;
667
+ right: 0;
668
+ top: 0;
649
669
  cursor: pointer;
670
+ color: #a1a1aa;
650
671
  }
651
672
 
652
- .apirocket-cart-header-login {
653
- display: none;
654
- align-items: center;
655
- text-align: right;
656
- color: #737373;
657
- font-size: 16px;
658
- font-weight: normal;
659
- cursor: pointer;
673
+ .apirocket-form-input-button:hover { color: #52525b; }
674
+
675
+ .apirocket-form-input-button + input {
676
+ padding-right: 64px;
660
677
  }
661
678
 
662
- .apirocket-cart-header-login svg,
663
- .apirocket-cart-header-continue svg { margin-right: 16px; }
664
679
 
665
- .apirocket-cart-body {
666
- flex: 1 1 auto;
667
- padding: 0px;
668
- background: var(--cart-background-color, #fff);
669
- overflow-y: auto;
680
+ .apirocket-form-checkbox {
681
+ display: flex;
682
+ align-items: flex-start;
683
+ justify-content: start;
684
+ position: relative;
685
+ margin-bottom: 16px;
670
686
  }
671
687
 
672
- .apirocket-cart-body-message {
673
- font-size: 18px;
674
- font-weight: var(--cart-item-description-font-weight, lighter);
675
- color: #666;
676
- padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
677
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
688
+ .apirocket-form-checkbox-label {
689
+ flex: 0 1 auto;
690
+ display: block;
691
+ font-size: 14px;
692
+ line-height: 20px;
693
+ font-weight: normal;
694
+ color: #404040;
695
+ cursor: pointer;
678
696
  }
679
697
 
680
- .apirocket-cart-footer {
698
+ .apirocket-form-checkbox-label small {
699
+ display: block;
700
+ color: #a3a3a3;
701
+ font-size: 12px;
702
+ }
703
+
704
+ .apirocket-form-checkbox input {
705
+ all: unset;
681
706
  flex: 0 0 auto;
682
- padding: var(--cart-padding, 32px);
683
- background-color: var(--cart-footer-background-color, transparent);
684
- border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
685
- font-size: var(--cart-footer-text-font-size, 16px);
686
- font-weight: var(--cart-footer-text-font-weight, lighter);
687
- color: var(--cart-footer-text-font-color, #737373);
707
+ appearance: none;
708
+ -moz-appearance: none;
709
+ -webkit-appearance: none;
710
+ position: relative;
711
+ box-sizing: border-box;
712
+ display: inline-block;
713
+ padding: 0;
714
+ margin: 0;
715
+ margin-right: 12px;
716
+ width: 20px;
717
+ height: 20px;
718
+ vertical-align: middle;
719
+ outline: none;
720
+ border: 1px solid #d9d9d9;
721
+ border-radius: 4px;
722
+ cursor: pointer;
723
+ transition: all 0.3s ease;
724
+ overflow: hidden;
725
+ background-color: #fff;
688
726
  }
689
727
 
690
- .apirocket-cart-footer-total {
691
- font-size: var(--cart-footer-total-font-size, 18px);
692
- font-weight: var(--cart-footer-total-font-weight, bold);
693
- color: var(--cart-footer-total-font-color, #000);
728
+ .apirocket-form-checkbox input:focus {
729
+ border-color: #404040;
730
+ box-shadow: 0 0 0 1px #404040;
694
731
  }
695
732
 
696
- .apirocket-cart-row {
697
- display: flex;
698
- justify-content: space-between;
699
- align-items: center;
733
+ .apirocket-form-checkbox input:checked {
734
+ background-color: #404040;
735
+ border-color: #404040;
700
736
  }
701
737
 
702
- .apirocket-cart-col {
703
- flex: 1 1 auto;
704
- margin-bottom: 16px;
738
+ .apirocket-form-checkbox input:disabled { background-color: #f5f5f5; }
739
+ .apirocket-form-checkbox input:disabled + .apirocket-form-checkbox-label { color: #a3a3a3; }
740
+
741
+ .apirocket-form-checkbox input::after {
742
+ display: block;
743
+ position: absolute;
744
+ width: 20px;
745
+ height: 20px;
746
+ content: "";
747
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
748
+ background-repeat: no-repeat;
749
+ background-position: -1px -1px;
750
+ transition: all 0.3s ease;
751
+ transform: scale(0);
705
752
  }
706
753
 
707
- .apirocket-cart-item {
708
- padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
709
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
754
+ .apirocket-form-checkbox input:checked::after {
755
+ transform: scale(1);
710
756
  }
711
757
 
712
- .apirocket-cart-item:last-child {
713
- border-bottom: none;
714
- margin-bottom: var(--cart-padding, 32px);
758
+ .apirocket-form-checkbox-error-message {
759
+ display: none;
760
+ position: absolute;
761
+ left: 32px;
762
+ bottom: -16px;
763
+ font-size: 14px;
764
+ line-height: 1.2;
765
+ color: #dc2626;
715
766
  }
716
767
 
717
- .apirocket-cart-item-row {
768
+ .apirocket-form-checkbox.invalid.touched input {
769
+ border-color: #dc2626;
770
+ box-shadow: 0 0 0 1px #dc2626;
771
+ }
772
+
773
+ .apirocket-form-checkbox.invalid.touched .apirocket-form-checkbox-error-message { display: block; }
774
+
775
+ .apirocket-form-radio {
718
776
  display: flex;
719
- justify-content: space-between;
720
- align-items: center;
777
+ align-items: flex-start;
778
+ justify-content: start;
779
+ position: relative;
780
+ margin-bottom: 16px;
721
781
  }
722
782
 
723
- .apirocket-cart-item-col-image {
724
- display: var(--cart-item-image-display, inherit);
725
- flex: 0 0 var(--cart-item-image-width, 100px);
726
- align-self: flex-start;
727
- margin-right: 16px;
783
+ .apirocket-form-radio-label {
784
+ position: relative;
785
+ flex: 0 1 auto;
786
+ display: inline-block;
787
+ font-size: 14px;
788
+ line-height: 20px;
789
+ font-weight: normal;
790
+ color: #404040;
791
+ cursor: pointer;
728
792
  }
729
793
 
730
- .apirocket-cart-item-col-image img {
794
+ .apirocket-form-radio-label small {
731
795
  display: block;
732
- max-width: 100%;
796
+ color: #a3a3a3;
797
+ font-size: 12px;
733
798
  }
734
799
 
735
- .apirocket-cart-item-col-description {
736
- align-self: flex-start;
737
- padding-right: 32px;
738
- flex-grow: 1;
739
- }
800
+ .apirocket-form-radio input:checked ~ .apirocket-form-radio-label { font-weight: bold; }
801
+ .apirocket-form-radio input:checked ~ .apirocket-form-radio-label small { font-weight: normal; }
740
802
 
741
- .apirocket-cart-item-col-description-name {
742
- font-size: var(--cart-item-name-font-size, 18px);
743
- font-weight: var(--cart-item-name-font-weight, bold);
744
- color: var(--cart-item-name-font-color, #000);
745
- }
803
+ .apirocket-form-radio input:disabled { background-color: #f5f5f5; }
804
+ .apirocket-form-radio input:disabled + .apirocket-form-radio-label { color: #a3a3a3; }
746
805
 
747
- .apirocket-cart-item-col-description-text {
748
- font-size: var(--cart-item-description-font-size, 14px);
749
- font-weight: var(--cart-item-description-font-weight, lighter);
750
- color: var(--cart-item-description-font-color, #000);
806
+ .apirocket-form-radio-label img,
807
+ .apirocket-form-radio-label svg {
808
+ position: absolute;
809
+ display: inline-block;
810
+ height: 24px;
811
+ min-height: 24px;
812
+ top: -2px;
751
813
  }
752
814
 
753
- .apirocket-cart-item-col-delete {
754
- flex: 1 0 auto;
755
- align-self: flex-start;
756
- color: var(--cart-item-delete-icon-color, #404040);
757
- width: var(--cart-item-delete-icon-size, 24px);
815
+ .apirocket-form-radio input {
816
+ flex: 0 0 auto;
817
+ appearance: none;
818
+ -moz-appearance: none;
819
+ -webkit-appearance: none;
820
+ position: relative;
821
+ box-sizing: border-box;
822
+ display: inline-block;
823
+ padding: 0;
824
+ margin: 0;
825
+ margin-right: 12px;
826
+ width: 20px;
827
+ height: 20px;
828
+ vertical-align: middle;
829
+ outline: none;
830
+ border: 1px solid #d9d9d9;
831
+ border-radius: 20px;
758
832
  cursor: pointer;
759
- text-align: center;
833
+ transition: all 0.3s ease;
834
+ overflow: hidden;
835
+ background-color: #fff;
760
836
  }
761
837
 
762
- .apirocket-cart-item-col-delete:hover {
763
- color: var(--cart-item-delete-icon-color-hover, #000);
838
+ .apirocket-form-radio input:focus {
839
+ border-color: #404040;
840
+ box-shadow: 0 0 0 1px #404040;
764
841
  }
765
842
 
766
- .apirocket-cart-item-col-delete svg {
767
- width: var(--cart-item-delete-icon-size, 18px);
768
- height: var(--cart-item-delete-icon-size, 18px);
843
+ .apirocket-form-radio input:checked {
844
+ background-color: #404040;
845
+ border-color: #404040;
769
846
  }
770
847
 
771
- .apirocket-cart-item-label {
772
- font-size: var(--cart-item-label-font-size, 14px);
773
- font-weight: var(--cart-item-label-font-weight, lighter);
774
- color: var(--cart-item-label-font-color, #737373);
775
- margin-bottom: 4px;
848
+ .apirocket-form-radio input::after {
849
+ display: block;
850
+ position: absolute;
851
+ width: 20px;
852
+ height: 20px;
853
+ content: "";
854
+ background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E%0A");
855
+ background-repeat: no-repeat;
856
+ background-position: 6px 6px;
857
+ transition: all 0.4s ease;
858
+ transform: scale(0);
776
859
  }
777
860
 
778
- .apirocket-cart-item-col-quantity {
779
- margin-top: 16px;
861
+ .apirocket-form-radio input:checked::after {
862
+ transform: scale(1);
780
863
  }
781
864
 
782
- .apirocket-cart-item-quantity-wrapper {
783
- display: flex;
784
- justify-content: space-between;
785
- border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
786
- min-width: 160px;
787
- user-select: none;
788
- transition-property: border-color;
789
- transition-timing-function: ease;
790
- transition-duration: 350ms;
865
+ .apirocket-form-radio-error-message {
866
+ display: none;
867
+ position: absolute;
868
+ left: 32px;
869
+ bottom: -16px;
870
+ font-size: 14px;
871
+ line-height: 1.2;
872
+ color: #dc2626;
791
873
  }
792
874
 
793
- .apirocket-cart-item-quantity-wrapper:hover {
794
- border-color: var(--cart-item-form-border-color-hover, #000);
875
+ .apirocket-form-radio.invalid.touched input {
876
+ border-color: #dc2626;
877
+ box-shadow: 0 0 0 1px #dc2626;
795
878
  }
796
879
 
797
- .apirocket-cart-item-quantity-number {
798
- flex: 1 1 auto;
799
- font-size: var(--cart-item-form-text-size, 14px);
800
- font-weight: var(--cart-item-form-text-weight, normal);
801
- color: var(--cart-item-form-text-color, #000);
802
- padding: 16px;
803
- line-height: 1;
804
- text-align: center;
880
+ .apirocket-form-radio.invalid.touched .apirocket-form-radio-error-message { display: block; }
881
+
882
+ .apirocket-form-select {
883
+ display: block;
884
+ position: relative;
885
+ margin-bottom: 16px;
805
886
  }
806
887
 
807
- .apirocket-cart-item-quantity-button {
808
- display: flex;
809
- align-items: center;
810
- background-color: var(--cart-item-quantity-icon-background-color, transparent);
811
- padding: 0px 12px;
888
+ .apirocket-form-select select {
889
+ all: unset;
890
+ appearance: none;
891
+ -moz-appearance: none;
892
+ -webkit-appearance: none;
893
+ outline: none;
894
+ width: 100%;
895
+ height: 46px;
896
+ border-radius: 4px;
897
+ border: 1px solid #D9D9D9;
898
+ font-size: 14px;
899
+ line-height: 16px;
900
+ padding-left: 14px;
901
+ padding-right: 50px;
902
+ padding-top: 14px;
903
+ padding-bottom: 14px;
904
+ transition: all 0.3s ease;
905
+ box-sizing: border-box;
812
906
  cursor: pointer;
813
907
  }
814
908
 
815
- .apirocket-cart-item-quantity-button svg {
816
- color: var(--cart-item-quantity-icon-color, #737373);
817
- width: var(--cart-item-quantity-icon-size, 16px);
818
- height: var(--cart-item-quantity-icon-size, 16px);
909
+ .apirocket-form-select select:focus {
910
+ border-color: #404040;
911
+ box-shadow: 0 0 0 1px #404040;
819
912
  }
820
913
 
821
- .apirocket-cart-item-col-price {
822
- margin-top: 36px;
823
- font-size: var(--cart-item-price-font-size, 16px);
824
- font-weight: var(--cart-item-price-font-weight, normal);
825
- color: var(--cart-item-price-font-color, #404040);
914
+ .apirocket-form-select select:not(:placeholder-shown) {
915
+ padding-top: 22px;
916
+ padding-bottom: 6px;
826
917
  }
827
918
 
919
+ .apirocket-form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
828
920
 
829
- @media (min-width: 720px) {
830
-
831
- .apirocket-cart.apirocket-cart-full-screen {
832
- width: 100%;
833
- overflow-y: auto;
834
- }
835
-
836
- .apirocket-cart-full-screen .apirocket-cart-content {
837
- display: block;
838
- width: 90%;
839
- max-width: 980px;
840
- margin: 0 auto;
841
- }
842
-
843
- .apirocket-cart-full-screen .apirocket-cart-header {
844
- background-color: #fff;
845
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
846
- padding: 40px 0px;
847
- }
848
-
849
- .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
850
- .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
851
-
852
- .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
853
-
854
- .apirocket-cart-full-screen .apirocket-cart-footer {
855
- width: 40%;
856
- border-top: none;
857
- margin-left: auto;
858
- margin-right: 0;
859
- padding: 0px;
860
- padding-top: 32px;
861
- padding-bottom: 96px;
862
- }
863
-
864
- .apirocket-cart-full-screen .apirocket-cart-item {
865
- display: flex;
866
- position: relative;
867
- padding-left: 0;
868
- padding-right: 0;
869
- }
870
-
871
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
872
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
873
-
874
- .apirocket-cart-full-screen .apirocket-cart-item:last-child {
875
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
876
- }
877
-
878
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
879
- .apirocket-cart-full-screen .apirocket-cart-item-col-price {
880
- align-self: flex-end;
881
- line-height: 48px;
882
- }
883
-
884
- .apirocket-cart-full-screen .apirocket-cart-item-col-image {
885
- flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
886
- }
887
-
888
- .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
889
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
921
+ .apirocket-form-select::before {
922
+ display: block;
923
+ position: absolute;
924
+ top: 8px;
925
+ right: 0px;
926
+ width: 40px;
927
+ height: 30px;
928
+ content: "";
929
+ background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z' fill='%23A3A3A3'/%3E%3C/svg%3E%0A");
930
+ background-repeat: no-repeat;
931
+ background-position: center;
932
+ border-left: 1px solid #d9d9d9;
933
+ pointer-events: none;
934
+ }
890
935
 
891
- .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
892
- position: absolute;
893
- right: 0px;
894
- top: var(--cart-item-padding, 32px);
895
- }
936
+ .apirocket-form-select-placeholder {
937
+ position: absolute;
938
+ font-size: 12px;
939
+ line-height: 1;
940
+ color: #737373;
941
+ transform: translateY(50%);
942
+ opacity: 0;
943
+ top: 8px;
944
+ left: 15px;
945
+ transition: all 0.3s ease;
946
+ overflow: hidden;
947
+ white-space: nowrap;
948
+ text-overflow: ellipsis;
896
949
  }
897
950
 
898
- @media (min-width: 720px) and (max-width: 920px) {
899
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
900
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
951
+ .apirocket-form-select select:not(:placeholder-shown) ~ span.apirocket-form-select-placeholder {
952
+ opacity: 1;
953
+ transform: translateY(0%);
901
954
  }
902
955
 
903
- /* Mobile version */
956
+ .apirocket-form-select .apirocket-form-select-error-message {
957
+ display: none;
958
+ font-size: 14px;
959
+ line-height: 1.2;
960
+ margin-top: 4px;
961
+ margin-left: 8px;
962
+ color: #dc2626;
963
+ }
904
964
 
905
- @media (max-width: 720px) {
965
+ .apirocket-form-select.invalid.touched select {
966
+ border-color: #dc2626;
967
+ box-shadow: 0 0 0 1px #dc2626;
968
+ }
906
969
 
907
- .apirocket-cart {
908
- width: 100%;
909
- box-shadow: none;
910
- }
970
+ .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
971
+ .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
911
972
 
912
- .apirocket-cart-header-continue { display: none; }
913
- .apirocket-cart-header-login { display: none; }
973
+ .apirocket-error-block {
974
+ display: flex;
975
+ justify-content: start;
976
+ align-items: center;
977
+ background-color: #fef2f2;
978
+ padding: 16px;
979
+ color: #dc2626;
980
+ font-size: 14px;
981
+ line-height: 18px;
982
+ border-radius: 8px;
983
+ margin-top: 16px;
984
+ margin-bottom: 0px;
985
+ }
986
+
987
+ .apirocket-error-block-icon {
988
+ margin-right: 12px;
914
989
  }.apirocket-checkout * { box-sizing: content-box; }
915
990
 
916
991
  .apirocket-checkout {
@@ -1593,196 +1668,121 @@ button.apirocket-button-primary:disabled {
1593
1668
  }
1594
1669
 
1595
1670
 
1596
- .apirocket-modal *,
1597
- .apirocket-modal *::before,
1598
- .apirocket-modal *::after { box-sizing: border-box; }
1599
1671
 
1600
- .apirocket-modal {
1601
- display: flex;
1602
- justify-content: center;
1603
- align-items: flex-start;
1604
- position: fixed;
1605
- z-index: 10001;
1606
- right: 0;
1607
- top: 0;
1608
- overflow: hidden;
1609
- overflow-y: auto;
1672
+ .apirocket-button,
1673
+ button.apirocket-button {
1674
+ box-sizing: border-box !important;
1675
+ display: block;
1610
1676
  width: 100%;
1611
- height: 100vh;
1612
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1613
- background-color: #f5f5f5;
1614
- }
1615
-
1616
- .apirocket-modal-nav {
1617
- position: absolute;
1618
- display: flex;
1619
- align-items: center;
1620
- width: 90%;
1621
- max-width: 1100px;
1622
- height: 96px;
1677
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1678
+ margin: 0px;
1679
+ border-radius: var(--cart-button-border-radius, 4px);
1680
+ background-color: var(--cart-button-background-color, transparent);
1681
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
1682
+ color: var(--cart-button-font-color, #737373);
1683
+ line-height: 1;
1684
+ font-size: var(--cart-button-font-size, 16px);
1685
+ font-weight: var(--cart-button-font-weight, normal);
1686
+ text-align: center;
1687
+ transition-property: color, border-color, background-color, box-shadow;
1688
+ transition-timing-function: ease;
1689
+ transition-duration: 350ms;
1690
+ cursor: pointer;
1623
1691
  }
1624
1692
 
1625
- .apirocket-modal-nav-button {
1626
- display: flex;
1627
- align-items: center;
1628
- text-align: left;
1629
- color: #737373;
1630
- font-size: 16px;
1631
- font-weight: normal;
1632
- cursor: pointer;
1693
+ .apirocket-button:hover {
1694
+ background-color: var(--cart-button-background-color-hover, transparent);
1695
+ border-color: var(--cart-button-border-color-hover, #404040);
1696
+ color: var(--cart-button-font-color-hover, #404040);
1633
1697
  }
1634
1698
 
1635
- .apirocket-modal-nav-button svg { margin-right: 16px; }
1636
-
1637
- .apirocket-modal-content {
1638
- display: flex;
1639
- flex-flow: column;
1640
- width: 480px;
1641
- height: auto;
1642
- padding: 32px;
1643
- background-color: #fff;
1644
- margin-top: 96px;
1645
- margin-bottom: 32px;
1699
+ .apirocket-button:focus {
1700
+ outline: none;
1701
+ text-decoration: underline;
1646
1702
  }
1647
-
1648
- .apirocket-modal-header {
1703
+ /*
1704
+ .apirocket-button-loading {
1649
1705
  position: relative;
1650
- padding-bottom: 32px;
1651
- }
1652
-
1653
- .apirocket-modal-title {
1654
- font-size: 18px;
1655
- font-weight: bold;
1656
- line-height: 1;
1657
- color: #404040;
1658
- margin-bottom: 8px;
1659
- }
1706
+ } */
1660
1707
 
1661
- .apirocket-modal-subtitle {
1662
- font-size: 14px;
1663
- font-weight: normal;
1664
- line-height: 16px;
1665
- color: #737373;
1708
+ .apirocket-button-wraper {
1709
+ position: relative;
1710
+ display: inline-block;
1711
+ width: 32px;
1666
1712
  }
1667
1713
 
1668
- .apirocket-modal-close {
1714
+ .apirocket-button-spinner {
1669
1715
  position: absolute;
1670
- right: -16px;
1671
- top: -16px;
1672
- }
1673
-
1674
- .apirocket-modal-close-icon {
1675
- height: var(--cart-header-text-close-icon-size, 24px);
1676
- width: var(--cart-header-text-close-icon-size, 24px);
1677
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
1678
- cursor: pointer;
1716
+ width: 22px;
1717
+ height: 22px;
1718
+ top: -11px;
1719
+ left: 0;
1720
+ right: 0;
1721
+ bottom: 0;
1722
+ margin: auto;
1723
+ border: 4px solid currentColor;
1724
+ border-top-color: transparent !important;
1725
+ border-radius: 50%;
1726
+ animation: button-loading-spinner 1s ease infinite;
1679
1727
  }
1680
1728
 
1681
- .apirocket-modal-body-text-password {
1682
- color: #404040;
1683
- font-size: 14px;
1684
- font-weight: normal;
1685
- line-height: 16px;
1686
- margin-top: -8px;text-align: right;
1687
- cursor: pointer;
1729
+ @keyframes button-loading-spinner {
1730
+ from { transform: rotate(0turn) }
1731
+ to { transform: rotate(1turn) }
1688
1732
  }
1689
1733
 
1690
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
1691
-
1692
- .apirocket-modal-footer-text {
1693
- color: #a3a3a3;
1694
- font-size: 14px;
1695
- font-weight: normal;
1696
- line-height: 16px;
1697
- text-align: center;
1698
- margin-top: 16px;
1734
+ .apirocket-button-link,
1735
+ button.apirocket-button-link {
1736
+ display: flex;
1737
+ align-items: center;
1738
+ text-align: left;
1739
+ justify-content: flex-start;
1740
+ align-items: center;
1741
+ border: none;
1742
+ padding-left: 0;
1743
+ padding-right: 0;
1744
+ width: auto;
1745
+ overflow: hidden;
1746
+ white-space: nowrap;
1747
+ text-overflow: ellipsis;
1699
1748
  }
1700
1749
 
1701
- .apirocket-modal-footer-text span {
1702
- color: #404040;
1703
- cursor: pointer;
1750
+ .apirocket-button-link span {
1751
+ margin-left: 16px;
1752
+ margin-right: 16px;
1704
1753
  }
1705
1754
 
1706
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
1707
-
1708
-
1709
- .apirocket-modal-body {}
1710
-
1711
- .apirocket-modal-footer {
1712
- padding-top: 32px;
1755
+ .apirocket-button-primary,
1756
+ button.apirocket-button-primary {
1757
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
1758
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
1759
+ color: var(--cart-button-primary-text-color, #fff);
1713
1760
  }
1714
1761
 
1715
- .apirocket-modal-row {
1716
- display: flex;
1717
- justify-content: space-between;
1718
- align-items: flex-start;
1762
+ button.apirocket-button-primary:disabled {
1763
+ background-color: #eee;
1764
+ border-color: #eee;
1765
+ color: #ccc;
1719
1766
  }
1720
1767
 
1721
- .apirocket-modal-row > * {
1722
- flex: 1 1;
1723
- margin-right: 16px;
1768
+ .apirocket-button-primary:hover {
1769
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1770
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1771
+ color: var(--cart-button-primary-text-color-hover, #fff);
1772
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
1724
1773
  }
1725
1774
 
1726
- .apirocket-modal-row > *:last-child { margin-right: 0; }
1727
-
1728
1775
 
1729
1776
  @media (max-width: 720px) {
1730
- .apirocket-modal-row { display: block; }
1731
- .apirocket-modal-row > * { margin-right: 0; }
1732
-
1733
- .apirocket-modal-nav { display: none; }
1734
1777
 
1735
- .apirocket-modal-content {
1736
- width: 95%;
1737
- margin-top: 32px;
1738
- padding: 24px;
1778
+ .apirocket-button-link {
1779
+ width: 100%;
1780
+ justify-content: center;
1739
1781
  }
1740
1782
 
1741
- .apirocket-modal-close {
1742
- right: -8px;
1743
- top: -8px;
1744
- }
1745
- }
1746
-
1747
- .apirocket-modal-messaje {
1748
- margin-top: 32px;
1749
- margin-bottom: 32px;
1750
- text-align: center;
1751
- }
1752
-
1753
- .apirocket-modal-message-icon {
1754
- display: inline-flex;
1755
- justify-content: center;
1756
- align-items: center;
1757
- width: 48px;
1758
- height: 48px;
1759
- border-radius: 24px;
1760
- margin: auto;
1761
- margin-bottom: 32px;
1762
- }
1763
-
1764
- .apirocket-modal-message-icon-ok {
1765
- background-color: #d1fae5;
1766
- color: #10b981;
1767
- }
1768
-
1769
- .apirocket-modal-message-title {
1770
- font-size: 18px;
1771
- font-weight: bold;
1772
- line-height: 1;
1773
- text-align: center;
1774
- color: #404040;
1775
- margin-bottom: 16px;
1776
1783
  }
1777
1784
 
1778
- .apirocket-modal-message-text {
1779
- color: #737373;
1780
- font-size: 14px;
1781
- font-weight: normal;
1782
- text-align: center;
1783
- line-height: 16px;
1784
- margin-bottom: 32px;
1785
- }.apirocket-summary {}
1785
+ .apirocket-summary {}
1786
1786
 
1787
1787
  .apirocket-summary-top {
1788
1788
  margin-top: 56px;