apirocket 0.1.2 → 0.1.3

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,1192 +1,1341 @@
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; }
1
+ .apirocket-checkout * { box-sizing: content-box; }
79
2
 
80
- .apirocket-cart {
3
+ .apirocket-checkout {
4
+ display: block;
81
5
  position: fixed;
82
6
  z-index: 10000;
83
7
  right: 0;
84
8
  top: 0;
85
9
  overflow: hidden;
86
- width: var(--cart-width, 540px);
10
+ overflow-y: auto;
11
+ width: 100%;
87
12
  height: 100vh;
88
- box-shadow: 1px 20px 8px rgba(0,0,0,.1);
89
13
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
90
- background-color: var(--cart-background-color, #fff);
14
+ background-color: #fff;
91
15
  }
92
16
 
93
- .apirocket-cart-content {
17
+ .apirocket-checkout-wrap {
94
18
  display: flex;
95
- flex-direction: column;
96
- height: 100%;
97
- background-color: var(--cart-background-color, #fff);
19
+ margin: 0 auto;
20
+ width: 90%;
21
+ min-height: 100%;
22
+ max-width: 1100px;
23
+ padding: 0 5%;
24
+
98
25
  }
99
26
 
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);
27
+ .apirocket-checkout-main {
28
+ order: 1;
29
+ width: 52%;
30
+ padding-right: 48px;
108
31
  }
109
32
 
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)
33
+ .apirocket-checkout-summary {
34
+ order: 2;
35
+ position: relative;
36
+ width: 40%;
37
+ padding-left: 48px;
114
38
  }
115
39
 
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;
40
+ .apirocket-checkout-summary::after {
41
+ position: absolute;
42
+ display: block;
43
+ top: 0;
44
+ left: 0;
45
+ content: "";
46
+ width: 300%;
47
+ height: 100%;
48
+ background: #f5f5f5;
49
+ z-index: -1;
121
50
  }
122
51
 
123
- .apirocket-cart-header-continue {
124
- display: none;
52
+ .apirocket-checkout-continue {
53
+ display: flex;
125
54
  align-items: center;
126
55
  text-align: left;
56
+ margin-top: 40px;
57
+ margin-bottom: 40px;
127
58
  color: #737373;
128
59
  font-size: 16px;
129
60
  font-weight: normal;
130
61
  cursor: pointer;
131
62
  }
132
63
 
133
- .apirocket-cart-header-login {
64
+ .apirocket-checkout-close {
134
65
  display: none;
135
- align-items: center;
136
- text-align: right;
137
- color: #737373;
138
- font-size: 16px;
139
- font-weight: normal;
140
66
  cursor: pointer;
67
+ position: absolute;
68
+ top: 16px;
69
+ right: 32px;
141
70
  }
142
71
 
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;
72
+ .apirocket-checkout-summary-container {
73
+ display: flex;
74
+ flex-flow: column;
75
+ max-height: calc(100vh - 5%);
76
+ overflow: hidden;
151
77
  }
152
78
 
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);
79
+ .apirocket-checkout-summary-top {
80
+ flex: 0 0 auto;
159
81
  }
160
82
 
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);
83
+ .apirocket-checkout-summary-content {
84
+ flex: 1 1 auto;
85
+ overflow-y: scroll;
169
86
  }
170
87
 
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);
88
+ .apirocket-checkout-summary-footer {
89
+ flex: 0 0 auto;
175
90
  }
176
91
 
177
- .apirocket-cart-row {
92
+ .apirocket-checkout-summary-login {
178
93
  display: flex;
179
- justify-content: space-between;
180
94
  align-items: center;
95
+ justify-content: end;
96
+ text-align: right;
97
+ margin-top: 40px;
98
+ margin-bottom: 40px;
99
+ color: #737373;
100
+ font-size: 16px;
101
+ font-weight: normal;
102
+ cursor: pointer;
181
103
  }
182
104
 
183
- .apirocket-cart-col {
184
- flex: 1 1 auto;
185
- margin-bottom: 16px;
186
- }
105
+ .apirocket-checkout-summary-login svg,
106
+ .apirocket-checkout-continue svg { margin-right: 16px; }
187
107
 
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);
108
+ .apirocket-checkout-summary-header {
109
+ display: flex;
110
+ justify-content: space-between;
111
+ align-items: center;
112
+ margin-top: 56px;
113
+ margin-bottom: 48px;
191
114
  }
192
115
 
193
- .apirocket-cart-item:last-child {
194
- border-bottom: none;
195
- margin-bottom: var(--cart-padding, 32px);
116
+ .apirocket-checkout-summary-header :last-child a {
117
+ font-size: 14px;
118
+ font-weight: normal;
119
+ color: #737373;
196
120
  }
197
121
 
198
- .apirocket-cart-item-row {
122
+ .apirocket-checkout-summary-item {
199
123
  display: flex;
200
- justify-content: space-between;
201
- align-items: center;
124
+ justify-content: stretch;
125
+ align-items: flex-start;
126
+ padding-bottom: 16px;
127
+ border-bottom: 1px solid #d9d9d9;
128
+ margin-bottom: 16px;
202
129
  }
203
130
 
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;
131
+ .apirocket-checkout-summary-item-col-image {
132
+ flex: 0 0 auto;
133
+ max-width: 100px;
134
+ border: 1px solid #e5e5e5;
135
+ border-radius: 4px;
136
+ overflow: hidden;
209
137
  }
210
138
 
211
- .apirocket-cart-item-col-image img {
139
+ .apirocket-checkout-summary-item-col-image img {
212
140
  display: block;
213
141
  max-width: 100%;
142
+ max-height: 100px;
214
143
  }
215
144
 
216
- .apirocket-cart-item-col-description {
217
- align-self: flex-start;
218
- padding-right: 32px;
219
- flex-grow: 1;
145
+ .apirocket-checkout-summary-item-col-description {
146
+ flex: 1 1 auto;
147
+ padding-left: 16px;
148
+ padding-right: 8px;
149
+ font-size: 14px;
150
+ font-weight: bold;
151
+ line-height: 18px;
220
152
  }
221
153
 
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);
226
- }
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);
154
+ .apirocket-checkout-summary-item-col-description small {
155
+ display: block;
156
+ font-size: 14px;
157
+ font-weight: normal;
158
+ color: #a3a3a3;
232
159
  }
233
160
 
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;
161
+ .apirocket-checkout-summary-item-col-quantity {
162
+ flex: 0 0 50px;
163
+ font-size: 16px;
164
+ font-weight: normal;
165
+ color: #a3a3a3;
166
+ text-align: right;
241
167
  }
242
168
 
243
- .apirocket-cart-item-col-delete:hover {
244
- color: var(--cart-item-delete-icon-color-hover, #000);
169
+ .apirocket-checkout-summary-item-col-price {
170
+ flex: 0 0 100px;
171
+ font-size: 16px;
172
+ font-weight: bold;
173
+ color: #404040;
174
+ text-align: right;
245
175
  }
246
176
 
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);
177
+ .apirocket-checkout-summary-row {
178
+ display: flex;
179
+ justify-content: space-between;
180
+ align-items: center;
181
+ padding-top: 16px;
250
182
  }
251
183
 
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;
184
+ .apirocket-checkout-summary-label {
185
+ font-size: 16px;
186
+ font-weight: normal;
187
+ line-height: 18px;
188
+ color: #404040;
257
189
  }
258
190
 
259
- .apirocket-cart-item-col-quantity {
260
- margin-top: 16px;
191
+ .apirocket-checkout-summary-value {
192
+ font-size: 18px;
193
+ font-weight: bold;
194
+ line-height: 18px;
195
+ color: #404040;
261
196
  }
262
197
 
263
- .apirocket-cart-item-quantity-wrapper {
198
+ .apirocket-checkout-summary-row-total {
264
199
  display: flex;
265
200
  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;
201
+ align-items: flex-start;
202
+ border-top: 1px solid #d9d9d9;
203
+ margin-top: 24px;
204
+ padding-top: 24px;
272
205
  }
273
206
 
274
- .apirocket-cart-item-quantity-wrapper:hover {
275
- border-color: var(--cart-item-form-border-color-hover, #000);
207
+ .apirocket-checkout-summary-label-total {
208
+ font-size: 18px;
209
+ font-weight: bold;
210
+ line-height: 21px;
211
+ color: #404040;
212
+ }
213
+ .apirocket-checkout-summary-label-total small {
214
+ display: block;
215
+ font-size: 14px;
216
+ line-height: 16px;
217
+ font-weight: normal;
218
+ color: #a3a3a3;
276
219
  }
277
220
 
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;
221
+ .apirocket-checkout-summary-value-total {
222
+ font-size: 24px;
223
+ font-weight: bold;
224
+ line-height: 24px;
225
+ color: #404040;
286
226
  }
287
227
 
288
- .apirocket-cart-item-quantity-button {
228
+ .apirocket-checkout-breadcrumbs ol {
289
229
  display: flex;
290
230
  align-items: center;
291
- background-color: var(--cart-item-quantity-icon-background-color, transparent);
292
- padding: 0px 12px;
293
- cursor: pointer;
231
+ list-style: none;
232
+ padding: 0;
233
+ margin: 0;
234
+ margin-top: 24px;
294
235
  }
295
236
 
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);
237
+ .apirocket-checkout-breadcrumbs ol li {
238
+ cursor: pointer;
239
+ color: #a3a3a3;
240
+ font-size: 14px;
241
+ line-height: 1;
300
242
  }
301
243
 
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);
244
+ .apirocket-checkout-breadcrumbs ol li::after {
245
+ width: 5px;
246
+ height: 9px;
247
+ display: inline-block;
248
+ content: "";
249
+ 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");
250
+ background-repeat: no-repeat;
251
+ background-position: center;
252
+ padding: 0 8px;
307
253
  }
308
254
 
255
+ .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
309
256
 
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
- }
257
+ .apirocket-checkout-breadcrumbs ol li a {
258
+ color: #a3a3a3;
259
+ text-decoration: underline;
260
+ }
329
261
 
330
- .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
331
- .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
262
+ .apirocket-checkout-breadcrumbs-active {
263
+ font-weight: bold;
264
+ color: #404040 !important;
265
+ }
332
266
 
333
- .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
267
+ .apirocket-checkout-steps-summary {
268
+ border: 1px solid #d9d9d9;
269
+ border-radius: 4px;
270
+ overflow: hidden;
271
+ margin-top: 48px;
272
+ }
334
273
 
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
- }
274
+ .apirocket-checkout-steps-summary-row {
275
+ display: flex;
276
+ position: relative;
277
+ border-bottom: 1px solid #d9d9d9;
278
+ padding: 16px;
279
+ }
344
280
 
345
- .apirocket-cart-full-screen .apirocket-cart-item {
346
- display: flex;
347
- position: relative;
348
- padding-left: 0;
349
- padding-right: 0;
350
- }
281
+ .apirocket-checkout-steps-summary-label {
282
+ flex: 0 0 90px;
283
+ font-size: 14px;
284
+ font-weight: normal;
285
+ line-height: 14px;
286
+ color: #a3a3a3;
287
+ }
351
288
 
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%; }
289
+ .apirocket-checkout-steps-summary-text {
290
+ flex: 1 1 auto;
291
+ font-size: 14px;
292
+ font-weight: normal;
293
+ line-height: 18px;
294
+ color: #404040;
295
+ }
354
296
 
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
- }
297
+ .apirocket-checkout-steps-summary-link {
298
+ flex: 0 0 60px;
299
+ text-align: right;
300
+ font-size: 12px;
301
+ font-weight: normal;
302
+ line-height: 1;
303
+ text-decoration: underline;
304
+ color: #737373;
305
+ cursor: pointer;
306
+ }
358
307
 
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
- }
308
+ .apirocket-checkout-section {
309
+ margin-top: 48px;
310
+ }
364
311
 
365
- .apirocket-cart-full-screen .apirocket-cart-item-col-image {
366
- flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
367
- }
312
+ .apirocket-checkout-section-header {
313
+ margin-bottom: 24px;
314
+ }
368
315
 
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; }
316
+ .apirocket-checkout-section-title {
317
+ font-size: 18px;
318
+ font-weight: bold;
319
+ line-height: 1;
320
+ color: #404040;
321
+ }
371
322
 
