apirocket 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,624 +1,798 @@
1
- :root {
2
- --cart-width: 540px;
3
- --cart-background-color: #fff;
4
- --cart-padding: 32px;
5
- --cart-font-family: Arial, Helvetica, sans-serif;
1
+ .apirocket-summary {}
6
2
 
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;
3
+ .apirocket-summary-top {
4
+ margin-top: 56px;
5
+ margin-bottom: 32px;
6
+ }
15
7
 
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;
8
+ .apirocket-summary-header {
9
+ display: flex;
10
+ justify-content: flex-start;
11
+ align-items: center;
12
+ margin-bottom: 32px;
13
+ }
25
14
 
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;
15
+ .apirocket-summary-header-icon {
16
+ flex: 0 1;
17
+ margin-right: 16px;
18
+ }
56
19
 
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;
20
+ .apirocket-summary-header-content {}
68
21
 
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); */
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;
76
28
  }
77
29
 
78
- .apirocket-cart * { box-sizing: content-box; }
30
+ .apirocket-summary-header-subtitle {
31
+ font-size: 18px;
32
+ font-weight: normal;
33
+ line-height: 1.2;
34
+ color: #737373;
35
+ }
79
36
 
80
- .apirocket-cart {
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; }
114
+
115
+ .apirocket-checkout {
116
+ display: block;
81
117
  position: fixed;
82
118
  z-index: 10000;
83
119
  right: 0;
84
120
  top: 0;
85
121
  overflow: hidden;
86
- width: var(--cart-width, 540px);
122
+ overflow-y: auto;
123
+ width: 100%;
87
124
  height: 100vh;
88
- box-shadow: 1px 20px 8px rgba(0,0,0,.1);
89
125
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
90
- background-color: var(--cart-background-color, #fff);
126
+ background-color: #fff;
91
127
  }
92
128
 
93
- .apirocket-cart-content {
129
+ .apirocket-checkout-wrap {
94
130
  display: flex;
95
- flex-direction: column;
96
- height: 100%;
97
- background-color: var(--cart-background-color, #fff);
131
+ margin: 0 auto;
132
+ width: 90%;
133
+ min-height: 100%;
134
+ max-width: 1100px;
135
+ padding: 0 5%;
136
+
98
137
  }
99
138
 
100
- .apirocket-cart-header {
101
- display: flex;
102
- flex: 0 0 96px;
103
- align-items: center;
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);
139
+ .apirocket-checkout-main {
140
+ order: 1;
141
+ width: 52%;
142
+ padding-right: 48px;
108
143
  }
109
144
 
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)
145
+ .apirocket-checkout-summary {
146
+ order: 2;
147
+ position: relative;
148
+ width: 40%;
149
+ padding-left: 48px;
114
150
  }
115
151
 
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);
120
- cursor: pointer;
152
+ .apirocket-checkout-summary::after {
153
+ position: absolute;
154
+ display: block;
155
+ top: 0;
156
+ left: 0;
157
+ content: "";
158
+ width: 300%;
159
+ height: 100%;
160
+ background: #f5f5f5;
161
+ z-index: -1;
121
162
  }
122
163
 
123
- .apirocket-cart-header-continue {
124
- display: none;
164
+ .apirocket-checkout-continue {
165
+ display: flex;
125
166
  align-items: center;
126
167
  text-align: left;
168
+ margin-top: 40px;
169
+ margin-bottom: 40px;
127
170
  color: #737373;
128
171
  font-size: 16px;
129
172
  font-weight: normal;
130
173
  cursor: pointer;
131
174
  }
132
175
 
133
- .apirocket-cart-header-login {
176
+ .apirocket-checkout-close {
134
177
  display: none;
135
- align-items: center;
136
- text-align: right;
137
- color: #737373;
138
- font-size: 16px;
139
- font-weight: normal;
140
178
  cursor: pointer;
179
+ position: absolute;
180
+ top: 16px;
181
+ right: 32px;
141
182
  }
142
183
 
143
- .apirocket-cart-header-login svg,
144
- .apirocket-cart-header-continue svg { margin-right: 16px; }
184
+ .apirocket-checkout-summary-container {
185
+ display: flex;
186
+ flex-flow: column;
187
+ max-height: calc(100vh - 5%);
188
+ overflow: hidden;
189
+ }
145
190
 
146
- .apirocket-cart-body {
147
- flex: 1 1 auto;
148
- padding: 0px;
149
- background: var(--cart-background-color, #fff);
150
- overflow-y: auto;
191
+ .apirocket-checkout-summary-top {
192
+ flex: 0 0 auto;
151
193
  }
152
194
 
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);
195
+ .apirocket-checkout-summary-content {
196
+ flex: 1 1 auto;
197
+ overflow-y: scroll;
159
198
  }
160
199
 
161
- .apirocket-cart-footer {
200
+ .apirocket-checkout-summary-footer {
162
201
  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);
169
202
  }
170
203
 
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 {
204
+ .apirocket-checkout-summary-login {
178
205
  display: flex;
179
- justify-content: space-between;
180
206
  align-items: center;
207
+ justify-content: end;
208
+ text-align: right;
209
+ margin-top: 40px;
210
+ margin-bottom: 40px;
211
+ color: #737373;
212
+ font-size: 16px;
213
+ font-weight: normal;
214
+ cursor: pointer;
181
215
  }
182
216
 
183
- .apirocket-cart-col {
184
- flex: 1 1 auto;
185
- margin-bottom: 16px;
186
- }
217
+ .apirocket-checkout-summary-login svg,
218
+ .apirocket-checkout-continue svg { margin-right: 16px; }
187
219
 
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);
220
+ .apirocket-checkout-summary-header {
221
+ display: flex;
222
+ justify-content: space-between;
223
+ align-items: center;
224
+ margin-top: 56px;
225
+ margin-bottom: 48px;
191
226
  }
192
227
 
193
- .apirocket-cart-item:last-child {
194
- border-bottom: none;
195
- margin-bottom: var(--cart-padding, 32px);
228
+ .apirocket-checkout-summary-header :last-child a {
229
+ font-size: 14px;
230
+ font-weight: normal;
231
+ color: #737373;
196
232
  }
197
233
 
198
- .apirocket-cart-item-row {
234
+ .apirocket-checkout-summary-item {
199
235
  display: flex;
200
- justify-content: space-between;
201
- align-items: center;
236
+ justify-content: stretch;
237
+ align-items: flex-start;
238
+ padding-bottom: 16px;
239
+ border-bottom: 1px solid #d9d9d9;
240
+ margin-bottom: 16px;
202
241
  }
203
242
 
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;
208
- margin-right: 16px;
243
+ .apirocket-checkout-summary-item-col-image {
244
+ flex: 0 0 auto;
245
+ max-width: 100px;
246
+ border: 1px solid #e5e5e5;
247
+ border-radius: 4px;
248
+ overflow: hidden;
209
249
  }
210
250
 
211
- .apirocket-cart-item-col-image img {
251
+ .apirocket-checkout-summary-item-col-image img {
212
252
  display: block;
213
253
  max-width: 100%;
254
+ max-height: 100px;
214
255
  }
215
256
 
216
- .apirocket-cart-item-col-description {
217
- align-self: flex-start;
218
- padding-right: 32px;
219
- flex-grow: 1;
220
- }
221
-
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);
257
+ .apirocket-checkout-summary-item-col-description {
258
+ flex: 1 1 auto;
259
+ padding-left: 16px;
260
+ padding-right: 8px;
261
+ font-size: 14px;
262
+ font-weight: bold;
263
+ line-height: 18px;
226
264
  }
227
265
 
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);
266
+ .apirocket-checkout-summary-item-col-description small {
267
+ display: block;
268
+ font-size: 14px;
269
+ font-weight: normal;
270
+ color: #a3a3a3;
232
271
  }
233
272
 
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;
273
+ .apirocket-checkout-summary-item-col-quantity {
274
+ flex: 0 0 50px;
275
+ font-size: 16px;
276
+ font-weight: normal;
277
+ color: #a3a3a3;
278
+ text-align: right;
241
279
  }
242
280
 
243
- .apirocket-cart-item-col-delete:hover {
244
- color: var(--cart-item-delete-icon-color-hover, #000);
281
+ .apirocket-checkout-summary-item-col-price {
282
+ flex: 0 0 100px;
283
+ font-size: 16px;
284
+ font-weight: bold;
285
+ color: #404040;
286
+ text-align: right;
245
287
  }
246
288
 
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);
289
+ .apirocket-checkout-summary-row {
290
+ display: flex;
291
+ justify-content: space-between;
292
+ align-items: center;
293
+ padding-top: 16px;
250
294
  }
251
295
 
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;
296
+ .apirocket-checkout-summary-label {
297
+ font-size: 16px;
298
+ font-weight: normal;
299
+ line-height: 18px;
300
+ color: #404040;
257
301
  }
258
302
 
259
- .apirocket-cart-item-col-quantity {
260
- margin-top: 16px;
303
+ .apirocket-checkout-summary-value {
304
+ font-size: 18px;
305
+ font-weight: bold;
306
+ line-height: 18px;
307
+ color: #404040;
261
308
  }
262
309
 
263
- .apirocket-cart-item-quantity-wrapper {
310
+ .apirocket-checkout-summary-row-total {
264
311
  display: flex;
265
312
  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;
313
+ align-items: flex-start;
314
+ border-top: 1px solid #d9d9d9;
315
+ margin-top: 24px;
316
+ padding-top: 24px;
272
317
  }
273
318
 
274
- .apirocket-cart-item-quantity-wrapper:hover {
275
- border-color: var(--cart-item-form-border-color-hover, #000);
319
+ .apirocket-checkout-summary-label-total {
320
+ font-size: 18px;
321
+ font-weight: bold;
322
+ line-height: 21px;
323
+ color: #404040;
324
+ }
325
+ .apirocket-checkout-summary-label-total small {
326
+ display: block;
327
+ font-size: 14px;
328
+ line-height: 16px;
329
+ font-weight: normal;
330
+ color: #a3a3a3;
276
331
  }
277
332
 
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;
284
- line-height: 1;
285
- text-align: center;
333
+ .apirocket-checkout-summary-value-total {
334
+ font-size: 24px;
335
+ font-weight: bold;
336
+ line-height: 24px;
337
+ color: #404040;
286
338
  }
287
339
 
288
- .apirocket-cart-item-quantity-button {
340
+ .apirocket-checkout-breadcrumbs ol {
289
341
  display: flex;
290
342
  align-items: center;
291
- background-color: var(--cart-item-quantity-icon-background-color, transparent);
292
- padding: 0px 12px;
293
- cursor: pointer;
343
+ list-style: none;
344
+ padding: 0;
345
+ margin: 0;
346
+ margin-top: 24px;
294
347
  }
295
348
 
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);
349
+ .apirocket-checkout-breadcrumbs ol li {
350
+ cursor: pointer;
351
+ color: #a3a3a3;
352
+ font-size: 14px;
353
+ line-height: 1;
300
354
  }
301
355
 
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);
356
+ .apirocket-checkout-breadcrumbs ol li::after {
357
+ width: 5px;
358
+ height: 9px;
359
+ display: inline-block;
360
+ content: "";
361
+ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
362
+ background-repeat: no-repeat;
363
+ background-position: center;
364
+ padding: 0 8px;
307
365
  }
308
366
 
367
+ .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
309
368
 
310
- @media (min-width: 720px) {
369
+ .apirocket-checkout-breadcrumbs ol li a {
370
+ color: #a3a3a3;
371
+ text-decoration: underline;
372
+ }
311
373
 
312
- .apirocket-cart.apirocket-cart-full-screen {
313
- width: 100%;
314
- overflow-y: auto;
315
- }
374
+ .apirocket-checkout-breadcrumbs-active {
375
+ font-weight: bold;
376
+ color: #404040 !important;
377
+ }
316
378
 
317
- .apirocket-cart-full-screen .apirocket-cart-content {
318
- display: block;
319
- width: 90%;
320
- max-width: 980px;
321
- margin: 0 auto;
322
- }
379
+ .apirocket-checkout-steps-summary {
380
+ border: 1px solid #d9d9d9;
381
+ border-radius: 4px;
382
+ overflow: hidden;
383
+ margin-top: 48px;
384
+ }
323
385
 
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; }
386
+ .apirocket-checkout-steps-summary-row {
387
+ display: flex;
388
+ position: relative;
389
+ border-bottom: 1px solid #d9d9d9;
390
+ padding: 16px;
391
+ }
371
392
 
372
- .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
373
- position: absolute;
374
- right: 0px;
375
- top: var(--cart-item-padding, 32px);
376
- }
393
+ .apirocket-checkout-steps-summary-label {
394
+ flex: 0 0 90px;
395
+ font-size: 14px;
396
+ font-weight: normal;
397
+ line-height: 14px;
398
+ color: #a3a3a3;
377
399
  }
378
400
 
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%; }
401
+ .apirocket-checkout-steps-summary-text {
402
+ flex: 1 1 auto;
403
+ font-size: 14px;
404
+ font-weight: normal;
405
+ line-height: 18px;
406
+ color: #404040;
382
407
  }
383
408
 
384
- /* Mobile version */
409
+ .apirocket-checkout-steps-summary-link {
410
+ flex: 0 0 60px;
411
+ text-align: right;
412
+ font-size: 12px;
413
+ font-weight: normal;
414
+ line-height: 1;
415
+ text-decoration: underline;
416
+ color: #737373;
417
+ cursor: pointer;
418
+ }
385
419
 
386
- @media (max-width: 720px) {
420
+ .apirocket-checkout-section {
421
+ margin-top: 48px;
422
+ }
387
423
 
388
- .apirocket-cart {
389
- width: 100%;
390
- box-shadow: none;
391
- }
424
+ .apirocket-checkout-section-header {
425
+ margin-bottom: 24px;
426
+ }
392
427
 
393
- .apirocket-cart-header-continue { display: none; }
394
- .apirocket-cart-header-login { display: none; }
428
+ .apirocket-checkout-section-title {
429
+ font-size: 18px;
430
+ font-weight: bold;
431
+ line-height: 1;
432
+ color: #404040;
395
433
  }
396
- .apirocket-button,
397
- button.apirocket-button {
398
- box-sizing: border-box !important;
399
- display: block;
400
- width: 100%;
401
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
402
- margin: 0px;
403
- border-radius: var(--cart-button-border-radius, 4px);
404
- background-color: var(--cart-button-background-color, transparent);
405
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
406
- color: var(--cart-button-font-color, #737373);
434
+
435
+ .apirocket-checkout-section-subtitle {
436
+ font-size: 12px;
437
+ font-weight: normal;
438
+ padding-top: 4px;
407
439
  line-height: 1;
408
- font-size: var(--cart-button-font-size, 16px);
409
- font-weight: var(--cart-button-font-weight, normal);
410
- text-align: center;
411
- transition-property: color, border-color, background-color, box-shadow;
412
- transition-timing-function: ease;
413
- transition-duration: 350ms;
440
+ color: #a3a3a3;
441
+ text-align: right;
442
+ }
443
+
444
+ .apirocket-checkout-button-edit {
414
445
  cursor: pointer;
415
446
  }
416
447
 
417
- .apirocket-button:hover {
418
- background-color: var(--cart-button-background-color-hover, transparent);
419
- border-color: var(--cart-button-border-color-hover, #404040);
420
- color: var(--cart-button-font-color-hover, #404040);
448
+ .apirocket-checkout-button-edit:hover {
449
+ text-decoration: underline;
421
450
  }
422
451
 
423
- .apirocket-button:focus {
452
+ .apirocket-checkout-section a {
453
+ color: #404040;
424
454
  outline: none;
425
455
  text-decoration: underline;
426
456
  }
427
- /*
428
- .apirocket-button-loading {
429
- position: relative;
430
- } */
431
457
 
432
- .apirocket-button-wraper {
433
- position: relative;
434
- display: inline-block;
435
- width: 32px;
458
+ .apirocket-checkout-section-text {
459
+ font-size: 14px;
460
+ line-height: 1;
461
+ margin-top: 4px;
462
+ color: #737373;
436
463
  }
437
464
 
438
- .apirocket-button-spinner {
439
- position: absolute;
440
- width: 22px;
441
- height: 22px;
442
- top: -11px;
443
- left: 0;
444
- right: 0;
445
- bottom: 0;
446
- margin: auto;
447
- border: 4px solid currentColor;
448
- border-top-color: transparent !important;
449
- border-radius: 50%;
450
- animation: button-loading-spinner 1s ease infinite;
465
+ .apirocket-checkout-actions {
466
+ display: flex;
467
+ margin-top: 64px;
468
+ align-items: center;
469
+ max-width: 100%;
451
470
  }
452
471
 
453
- @keyframes button-loading-spinner {
454
- from { transform: rotate(0turn) }
455
- to { transform: rotate(1turn) }
472
+ .apirocket-checkout-actions > * { flex: 1 1; }
473
+
474
+ .apirocket-checkout-footer {
475
+ margin-top: 72px;
476
+ border-top: 1px solid #d9d9d9;
477
+ margin-bottom: 64px;
478
+ padding-top: 16px;
456
479
  }
457
480
 
458
- .apirocket-button-link,
459
- button.apirocket-button-link {
481
+ .apirocket-checkout-footer ul {
460
482
  display: flex;
461
483
  align-items: center;
462
- text-align: left;
463
- justify-content: flex-start;
464
- align-items: center;
465
- border: none;
466
- padding-left: 0;
467
- padding-right: 0;
468
- width: auto;
469
- overflow: hidden;
470
- white-space: nowrap;
471
- text-overflow: ellipsis;
484
+ list-style: none;
485
+ padding: 0;
486
+ margin: 0;
472
487
  }
473
488
 
474
- .apirocket-button-link span {
475
- margin-left: 16px;
476
- margin-right: 16px;
477
- }
489
+ .apirocket-checkout-footer ul li { margin-right: 16px; }
478
490
 
479
- .apirocket-button-primary,
480
- button.apirocket-button-primary {
481
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
482
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
483
- color: var(--cart-button-primary-text-color, #fff);
491
+ .apirocket-checkout-footer ul li a {
492
+ color: #404040;
493
+ font-size: 14px;
494
+ line-height: 1;
495
+ text-decoration: none;
484
496
  }
485
497
 
486
- button.apirocket-button-primary:disabled {
487
- background-color: #eee;
488
- border-color: #eee;
489
- color: #ccc;
498
+ .apirocket-checkout-footer ul li a:focus {
499
+ outline: none;
500
+ text-decoration: underline;
490
501
  }
491
502
 
492
- .apirocket-button-primary:hover {
493
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
494
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
495
- color: var(--cart-button-primary-text-color-hover, #fff);
496
- box-shadow: var(--cart-shadow-button-primary-hover, none);
503
+ .apircoket-checkout-legal {
504
+ margin-top: 16px;
505
+ font-size: 14px;
506
+ color: #737373;
507
+ font-weight: normal;
508
+ line-height: 1.4;
497
509
  }
498
510
 
511
+ .apircoket-checkout-legal a {
512
+ text-decoration: underline;
513
+ color: #404040;
514
+ }
499
515
 
500
- @media (max-width: 720px) {
501
-
502
- .apirocket-button-link {
503
- width: 100%;
504
- justify-content: center;
505
- }
506
-
516
+ .apirocket-checkout-logo img {
517
+ display: block;
518
+ max-height: 80px;
507
519
  }
508
520
 
509
- .apirocket-summary {}
521
+ .apirocket-checkout-mobile { display: none; }
510
522
 
511
- .apirocket-summary-top {
512
- margin-top: 56px;
513
- margin-bottom: 32px;
523
+ .apirocket-checkout-mobile .apirocket-checkout-logo {
524
+ display: block;
525
+ margin-top: 16px;
526
+ margin-bottom: 16px;
527
+ }
528
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
529
+ display: block;
530
+ margin: auto;
531
+ max-height: 80px;
514
532
  }
515
533
 
516
- .apirocket-summary-header {
534
+ .apirocket-checkout-mobile-menu {
535
+ background-color: #f5f5f5;
536
+ border-top: 1px solid #d9d9d9;
537
+ }
538
+
539
+ .apirocket-checkout-mobile-wrapper {
517
540
  display: flex;
518
- justify-content: flex-start;
519
- align-items: center;
520
- margin-bottom: 32px;
541
+ justify-content: space-between;
542
+ align-items: center;
543
+ width: 90%;
544
+ max-width: 560px;
545
+ margin: 0 auto;
546
+ padding: 16px 0px;
547
+ color: #404040;
521
548
  }
522
549
 
523
- .apirocket-summary-header-icon {
524
- flex: 0 1;
525
- margin-right: 16px;
550
+ .apirocket-checkout-mobile-wrapper-cart {
551
+ display: inline-flex;
552
+ align-items: center;
553
+ color: #404040;
554
+ cursor: pointer;
526
555
  }
527
556
 
528
- .apirocket-summary-header-content {}
557
+ .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
529
558
 
530
- .apirocket-summary-header-title {
531
- font-size: 24px;
559
+ .apirocket-checkout-mobile-wrapper-total {
560
+ line-height: 20px;
561
+ font-size: 20px;
532
562
  font-weight: bold;
533
- line-height: 1.2;
534
- color: #404040;
535
- margin-bottom: 4px;
536
563
  }
537
564
 
538
- .apirocket-summary-header-subtitle {
539
- font-size: 18px;
540
- font-weight: normal;
541
- line-height: 1.2;
542
- color: #737373;
565
+ .apirocket-checkout-mobile-summary {
566
+ background-color: #f5f5f5;
567
+ transition-property: max-height;
568
+ transition-timing-function: ease-in;
569
+ transition-duration: 350ms;
570
+ max-height: 0px;
571
+ overflow: hidden;
572
+ border-bottom: 1px solid #d9d9d9;
543
573
  }
544
574
 
545
- .apirocket-summary-section {
546
- margin-top: 16px;
575
+ .apirocket-checkout-mobile-summary--show {
576
+ max-height: 1000px;
577
+ overflow: auto;
578
+ }
579
+
580
+ .apirocket-checkout-mobile-summary-wrapper {
581
+ width: 90%;
582
+ max-width: 560px;
583
+ padding: 16px 0px;
584
+ margin: 0 auto;
585
+ }
586
+
587
+
588
+
589
+ /* Utils */
590
+
591
+ .apirocket-checkout-row {
592
+ display: flex;
593
+ justify-content: space-between;
594
+ align-items: flex-start;
595
+ }
596
+ .apirocket-checkout-row > * {
597
+ flex: 1 1;
598
+ margin-right: 16px;
599
+ }
600
+
601
+ .apirocket-checkout-row > *:last-child { margin-right: 0; }
602
+
603
+ .apirocket-checkout-fieldset {
547
604
  border: 1px solid #d9d9d9;
548
605
  border-radius: 4px;
549
- padding: 24px;
606
+ overflow: hidden;
550
607
  }
551
608
 
552
- .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
553
- .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
609
+ .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
554
610
 
555
- .apirocket-summary-section-title {
556
- font-size: 18px;
557
- font-weight: bold;
558
- line-height: 1.2;
559
- color: #404040;
560
- margin-bottom: 24px;
561
- }
611
+ .apirocket-checkout-fieldset .apirocket-form-input,
612
+ .apirocket-checkout-fieldset .apirocket-form-select,
613
+ .apirocket-checkout-fieldset .apirocket-form-checkbox,
614
+ .apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
615
+ .apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
562
616
 
563
- .apirocket-summary-section-subtitle {
617
+ .apirocket-checkout-fieldset > * {
618
+ padding: 16px;
619
+ border-bottom: 1px solid #d9d9d9;
620
+ }
621
+ .apirocket-checkout-fieldset-row {
622
+ display: flex;
623
+ justify-content: space-between;
624
+ align-items: flex-start;
625
+ }
626
+ .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
627
+ .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
628
+ .apirocket-checkout-fieldset-row > :last-child {
629
+ flex: 0 0 auto;
630
+ margin-right: 0px;
564
631
  font-size: 16px;
565
632
  font-weight: bold;
566
- line-height: 1;
633
+ line-height: 20px;
567
634
  color: #404040;
568
- margin-bottom: 16px;
569
635
  }
570
636
 
571
- .apirocket-summary-section-text {
572
- font-size: 14px;
573
- font-weight: normal;
574
- line-height: 18px;
575
- color: #404040;
637
+ .apirocket-checkout-fieldset-row > :last-child img {
638
+ display: block;
639
+ max-height: 24px;
576
640
  }
577
641
 
578
- .apirocket-summary-help {
579
- display: flex;
580
- justify-content: flex-start;
581
- align-items: center;
642
+ .apirocket-checkout-fieldset-row-wrapper {
643
+ background-color: #f5f5f5;
582
644
  }
583
645
 
584
- .apirocket-summary-help-icon {
585
- flex: 0 1;
586
- padding-right: 12px;
587
- }
646
+ .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
647
+ .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
588
648
 
589
- .apirocket-summary-help-content {
590
- font-size: 14px;
591
- font-weight: normal;
592
- line-height: 1.2;
593
- color: #404040;
594
- }
649
+ /* Responsive */
595
650
 
596
- .apirocket-summary-help-content a {
597
- display: block;
598
- color: #737373;
651
+ @media (max-width: 1000px) {
652
+
653
+ .apirocket-checkout-mobile { display: block; }
654
+
655
+ .apirocket-checkout-wrap {
656
+ flex-flow: column;
657
+ margin: 0;
658
+ padding: 0;
659
+ width: 100%;
660
+ }
661
+
662
+ .apirocket-checkout-main,
663
+ .apirocket-checkout-summary {
664
+ width: 90%;
665
+ max-width: 560px;
666
+ margin: 0 auto;
667
+ padding: 0;
668
+ }
669
+
670
+ .apirocket-checkout-summary {
671
+ /* order: 0;
672
+ padding: 16px 0; */
673
+ display: none;
674
+ }
675
+ .apirocket-checkout-summary::after { display: none; }
676
+
677
+ .apirocket-checkout-summary-header,
678
+ .apirocket-checkout-summary-login { display: none; }
679
+
680
+ .apirocket-checkout-continue { display: none; }
681
+ .apirocket-checkout-close { display: block; }
682
+
683
+ .apirocket-checkout-breadcrumbs { text-align: center; }
684
+ .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
685
+
686
+ .apirocket-checkout-logo { display: none; }
599
687
  }
600
688
 
601
- @media (max-width: 1000px) {
602
- .apirocket-summary-top { display: none; }
603
- .apirocket-summary-header { margin-top: 32px; }
689
+
690
+ @media (max-width: 720px) {
691
+
692
+ .apirocket-checkout-row { display: block; }
693
+ .apirocket-checkout-row > * { margin-right: 0; }
694
+
695
+ .apirocket-checkout-actions > :first-child { order: 2; }
696
+ .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
697
+ .apirocket-checkout-actions {
698
+ flex-flow: column;
699
+ align-items: stretch;
700
+ }
701
+
702
+ .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
703
+
704
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
705
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
706
+
707
+ .apirocket-checkout-section-subtitle {
708
+ padding-top: 16px;
709
+ margin-bottom: -16px;
710
+ }
711
+
712
+ .apirocket-checkout-footer ul {
713
+ display: block;
714
+ text-align: center !important;
715
+ line-height: 32px !important;
716
+ }
717
+
718
+ .apirocket-checkout-footer ul li {
719
+ display: inline-block;
720
+ }
721
+
722
+ .apircoket-checkout-legal { text-align: center; }
723
+
724
+ .apirocket-checkout-summary-item-col-image {
725
+ flex: 0 0 auto;
726
+ max-width: 80px;
727
+ }
728
+
729
+ .apirocket-checkout-summary-item-col-image img {
730
+ max-height: 80px;
731
+ }
732
+
733
+ .apirocket-checkout-summary-item-col-description {
734
+ flex: 1 1;
735
+ padding-left: 8px;
736
+ font-size: 14px;
737
+ line-height: 16px;
738
+ }
739
+
740
+ .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
741
+
742
+ .apirocket-checkout-summary-item-col-quantity {
743
+ flex: 0 0 25px;
744
+ font-size: 12px;
745
+ }
746
+
747
+ .apirocket-checkout-summary-item-col-price {
748
+ flex: 0 0 80px;
749
+ font-size: 14px;
750
+ }
751
+
752
+ .apirocket-checkout-summary-label-total {
753
+ font-size: 16px;
754
+ line-height: 18px;
755
+ }
756
+ .apirocket-checkout-summary-label-total small {
757
+ font-size: 12px;
758
+ line-height: 14px;
759
+ }
760
+
761
+ .apirocket-checkout-summary-row {
762
+ padding-top: 8px;
763
+ }
764
+
765
+ .apirocket-checkout-summary-label {
766
+ font-size: 14px;
767
+ line-height: 14px;
768
+ }
769
+
770
+ .apirocket-checkout-summary-value,
771
+ .apirocket-checkout-summary-value-total {
772
+ font-size: 16px;
773
+ line-height: 16px;
774
+ }
775
+
776
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
777
+ max-height: 55px;
778
+ }
779
+
780
+ .apirocket-checkout-steps-summary { margin-top: 24px; }
781
+
782
+ .apirocket-checkout-steps-summary-row { position: relative; }
783
+
784
+ .apirocket-checkout-steps-summary-label {
785
+ position: absolute;
786
+ font-size: 14px;
787
+ }
788
+
789
+ .apirocket-checkout-steps-summary-text { margin-top: 18px; }
790
+ .apirocket-checkout-steps-summary-link { font-size: 12px; }
791
+
604
792
  }
605
793
 
606
- @media (max-width: 720px) {
607
- .apirocket-summary-section-subtitle { margin-top: 24px; }
608
- .apirocket-summary-header {
609
- flex-direction: column;
610
- align-items: center;
611
- text-align: center;
612
- }
613
- .apirocket-summary-header-icon {
614
- margin-right: 0px;
615
- margin-bottom: 16px;
616
- }
617
- .apirocket-summary-header-title {
618
- font-size: 28px;
619
- margin-bottom: 8px;
620
- }
621
- }.apirocket-modal *,
794
+
795
+ .apirocket-modal *,
622
796
  .apirocket-modal *::before,
623
797
  .apirocket-modal *::after { box-sizing: border-box; }
624
798
 
@@ -787,724 +961,534 @@ button.apirocket-button-primary:disabled {
787
961
  }
788
962
 
789
963
  .apirocket-modal-message-icon-ok {
790
- background-color: #d1fae5;
791
- color: #10b981;
792
- }
793
-
794
- .apirocket-modal-message-title {
795
- font-size: 18px;
796
- font-weight: bold;
797
- line-height: 1;
798
- text-align: center;
799
- color: #404040;
800
- margin-bottom: 16px;
801
- }
802
-
803
- .apirocket-modal-message-text {
804
- color: #737373;
805
- font-size: 14px;
806
- font-weight: normal;
807
- text-align: center;
808
- line-height: 16px;
809
- margin-bottom: 32px;
810
- }.apirocket-error-block {
811
- display: flex;
812
- justify-content: start;
813
- align-items: center;
814
- background-color: #fef2f2;
815
- padding: 16px;
816
- color: #dc2626;
817
- font-size: 14px;
818
- line-height: 18px;
819
- border-radius: 8px;
820
- margin-top: 16px;
821
- margin-bottom: 0px;
822
- }
823
-
824
- .apirocket-error-block-icon {
825
- margin-right: 12px;
826
- }.apirocket-checkout * { box-sizing: content-box; }
827
-
828
- .apirocket-checkout {
829
- display: block;
830
- position: fixed;
831
- z-index: 10000;
832
- right: 0;
833
- top: 0;
834
- overflow: hidden;
835
- overflow-y: auto;
836
- width: 100%;
837
- height: 100vh;
838
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
839
- background-color: #fff;
840
- }
841
-
842
- .apirocket-checkout-wrap {
843
- display: flex;
844
- margin: 0 auto;
845
- width: 90%;
846
- min-height: 100%;
847
- max-width: 1100px;
848
- padding: 0 5%;
849
-
850
- }
851
-
852
- .apirocket-checkout-main {
853
- order: 1;
854
- width: 52%;
855
- padding-right: 48px;
856
- }
857
-
858
- .apirocket-checkout-summary {
859
- order: 2;
860
- position: relative;
861
- width: 40%;
862
- padding-left: 48px;
863
- }
864
-
865
- .apirocket-checkout-summary::after {
866
- position: absolute;
867
- display: block;
868
- top: 0;
869
- left: 0;
870
- content: "";
871
- width: 300%;
872
- height: 100%;
873
- background: #f5f5f5;
874
- z-index: -1;
875
- }
876
-
877
- .apirocket-checkout-continue {
878
- display: flex;
879
- align-items: center;
880
- text-align: left;
881
- margin-top: 40px;
882
- margin-bottom: 40px;
883
- color: #737373;
884
- font-size: 16px;
885
- font-weight: normal;
886
- cursor: pointer;
887
- }
888
-
889
- .apirocket-checkout-close {
890
- display: none;
891
- cursor: pointer;
892
- position: absolute;
893
- top: 16px;
894
- right: 32px;
895
- }
896
-
897
- .apirocket-checkout-summary-container {
898
- display: flex;
899
- flex-flow: column;
900
- max-height: calc(100vh - 5%);
901
- overflow: hidden;
902
- }
903
-
904
- .apirocket-checkout-summary-top {
905
- flex: 0 0 auto;
906
- }
907
-
908
- .apirocket-checkout-summary-content {
909
- flex: 1 1 auto;
910
- overflow-y: scroll;
911
- }
912
-
913
- .apirocket-checkout-summary-footer {
914
- flex: 0 0 auto;
915
- }
916
-
917
- .apirocket-checkout-summary-login {
918
- display: flex;
919
- align-items: center;
920
- justify-content: end;
921
- text-align: right;
922
- margin-top: 40px;
923
- margin-bottom: 40px;
924
- color: #737373;
925
- font-size: 16px;
926
- font-weight: normal;
927
- cursor: pointer;
928
- }
929
-
930
- .apirocket-checkout-summary-login svg,
931
- .apirocket-checkout-continue svg { margin-right: 16px; }
932
-
933
- .apirocket-checkout-summary-header {
934
- display: flex;
935
- justify-content: space-between;
936
- align-items: center;
937
- margin-top: 56px;
938
- margin-bottom: 48px;
939
- }
940
-
941
- .apirocket-checkout-summary-header :last-child a {
942
- font-size: 14px;
943
- font-weight: normal;
944
- color: #737373;
945
- }
946
-
947
- .apirocket-checkout-summary-item {
948
- display: flex;
949
- justify-content: stretch;
950
- align-items: flex-start;
951
- padding-bottom: 16px;
952
- border-bottom: 1px solid #d9d9d9;
953
- margin-bottom: 16px;
954
- }
955
-
956
- .apirocket-checkout-summary-item-col-image {
957
- flex: 0 0 auto;
958
- max-width: 100px;
959
- border: 1px solid #e5e5e5;
960
- border-radius: 4px;
961
- overflow: hidden;
962
- }
963
-
964
- .apirocket-checkout-summary-item-col-image img {
965
- display: block;
966
- max-width: 100%;
967
- max-height: 100px;
968
- }
969
-
970
- .apirocket-checkout-summary-item-col-description {
971
- flex: 1 1 auto;
972
- padding-left: 16px;
973
- padding-right: 8px;
974
- font-size: 14px;
975
- font-weight: bold;
976
- line-height: 18px;
977
- }
978
-
979
- .apirocket-checkout-summary-item-col-description small {
980
- display: block;
981
- font-size: 14px;
982
- font-weight: normal;
983
- color: #a3a3a3;
984
- }
985
-
986
- .apirocket-checkout-summary-item-col-quantity {
987
- flex: 0 0 50px;
988
- font-size: 16px;
989
- font-weight: normal;
990
- color: #a3a3a3;
991
- text-align: right;
992
- }
993
-
994
- .apirocket-checkout-summary-item-col-price {
995
- flex: 0 0 100px;
996
- font-size: 16px;
997
- font-weight: bold;
998
- color: #404040;
999
- text-align: right;
1000
- }
1001
-
1002
- .apirocket-checkout-summary-row {
1003
- display: flex;
1004
- justify-content: space-between;
1005
- align-items: center;
1006
- padding-top: 16px;
1007
- }
1008
-
1009
- .apirocket-checkout-summary-label {
1010
- font-size: 16px;
1011
- font-weight: normal;
1012
- line-height: 18px;
1013
- color: #404040;
1014
- }
1015
-
1016
- .apirocket-checkout-summary-value {
1017
- font-size: 18px;
1018
- font-weight: bold;
1019
- line-height: 18px;
1020
- color: #404040;
1021
- }
1022
-
1023
- .apirocket-checkout-summary-row-total {
1024
- display: flex;
1025
- justify-content: space-between;
1026
- align-items: flex-start;
1027
- border-top: 1px solid #d9d9d9;
1028
- margin-top: 24px;
1029
- padding-top: 24px;
964
+ background-color: #d1fae5;
965
+ color: #10b981;
1030
966
  }
1031
967
 
1032
- .apirocket-checkout-summary-label-total {
968
+ .apirocket-modal-message-title {
1033
969
  font-size: 18px;
1034
970
  font-weight: bold;
1035
- line-height: 21px;
971
+ line-height: 1;
972
+ text-align: center;
1036
973
  color: #404040;
974
+ margin-bottom: 16px;
1037
975
  }
1038
- .apirocket-checkout-summary-label-total small {
1039
- display: block;
976
+
977
+ .apirocket-modal-message-text {
978
+ color: #737373;
1040
979
  font-size: 14px;
1041
- line-height: 16px;
1042
980
  font-weight: normal;
1043
- color: #a3a3a3;
1044
- }
1045
-
1046
- .apirocket-checkout-summary-value-total {
1047
- font-size: 24px;
1048
- font-weight: bold;
1049
- line-height: 24px;
1050
- color: #404040;
1051
- }
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;
1052
989
 
1053
- .apirocket-checkout-breadcrumbs ol {
1054
- display: flex;
1055
- align-items: center;
1056
- list-style: none;
1057
- padding: 0;
1058
- margin: 0;
1059
- margin-top: 24px;
1060
- }
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;
1061
998
 
1062
- .apirocket-checkout-breadcrumbs ol li {
1063
- cursor: pointer;
1064
- color: #a3a3a3;
1065
- font-size: 14px;
1066
- line-height: 1;
1067
- }
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;
1068
1008
 
1069
- .apirocket-checkout-breadcrumbs ol li::after {
1070
- width: 5px;
1071
- height: 9px;
1072
- display: inline-block;
1073
- content: "";
1074
- background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
1075
- background-repeat: no-repeat;
1076
- background-position: center;
1077
- padding: 0 8px;
1078
- }
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;
1079
1039
 
1080
- .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
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;
1081
1051
 
1082
- .apirocket-checkout-breadcrumbs ol li a {
1083
- color: #a3a3a3;
1084
- text-decoration: underline;
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); */
1085
1059
  }
1086
1060
 
1087
- .apirocket-checkout-breadcrumbs-active {
1088
- font-weight: bold;
1089
- color: #404040 !important;
1090
- }
1061
+ .apirocket-cart * { box-sizing: content-box; }
1091
1062
 
1092
- .apirocket-checkout-steps-summary {
1093
- border: 1px solid #d9d9d9;
1094
- border-radius: 4px;
1063
+ .apirocket-cart {
1064
+ position: fixed;
1065
+ z-index: 10000;
1066
+ right: 0;
1067
+ top: 0;
1095
1068
  overflow: hidden;
1096
- margin-top: 48px;
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);
1097
1074
  }
1098
1075
 
1099
- .apirocket-checkout-steps-summary-row {
1076
+ .apirocket-cart-content {
1100
1077
  display: flex;
1101
- position: relative;
1102
- border-bottom: 1px solid #d9d9d9;
1103
- padding: 16px;
1078
+ flex-direction: column;
1079
+ height: 100%;
1080
+ background-color: var(--cart-background-color, #fff);
1104
1081
  }
1105
1082
 
1106
- .apirocket-checkout-steps-summary-label {
1107
- flex: 0 0 90px;
1108
- font-size: 14px;
1109
- font-weight: normal;
1110
- line-height: 14px;
1111
- color: #a3a3a3;
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);
1112
1091
  }
1113
1092
 
1114
- .apirocket-checkout-steps-summary-text {
1115
- flex: 1 1 auto;
1116
- font-size: 14px;
1117
- font-weight: normal;
1118
- line-height: 18px;
1119
- color: #404040;
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)
1120
1097
  }
1121
1098
 
1122
- .apirocket-checkout-steps-summary-link {
1123
- flex: 0 0 60px;
1124
- text-align: right;
1125
- font-size: 12px;
1126
- font-weight: normal;
1127
- line-height: 1;
1128
- text-decoration: underline;
1129
- color: #737373;
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);
1130
1103
  cursor: pointer;
1131
1104
  }
1132
1105
 
1133
- .apirocket-checkout-section {
1134
- margin-top: 48px;
1135
- }
1136
-
1137
- .apirocket-checkout-section-header {
1138
- margin-bottom: 24px;
1139
- }
1140
-
1141
- .apirocket-checkout-section-title {
1142
- font-size: 18px;
1143
- font-weight: bold;
1144
- line-height: 1;
1145
- color: #404040;
1146
- }
1147
-
1148
- .apirocket-checkout-section-subtitle {
1149
- font-size: 12px;
1106
+ .apirocket-cart-header-continue {
1107
+ display: none;
1108
+ align-items: center;
1109
+ text-align: left;
1110
+ color: #737373;
1111
+ font-size: 16px;
1150
1112
  font-weight: normal;
1151
- padding-top: 4px;
1152
- line-height: 1;
1153
- color: #a3a3a3;
1154
- text-align: right;
1113
+ cursor: pointer;
1155
1114
  }
1156
1115
 
1157
- .apirocket-checkout-button-edit {
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;
1158
1123
  cursor: pointer;
1159
1124
  }
1160
1125
 
1161
- .apirocket-checkout-button-edit:hover {
1162
- text-decoration: underline;
1163
- }
1126
+ .apirocket-cart-header-login svg,
1127
+ .apirocket-cart-header-continue svg { margin-right: 16px; }
1164
1128
 
1165
- .apirocket-checkout-section a {
1166
- color: #404040;
1167
- outline: none;
1168
- text-decoration: underline;
1129
+ .apirocket-cart-body {
1130
+ flex: 1 1 auto;
1131
+ padding: 0px;
1132
+ background: var(--cart-background-color, #fff);
1133
+ overflow-y: auto;
1169
1134
  }
1170
1135
 
1171
- .apirocket-checkout-section-text {
1172
- font-size: 14px;
1173
- line-height: 1;
1174
- margin-top: 4px;
1175
- color: #737373;
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);
1176
1142
  }
1177
1143
 
1178
- .apirocket-checkout-actions {
1179
- display: flex;
1180
- margin-top: 64px;
1181
- align-items: center;
1182
- max-width: 100%;
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);
1183
1152
  }
1184
1153
 
1185
- .apirocket-checkout-actions > * { flex: 1 1; }
1186
-
1187
- .apirocket-checkout-footer {
1188
- margin-top: 72px;
1189
- border-top: 1px solid #d9d9d9;
1190
- margin-bottom: 64px;
1191
- padding-top: 16px;
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);
1192
1158
  }
1193
1159
 
1194
- .apirocket-checkout-footer ul {
1160
+ .apirocket-cart-row {
1195
1161
  display: flex;
1162
+ justify-content: space-between;
1196
1163
  align-items: center;
1197
- list-style: none;
1198
- padding: 0;
1199
- margin: 0;
1200
1164
  }
1201
1165
 
1202
- .apirocket-checkout-footer ul li { margin-right: 16px; }
1203
-
1204
- .apirocket-checkout-footer ul li a {
1205
- color: #404040;
1206
- font-size: 14px;
1207
- line-height: 1;
1208
- text-decoration: none;
1166
+ .apirocket-cart-col {
1167
+ flex: 1 1 auto;
1168
+ margin-bottom: 16px;
1209
1169
  }
1210
1170
 
1211
- .apirocket-checkout-footer ul li a:focus {
1212
- outline: none;
1213
- text-decoration: underline;
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);
1214
1174
  }
1215
1175
 
1216
- .apircoket-checkout-legal {
1217
- margin-top: 16px;
1218
- font-size: 14px;
1219
- color: #737373;
1220
- font-weight: normal;
1221
- line-height: 1.4;
1176
+ .apirocket-cart-item:last-child {
1177
+ border-bottom: none;
1178
+ margin-bottom: var(--cart-padding, 32px);
1222
1179
  }
1223
1180
 
1224
- .apircoket-checkout-legal a {
1225
- text-decoration: underline;
1226
- color: #404040;
1181
+ .apirocket-cart-item-row {
1182
+ display: flex;
1183
+ justify-content: space-between;
1184
+ align-items: center;
1227
1185
  }
1228
1186
 
1229
- .apirocket-checkout-logo img {
1230
- display: block;
1231
- max-height: 80px;
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;
1232
1192
  }
1233
1193
 
1234
- .apirocket-checkout-mobile { display: none; }
1235
-
1236
- .apirocket-checkout-mobile .apirocket-checkout-logo {
1194
+ .apirocket-cart-item-col-image img {
1237
1195
  display: block;
1238
- margin-top: 16px;
1239
- margin-bottom: 16px;
1196
+ max-width: 100%;
1240
1197
  }
1241
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1242
- display: block;
1243
- margin: auto;
1244
- max-height: 80px;
1198
+
1199
+ .apirocket-cart-item-col-description {
1200
+ align-self: flex-start;
1201
+ padding-right: 32px;
1202
+ flex-grow: 1;
1245
1203
  }
1246
1204
 
1247
- .apirocket-checkout-mobile-menu {
1248
- background-color: #f5f5f5;
1249
- border-top: 1px solid #d9d9d9;
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);
1250
1209
  }
1251
1210
 
1252
- .apirocket-checkout-mobile-wrapper {
1253
- display: flex;
1254
- justify-content: space-between;
1255
- align-items: center;
1256
- width: 90%;
1257
- max-width: 560px;
1258
- margin: 0 auto;
1259
- padding: 16px 0px;
1260
- color: #404040;
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);
1261
1215
  }
1262
1216
 
1263
- .apirocket-checkout-mobile-wrapper-cart {
1264
- display: inline-flex;
1265
- align-items: center;
1266
- color: #404040;
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);
1267
1222
  cursor: pointer;
1223
+ text-align: center;
1268
1224
  }
1269
1225
 
1270
- .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
1271
-
1272
- .apirocket-checkout-mobile-wrapper-total {
1273
- line-height: 20px;
1274
- font-size: 20px;
1275
- font-weight: bold;
1226
+ .apirocket-cart-item-col-delete:hover {
1227
+ color: var(--cart-item-delete-icon-color-hover, #000);
1276
1228
  }
1277
1229
 
1278
- .apirocket-checkout-mobile-summary {
1279
- background-color: #f5f5f5;
1280
- transition-property: max-height;
1281
- transition-timing-function: ease-in;
1282
- transition-duration: 350ms;
1283
- max-height: 0px;
1284
- overflow: hidden;
1285
- border-bottom: 1px solid #d9d9d9;
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);
1286
1233
  }
1287
1234
 
1288
- .apirocket-checkout-mobile-summary--show {
1289
- max-height: 1000px;
1290
- overflow: auto;
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;
1291
1240
  }
1292
1241
 
1293
- .apirocket-checkout-mobile-summary-wrapper {
1294
- width: 90%;
1295
- max-width: 560px;
1296
- padding: 16px 0px;
1297
- margin: 0 auto;
1242
+ .apirocket-cart-item-col-quantity {
1243
+ margin-top: 16px;
1298
1244
  }
1299
1245
 
1300
-
1301
-
1302
- /* Utils */
1303
-
1304
- .apirocket-checkout-row {
1246
+ .apirocket-cart-item-quantity-wrapper {
1305
1247
  display: flex;
1306
1248
  justify-content: space-between;
1307
- align-items: flex-start;
1308
- }
1309
- .apirocket-checkout-row > * {
1310
- flex: 1 1;
1311
- margin-right: 16px;
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;
1312
1255
  }
1313
1256
 
1314
- .apirocket-checkout-row > *:last-child { margin-right: 0; }
1315
-
1316
- .apirocket-checkout-fieldset {
1317
- border: 1px solid #d9d9d9;
1318
- border-radius: 4px;
1319
- overflow: hidden;
1257
+ .apirocket-cart-item-quantity-wrapper:hover {
1258
+ border-color: var(--cart-item-form-border-color-hover, #000);
1320
1259
  }
1321
1260
 
1322
- .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
1323
-
1324
- .apirocket-checkout-fieldset .apirocket-form-input,
1325
- .apirocket-checkout-fieldset .apirocket-form-select,
1326
- .apirocket-checkout-fieldset .apirocket-form-checkbox,
1327
- .apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
1328
- .apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
1329
-
1330
- .apirocket-checkout-fieldset > * {
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);
1331
1266
  padding: 16px;
1332
- border-bottom: 1px solid #d9d9d9;
1267
+ line-height: 1;
1268
+ text-align: center;
1333
1269
  }
1334
- .apirocket-checkout-fieldset-row {
1270
+
1271
+ .apirocket-cart-item-quantity-button {
1335
1272
  display: flex;
1336
- justify-content: space-between;
1337
- align-items: flex-start;
1338
- }
1339
- .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
1340
- .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
1341
- .apirocket-checkout-fieldset-row > :last-child {
1342
- flex: 0 0 auto;
1343
- margin-right: 0px;
1344
- font-size: 16px;
1345
- font-weight: bold;
1346
- line-height: 20px;
1347
- color: #404040;
1273
+ align-items: center;
1274
+ background-color: var(--cart-item-quantity-icon-background-color, transparent);
1275
+ padding: 0px 12px;
1276
+ cursor: pointer;
1348
1277
  }
1349
1278
 
1350
- .apirocket-checkout-fieldset-row > :last-child img {
1351
- display: block;
1352
- max-height: 24px;
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);
1353
1283
  }
1354
1284
 
1355
- .apirocket-checkout-fieldset-row-wrapper {
1356
- background-color: #f5f5f5;
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);
1357
1290
  }
1358
1291
 
1359
- .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
1360
- .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
1361
1292
 
1362
- /* Responsive */
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
+ }
1363
1334
 
1364
- @media (max-width: 1000px) {
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%; }
1365
1337
 
1366
- .apirocket-checkout-mobile { display: block; }
1367
-
1368
- .apirocket-checkout-wrap {
1369
- flex-flow: column;
1370
- margin: 0;
1371
- padding: 0;
1372
- width: 100%;
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);
1373
1340
  }
1374
-
1375
- .apirocket-checkout-main,
1376
- .apirocket-checkout-summary {
1377
- width: 90%;
1378
- max-width: 560px;
1379
- margin: 0 auto;
1380
- padding: 0;
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;
1381
1346
  }
1382
1347
 
1383
- .apirocket-checkout-summary {
1384
- /* order: 0;
1385
- padding: 16px 0; */
1386
- display: none;
1348
+ .apirocket-cart-full-screen .apirocket-cart-item-col-image {
1349
+ flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
1387
1350
  }
1388
- .apirocket-checkout-summary::after { display: none; }
1389
1351
 
1390
- .apirocket-checkout-summary-header,
1391
- .apirocket-checkout-summary-login { display: none; }
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; }
1392
1354
 
1393
- .apirocket-checkout-continue { display: none; }
1394
- .apirocket-checkout-close { display: block; }
1395
-
1396
- .apirocket-checkout-breadcrumbs { text-align: center; }
1397
- .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
1355
+ .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
1356
+ position: absolute;
1357
+ right: 0px;
1358
+ top: var(--cart-item-padding, 32px);
1359
+ }
1360
+ }
1398
1361
 
1399
- .apirocket-checkout-logo { display: none; }
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%; }
1400
1365
  }
1401
1366
 
1367
+ /* Mobile version */
1402
1368
 
1403
1369
  @media (max-width: 720px) {
1404
1370
 
1405
- .apirocket-checkout-row { display: block; }
1406
- .apirocket-checkout-row > * { margin-right: 0; }
1407
-
1408
- .apirocket-checkout-actions > :first-child { order: 2; }
1409
- .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
1410
- .apirocket-checkout-actions {
1411
- flex-flow: column;
1412
- align-items: stretch;
1371
+ .apirocket-cart {
1372
+ width: 100%;
1373
+ box-shadow: none;
1413
1374
  }
1414
1375
 
1415
- .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
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;
1398
+ }
1416
1399
 
1417
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
1418
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
1419
-
1420
- .apirocket-checkout-section-subtitle {
1421
- padding-top: 16px;
1422
- margin-bottom: -16px;
1423
- }
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);
1404
+ }
1424
1405
 
1425
- .apirocket-checkout-footer ul {
1426
- display: block;
1427
- text-align: center !important;
1428
- line-height: 32px !important;
1429
- }
1406
+ .apirocket-button:focus {
1407
+ outline: none;
1408
+ text-decoration: underline;
1409
+ }
1410
+ /*
1411
+ .apirocket-button-loading {
1412
+ position: relative;
1413
+ } */
1430
1414
 
1431
- .apirocket-checkout-footer ul li {
1432
- display: inline-block;
1433
- }
1415
+ .apirocket-button-wraper {
1416
+ position: relative;
1417
+ display: inline-block;
1418
+ width: 32px;
1419
+ }
1434
1420
 
1435
- .apircoket-checkout-legal { text-align: center; }
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;
1434
+ }
1436
1435
 
1437
- .apirocket-checkout-summary-item-col-image {
1438
- flex: 0 0 auto;
1439
- max-width: 80px;
1440
- }
1441
-
1442
- .apirocket-checkout-summary-item-col-image img {
1443
- max-height: 80px;
1444
- }
1445
-
1446
- .apirocket-checkout-summary-item-col-description {
1447
- flex: 1 1;
1448
- padding-left: 8px;
1449
- font-size: 14px;
1450
- line-height: 16px;
1451
- }
1452
-
1453
- .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
1454
-
1455
- .apirocket-checkout-summary-item-col-quantity {
1456
- flex: 0 0 25px;
1457
- font-size: 12px;
1458
- }
1459
-
1460
- .apirocket-checkout-summary-item-col-price {
1461
- flex: 0 0 80px;
1462
- font-size: 14px;
1463
- }
1436
+ @keyframes button-loading-spinner {
1437
+ from { transform: rotate(0turn) }
1438
+ to { transform: rotate(1turn) }
1439
+ }
1464
1440
 
1465
- .apirocket-checkout-summary-label-total {
1466
- font-size: 16px;
1467
- line-height: 18px;
1468
- }
1469
- .apirocket-checkout-summary-label-total small {
1470
- font-size: 12px;
1471
- line-height: 14px;
1472
- }
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;
1455
+ }
1473
1456
 
1474
- .apirocket-checkout-summary-row {
1475
- padding-top: 8px;
1476
- }
1457
+ .apirocket-button-link span {
1458
+ margin-left: 16px;
1459
+ margin-right: 16px;
1460
+ }
1477
1461
 
1478
- .apirocket-checkout-summary-label {
1479
- font-size: 14px;
1480
- line-height: 14px;
1481
- }
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);
1467
+ }
1482
1468
 
1483
- .apirocket-checkout-summary-value,
1484
- .apirocket-checkout-summary-value-total {
1485
- font-size: 16px;
1486
- line-height: 16px;
1487
- }
1469
+ button.apirocket-button-primary:disabled {
1470
+ background-color: #eee;
1471
+ border-color: #eee;
1472
+ color: #ccc;
1473
+ }
1488
1474
 
1489
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1490
- max-height: 55px;
1491
- }
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);
1480
+ }
1492
1481
 
1493
- .apirocket-checkout-steps-summary { margin-top: 24px; }
1494
1482
 
1495
- .apirocket-checkout-steps-summary-row { position: relative; }
1483
+ @media (max-width: 720px) {
1496
1484
 
1497
- .apirocket-checkout-steps-summary-label {
1498
- position: absolute;
1499
- font-size: 14px;
1485
+ .apirocket-button-link {
1486
+ width: 100%;
1487
+ justify-content: center;
1500
1488
  }
1501
1489
 
1502
- .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1503
- .apirocket-checkout-steps-summary-link { font-size: 12px; }
1504
-
1505
1490
  }
1506
1491
 
1507
-
1508
1492
  .apirocket-form-input {
1509
1493
  display: block;
1510
1494
  position: relative;
@@ -1894,4 +1878,20 @@ button.apirocket-button-primary:disabled {
1894
1878
  .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
1895
1879
  .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
1896
1880
 
1897
- .spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}
1881
+ .apirocket-error-block {
1882
+ display: flex;
1883
+ justify-content: start;
1884
+ align-items: center;
1885
+ background-color: #fef2f2;
1886
+ padding: 16px;
1887
+ color: #dc2626;
1888
+ font-size: 14px;
1889
+ line-height: 18px;
1890
+ border-radius: 8px;
1891
+ margin-top: 16px;
1892
+ margin-bottom: 0px;
1893
+ }
1894
+
1895
+ .apirocket-error-block-icon {
1896
+ margin-right: 12px;
1897
+ }.spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}