apirocket 0.1.0 → 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,1309 +1,1340 @@
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
- }
336
+ .apirocket-checkout-button-edit:hover {
337
+ text-decoration: underline;
338
+ }
392
339
 
393
- .apirocket-cart-header-continue { display: none; }
394
- .apirocket-cart-header-login { display: none; }
395
- }.apirocket-modal *,
396
- .apirocket-modal *::before,
397
- .apirocket-modal *::after { box-sizing: border-box; }
340
+ .apirocket-checkout-section a {
341
+ color: #404040;
342
+ outline: none;
343
+ text-decoration: underline;
344
+ }
398
345
 
399
- .apirocket-modal {
400
- display: flex;
401
- justify-content: center;
402
- align-items: flex-start;
403
- position: fixed;
404
- z-index: 10001;
405
- right: 0;
406
- top: 0;
407
- overflow: hidden;
408
- overflow-y: auto;
409
- width: 100%;
410
- height: 100vh;
411
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
412
- background-color: #f5f5f5;
346
+ .apirocket-checkout-section-text {
347
+ font-size: 14px;
348
+ line-height: 1;
349
+ margin-top: 4px;
350
+ color: #737373;
413
351
  }
414
352
 
415
- .apirocket-modal-nav {
416
- position: absolute;
353
+ .apirocket-checkout-actions {
417
354
  display: flex;
355
+ margin-top: 64px;
418
356
  align-items: center;
419
- width: 90%;
420
- max-width: 1100px;
421
- height: 96px;
357
+ max-width: 100%;
422
358
  }
423
359
 
424
- .apirocket-modal-nav-button {
360
+ .apirocket-checkout-actions > * { flex: 1 1; }
361
+
362
+ .apirocket-checkout-footer {
363
+ margin-top: 72px;
364
+ border-top: 1px solid #d9d9d9;
365
+ margin-bottom: 64px;
366
+ padding-top: 16px;
367
+ }
368
+
369
+ .apirocket-checkout-footer ul {
425
370
  display: flex;
426
371
  align-items: center;
427
- text-align: left;
428
- color: #737373;
429
- font-size: 16px;
430
- font-weight: normal;
431
- cursor: pointer;
372
+ list-style: none;
373
+ padding: 0;
374
+ margin: 0;
432
375
  }
433
376
 
434
- .apirocket-modal-nav-button svg { margin-right: 16px; }
377
+ .apirocket-checkout-footer ul li { margin-right: 16px; }
435
378
 
436
- .apirocket-modal-content {
437
- display: flex;
438
- flex-flow: column;
439
- width: 480px;
440
- height: auto;
441
- padding: 32px;
442
- background-color: #fff;
443
- margin-top: 96px;
444
- margin-bottom: 32px;
379
+ .apirocket-checkout-footer ul li a {
380
+ color: #404040;
381
+ font-size: 14px;
382
+ line-height: 1;
383
+ text-decoration: none;
445
384
  }
446
385
 
447
- .apirocket-modal-header {
448
- position: relative;
449
- padding-bottom: 32px;
386
+ .apirocket-checkout-footer ul li a:focus {
387
+ outline: none;
388
+ text-decoration: underline;
450
389
  }
451
390
 
452
- .apirocket-modal-title {
453
- font-size: 18px;
454
- font-weight: bold;
455
- line-height: 1;
391
+ .apircoket-checkout-legal {
392
+ margin-top: 16px;
393
+ font-size: 14px;
394
+ color: #737373;
395
+ font-weight: normal;
396
+ line-height: 1.4;
397
+ }
398
+
399
+ .apircoket-checkout-legal a {
400
+ text-decoration: underline;
456
401
  color: #404040;
457
- margin-bottom: 8px;
458
402
  }
459
403
 
460
- .apirocket-modal-subtitle {
461
- font-size: 14px;
462
- font-weight: normal;
463
- line-height: 16px;
464
- color: #737373;
404
+ .apirocket-checkout-logo img {
405
+ display: block;
406
+ max-height: 80px;
465
407
  }
466
408
 
467
- .apirocket-modal-close {
468
- position: absolute;
469
- right: -16px;
470
- top: -16px;
409
+ .apirocket-checkout-mobile { display: none; }
410
+
411
+ .apirocket-checkout-mobile .apirocket-checkout-logo {
412
+ display: block;
413
+ margin-top: 16px;
414
+ margin-bottom: 16px;
415
+ }
416
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
417
+ display: block;
418
+ margin: auto;
419
+ max-height: 80px;
471
420
  }
472
421
 
473
- .apirocket-modal-close-icon {
474
- height: var(--cart-header-text-close-icon-size, 24px);
475
- width: var(--cart-header-text-close-icon-size, 24px);
476
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
477
- cursor: pointer;
422
+ .apirocket-checkout-mobile-menu {
423
+ background-color: #f5f5f5;
424
+ border-top: 1px solid #d9d9d9;
478
425
  }
479
426
 
480
- .apirocket-modal-body-text-password {
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;
436
+ }
437
+
438
+ .apirocket-checkout-mobile-wrapper-cart {
439
+ display: inline-flex;
440
+ align-items: center;
481
441
  color: #404040;
482
- font-size: 14px;
483
- font-weight: normal;
484
- line-height: 16px;
485
- margin-top: -8px;text-align: right;
486
442
  cursor: pointer;
487
443
  }
488
444
 
489
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
445
+ .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
490
446
 
491
- .apirocket-modal-footer-text {
492
- color: #a3a3a3;
493
- font-size: 14px;
494
- font-weight: normal;
495
- line-height: 16px;
496
- text-align: center;
497
- margin-top: 16px;
447
+ .apirocket-checkout-mobile-wrapper-total {
448
+ line-height: 20px;
449
+ font-size: 20px;
450
+ font-weight: bold;
498
451
  }
499
452
 
500
- .apirocket-modal-footer-text span {
501
- color: #404040;
502
- cursor: pointer;
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;
459
+ overflow: hidden;
460
+ border-bottom: 1px solid #d9d9d9;
503
461
  }
504
462
 
505
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
463
+ .apirocket-checkout-mobile-summary--show {
464
+ max-height: 1000px;
465
+ overflow: auto;
466
+ }
506
467
 
468
+ .apirocket-checkout-mobile-summary-wrapper {
469
+ width: 90%;
470
+ max-width: 560px;
471
+ padding: 16px 0px;
472
+ margin: 0 auto;
473
+ }
507
474
 
508
- .apirocket-modal-body {}
509
475
 
510
- .apirocket-modal-footer {
511
- padding-top: 32px;
512
- }
513
476
 
514
- .apirocket-modal-row {
477
+ /* Utils */
478
+
479
+ .apirocket-checkout-row {
515
480
  display: flex;
516
481
  justify-content: space-between;
517
482
  align-items: flex-start;
518
483
  }
519
-
520
- .apirocket-modal-row > * {
484
+ .apirocket-checkout-row > * {
521
485
  flex: 1 1;
522
486
  margin-right: 16px;
523
487
  }
524
488
 
525
- .apirocket-modal-row > *:last-child { margin-right: 0; }
526
-
527
-
528
- @media (max-width: 720px) {
529
- .apirocket-modal-row { display: block; }
530
- .apirocket-modal-row > * { margin-right: 0; }
531
-
532
- .apirocket-modal-nav { display: none; }
533
-
534
- .apirocket-modal-content {
535
- width: 95%;
536
- margin-top: 32px;
537
- padding: 24px;
538
- }
539
-
540
- .apirocket-modal-close {
541
- right: -8px;
542
- top: -8px;
543
- }
544
- }.apirocket-checkout * { box-sizing: content-box; }
489
+ .apirocket-checkout-row > *:last-child { margin-right: 0; }
545
490
 
546
- .apirocket-checkout {
547
- display: block;
548
- position: fixed;
549
- z-index: 10000;
550
- right: 0;
551
- top: 0;
491
+ .apirocket-checkout-fieldset {
492
+ border: 1px solid #d9d9d9;
493
+ border-radius: 4px;
552
494
  overflow: hidden;
553
- overflow-y: auto;
554
- width: 100%;
555
- height: 100vh;
556
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
557
- background-color: #fff;
558
495
  }
559
496
 
560
- .apirocket-checkout-wrap {
561
- display: flex;
562
- margin: 0 auto;
563
- width: 90%;
564
- min-height: 100%;
565
- max-width: 1100px;
566
- padding: 0 5%;
497
+ .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
567
498
 
568
- }
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; }
569
504
 
570
- .apirocket-checkout-main {
571
- order: 1;
572
- width: 52%;
573
- padding-right: 48px;
505
+ .apirocket-checkout-fieldset > * {
506
+ padding: 16px;
507
+ border-bottom: 1px solid #d9d9d9;
574
508
  }
575
-
576
- .apirocket-checkout-summary {
577
- order: 2;
578
- position: relative;
579
- width: 40%;
580
- padding-left: 48px;
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 {
517
+ flex: 0 0 auto;
518
+ margin-right: 0px;
519
+ font-size: 16px;
520
+ font-weight: bold;
521
+ line-height: 20px;
522
+ color: #404040;
581
523
  }
582
524
 
583
- .apirocket-checkout-summary::after {
584
- position: absolute;
525
+ .apirocket-checkout-fieldset-row > :last-child img {
585
526
  display: block;
527
+ max-height: 24px;
528
+ }
529
+
530
+ .apirocket-checkout-fieldset-row-wrapper {
531
+ background-color: #f5f5f5;
532
+ }
533
+
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; }
575
+ }
576
+
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
+
680
+ }
681
+
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;
586
694
  top: 0;
587
- left: 0;
588
- content: "";
589
- width: 300%;
590
- height: 100%;
591
- background: #f5f5f5;
592
- z-index: -1;
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;
593
701
  }
594
702
 
595
- .apirocket-checkout-continue {
703
+ .apirocket-modal-nav {
704
+ position: absolute;
705
+ display: flex;
706
+ align-items: center;
707
+ width: 90%;
708
+ max-width: 1100px;
709
+ height: 96px;
710
+ }
711
+
712
+ .apirocket-modal-nav-button {
596
713
  display: flex;
597
714
  align-items: center;
598
715
  text-align: left;
599
- margin-top: 40px;
600
- margin-bottom: 40px;
601
716
  color: #737373;
602
717
  font-size: 16px;
603
718
  font-weight: normal;
604
- cursor: pointer;
719
+ cursor: pointer;
605
720
  }
606
721
 
607
- .apirocket-checkout-close {
608
- display: none;
609
- cursor: pointer;
610
- position: absolute;
611
- top: 16px;
612
- right: 32px;
613
- }
722
+ .apirocket-modal-nav-button svg { margin-right: 16px; }
614
723
 
615
- .apirocket-checkout-summary-container {
724
+ .apirocket-modal-content {
616
725
  display: flex;
617
726
  flex-flow: column;
618
- max-height: calc(100vh - 5%);
619
- overflow: hidden;
727
+ width: 480px;
728
+ height: auto;
729
+ padding: 32px;
730
+ background-color: #fff;
731
+ margin-top: 96px;
732
+ margin-bottom: 32px;
620
733
  }
621
734
 
622
- .apirocket-checkout-summary-top {
623
- flex: 0 0 auto;
735
+ .apirocket-modal-header {
736
+ position: relative;
737
+ padding-bottom: 32px;
624
738
  }
625
739
 
626
- .apirocket-checkout-summary-content {
627
- flex: 1 1 auto;
628
- overflow-y: scroll;
740
+ .apirocket-modal-title {
741
+ font-size: 18px;
742
+ font-weight: bold;
743
+ line-height: 1;
744
+ color: #404040;
745
+ margin-bottom: 8px;
629
746
  }
630
747
 
631
- .apirocket-checkout-summary-footer {
632
- flex: 0 0 auto;
748
+ .apirocket-modal-subtitle {
749
+ font-size: 14px;
750
+ font-weight: normal;
751
+ line-height: 16px;
752
+ color: #737373;
633
753
  }
634
754
 
635
- .apirocket-checkout-summary-login {
636
- display: flex;
637
- align-items: center;
638
- justify-content: end;
639
- text-align: right;
640
- margin-top: 40px;
641
- margin-bottom: 40px;
642
- color: #737373;
643
- font-size: 16px;
755
+ .apirocket-modal-close {
756
+ position: absolute;
757
+ right: -16px;
758
+ top: -16px;
759
+ }
760
+
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;
766
+ }
767
+
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;
774
+ cursor: pointer;
775
+ }
776
+
777
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
778
+
779
+ .apirocket-modal-footer-text {
780
+ color: #a3a3a3;
781
+ font-size: 14px;
644
782
  font-weight: normal;
783
+ line-height: 16px;
784
+ text-align: center;
785
+ margin-top: 16px;
786
+ }
787
+
788
+ .apirocket-modal-footer-text span {
789
+ color: #404040;
645
790
  cursor: pointer;
646
791
  }
647
792
 
648
- .apirocket-checkout-summary-login svg,
649
- .apirocket-checkout-continue svg { margin-right: 16px; }
793
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
794
+
795
+
796
+ .apirocket-modal-body {}
797
+
798
+ .apirocket-modal-footer {
799
+ padding-top: 32px;
800
+ }
801
+
802
+ .apirocket-modal-row {
803
+ display: flex;
804
+ justify-content: space-between;
805
+ align-items: flex-start;
806
+ }
807
+
808
+ .apirocket-modal-row > * {
809
+ flex: 1 1;
810
+ margin-right: 16px;
811
+ }
812
+
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 {}
650
833
 
651
- .apirocket-checkout-summary-header {
652
- display: flex;
653
- justify-content: space-between;
654
- align-items: center;
834
+ .apirocket-summary-top {
655
835
  margin-top: 56px;
656
- margin-bottom: 48px;
657
- }
658
-
659
- .apirocket-checkout-summary-header :last-child a {
660
- font-size: 14px;
661
- font-weight: normal;
662
- color: #737373;
836
+ margin-bottom: 32px;
663
837
  }
664
838
 
665
- .apirocket-checkout-summary-item {
839
+ .apirocket-summary-header {
666
840
  display: flex;
667
- justify-content: stretch;
668
- align-items: flex-start;
669
- padding-bottom: 16px;
670
- border-bottom: 1px solid #d9d9d9;
671
- margin-bottom: 16px;
841
+ justify-content: flex-start;
842
+ align-items: center;
843
+ margin-bottom: 32px;
672
844
  }
673
845
 
674
- .apirocket-checkout-summary-item-col-image {
675
- flex: 0 0 auto;
676
- max-width: 100px;
677
- border: 1px solid #e5e5e5;
678
- border-radius: 4px;
679
- overflow: hidden;
846
+ .apirocket-summary-header-icon {
847
+ flex: 0 1;
848
+ margin-right: 16px;
680
849
  }
681
850
 
682
- .apirocket-checkout-summary-item-col-image img {
683
- display: block;
684
- max-width: 100%;
685
- max-height: 100px;
686
- }
851
+ .apirocket-summary-header-content {}
687
852
 
688
- .apirocket-checkout-summary-item-col-description {
689
- flex: 1 1 auto;
690
- padding-left: 16px;
691
- padding-right: 8px;
692
- font-size: 14px;
853
+ .apirocket-summary-header-title {
854
+ font-size: 24px;
693
855
  font-weight: bold;
694
- line-height: 18px;
856
+ line-height: 1.2;
857
+ color: #404040;
858
+ margin-bottom: 4px;
695
859
  }
696
860
 
697
- .apirocket-checkout-summary-item-col-description small {
698
- display: block;
699
- font-size: 14px;
861
+ .apirocket-summary-header-subtitle {
862
+ font-size: 18px;
700
863
  font-weight: normal;
701
- color: #a3a3a3;
864
+ line-height: 1.2;
865
+ color: #737373;
702
866
  }
703
867
 
704
- .apirocket-checkout-summary-item-col-quantity {
705
- flex: 0 0 50px;
706
- font-size: 16px;
707
- font-weight: normal;
708
- color: #a3a3a3;
709
- text-align: right;
868
+ .apirocket-summary-section {
869
+ margin-top: 16px;
870
+ border: 1px solid #d9d9d9;
871
+ border-radius: 4px;
872
+ padding: 24px;
710
873
  }
711
874
 
712
- .apirocket-checkout-summary-item-col-price {
713
- flex: 0 0 100px;
714
- font-size: 16px;
715
- font-weight: bold;
716
- color: #404040;
717
- text-align: right;
718
- }
875
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
876
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
719
877
 
720
- .apirocket-checkout-summary-row {
721
- display: flex;
722
- justify-content: space-between;
723
- align-items: center;
724
- padding-top: 16px;
878
+ .apirocket-summary-section-title {
879
+ font-size: 18px;
880
+ font-weight: bold;
881
+ line-height: 1.2;
882
+ color: #404040;
883
+ margin-bottom: 24px;
725
884
  }
726
885
 
727
- .apirocket-checkout-summary-label {
886
+ .apirocket-summary-section-subtitle {
728
887
  font-size: 16px;
729
- font-weight: normal;
730
- line-height: 18px;
888
+ font-weight: bold;
889
+ line-height: 1;
731
890
  color: #404040;
891
+ margin-bottom: 16px;
732
892
  }
733
893
 
734
- .apirocket-checkout-summary-value {
735
- font-size: 18px;
736
- font-weight: bold;
894
+ .apirocket-summary-section-text {
895
+ font-size: 14px;
896
+ font-weight: normal;
737
897
  line-height: 18px;
738
- color: #404040;
898
+ color: #404040;
739
899
  }
740
900
 
741
- .apirocket-checkout-summary-row-total {
901
+ .apirocket-summary-help {
742
902
  display: flex;
743
- justify-content: space-between;
744
- align-items: flex-start;
745
- border-top: 1px solid #d9d9d9;
746
- margin-top: 24px;
747
- padding-top: 24px;
903
+ justify-content: flex-start;
904
+ align-items: center;
748
905
  }
749
906
 
750
- .apirocket-checkout-summary-label-total {
751
- font-size: 18px;
752
- font-weight: bold;
753
- line-height: 21px;
754
- color: #404040;
907
+ .apirocket-summary-help-icon {
908
+ flex: 0 1;
909
+ padding-right: 12px;
755
910
  }
756
- .apirocket-checkout-summary-label-total small {
757
- display: block;
911
+
912
+ .apirocket-summary-help-content {
758
913
  font-size: 14px;
759
- line-height: 16px;
760
914
  font-weight: normal;
761
- color: #a3a3a3;
915
+ line-height: 1.2;
916
+ color: #404040;
762
917
  }
763
918
 
764
- .apirocket-checkout-summary-value-total {
765
- font-size: 24px;
766
- font-weight: bold;
767
- line-height: 24px;
768
- color: #404040;
919
+ .apirocket-summary-help-content a {
920
+ display: block;
921
+ color: #737373;
769
922
  }
770
923
 
771
- .apirocket-checkout-breadcrumbs ol {
772
- display: flex;
773
- align-items: center;
774
- list-style: none;
775
- padding: 0;
776
- margin: 0;
777
- margin-top: 24px;
924
+ @media (max-width: 1000px) {
925
+ .apirocket-summary-top { display: none; }
926
+ .apirocket-summary-header { margin-top: 32px; }
778
927
  }
779
928
 
780
- .apirocket-checkout-breadcrumbs ol li {
781
- cursor: pointer;
782
- color: #a3a3a3;
783
- font-size: 14px;
784
- line-height: 1;
785
- }
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;
786
949
 
787
- .apirocket-checkout-breadcrumbs ol li::after {
788
- width: 5px;
789
- height: 9px;
790
- display: inline-block;
791
- content: "";
792
- 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");
793
- background-repeat: no-repeat;
794
- background-position: center;
795
- padding: 0 8px;
796
- }
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;
797
958
 
798
- .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
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;
799
968
 
800
- .apirocket-checkout-breadcrumbs ol li a {
801
- color: #a3a3a3;
802
- text-decoration: underline;
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); */
803
1019
  }
804
1020
 
805
- .apirocket-checkout-breadcrumbs-active {
806
- font-weight: bold;
807
- color: #404040 !important;
808
- }
1021
+ .apirocket-cart * { box-sizing: content-box; }
809
1022
 
810
- .apirocket-checkout-steps-summary {
811
- border: 1px solid #d9d9d9;
812
- border-radius: 4px;
1023
+ .apirocket-cart {
1024
+ position: fixed;
1025
+ z-index: 10000;
1026
+ right: 0;
1027
+ top: 0;
813
1028
  overflow: hidden;
814
- margin-top: 48px;
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);
815
1034
  }
816
1035
 
817
- .apirocket-checkout-steps-summary-row {
1036
+ .apirocket-cart-content {
818
1037
  display: flex;
819
- position: relative;
820
- border-bottom: 1px solid #d9d9d9;
821
- padding: 16px;
1038
+ flex-direction: column;
1039
+ height: 100%;
1040
+ background-color: var(--cart-background-color, #fff);
822
1041
  }
823
1042
 
824
- .apirocket-checkout-steps-summary-label {
825
- flex: 0 0 90px;
826
- font-size: 14px;
827
- font-weight: normal;
828
- line-height: 14px;
829
- color: #a3a3a3;
1043
+ .apirocket-cart-header {
1044
+ display: flex;
1045
+ flex: 0 0 96px;
1046
+ align-items: center;
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);
830
1051
  }
831
1052
 
832
- .apirocket-checkout-steps-summary-text {
833
- flex: 1 1 auto;
834
- font-size: 14px;
835
- font-weight: normal;
836
- line-height: 18px;
837
- color: #404040;
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)
838
1057
  }
839
1058
 
840
- .apirocket-checkout-steps-summary-link {
841
- flex: 0 0 60px;
842
- text-align: right;
843
- font-size: 12px;
844
- font-weight: normal;
845
- line-height: 1;
846
- text-decoration: underline;
847
- color: #737373;
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);
848
1063
  cursor: pointer;
849
1064
  }
850
1065
 
851
- .apirocket-checkout-section {
852
- margin-top: 48px;
853
- }
854
-
855
- .apirocket-checkout-section-header {
856
- margin-bottom: 24px;
857
- }
858
-
859
- .apirocket-checkout-section-title {
860
- font-size: 18px;
861
- font-weight: bold;
862
- line-height: 1;
863
- color: #404040;
864
- }
865
-
866
- .apirocket-checkout-section-subtitle {
867
- font-size: 12px;
1066
+ .apirocket-cart-header-continue {
1067
+ display: none;
1068
+ align-items: center;
1069
+ text-align: left;
1070
+ color: #737373;
1071
+ font-size: 16px;
868
1072
  font-weight: normal;
869
- padding-top: 4px;
870
- line-height: 1;
871
- color: #a3a3a3;
872
- text-align: right;
1073
+ cursor: pointer;
873
1074
  }
874
1075
 
875
- .apirocket-checkout-button-edit {
1076
+ .apirocket-cart-header-login {
1077
+ display: none;
1078
+ align-items: center;
1079
+ text-align: right;
1080
+ color: #737373;
1081
+ font-size: 16px;
1082
+ font-weight: normal;
876
1083
  cursor: pointer;
877
1084
  }
878
1085
 
879
- .apirocket-checkout-button-edit:hover {
880
- text-decoration: underline;
881
- }
1086
+ .apirocket-cart-header-login svg,
1087
+ .apirocket-cart-header-continue svg { margin-right: 16px; }
882
1088
 
883
- .apirocket-checkout-section a {
884
- color: #404040;
885
- outline: none;
886
- text-decoration: underline;
1089
+ .apirocket-cart-body {
1090
+ flex: 1 1 auto;
1091
+ padding: 0px;
1092
+ background: var(--cart-background-color, #fff);
1093
+ overflow-y: auto;
887
1094
  }
888
1095
 
889
- .apirocket-checkout-section-text {
890
- font-size: 14px;
891
- line-height: 1;
892
- margin-top: 4px;
893
- color: #737373;
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);
894
1102
  }
895
1103
 
896
- .apirocket-checkout-actions {
897
- display: flex;
898
- margin-top: 64px;
899
- align-items: center;
900
- max-width: 100%;
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);
901
1112
  }
902
1113
 
903
- .apirocket-checkout-actions > * { flex: 1 1; }
904
-
905
- .apirocket-checkout-footer {
906
- margin-top: 72px;
907
- border-top: 1px solid #d9d9d9;
908
- margin-bottom: 64px;
909
- padding-top: 16px;
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);
910
1118
  }
911
1119
 
912
- .apirocket-checkout-footer ul {
1120
+ .apirocket-cart-row {
913
1121
  display: flex;
1122
+ justify-content: space-between;
914
1123
  align-items: center;
915
- list-style: none;
916
- padding: 0;
917
- margin: 0;
918
1124
  }
919
1125
 
920
- .apirocket-checkout-footer ul li { margin-right: 16px; }
921
-
922
- .apirocket-checkout-footer ul li a {
923
- color: #404040;
924
- font-size: 14px;
925
- line-height: 1;
926
- text-decoration: none;
1126
+ .apirocket-cart-col {
1127
+ flex: 1 1 auto;
1128
+ margin-bottom: 16px;
927
1129
  }
928
1130
 
929
- .apirocket-checkout-footer ul li a:focus {
930
- outline: none;
931
- text-decoration: underline;
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);
932
1134
  }
933
1135
 
934
- .apircoket-checkout-legal {
935
- margin-top: 16px;
936
- font-size: 14px;
937
- color: #737373;
938
- font-weight: normal;
939
- line-height: 1.4;
1136
+ .apirocket-cart-item:last-child {
1137
+ border-bottom: none;
1138
+ margin-bottom: var(--cart-padding, 32px);
940
1139
  }
941
1140
 
942
- .apircoket-checkout-legal a {
943
- text-decoration: underline;
944
- color: #404040;
1141
+ .apirocket-cart-item-row {
1142
+ display: flex;
1143
+ justify-content: space-between;
1144
+ align-items: center;
945
1145
  }
946
1146
 
947
- .apirocket-checkout-logo img {
948
- display: block;
949
- max-height: 80px;
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;
950
1152
  }
951
1153
 
952
- .apirocket-checkout-mobile { display: none; }
953
-
954
- .apirocket-checkout-mobile .apirocket-checkout-logo {
955
- display: block;
956
- margin-top: 16px;
957
- margin-bottom: 16px;
958
- }
959
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1154
+ .apirocket-cart-item-col-image img {
960
1155
  display: block;
961
- margin: auto;
962
- max-height: 80px;
963
- }
964
-
965
- .apirocket-checkout-mobile-menu {
966
- background-color: #f5f5f5;
967
- border-top: 1px solid #d9d9d9;
968
- }
969
-
970
- .apirocket-checkout-mobile-wrapper {
971
- display: flex;
972
- justify-content: space-between;
973
- align-items: center;
974
- width: 90%;
975
- max-width: 560px;
976
- margin: 0 auto;
977
- padding: 16px 0px;
978
- color: #404040;
1156
+ max-width: 100%;
979
1157
  }
980
1158
 
981
- .apirocket-checkout-mobile-wrapper-cart {
982
- display: inline-flex;
983
- align-items: center;
984
- color: #404040;
985
- cursor: pointer;
1159
+ .apirocket-cart-item-col-description {
1160
+ align-self: flex-start;
1161
+ padding-right: 32px;
1162
+ flex-grow: 1;
986
1163
  }
987
1164
 
988
- .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
989
-
990
- .apirocket-checkout-mobile-wrapper-total {
991
- line-height: 20px;
992
- font-size: 20px;
993
- font-weight: bold;
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);
994
1169
  }
995
1170
 
996
- .apirocket-checkout-mobile-summary {
997
- background-color: #f5f5f5;
998
- transition-property: max-height;
999
- transition-timing-function: ease-in;
1000
- transition-duration: 350ms;
1001
- max-height: 0px;
1002
- overflow: hidden;
1003
- border-bottom: 1px solid #d9d9d9;
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);
1004
1175
  }
1005
1176
 
1006
- .apirocket-checkout-mobile-summary--show {
1007
- max-height: 1000px;
1008
- overflow: 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;
1009
1184
  }
1010
1185
 
1011
- .apirocket-checkout-mobile-summary-wrapper {
1012
- width: 90%;
1013
- max-width: 560px;
1014
- padding: 16px 0px;
1015
- margin: 0 auto;
1186
+ .apirocket-cart-item-col-delete:hover {
1187
+ color: var(--cart-item-delete-icon-color-hover, #000);
1016
1188
  }
1017
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
+ }
1018
1194
 
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
+ }
1019
1201
 
1020
- /* Utils */
1202
+ .apirocket-cart-item-col-quantity {
1203
+ margin-top: 16px;
1204
+ }
1021
1205
 
1022
- .apirocket-checkout-row {
1206
+ .apirocket-cart-item-quantity-wrapper {
1023
1207
  display: flex;
1024
1208
  justify-content: space-between;
1025
- align-items: flex-start;
1026
- }
1027
- .apirocket-checkout-row > * {
1028
- flex: 1 1;
1029
- 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;
1030
1215
  }
1031
1216
 
1032
- .apirocket-checkout-row > *:last-child { margin-right: 0; }
1033
-
1034
- .apirocket-checkout-fieldset {
1035
- border: 1px solid #d9d9d9;
1036
- border-radius: 4px;
1037
- overflow: hidden;
1217
+ .apirocket-cart-item-quantity-wrapper:hover {
1218
+ border-color: var(--cart-item-form-border-color-hover, #000);
1038
1219
  }
1039
1220
 
1040
- .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
1041
-
1042
- .apirocket-checkout-fieldset .apirocket-form-input,
1043
- .apirocket-checkout-fieldset .apirocket-form-select,
1044
- .apirocket-checkout-fieldset .apirocket-form-checkbox,
1045
- .apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
1046
- .apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
1047
-
1048
- .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);
1049
1226
  padding: 16px;
1050
- border-bottom: 1px solid #d9d9d9;
1227
+ line-height: 1;
1228
+ text-align: center;
1051
1229
  }
1052
- .apirocket-checkout-fieldset-row {
1230
+
1231
+ .apirocket-cart-item-quantity-button {
1053
1232
  display: flex;
1054
- justify-content: space-between;
1055
- align-items: flex-start;
1056
- }
1057
- .apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
1058
- .apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
1059
- .apirocket-checkout-fieldset-row > :last-child {
1060
- flex: 0 0 auto;
1061
- margin-right: 0px;
1062
- font-size: 16px;
1063
- font-weight: bold;
1064
- line-height: 20px;
1065
- color: #404040;
1233
+ align-items: center;
1234
+ background-color: var(--cart-item-quantity-icon-background-color, transparent);
1235
+ padding: 0px 12px;
1236
+ cursor: pointer;
1066
1237
  }
1067
1238
 
1068
- .apirocket-checkout-fieldset-row > :last-child img {
1069
- display: block;
1070
- 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);
1071
1243
  }
1072
1244
 
1073
- .apirocket-checkout-fieldset-row-wrapper {
1074
- 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);
1075
1250
  }
1076
1251
 
1077
- .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
1078
- .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
1079
-
1080
- /* Responsive */
1081
1252
 
1082
- @media (max-width: 1000px) {
1253
+ @media (min-width: 720px) {
1083
1254
 
1084
- .apirocket-checkout-mobile { display: block; }
1085
-
1086
- .apirocket-checkout-wrap {
1087
- flex-flow: column;
1088
- margin: 0;
1089
- padding: 0;
1255
+ .apirocket-cart.apirocket-cart-full-screen {
1090
1256
  width: 100%;
1091
- }
1092
-
1093
- .apirocket-checkout-main,
1094
- .apirocket-checkout-summary {
1095
- width: 90%;
1096
- max-width: 560px;
1097
- margin: 0 auto;
1098
- padding: 0;
1099
- }
1100
-
1101
- .apirocket-checkout-summary {
1102
- /* order: 0;
1103
- padding: 16px 0; */
1104
- display: none;
1105
- }
1106
- .apirocket-checkout-summary::after { display: none; }
1107
-
1108
- .apirocket-checkout-summary-header,
1109
- .apirocket-checkout-summary-login { display: none; }
1110
-
1111
- .apirocket-checkout-continue { display: none; }
1112
- .apirocket-checkout-close { display: block; }
1113
-
1114
- .apirocket-checkout-breadcrumbs { text-align: center; }
1115
- .apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
1116
-
1117
- .apirocket-checkout-logo { display: none; }
1118
- }
1119
-
1120
-
1121
- @media (max-width: 720px) {
1122
-
1123
- .apirocket-checkout-row { display: block; }
1124
- .apirocket-checkout-row > * { margin-right: 0; }
1125
-
1126
- .apirocket-checkout-actions > :first-child { order: 2; }
1127
- .apirocket-checkout-actions > :last-child { margin-bottom: 32px; }
1128
- .apirocket-checkout-actions {
1129
- flex-flow: column;
1130
- align-items: stretch;
1131
- }
1132
-
1133
- .apirocket-checkout-fieldset-row > :last-child img { max-height: 16px; }
1134
-
1135
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row > * { margin-bottom: 16px !important; }
1136
- .apirocket-checkout-fieldset-row-wrapper .apirocket-checkout-row:last-child > *:last-child { margin-bottom: 0px !important; }
1137
-
1138
- .apirocket-checkout-section-subtitle {
1139
- padding-top: 16px;
1140
- margin-bottom: -16px;
1257
+ overflow-y: auto;
1141
1258
  }
1142
1259
 
1143
- .apirocket-checkout-footer ul {
1260
+ .apirocket-cart-full-screen .apirocket-cart-content {
1144
1261
  display: block;
1145
- text-align: center !important;
1146
- line-height: 32px !important;
1147
- }
1148
-
1149
- .apirocket-checkout-footer ul li {
1150
- display: inline-block;
1151
- }
1152
-
1153
- .apircoket-checkout-legal { text-align: center; }
1154
-
1155
- .apirocket-checkout-summary-item-col-image {
1156
- flex: 0 0 auto;
1157
- max-width: 80px;
1158
- }
1159
-
1160
- .apirocket-checkout-summary-item-col-image img {
1161
- max-height: 80px;
1162
- }
1163
-
1164
- .apirocket-checkout-summary-item-col-description {
1165
- flex: 1 1;
1166
- padding-left: 8px;
1167
- font-size: 14px;
1168
- line-height: 16px;
1169
- }
1170
-
1171
- .apirocket-checkout-summary-item-col-description small { font-size: 12px; }
1172
-
1173
- .apirocket-checkout-summary-item-col-quantity {
1174
- flex: 0 0 25px;
1175
- font-size: 12px;
1176
- }
1177
-
1178
- .apirocket-checkout-summary-item-col-price {
1179
- flex: 0 0 80px;
1180
- font-size: 14px;
1181
- }
1182
-
1183
- .apirocket-checkout-summary-label-total {
1184
- font-size: 16px;
1185
- line-height: 18px;
1186
- }
1187
- .apirocket-checkout-summary-label-total small {
1188
- font-size: 12px;
1189
- line-height: 14px;
1190
- }
1191
-
1192
- .apirocket-checkout-summary-row {
1193
- padding-top: 8px;
1194
- }
1195
-
1196
- .apirocket-checkout-summary-label {
1197
- font-size: 14px;
1198
- line-height: 14px;
1262
+ width: 90%;
1263
+ max-width: 980px;
1264
+ margin: 0 auto;
1199
1265
  }
1200
1266
 
1201
- .apirocket-checkout-summary-value,
1202
- .apirocket-checkout-summary-value-total {
1203
- font-size: 16px;
1204
- line-height: 16px;
1205
- }
1206
-
1207
- .apirocket-checkout-mobile .apirocket-checkout-logo img {
1208
- max-height: 55px;
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;
1209
1271
  }
1210
1272
 
1211
- .apirocket-checkout-steps-summary { margin-top: 24px; }
1212
-
1213
- .apirocket-checkout-steps-summary-row { position: relative; }
1214
-
1215
- .apirocket-checkout-steps-summary-label {
1216
- position: absolute;
1217
- font-size: 14px;
1218
- }
1273
+ .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
1274
+ .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
1219
1275
 
1220
- .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1221
- .apirocket-checkout-steps-summary-link { font-size: 12px; }
1222
-
1223
- }
1276
+ .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
1224
1277
 
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;
1286
+ }
1225
1287
 
1288
+ .apirocket-cart-full-screen .apirocket-cart-item {
1289
+ display: flex;
1290
+ position: relative;
1291
+ padding-left: 0;
1292
+ padding-right: 0;
1293
+ }
1226
1294
 
1227
- .apirocket-button,
1228
- button.apirocket-button {
1229
- box-sizing: border-box !important;
1230
- display: block;
1231
- width: 100%;
1232
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1233
- margin: 0px;
1234
- border-radius: var(--cart-button-border-radius, 4px);
1235
- background-color: var(--cart-button-background-color, transparent);
1236
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
1237
- color: var(--cart-button-font-color, #737373);
1238
- line-height: 1;
1239
- font-size: var(--cart-button-font-size, 16px);
1240
- font-weight: var(--cart-button-font-weight, normal);
1241
- text-align: center;
1242
- transition-property: color, border-color, background-color, box-shadow;
1243
- transition-timing-function: ease;
1244
- transition-duration: 350ms;
1245
- cursor: pointer;
1246
- }
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%; }
1247
1297
 
1248
- .apirocket-button:hover {
1249
- background-color: var(--cart-button-background-color-hover, transparent);
1250
- border-color: var(--cart-button-border-color-hover, #404040);
1251
- color: var(--cart-button-font-color-hover, #404040);
1252
- }
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
+ }
1253
1301
 
1254
- .apirocket-button:focus {
1255
- outline: none;
1256
- text-decoration: underline;
1257
- }
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;
1306
+ }
1258
1307
 
1259
- .apirocket-button-link,
1260
- button.apirocket-button-link {
1261
- display: flex;
1262
- align-items: center;
1263
- text-align: left;
1264
- justify-content: flex-start;
1265
- align-items: center;
1266
- border: none;
1267
- padding-left: 0;
1268
- padding-right: 0;
1269
- width: auto;
1270
- overflow: hidden;
1271
- white-space: nowrap;
1272
- text-overflow: ellipsis;
1273
- }
1308
+ .apirocket-cart-full-screen .apirocket-cart-item-col-image {
1309
+ flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
1310
+ }
1274
1311
 
1275
- .apirocket-button-link span {
1276
- margin-left: 16px;
1277
- margin-right: 16px;
1278
- }
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; }
1279
1314
 
1280
- .apirocket-button-primary,
1281
- button.apirocket-button-primary {
1282
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
1283
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
1284
- color: var(--cart-button-primary-text-color, #fff);
1315
+ .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
1316
+ position: absolute;
1317
+ right: 0px;
1318
+ top: var(--cart-item-padding, 32px);
1319
+ }
1285
1320
  }
1286
1321
 
1287
- button.apirocket-button-primary:disabled {
1288
- background-color: #eee;
1289
- border-color: #eee;
1290
- color: #ccc;
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%; }
1291
1325
  }
1292
1326
 
1293
- .apirocket-button-primary:hover {
1294
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1295
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1296
- color: var(--cart-button-primary-text-color-hover, #fff);
1297
- box-shadow: var(--cart-shadow-button-primary-hover, none);
1298
- }
1327
+ /* Mobile version */
1299
1328
 
1300
1329
  @media (max-width: 720px) {
1301
1330
 
1302
- .apirocket-button-link {
1331
+ .apirocket-cart {
1303
1332
  width: 100%;
1304
- justify-content: center;
1333
+ box-shadow: none;
1305
1334
  }
1306
1335
 
1336
+ .apirocket-cart-header-continue { display: none; }
1337
+ .apirocket-cart-header-login { display: none; }
1307
1338
  }.apirocket-form-input {
1308
1339
  display: block;
1309
1340
  position: relative;
@@ -1673,116 +1704,85 @@ button.apirocket-button-primary:disabled {
1673
1704
  .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
1674
1705
  .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
1675
1706
 
1676
- .apirocket-summary {}
1677
-
1678
- .apirocket-summary-top {
1679
- margin-top: 56px;
1680
- margin-bottom: 32px;
1681
- }
1682
-
1683
- .apirocket-summary-header {
1684
- display: flex;
1685
- justify-content: flex-start;
1686
- align-items: center;
1687
- margin-bottom: 32px;
1688
- }
1689
-
1690
- .apirocket-summary-header-icon {
1691
- flex: 0 1;
1692
- margin-right: 16px;
1693
- }
1694
-
1695
- .apirocket-summary-header-content {}
1696
-
1697
- .apirocket-summary-header-title {
1698
- font-size: 24px;
1699
- font-weight: bold;
1700
- line-height: 1.2;
1701
- color: #404040;
1702
- margin-bottom: 4px;
1703
- }
1704
-
1705
- .apirocket-summary-header-subtitle {
1706
- font-size: 18px;
1707
- font-weight: normal;
1708
- line-height: 1.2;
1709
- color: #737373;
1710
- }
1711
-
1712
- .apirocket-summary-section {
1713
- margin-top: 16px;
1714
- border: 1px solid #d9d9d9;
1715
- border-radius: 4px;
1716
- padding: 24px;
1717
- }
1718
-
1719
- .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
1720
- .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
1721
1707
 
1722
- .apirocket-summary-section-title {
1723
- font-size: 18px;
1724
- font-weight: bold;
1725
- line-height: 1.2;
1726
- color: #404040;
1727
- margin-bottom: 24px;
1708
+ .apirocket-button,
1709
+ button.apirocket-button {
1710
+ box-sizing: border-box !important;
1711
+ display: block;
1712
+ width: 100%;
1713
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1714
+ margin: 0px;
1715
+ border-radius: var(--cart-button-border-radius, 4px);
1716
+ background-color: var(--cart-button-background-color, transparent);
1717
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
1718
+ color: var(--cart-button-font-color, #737373);
1719
+ line-height: 1;
1720
+ font-size: var(--cart-button-font-size, 16px);
1721
+ font-weight: var(--cart-button-font-weight, normal);
1722
+ text-align: center;
1723
+ transition-property: color, border-color, background-color, box-shadow;
1724
+ transition-timing-function: ease;
1725
+ transition-duration: 350ms;
1726
+ cursor: pointer;
1728
1727
  }
1729
1728
 
1730
- .apirocket-summary-section-subtitle {
1731
- font-size: 16px;
1732
- font-weight: bold;
1733
- line-height: 1;
1734
- color: #404040;
1735
- margin-bottom: 16px;
1729
+ .apirocket-button:hover {
1730
+ background-color: var(--cart-button-background-color-hover, transparent);
1731
+ border-color: var(--cart-button-border-color-hover, #404040);
1732
+ color: var(--cart-button-font-color-hover, #404040);
1736
1733
  }
1737
1734
 
1738
- .apirocket-summary-section-text {
1739
- font-size: 14px;
1740
- font-weight: normal;
1741
- line-height: 18px;
1742
- color: #404040;
1735
+ .apirocket-button:focus {
1736
+ outline: none;
1737
+ text-decoration: underline;
1743
1738
  }
1744
1739
 
1745
- .apirocket-summary-help {
1740
+ .apirocket-button-link,
1741
+ button.apirocket-button-link {
1746
1742
  display: flex;
1743
+ align-items: center;
1744
+ text-align: left;
1747
1745
  justify-content: flex-start;
1748
- align-items: center;
1746
+ align-items: center;
1747
+ border: none;
1748
+ padding-left: 0;
1749
+ padding-right: 0;
1750
+ width: auto;
1751
+ overflow: hidden;
1752
+ white-space: nowrap;
1753
+ text-overflow: ellipsis;
1749
1754
  }
1750
1755
 
1751
- .apirocket-summary-help-icon {
1752
- flex: 0 1;
1753
- padding-right: 12px;
1756
+ .apirocket-button-link span {
1757
+ margin-left: 16px;
1758
+ margin-right: 16px;
1754
1759
  }
1755
1760
 
1756
- .apirocket-summary-help-content {
1757
- font-size: 14px;
1758
- font-weight: normal;
1759
- line-height: 1.2;
1760
- color: #404040;
1761
+ .apirocket-button-primary,
1762
+ button.apirocket-button-primary {
1763
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
1764
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
1765
+ color: var(--cart-button-primary-text-color, #fff);
1761
1766
  }
1762
1767
 
1763
- .apirocket-summary-help-content a {
1764
- display: block;
1765
- color: #737373;
1768
+ button.apirocket-button-primary:disabled {
1769
+ background-color: #eee;
1770
+ border-color: #eee;
1771
+ color: #ccc;
1766
1772
  }
1767
1773
 
1768
- @media (max-width: 1000px) {
1769
- .apirocket-summary-top { display: none; }
1770
- .apirocket-summary-header { margin-top: 32px; }
1774
+ .apirocket-button-primary:hover {
1775
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1776
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1777
+ color: var(--cart-button-primary-text-color-hover, #fff);
1778
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
1771
1779
  }
1772
1780
 
1773
- @media (max-width: 720px) {
1774
- .apirocket-summary-section-subtitle { margin-top: 24px; }
1775
- .apirocket-summary-header {
1776
- flex-direction: column;
1777
- align-items: center;
1778
- text-align: center;
1779
- }
1780
- .apirocket-summary-header-icon {
1781
- margin-right: 0px;
1782
- margin-bottom: 16px;
1783
- }
1784
- .apirocket-summary-header-title {
1785
- font-size: 28px;
1786
- margin-bottom: 8px;
1781
+ @media (max-width: 720px) {
1782
+
1783
+ .apirocket-button-link {
1784
+ width: 100%;
1785
+ justify-content: center;
1787
1786
  }
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}}