372
- .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
373
- position: absolute;
374
- right: 0px;
375
- top: var(--cart-item-padding, 32px);
376
- }
323
+ .apirocket-checkout-section-subtitle {
324
+ font-size: 12px;
325
+ font-weight: normal;
326
+ padding-top: 4px;
327
+ line-height: 1;
328
+ color: #a3a3a3;
329
+ text-align: right;
377
330
  }
378
331
 
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%; }
332
+ .apirocket-checkout-button-edit {
333
+ cursor: pointer;
382
334
  }
383
335
 
384
- /* Mobile version */
385
-
386
- @media (max-width: 720px) {
387
-
388
- .apirocket-cart {
389
- width: 100%;
390
- box-shadow: none;
391
- }
392
-
393
- .apirocket-cart-header-continue { display: none; }
394
- .apirocket-cart-header-login { display: none; }
395
- }.apirocket-summary {}
396
-
397
- .apirocket-summary-top {
398
- margin-top: 56px;
399
- margin-bottom: 32px;
400
- }
401
-
402
- .apirocket-summary-header {
403
- display: flex;
404
- justify-content: flex-start;
405
- align-items: center;
406
- margin-bottom: 32px;
407
- }
408
-
409
- .apirocket-summary-header-icon {
410
- flex: 0 1;
411
- margin-right: 16px;
336
+ .apirocket-checkout-button-edit:hover {
337
+ text-decoration: underline;
412
338
  }
413
339
 
414
- .apirocket-summary-header-content {}
415
-
416
- .apirocket-summary-header-title {
417
- font-size: 24px;
418
- font-weight: bold;
419
- line-height: 1.2;
340
+ .apirocket-checkout-section a {
420
341
  color: #404040;
421
- margin-bottom: 4px;
342
+ outline: none;
343
+ text-decoration: underline;
422
344
  }
423
345
 
424
- .apirocket-summary-header-subtitle {
425
- font-size: 18px;
426
- font-weight: normal;
427
- line-height: 1.2;
346
+ .apirocket-checkout-section-text {
347
+ font-size: 14px;
348
+ line-height: 1;
349
+ margin-top: 4px;
428
350
  color: #737373;
429
351
  }
430
352
 
431
- .apirocket-summary-section {
432
- margin-top: 16px;
433
- border: 1px solid #d9d9d9;
434
- border-radius: 4px;
435
- padding: 24px;
353
+ .apirocket-checkout-actions {
354
+ display: flex;
355
+ margin-top: 64px;
356
+ align-items: center;
357
+ max-width: 100%;
436
358
  }
437
359
 
438
- .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
439
- .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
360
+ .apirocket-checkout-actions > * { flex: 1 1; }
440
361
 
441
- .apirocket-summary-section-title {
442
- font-size: 18px;
443
- font-weight: bold;
444
- line-height: 1.2;
445
- color: #404040;
446
- margin-bottom: 24px;
362
+ .apirocket-checkout-footer {
363
+ margin-top: 72px;
364
+ border-top: 1px solid #d9d9d9;
365
+ margin-bottom: 64px;
366
+ padding-top: 16px;
447
367
  }
448
368
 
449
- .apirocket-summary-section-subtitle {
450
- font-size: 16px;
451
- font-weight: bold;
452
- line-height: 1;
453
- color: #404040;
454
- margin-bottom: 16px;
369
+ .apirocket-checkout-footer ul {
370
+ display: flex;
371
+ align-items: center;
372
+ list-style: none;
373
+ padding: 0;
374
+ margin: 0;
455
375
  }
456
376
 
457
- .apirocket-summary-section-text {
458
- font-size: 14px;
459
- font-weight: normal;
460
- line-height: 18px;
461
- color: #404040;
462
- }
377
+ .apirocket-checkout-footer ul li { margin-right: 16px; }
463
378
 
464
- .apirocket-summary-help {
465
- display: flex;
466
- justify-content: flex-start;
467
- align-items: center;
379
+ .apirocket-checkout-footer ul li a {
380
+ color: #404040;
381
+ font-size: 14px;
382
+ line-height: 1;
383
+ text-decoration: none;
468
384
  }
469
385
 
470
- .apirocket-summary-help-icon {
471
- flex: 0 1;
472
- padding-right: 12px;
386
+ .apirocket-checkout-footer ul li a:focus {
387
+ outline: none;
388
+ text-decoration: underline;
473
389
  }
474
390
 
475
- .apirocket-summary-help-content {
391
+ .apircoket-checkout-legal {
392
+ margin-top: 16px;
476
393
  font-size: 14px;
477
- font-weight: normal;
478
- line-height: 1.2;
479
- color: #404040;
480
- }
481
-
482
- .apirocket-summary-help-content a {
483
- display: block;
484
394
  color: #737373;
395
+ font-weight: normal;
396
+ line-height: 1.4;
485
397
  }
486
398
 
487
- @media (max-width: 1000px) {
488
- .apirocket-summary-top { display: none; }
489
- .apirocket-summary-header { margin-top: 32px; }
399
+ .apircoket-checkout-legal a {
400
+ text-decoration: underline;
401
+ color: #404040;
490
402
  }
491
403
 
492
- @media (max-width: 720px) {
493
- .apirocket-summary-section-subtitle { margin-top: 24px; }
494
- .apirocket-summary-header {
495
- flex-direction: column;
496
- align-items: center;
497
- text-align: center;
498
- }
499
- .apirocket-summary-header-icon {
500
- margin-right: 0px;
501
- margin-bottom: 16px;
502
- }
503
- .apirocket-summary-header-title {
504
- font-size: 28px;
505
- margin-bottom: 8px;
506
- }
507
- }.apirocket-checkout * { box-sizing: content-box; }
508
-
509
- .apirocket-checkout {
404
+ .apirocket-checkout-logo img {
510
405
  display: block;
511
- position: fixed;
512
- z-index: 10000;
513
- right: 0;
514
- top: 0;
515
- overflow: hidden;
516
- overflow-y: auto;
517
- width: 100%;
518
- height: 100vh;
519
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
520
- background-color: #fff;
406
+ max-height: 80px;
521
407
  }
522
408
 
523
- .apirocket-checkout-wrap {
524
- display: flex;
525
- margin: 0 auto;
526
- width: 90%;
527
- min-height: 100%;
528
- max-width: 1100px;
529
- padding: 0 5%;
409
+ .apirocket-checkout-mobile { display: none; }
530
410
 
411
+ .apirocket-checkout-mobile .apirocket-checkout-logo {
412
+ display: block;
413
+ margin-top: 16px;
414
+ margin-bottom: 16px;
531
415
  }
532
-
533
- .apirocket-checkout-main {
534
- order: 1;
535
- width: 52%;
536
- padding-right: 48px;
416
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
417
+ display: block;
418
+ margin: auto;
419
+ max-height: 80px;
537
420
  }
538
421
 
539
- .apirocket-checkout-summary {
540
- order: 2;
541
- position: relative;
542
- width: 40%;
543
- padding-left: 48px;
422
+ .apirocket-checkout-mobile-menu {
423
+ background-color: #f5f5f5;
424
+ border-top: 1px solid #d9d9d9;
544
425
  }
545
426
 
546
- .apirocket-checkout-summary::after {
547
- position: absolute;
548
- display: block;
549
- top: 0;
550
- left: 0;
551
- content: "";
552
- width: 300%;
553
- height: 100%;
554
- background: #f5f5f5;
555
- z-index: -1;
427
+ .apirocket-checkout-mobile-wrapper {
428
+ display: flex;
429
+ justify-content: space-between;
430
+ align-items: center;
431
+ width: 90%;
432
+ max-width: 560px;
433
+ margin: 0 auto;
434
+ padding: 16px 0px;
435
+ color: #404040;
556
436
  }
557
437
 
558
- .apirocket-checkout-continue {
559
- display: flex;
438
+ .apirocket-checkout-mobile-wrapper-cart {
439
+ display: inline-flex;
560
440
  align-items: center;
561
- text-align: left;
562
- margin-top: 40px;
563
- margin-bottom: 40px;
564
- color: #737373;
565
- font-size: 16px;
566
- font-weight: normal;
441
+ color: #404040;
567
442
  cursor: pointer;
568
443
  }
569
444
 
570
- .apirocket-checkout-close {
571
- display: none;
572
- cursor: pointer;
573
- position: absolute;
574
- top: 16px;
575
- right: 32px;
445
+ .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
446
+
447
+ .apirocket-checkout-mobile-wrapper-total {
448
+ line-height: 20px;
449
+ font-size: 20px;
450
+ font-weight: bold;
576
451
  }
577
452
 
578
- .apirocket-checkout-summary-container {
579
- display: flex;
580
- flex-flow: column;
581
- max-height: calc(100vh - 5%);
453
+ .apirocket-checkout-mobile-summary {
454
+ background-color: #f5f5f5;
455
+ transition-property: max-height;
456
+ transition-timing-function: ease-in;
457
+ transition-duration: 350ms;
458
+ max-height: 0px;
582
459
  overflow: hidden;
460
+ border-bottom: 1px solid #d9d9d9;
583
461
  }
584
462
 
585
- .apirocket-checkout-summary-top {
586
- flex: 0 0 auto;
463
+ .apirocket-checkout-mobile-summary--show {
464
+ max-height: 1000px;
465
+ overflow: auto;
587
466
  }
588
467
 
589
- .apirocket-checkout-summary-content {
590
- flex: 1 1 auto;
591
- overflow-y: scroll;
468
+ .apirocket-checkout-mobile-summary-wrapper {
469
+ width: 90%;
470
+ max-width: 560px;
471
+ padding: 16px 0px;
472
+ margin: 0 auto;
592
473
  }
593
474
 
594
- .apirocket-checkout-summary-footer {
595
- flex: 0 0 auto;
596
- }
597
475
 
598
- .apirocket-checkout-summary-login {
476
+
477
+ /* Utils */
478
+
479
+ .apirocket-checkout-row {
599
480
  display: flex;
600
- align-items: center;
601
- justify-content: end;
602
- text-align: right;
603
- margin-top: 40px;
604
- margin-bottom: 40px;
605
- color: #737373;
606
- font-size: 16px;
607
- font-weight: normal;
608
- cursor: pointer;
481
+ justify-content: space-between;
482
+ align-items: flex-start;
483
+ }
484
+ .apirocket-checkout-row > * {
485
+ flex: 1 1;
486
+ margin-right: 16px;
609
487
  }
610
488
 
611
- .apirocket-checkout-summary-login svg,
612
- .apirocket-checkout-continue svg { margin-right: 16px; }
489
+ .apirocket-checkout-row > *:last-child { margin-right: 0; }
613
490
 
614
- .apirocket-checkout-summary-header {
615
- display: flex;
616
- justify-content: space-between;
617
- align-items: center;
618
- margin-top: 56px;
619
- margin-bottom: 48px;
491
+ .apirocket-checkout-fieldset {
492
+ border: 1px solid #d9d9d9;
493
+ border-radius: 4px;
494
+ overflow: hidden;
620
495
  }
621
496
 
622
- .apirocket-checkout-summary-header :last-child a {
623
- font-size: 14px;
624
- font-weight: normal;
625
- color: #737373;
626
- }
497
+ .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
627
498
 
628
- .apirocket-checkout-summary-item {
629
- display: flex;
630
- justify-content: stretch;
631
- align-items: flex-start;
632
- padding-bottom: 16px;
499
+ .apirocket-checkout-fieldset .apirocket-form-input,
500
+ .apirocket-checkout-fieldset .apirocket-form-select,
501
+ .apirocket-checkout-fieldset .apirocket-form-checkbox,
502
+ .apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
503
+ .apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
504
+
505
+ .apirocket-checkout-fieldset > * {
506
+ padding: 16px;
633
507
  border-bottom: 1px solid #d9d9d9;
634
- margin-bottom: 16px;
635
508
  }
636
-
637
- .apirocket-checkout-summary-item-col-image {
509
+ .apirocket-checkout-fieldset-row {
510
+ display: flex;
511
+ justify-content: space-between;
512
+ align-items: flex-start;
513
+ }
514
+ .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
515
+ .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
516
+ .apirocket-checkout-fieldset-row > :last-child {
638
517
  flex: 0 0 auto;
639
- max-width: 100px;
640
- border: 1px solid #e5e5e5;
641
- border-radius: 4px;
642
- overflow: hidden;
518
+ margin-right: 0px;
519
+ font-size: 16px;
520
+ font-weight: bold;
521
+ line-height: 20px;
522
+ color: #404040;
643
523
  }
644
524
 
645
- .apirocket-checkout-summary-item-col-image img {
525
+ .apirocket-checkout-fieldset-row > :last-child img {
646
526
  display: block;
647
- max-width: 100%;
648
- max-height: 100px;
527
+ max-height: 24px;
649
528
  }
650
529
 
651
- .apirocket-checkout-summary-item-col-description {
652
- flex: 1 1 auto;
653
- padding-left: 16px;
654
- padding-right: 8px;
655
- font-size: 14px;
656
- font-weight: bold;
657
- line-height: 18px;
530
+ .apirocket-checkout-fieldset-row-wrapper {
531
+ background-color: #f5f5f5;
658
532
  }
659
533
 
660
- .apirocket-checkout-summary-item-col-description small {
661
- display: block;
662
- font-size: 14px;
663
- font-weight: normal;
664
- color: #a3a3a3;
534
+ .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
535
+ .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
536
+
537
+ /* Responsive */
538
+
539
+ @media (max-width: 1000px) {
540
+
541
+ .apirocket-checkout-mobile { display: block; }
542
+
543
+ .apirocket-checkout-wrap {
544
+ flex-flow: column;
545
+ margin: 0;
546
+ padding: 0;
547
+ width: 100%;
548
+ }
549
+
550
+ .apirocket-checkout-main,
551
+ .apirocket-checkout-summary {
552
+ width: 90%;
553
+ max-width: 560px;
554
+ margin: 0 auto;
555
+ padding: 0;
556
+ }
557
+
558
+ .apirocket-checkout-summary {
559
+ /* order: 0;
560
+ padding: 16px 0; */
561
+ display: none;
562
+ }
563
+ .apirocket-checkout-summary::after { display: none; }
564
+
565
+ .apirocket-checkout-summary-header,
566
+ .apirocket-checkout-summary-login { display: none; }
567
+
568
+ .apirocket-checkout-continue { display: none; }
569
+ .apirocket-checkout-close { display: block; }
570
+
571
+ .apirocket-checkout-breadcrumbs { text-align: center; }
572
+ .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
573
+
574
+ .apirocket-checkout-logo { display: none; }
665
575
  }
666
576
 
667
- .apirocket-checkout-summary-item-col-quantity {
668
- flex: 0 0 50px;
669
- font-size: 16px;
670
- font-weight: normal;
671
- color: #a3a3a3;
672
- text-align: right;
577
+
578
+ @media (max-width: 720px) {
579
+
580
+ .apirocket-checkout-row { display: block; }
581
+ .apirocket-checkout-row > * { margin-right: 0; }
582
+
583
+ .apirocket-checkout-actions > :first-child { order: 2; }
584
+ .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
585
+ .apirocket-checkout-actions {
586
+ flex-flow: column;
587
+ align-items: stretch;
588
+ }
589
+
590
+ .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
591
+
592
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
593
+ .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
594
+
595
+ .apirocket-checkout-section-subtitle {
596
+ padding-top: 16px;
597
+ margin-bottom: -16px;
598
+ }
599
+
600
+ .apirocket-checkout-footer ul {
601
+ display: block;
602
+ text-align: center !important;
603
+ line-height: 32px !important;
604
+ }
605
+
606
+ .apirocket-checkout-footer ul li {
607
+ display: inline-block;
608
+ }
609
+
610
+ .apircoket-checkout-legal { text-align: center; }
611
+
612
+ .apirocket-checkout-summary-item-col-image {
613
+ flex: 0 0 auto;
614
+ max-width: 80px;
615
+ }
616
+
617
+ .apirocket-checkout-summary-item-col-image img {
618
+ max-height: 80px;
619
+ }
620
+
621
+ .apirocket-checkout-summary-item-col-description {
622
+ flex: 1 1;
623
+ padding-left: 8px;
624
+ font-size: 14px;
625
+ line-height: 16px;
626
+ }
627
+
628
+ .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
629
+
630
+ .apirocket-checkout-summary-item-col-quantity {
631
+ flex: 0 0 25px;
632
+ font-size: 12px;
633
+ }
634
+
635
+ .apirocket-checkout-summary-item-col-price {
636
+ flex: 0 0 80px;
637
+ font-size: 14px;
638
+ }
639
+
640
+ .apirocket-checkout-summary-label-total {
641
+ font-size: 16px;
642
+ line-height: 18px;
643
+ }
644
+ .apirocket-checkout-summary-label-total small {
645
+ font-size: 12px;
646
+ line-height: 14px;
647
+ }
648
+
649
+ .apirocket-checkout-summary-row {
650
+ padding-top: 8px;
651
+ }
652
+
653
+ .apirocket-checkout-summary-label {
654
+ font-size: 14px;
655
+ line-height: 14px;
656
+ }
657
+
658
+ .apirocket-checkout-summary-value,
659
+ .apirocket-checkout-summary-value-total {
660
+ font-size: 16px;
661
+ line-height: 16px;
662
+ }
663
+
664
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
665
+ max-height: 55px;
666
+ }
667
+
668
+ .apirocket-checkout-steps-summary { margin-top: 24px; }
669
+
670
+ .apirocket-checkout-steps-summary-row { position: relative; }
671
+
672
+ .apirocket-checkout-steps-summary-label {
673
+ position: absolute;
674
+ font-size: 14px;
675
+ }
676
+
677
+ .apirocket-checkout-steps-summary-text { margin-top: 18px; }
678
+ .apirocket-checkout-steps-summary-link { font-size: 12px; }
679
+
673
680
  }
674
681
 
675
- .apirocket-checkout-summary-item-col-price {
676
- flex: 0 0 100px;
677
- font-size: 16px;
678
- font-weight: bold;
679
- color: #404040;
680
- text-align: right;
682
+
683
+ .apirocket-modal *,
684
+ .apirocket-modal *::before,
685
+ .apirocket-modal *::after { box-sizing: border-box; }
686
+
687
+ .apirocket-modal {
688
+ display: flex;
689
+ justify-content: center;
690
+ align-items: flex-start;
691
+ position: fixed;
692
+ z-index: 10001;
693
+ right: 0;
694
+ top: 0;
695
+ overflow: hidden;
696
+ overflow-y: auto;
697
+ width: 100%;
698
+ height: 100vh;
699
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
700
+ background-color: #f5f5f5;
681
701
  }
682
702
 
683
- .apirocket-checkout-summary-row {
703
+ .apirocket-modal-nav {
704
+ position: absolute;
684
705
  display: flex;
685
- justify-content: space-between;
686
706
  align-items: center;
687
- padding-top: 16px;
707
+ width: 90%;
708
+ max-width: 1100px;
709
+ height: 96px;
688
710
  }
689
711
 
690
- .apirocket-checkout-summary-label {
712
+ .apirocket-modal-nav-button {
713
+ display: flex;
714
+ align-items: center;
715
+ text-align: left;
716
+ color: #737373;
691
717
  font-size: 16px;
692
718
  font-weight: normal;
693
- line-height: 18px;
694
- color: #404040;
719
+ cursor: pointer;
695
720
  }
696
721
 
697
- .apirocket-checkout-summary-value {
698
- font-size: 18px;
699
- font-weight: bold;
700
- line-height: 18px;
701
- color: #404040;
702
- }
722
+ .apirocket-modal-nav-button svg { margin-right: 16px; }
703
723
 
704
- .apirocket-checkout-summary-row-total {
724
+ .apirocket-modal-content {
705
725
  display: flex;
706
- justify-content: space-between;
707
- align-items: flex-start;
708
- border-top: 1px solid #d9d9d9;
709
- margin-top: 24px;
710
- padding-top: 24px;
726
+ flex-flow: column;
727
+ width: 480px;
728
+ height: auto;
729
+ padding: 32px;
730
+ background-color: #fff;
731
+ margin-top: 96px;
732
+ margin-bottom: 32px;
711
733
  }
712
734
 
713
- .apirocket-checkout-summary-label-total {
735
+ .apirocket-modal-header {
736
+ position: relative;
737
+ padding-bottom: 32px;
738
+ }
739
+
740
+ .apirocket-modal-title {
714
741
  font-size: 18px;
715
742
  font-weight: bold;
716
- line-height: 21px;
743
+ line-height: 1;
717
744
  color: #404040;
745
+ margin-bottom: 8px;
718
746
  }
719
- .apirocket-checkout-summary-label-total small {
720
- display: block;
747
+
748
+ .apirocket-modal-subtitle {
721
749
  font-size: 14px;
722
- line-height: 16px;
723
750
  font-weight: normal;
724
- color: #a3a3a3;
751
+ line-height: 16px;
752
+ color: #737373;
725
753
  }
726
754
 
727
- .apirocket-checkout-summary-value-total {
728
- font-size: 24px;
729
- font-weight: bold;
730
- line-height: 24px;
731
- color: #404040;
755
+ .apirocket-modal-close {
756
+ position: absolute;
757
+ right: -16px;
758
+ top: -16px;
732
759
  }
733
760
 
734
- .apirocket-checkout-breadcrumbs ol {
735
- display: flex;
736
- align-items: center;
737
- list-style: none;
738
- padding: 0;
739
- margin: 0;
740
- margin-top: 24px;
761
+ .apirocket-modal-close-icon {
762
+ height: var(--cart-header-text-close-icon-size, 24px);
763
+ width: var(--cart-header-text-close-icon-size, 24px);
764
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
765
+ cursor: pointer;
741
766
  }
742
767
 
743
- .apirocket-checkout-breadcrumbs ol li {
768
+ .apirocket-modal-body-text-password {
769
+ color: #404040;
770
+ font-size: 14px;
771
+ font-weight: normal;
772
+ line-height: 16px;
773
+ margin-top: -8px;text-align: right;
744
774
  cursor: pointer;
775
+ }
776
+
777
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
778
+
779
+ .apirocket-modal-footer-text {
745
780
  color: #a3a3a3;
746
781
  font-size: 14px;
747
- line-height: 1;
782
+ font-weight: normal;
783
+ line-height: 16px;
784
+ text-align: center;
785
+ margin-top: 16px;
748
786
  }
749
787
 
750
- .apirocket-checkout-breadcrumbs ol li::after {
751
- width: 5px;
752
- height: 9px;
753
- display: inline-block;
754
- content: "";
755
- 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");
756
- background-repeat: no-repeat;
757
- background-position: center;
758
- padding: 0 8px;
788
+ .apirocket-modal-footer-text span {
789
+ color: #404040;
790
+ cursor: pointer;
759
791
  }
760
792
 
761
- .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
793
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
762
794
 
763
- .apirocket-checkout-breadcrumbs ol li a {
764
- color: #a3a3a3;
765
- text-decoration: underline;
795
+
796
+ .apirocket-modal-body {}
797
+
798
+ .apirocket-modal-footer {
799
+ padding-top: 32px;
766
800
  }
767
801
 
768
- .apirocket-checkout-breadcrumbs-active {
769
- font-weight: bold;
770
- color: #404040 !important;
802
+ .apirocket-modal-row {
803
+ display: flex;
804
+ justify-content: space-between;
805
+ align-items: flex-start;
771
806
  }
772
807
 
773
- .apirocket-checkout-steps-summary {
774
- border: 1px solid #d9d9d9;
775
- border-radius: 4px;
776
- overflow: hidden;
777
- margin-top: 48px;
808
+ .apirocket-modal-row > * {
809
+ flex: 1 1;
810
+ margin-right: 16px;
778
811
  }
779
812
 
780
- .apirocket-checkout-steps-summary-row {
813
+ .apirocket-modal-row > *:last-child { margin-right: 0; }
814
+
815
+
816
+ @media (max-width: 720px) {
817
+ .apirocket-modal-row { display: block; }
818
+ .apirocket-modal-row > * { margin-right: 0; }
819
+
820
+ .apirocket-modal-nav { display: none; }
821
+
822
+ .apirocket-modal-content {
823
+ width: 95%;
824
+ margin-top: 32px;
825
+ padding: 24px;
826
+ }
827
+
828
+ .apirocket-modal-close {
829
+ right: -8px;
830
+ top: -8px;
831
+ }
832
+ }.apirocket-summary {}
833
+
834
+ .apirocket-summary-top {
835
+ margin-top: 56px;
836
+ margin-bottom: 32px;
837
+ }
838
+
839
+ .apirocket-summary-header {
781
840
  display: flex;
782
- position: relative;
783
- border-bottom: 1px solid #d9d9d9;
784
- padding: 16px;
841
+ justify-content: flex-start;
842
+ align-items: center;
843
+ margin-bottom: 32px;
785
844
  }
786
845
 
787
- .apirocket-checkout-steps-summary-label {
788
- flex: 0 0 90px;
789
- font-size: 14px;
790
- font-weight: normal;
791
- line-height: 14px;
792
- color: #a3a3a3;
846
+ .apirocket-summary-header-icon {
847
+ flex: 0 1;
848
+ margin-right: 16px;
793
849
  }
794
850
 
795
- .apirocket-checkout-steps-summary-text {
796
- flex: 1 1 auto;
797
- font-size: 14px;
798
- font-weight: normal;
799
- line-height: 18px;
851
+ .apirocket-summary-header-content {}
852
+
853
+ .apirocket-summary-header-title {
854
+ font-size: 24px;
855
+ font-weight: bold;
856
+ line-height: 1.2;
800
857
  color: #404040;
858
+ margin-bottom: 4px;
801
859
  }
802
860
 
803
- .apirocket-checkout-steps-summary-link {
804
- flex: 0 0 60px;
805
- text-align: right;
806
- font-size: 12px;
861
+ .apirocket-summary-header-subtitle {
862
+ font-size: 18px;
807
863
  font-weight: normal;
808
- line-height: 1;
809
- text-decoration: underline;
864
+ line-height: 1.2;
810
865
  color: #737373;
811
- cursor: pointer;
812
866
  }
813
867
 
814
- .apirocket-checkout-section {
815
- margin-top: 48px;
868
+ .apirocket-summary-section {
869
+ margin-top: 16px;
870
+ border: 1px solid #d9d9d9;
871
+ border-radius: 4px;
872
+ padding: 24px;
816
873
  }
817
874
 
818
- .apirocket-checkout-section-header {
875
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
876
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
877
+
878
+ .apirocket-summary-section-title {
879
+ font-size: 18px;
880
+ font-weight: bold;
881
+ line-height: 1.2;
882
+ color: #404040;
819
883
  margin-bottom: 24px;
820
884
  }
821
885
 
822
- .apirocket-checkout-section-title {
823
- font-size: 18px;
886
+ .apirocket-summary-section-subtitle {
887
+ font-size: 16px;
824
888
  font-weight: bold;
825
889
  line-height: 1;
826
890
  color: #404040;
891
+ margin-bottom: 16px;
827
892
  }
828
893
 
829
- .apirocket-checkout-section-subtitle {
830
- font-size: 12px;
894
+ .apirocket-summary-section-text {
895
+ font-size: 14px;
831
896
  font-weight: normal;
832
- padding-top: 4px;
833
- line-height: 1;
834
- color: #a3a3a3;
835
- text-align: right;
897
+ line-height: 18px;
898
+ color: #404040;
836
899
  }
837
900
 
838
- .apirocket-checkout-button-edit {
839
- cursor: pointer;
901
+ .apirocket-summary-help {
902
+ display: flex;
903
+ justify-content: flex-start;
904
+ align-items: center;
840
905
  }
841
906
 
842
- .apirocket-checkout-button-edit:hover {
843
- text-decoration: underline;
907
+ .apirocket-summary-help-icon {
908
+ flex: 0 1;
909
+ padding-right: 12px;
844
910
  }
845
911
 
846
- .apirocket-checkout-section a {
912
+ .apirocket-summary-help-content {
913
+ font-size: 14px;
914
+ font-weight: normal;
915
+ line-height: 1.2;
847
916
  color: #404040;
848
- outline: none;
849
- text-decoration: underline;
850
917
  }
851
918
 
852
- .apirocket-checkout-section-text {
853
- font-size: 14px;
854
- line-height: 1;
855
- margin-top: 4px;
919
+ .apirocket-summary-help-content a {
920
+ display: block;
856
921
  color: #737373;
857
922
  }
858
923
 
859
- .apirocket-checkout-actions {
860
- display: flex;
861
- margin-top: 64px;
862
- align-items: center;
863
- max-width: 100%;
924
+ @media (max-width: 1000px) {
925
+ .apirocket-summary-top { display: none; }
926
+ .apirocket-summary-header { margin-top: 32px; }
864
927
  }
865
928
 
866
- .apirocket-checkout-actions > * { flex: 1 1; }
929
+ @media (max-width: 720px) {
930
+ .apirocket-summary-section-subtitle { margin-top: 24px; }
931
+ .apirocket-summary-header {
932
+ flex-direction: column;
933
+ align-items: center;
934
+ text-align: center;
935
+ }
936
+ .apirocket-summary-header-icon {
937
+ margin-right: 0px;
938
+ margin-bottom: 16px;
939
+ }
940
+ .apirocket-summary-header-title {
941
+ font-size: 28px;
942
+ margin-bottom: 8px;
943
+ }
944
+ }:root {
945
+ --cart-width: 540px;
946
+ --cart-background-color: #fff;
947
+ --cart-padding: 32px;
948
+ --cart-font-family: Arial, Helvetica, sans-serif;
867
949
 
868
- .apirocket-checkout-footer {
869
- margin-top: 72px;
870
- border-top: 1px solid #d9d9d9;
871
- margin-bottom: 64px;
872
- padding-top: 16px;
950
+ --cart-header-background-color: #f5f5f5;
951
+ --cart-header-border-color: #f5f5f5;
952
+ --cart-header-border-width: 1px;
953
+ --cart-header-text-font-size: 18px;
954
+ --cart-header-text-font-weight: normal;
955
+ --cart-header-text-font-color: #404040;
956
+ --cart-header-text-close-icon-color: #a3a3a3;
957
+ --cart-header-text-close-icon-size: 24px;
958
+
959
+ --cart-footer-background-color: #fff;
960
+ --cart-footer-border-color: #e5e5e5;
961
+ --cart-footer-border-width: 1px;
962
+ --cart-footer-text-font-size: 16px;
963
+ --cart-footer-text-font-weight: lighter;
964
+ --cart-footer-text-font-color: #404040;
965
+ --cart-footer-total-font-size: 18px;
966
+ --cart-footer-total-font-weight: bold;
967
+ --cart-footer-total-font-color: #000;
968
+
969
+ --cart-item-border-color: #e5e5e5;
970
+ --cart-item-border-width: 1px;
971
+ --cart-item-padding: 32px;
972
+ --cart-item-label-font-size: 14px;
973
+ --cart-item-label-font-weight: lighter;
974
+ --cart-item-label-font-color: #737373;
975
+ --cart-item-image-display: inherit;
976
+ --cart-item-image-width: 100px;
977
+ --cart-item-image-width-fullscreen: 150px;
978
+ --cart-item-name-font-size: 18px;
979
+ --cart-item-name-font-weight: bold;
980
+ --cart-item-name-font-color: #000;
981
+ --cart-item-description-font-size: 14px;
982
+ --cart-item-description-font-weight: lighter;
983
+ --cart-item-description-font-color: #000;
984
+ --cart-item-delete-icon-color: #404040;
985
+ --cart-item-delete-icon-color-hover: #000;
986
+ --cart-item-delete-icon-size: 18px;
987
+ --cart-item-form-border-color: #e5e5e5;
988
+ --cart-item-form-border-color-hover: #000;
989
+ --cart-item-form-border-width: 1px;
990
+ --cart-item-form-text-size: 14px;
991
+ --cart-item-form-text-weight: normal;
992
+ --cart-item-form-text-color: #000;
993
+ --cart-item-quantity-icon-color: #737373;
994
+ --cart-item-quantity-icon-background-color: transparent;
995
+ --cart-item-quantity-icon-size: 16px;
996
+ --cart-item-price-font-size: 16px;
997
+ --cart-item-price-font-weight: bold;
998
+ --cart-item-price-font-color: #404040;
999
+
1000
+ --cart-button-font-size: 16px;
1001
+ --cart-button-font-weight: normal;
1002
+ --cart-button-font-color: #737373;
1003
+ --cart-button-font-color-hover: #404040;
1004
+ --cart-button-border-color: #e5e5e5;
1005
+ --cart-button-border-color-hover: #404040;
1006
+ --cart-button-border-radius: 4px;
1007
+ --cart-button-background-color: transparent;
1008
+ --cart-button-background-color-hover: transparent;
1009
+ --cart-button-padding-x: 16px;
1010
+ --cart-button-padding-y: 16px;
1011
+
1012
+ --cart-button-primary-text-color: #fff;
1013
+ --cart-button-primary-text-color-hover: #fff;
1014
+ --cart-button-primary-border-color: #1d4ed8;
1015
+ --cart-button-primary-border-color-hover: #0d59f4;
1016
+ --cart-button-primary-background-color: #1d4ed8;
1017
+ --cart-button-primary-background-color-hover: #0d59f4;
1018
+ /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
873
1019
  }
874
1020
 
875
- .apirocket-checkout-footer ul {
1021
+ .apirocket-cart * { box-sizing: content-box; }
1022
+
1023
+ .apirocket-cart {
1024
+ position: fixed;
1025
+ z-index: 10000;
1026
+ right: 0;
1027
+ top: 0;
1028
+ overflow: hidden;
1029
+ width: var(--cart-width, 540px);
1030
+ height: 100vh;
1031
+ box-shadow: 1px 20px 8px rgba(0,0,0,.1);
1032
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1033
+ background-color: var(--cart-background-color, #fff);
1034
+ }
1035
+
1036
+ .apirocket-cart-content {
876
1037
  display: flex;
1038
+ flex-direction: column;
1039
+ height: 100%;
1040
+ background-color: var(--cart-background-color, #fff);
1041
+ }
1042
+
1043
+ .apirocket-cart-header {
1044
+ display: flex;
1045
+ flex: 0 0 96px;
877
1046
  align-items: center;
878
- list-style: none;
879
- padding: 0;
880
- margin: 0;
1047
+ justify-content: space-between;
1048
+ padding: 0px var(--cart-padding);
1049
+ background-color: var(--cart-header-background-color, #f5f5f5);
1050
+ border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
881
1051
  }
882
1052
 
883
- .apirocket-checkout-footer ul li { margin-right: 16px; }
1053
+ .apirocket-cart-header-title {
1054
+ font-size: var(--cart-header-text-font-size, 18px);
1055
+ font-weight: var(--cart-header-text-font-weight, normal);
1056
+ color: var(--cart-header-text-font-color, #404040)
1057
+ }
884
1058
 
885
- .apirocket-checkout-footer ul li a {
886
- color: #404040;
887
- font-size: 14px;
888
- line-height: 1;
889
- text-decoration: none;
1059
+ .apirocket-cart-header-close-icon {
1060
+ height: var(--cart-header-text-close-icon-size, 24px);
1061
+ width: var(--cart-header-text-close-icon-size, 24px);
1062
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
1063
+ cursor: pointer;
890
1064
  }
891
1065
 
892
- .apirocket-checkout-footer ul li a:focus {
893
- outline: none;
894
- text-decoration: underline;
1066
+ .apirocket-cart-header-continue {
1067
+ display: none;
1068
+ align-items: center;
1069
+ text-align: left;
1070
+ color: #737373;
1071
+ font-size: 16px;
1072
+ font-weight: normal;
1073
+ cursor: pointer;
895
1074
  }
896
1075
 
897
- .apircoket-checkout-legal {
898
- margin-top: 16px;
899
- font-size: 14px;
1076
+ .apirocket-cart-header-login {
1077
+ display: none;
1078
+ align-items: center;
1079
+ text-align: right;
900
1080
  color: #737373;
1081
+ font-size: 16px;
901
1082
  font-weight: normal;
902
- line-height: 1.4;
1083
+ cursor: pointer;
1084
+ }
1085
+
1086
+ .apirocket-cart-header-login svg,
1087
+ .apirocket-cart-header-continue svg { margin-right: 16px; }
1088
+
1089
+ .apirocket-cart-body {
1090
+ flex: 1 1 auto;
1091
+ padding: 0px;
1092
+ background: var(--cart-background-color, #fff);
1093
+ overflow-y: auto;
1094
+ }
1095
+
1096
+ .apirocket-cart-body-message {
1097
+ font-size: 18px;
1098
+ font-weight: var(--cart-item-description-font-weight, lighter);
1099
+ color: #666;
1100
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
1101
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1102
+ }
1103
+
1104
+ .apirocket-cart-footer {
1105
+ flex: 0 0 auto;
1106
+ padding: var(--cart-padding, 32px);
1107
+ background-color: var(--cart-footer-background-color, transparent);
1108
+ border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
1109
+ font-size: var(--cart-footer-text-font-size, 16px);
1110
+ font-weight: var(--cart-footer-text-font-weight, lighter);
1111
+ color: var(--cart-footer-text-font-color, #737373);
903
1112
  }
904
1113
 
905
- .apircoket-checkout-legal a {
906
- text-decoration: underline;
907
- color: #404040;
1114
+ .apirocket-cart-footer-total {
1115
+ font-size: var(--cart-footer-total-font-size, 18px);
1116
+ font-weight: var(--cart-footer-total-font-weight, bold);
1117
+ color: var(--cart-footer-total-font-color, #000);
908
1118
  }
909
1119
 
910
- .apirocket-checkout-logo img {
911
- display: block;
912
- max-height: 80px;
1120
+ .apirocket-cart-row {
1121
+ display: flex;
1122
+ justify-content: space-between;
1123
+ align-items: center;
913
1124
  }
914
1125
 
915
- .apirocket-checkout-mobile { display: none; }
916
-
917
- .apirocket-checkout-mobile .apirocket-checkout-logo {
918
- display: block;
919
- margin-top: 16px;
1126
+ .apirocket-cart-col {
1127
+ flex: 1 1 auto;
920
1128
  margin-bottom: 16px;
921
1129
  }
922
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
923
- display: block;
924
- margin: auto;
925
- max-height: 80px;
1130
+
1131
+ .apirocket-cart-item {
1132
+ padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
1133
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
926
1134
  }
927
1135
 
928
- .apirocket-checkout-mobile-menu {
929
- background-color: #f5f5f5;
930
- border-top: 1px solid #d9d9d9;
1136
+ .apirocket-cart-item:last-child {
1137
+ border-bottom: none;
1138
+ margin-bottom: var(--cart-padding, 32px);
931
1139
  }
932
1140
 
933
- .apirocket-checkout-mobile-wrapper {
1141
+ .apirocket-cart-item-row {
934
1142
  display: flex;
935
1143
  justify-content: space-between;
936
1144
  align-items: center;
937
- width: 90%;
938
- max-width: 560px;
939
- margin: 0 auto;
940
- padding: 16px 0px;
941
- color: #404040;
942
1145
  }
943
1146
 
944
- .apirocket-checkout-mobile-wrapper-cart {
945
- display: inline-flex;
946
- align-items: center;
947
- color: #404040;
948
- cursor: pointer;
1147
+ .apirocket-cart-item-col-image {
1148
+ display: var(--cart-item-image-display, inherit);
1149
+ flex: 0 0 var(--cart-item-image-width, 100px);
1150
+ align-self: flex-start;
1151
+ margin-right: 16px;
949
1152
  }
950
1153
 
951
- .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
1154
+ .apirocket-cart-item-col-image img {
1155
+ display: block;
1156
+ max-width: 100%;
1157
+ }
952
1158
 
953
- .apirocket-checkout-mobile-wrapper-total {
954
- line-height: 20px;
955
- font-size: 20px;
956
- font-weight: bold;
1159
+ .apirocket-cart-item-col-description {
1160
+ align-self: flex-start;
1161
+ padding-right: 32px;
1162
+ flex-grow: 1;
957
1163
  }
958
1164
 
959
- .apirocket-checkout-mobile-summary {
960
- background-color: #f5f5f5;
961
- transition-property: max-height;
962
- transition-timing-function: ease-in;
963
- transition-duration: 350ms;
964
- max-height: 0px;
965
- overflow: hidden;
966
- border-bottom: 1px solid #d9d9d9;
1165
+ .apirocket-cart-item-col-description-name {
1166
+ font-size: var(--cart-item-name-font-size, 18px);
1167
+ font-weight: var(--cart-item-name-font-weight, bold);
1168
+ color: var(--cart-item-name-font-color, #000);
967
1169
  }
968
1170
 
969
- .apirocket-checkout-mobile-summary--show {
970
- max-height: 1000px;
971
- overflow: auto;
1171
+ .apirocket-cart-item-col-description-text {
1172
+ font-size: var(--cart-item-description-font-size, 14px);
1173
+ font-weight: var(--cart-item-description-font-weight, lighter);
1174
+ color: var(--cart-item-description-font-color, #000);
972
1175
  }
973
1176
 
974
- .apirocket-checkout-mobile-summary-wrapper {
975
- width: 90%;
976
- max-width: 560px;
977
- padding: 16px 0px;
978
- margin: 0 auto;
1177
+ .apirocket-cart-item-col-delete {
1178
+ flex: 1 0 auto;
1179
+ align-self: flex-start;
1180
+ color: var(--cart-item-delete-icon-color, #404040);
1181
+ width: var(--cart-item-delete-icon-size, 24px);
1182
+ cursor: pointer;
1183
+ text-align: center;
979
1184
  }
980
1185
 
1186
+ .apirocket-cart-item-col-delete:hover {
1187
+ color: var(--cart-item-delete-icon-color-hover, #000);
1188
+ }
981
1189
 
1190
+ .apirocket-cart-item-col-delete svg {
1191
+ width: var(--cart-item-delete-icon-size, 18px);
1192
+ height: var(--cart-item-delete-icon-size, 18px);
1193
+ }
982
1194
 
983
- /* Utils */
1195
+ .apirocket-cart-item-label {
1196
+ font-size: var(--cart-item-label-font-size, 14px);
1197
+ font-weight: var(--cart-item-label-font-weight, lighter);
1198
+ color: var(--cart-item-label-font-color, #737373);
1199
+ margin-bottom: 4px;
1200
+ }
984
1201
 
985
- .apirocket-checkout-row {
1202
+ .apirocket-cart-item-col-quantity {
1203
+ margin-top: 16px;
1204
+ }
1205
+
1206
+ .apirocket-cart-item-quantity-wrapper {
986
1207
  display: flex;
987
1208
  justify-content: space-between;
988
- align-items: flex-start;
989
- }
990
- .apirocket-checkout-row > * {
991
- flex: 1 1;
992
- margin-right: 16px;
1209
+ border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
1210
+ min-width: 160px;
1211
+ user-select: none;
1212
+ transition-property: border-color;
1213
+ transition-timing-function: ease;
1214
+ transition-duration: 350ms;
993
1215
  }
994
1216
 
995
- .apirocket-checkout-row > *:last-child { margin-right: 0; }
996
-
997
- .apirocket-checkout-fieldset {
998
- border: 1px solid #d9d9d9;
999
- border-radius: 4px;
1000
- overflow: hidden;
1217
+ .apirocket-cart-item-quantity-wrapper:hover {
1218
+ border-color: var(--cart-item-form-border-color-hover, #000);
1001
1219
  }
1002
1220
 
1003
- .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
1004
-
1005
- .apirocket-checkout-fieldset .apirocket-form-input,
1006
- .apirocket-checkout-fieldset .apirocket-form-select,
1007
- .apirocket-checkout-fieldset .apirocket-form-checkbox,
1008
- .apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
1009
- .apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
1010
-
1011
- .apirocket-checkout-fieldset > * {
1221
+ .apirocket-cart-item-quantity-number {
1222
+ flex: 1 1 auto;
1223
+ font-size: var(--cart-item-form-text-size, 14px);
1224
+ font-weight: var(--cart-item-form-text-weight, normal);
1225
+ color: var(--cart-item-form-text-color, #000);
1012
1226
  padding: 16px;
1013
- border-bottom: 1px solid #d9d9d9;
1227
+ line-height: 1;
1228
+ text-align: center;
1014
1229
  }
1015
- .apirocket-checkout-fieldset-row {
1230
+
1231
+ .apirocket-cart-item-quantity-button {
1016
1232
  display: flex;
1017
- justify-content: space-between;
1018
- align-items: flex-start;
1019
- }
1020
- .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
1021
- .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
1022
- .apirocket-checkout-fieldset-row > :last-child {
1023
- flex: 0 0 auto;
1024
- margin-right: 0px;
1025
- font-size: 16px;
1026
- font-weight: bold;
1027
- line-height: 20px;
1028
- color: #404040;
1233
+ align-items: center;
1234
+ background-color: var(--cart-item-quantity-icon-background-color, transparent);
1235
+ padding: 0px 12px;
1236
+ cursor: pointer;
1029
1237
  }
1030
1238
 
1031
- .apirocket-checkout-fieldset-row > :last-child img {
1032
- display: block;
1033
- max-height: 24px;
1239
+ .apirocket-cart-item-quantity-button svg {
1240
+ color: var(--cart-item-quantity-icon-color, #737373);
1241
+ width: var(--cart-item-quantity-icon-size, 16px);
1242
+ height: var(--cart-item-quantity-icon-size, 16px);
1034
1243
  }
1035
1244
 
1036
- .apirocket-checkout-fieldset-row-wrapper {
1037
- background-color: #f5f5f5;
1245
+ .apirocket-cart-item-col-price {
1246
+ margin-top: 36px;
1247
+ font-size: var(--cart-item-price-font-size, 16px);
1248
+ font-weight: var(--cart-item-price-font-weight, normal);
1249
+ color: var(--cart-item-price-font-color, #404040);
1038
1250
  }
1039
1251
 
1040
- .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
1041
- .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
1042
-
1043
- /* Responsive */
1044
1252
 
1045
- @media (max-width: 1000px) {
1253
+ @media (min-width: 720px) {
1046
1254
 
1047
- .apirocket-checkout-mobile { display: block; }
1048
-
1049
- .apirocket-checkout-wrap {
1050
- flex-flow: column;
1051
- margin: 0;
1052
- padding: 0;
1255
+ .apirocket-cart.apirocket-cart-full-screen {
1053
1256
  width: 100%;
1054
- }
1055
-
1056
- .apirocket-checkout-main,
1057
- .apirocket-checkout-summary {
1058
- width: 90%;
1059
- max-width: 560px;
1060
- margin: 0 auto;
1061
- padding: 0;
1062
- }
1063
-
1064
- .apirocket-checkout-summary {
1065
- /* order: 0;
1066
- padding: 16px 0; */
1067
- display: none;
1068
- }
1069
- .apirocket-checkout-summary::after { display: none; }
1070
-
1071
- .apirocket-checkout-summary-header,
1072
- .apirocket-checkout-summary-login { display: none; }
1073
-
1074
- .apirocket-checkout-continue { display: none; }
1075
- .apirocket-checkout-close { display: block; }
1076
-
1077
- .apirocket-checkout-breadcrumbs { text-align: center; }
1078
- .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
1079
-
1080
- .apirocket-checkout-logo { display: none; }
1081
- }
1082
-
1083
-
1084
- @media (max-width: 720px) {
1085
-
1086
- .apirocket-checkout-row { display: block; }
1087
- .apirocket-checkout-row > * { margin-right: 0; }
1088
-
1089
- .apirocket-checkout-actions > :first-child { order: 2; }
1090
- .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
1091
- .apirocket-checkout-actions {
1092
- flex-flow: column;
1093
- align-items: stretch;
1094
- }
1095
-
1096
- .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
1097
-
1098
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
1099
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
1100
-
1101
- .apirocket-checkout-section-subtitle {
1102
- padding-top: 16px;
1103
- margin-bottom: -16px;
1257
+ overflow-y: auto;
1104
1258
  }
1105
1259
 
1106
- .apirocket-checkout-footer ul {
1260
+ .apirocket-cart-full-screen .apirocket-cart-content {
1107
1261
  display: block;
1108
- text-align: center !important;
1109
- line-height: 32px !important;
1262
+ width: 90%;
1263
+ max-width: 980px;
1264
+ margin: 0 auto;
1110
1265
  }
1111
1266
 
1112
- .apirocket-checkout-footer ul li {
1113
- display: inline-block;
1267
+ .apirocket-cart-full-screen .apirocket-cart-header {
1268
+ background-color: #fff;
1269
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1270
+ padding: 40px 0px;
1114
1271
  }
1115
1272
 
1116
- .apircoket-checkout-legal { text-align: center; }
1273
+ .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
1274
+ .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
1117
1275
 
1118
- .apirocket-checkout-summary-item-col-image {
1119
- flex: 0 0 auto;
1120
- max-width: 80px;
1121
- }
1122
-
1123
- .apirocket-checkout-summary-item-col-image img {
1124
- max-height: 80px;
1125
- }
1126
-
1127
- .apirocket-checkout-summary-item-col-description {
1128
- flex: 1 1;
1129
- padding-left: 8px;
1130
- font-size: 14px;
1131
- line-height: 16px;
1132
- }
1133
-
1134
- .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
1135
-
1136
- .apirocket-checkout-summary-item-col-quantity {
1137
- flex: 0 0 25px;
1138
- font-size: 12px;
1139
- }
1140
-
1141
- .apirocket-checkout-summary-item-col-price {
1142
- flex: 0 0 80px;
1143
- font-size: 14px;
1144
- }
1276
+ .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
1145
1277
 
1146
- .apirocket-checkout-summary-label-total {
1147
- font-size: 16px;
1148
- line-height: 18px;
1149
- }
1150
- .apirocket-checkout-summary-label-total small {
1151
- font-size: 12px;
1152
- line-height: 14px;
1278
+ .apirocket-cart-full-screen .apirocket-cart-footer {
1279
+ width: 40%;
1280
+ border-top: none;
1281
+ margin-left: auto;
1282
+ margin-right: 0;
1283
+ padding: 0px;
1284
+ padding-top: 32px;
1285
+ padding-bottom: 96px;
1153
1286
  }
1154
1287
 
1155
- .apirocket-checkout-summary-row {
1156
- padding-top: 8px;
1288
+ .apirocket-cart-full-screen .apirocket-cart-item {
1289
+ display: flex;
1290
+ position: relative;
1291
+ padding-left: 0;
1292
+ padding-right: 0;
1157
1293
  }
1158
1294
 
1159
- .apirocket-checkout-summary-label {
1160
- font-size: 14px;
1161
- line-height: 14px;
1162
- }
1295
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
1296
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
1163
1297
 
1164
- .apirocket-checkout-summary-value,
1165
- .apirocket-checkout-summary-value-total {
1166
- font-size: 16px;
1167
- line-height: 16px;
1168
- }
1298
+ .apirocket-cart-full-screen .apirocket-cart-item:last-child {
1299
+ border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1300
+ }
1169
1301
 
1170
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1171
- max-height: 55px;
1302
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
1303
+ .apirocket-cart-full-screen .apirocket-cart-item-col-price {
1304
+ align-self: flex-end;
1305
+ line-height: 48px;
1172
1306
  }
1173
1307
 
1174
- .apirocket-checkout-steps-summary { margin-top: 24px; }
1308
+ .apirocket-cart-full-screen .apirocket-cart-item-col-image {
1309
+ flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
1310
+ }
1175
1311
 
1176
- .apirocket-checkout-steps-summary-row { position: relative; }
1312
+ .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
1313
+ .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
1177
1314
 
1178
- .apirocket-checkout-steps-summary-label {
1315
+ .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
1179
1316
  position: absolute;
1180
- font-size: 14px;
1317
+ right: 0px;
1318
+ top: var(--cart-item-padding, 32px);
1181
1319
  }
1320
+ }
1182
1321
 
1183
- .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1184
- .apirocket-checkout-steps-summary-link { font-size: 12px; }
1185
-
1322
+ @media (min-width: 720px) and (max-width: 920px) {
1323
+ .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
1324
+ .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
1186
1325
  }
1187
1326
 
1327
+ /* Mobile version */
1328
+
1329
+ @media (max-width: 720px) {
1330
+
1331
+ .apirocket-cart {
1332
+ width: 100%;
1333
+ box-shadow: none;
1334
+ }
1188
1335
 
1189
- .apirocket-form-input {
1336
+ .apirocket-cart-header-continue { display: none; }
1337
+ .apirocket-cart-header-login { display: none; }
1338
+ }.apirocket-form-input {
1190
1339
  display: block;
1191
1340
  position: relative;
1192
1341
  margin-bottom: 16px;
@@ -1636,153 +1785,4 @@ button.apirocket-button-primary:disabled {
1636
1785
  justify-content: center;
1637
1786
  }
1638
1787
 
1639
- }.apirocket-modal *,
1640
- .apirocket-modal *::before,
1641
- .apirocket-modal *::after { box-sizing: border-box; }
1642
-
1643
- .apirocket-modal {
1644
- display: flex;
1645
- justify-content: center;
1646
- align-items: flex-start;
1647
- position: fixed;
1648
- z-index: 10001;
1649
- right: 0;
1650
- top: 0;
1651
- overflow: hidden;
1652
- overflow-y: auto;
1653
- width: 100%;
1654
- height: 100vh;
1655
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1656
- background-color: #f5f5f5;
1657
- }
1658
-
1659
- .apirocket-modal-nav {
1660
- position: absolute;
1661
- display: flex;
1662
- align-items: center;
1663
- width: 90%;
1664
- max-width: 1100px;
1665
- height: 96px;
1666
- }
1667
-
1668
- .apirocket-modal-nav-button {
1669
- display: flex;
1670
- align-items: center;
1671
- text-align: left;
1672
- color: #737373;
1673
- font-size: 16px;
1674
- font-weight: normal;
1675
- cursor: pointer;
1676
- }
1677
-
1678
- .apirocket-modal-nav-button svg { margin-right: 16px; }
1679
-
1680
- .apirocket-modal-content {
1681
- display: flex;
1682
- flex-flow: column;
1683
- width: 480px;
1684
- height: auto;
1685
- padding: 32px;
1686
- background-color: #fff;
1687
- margin-top: 96px;
1688
- margin-bottom: 32px;
1689
- }
1690
-
1691
- .apirocket-modal-header {
1692
- position: relative;
1693
- padding-bottom: 32px;
1694
- }
1695
-
1696
- .apirocket-modal-title {
1697
- font-size: 18px;
1698
- font-weight: bold;
1699
- line-height: 1;
1700
- color: #404040;
1701
- margin-bottom: 8px;
1702
- }
1703
-
1704
- .apirocket-modal-subtitle {
1705
- font-size: 14px;
1706
- font-weight: normal;
1707
- line-height: 16px;
1708
- color: #737373;
1709
- }
1710
-
1711
- .apirocket-modal-close {
1712
- position: absolute;
1713
- right: -16px;
1714
- top: -16px;
1715
- }
1716
-
1717
- .apirocket-modal-close-icon {
1718
- height: var(--cart-header-text-close-icon-size, 24px);
1719
- width: var(--cart-header-text-close-icon-size, 24px);
1720
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
1721
- cursor: pointer;
1722
- }
1723
-
1724
- .apirocket-modal-body-text-password {
1725
- color: #404040;
1726
- font-size: 14px;
1727
- font-weight: normal;
1728
- line-height: 16px;
1729
- margin-top: -8px;text-align: right;
1730
- cursor: pointer;
1731
- }
1732
-
1733
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
1734
-
1735
- .apirocket-modal-footer-text {
1736
- color: #a3a3a3;
1737
- font-size: 14px;
1738
- font-weight: normal;
1739
- line-height: 16px;
1740
- text-align: center;
1741
- margin-top: 16px;
1742
- }
1743
-
1744
- .apirocket-modal-footer-text span {
1745
- color: #404040;
1746
- cursor: pointer;
1747
- }
1748
-
1749
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
1750
-
1751
-
1752
- .apirocket-modal-body {}
1753
-
1754
- .apirocket-modal-footer {
1755
- padding-top: 32px;
1756
- }
1757
-
1758
- .apirocket-modal-row {
1759
- display: flex;
1760
- justify-content: space-between;
1761
- align-items: flex-start;
1762
- }
1763
-
1764
- .apirocket-modal-row > * {
1765
- flex: 1 1;
1766
- margin-right: 16px;
1767
- }
1768
-
1769
- .apirocket-modal-row > *:last-child { margin-right: 0; }
1770
-
1771
-
1772
- @media (max-width: 720px) {
1773
- .apirocket-modal-row { display: block; }
1774
- .apirocket-modal-row > * { margin-right: 0; }
1775
-
1776
- .apirocket-modal-nav { display: none; }
1777
-
1778
- .apirocket-modal-content {
1779
- width: 95%;
1780
- margin-top: 32px;
1781
- padding: 24px;
1782
- }
1783
-
1784
- .apirocket-modal-close {
1785
- right: -8px;
1786
- top: -8px;
1787
- }
1788
1788
  }.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}}