apirocket 0.2.2 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/ecommerce.css +1009 -1009
  2. package/dist/ecommerce.js +2 -2
  3. package/dist/ecommerce.js.map +1 -1
  4. package/package.json +1 -1
package/dist/ecommerce.css CHANGED
@@ -1,1306 +1,1208 @@
1
- .apirocket-checkout * { box-sizing: content-box; }
1
+ :root {
2
+ --cart-width: 540px;
3
+ --cart-background-color: #fff;
4
+ --cart-padding: 32px;
5
+ --cart-font-family: Arial, Helvetica, sans-serif;
2
6
 
3
- .apirocket-checkout {
4
- display: block;
7
+ --cart-header-background-color: #f5f5f5;
8
+ --cart-header-border-color: #f5f5f5;
9
+ --cart-header-border-width: 1px;
10
+ --cart-header-text-font-size: 18px;
11
+ --cart-header-text-font-weight: normal;
12
+ --cart-header-text-font-color: #404040;
13
+ --cart-header-text-close-icon-color: #a3a3a3;
14
+ --cart-header-text-close-icon-size: 24px;
15
+
16
+ --cart-footer-background-color: #fff;
17
+ --cart-footer-border-color: #e5e5e5;
18
+ --cart-footer-border-width: 1px;
19
+ --cart-footer-text-font-size: 16px;
20
+ --cart-footer-text-font-weight: lighter;
21
+ --cart-footer-text-font-color: #404040;
22
+ --cart-footer-total-font-size: 18px;
23
+ --cart-footer-total-font-weight: bold;
24
+ --cart-footer-total-font-color: #000;
25
+
26
+ --cart-item-border-color: #e5e5e5;
27
+ --cart-item-border-width: 1px;
28
+ --cart-item-padding: 32px;
29
+ --cart-item-label-font-size: 14px;
30
+ --cart-item-label-font-weight: lighter;
31
+ --cart-item-label-font-color: #737373;
32
+ --cart-item-image-display: inherit;
33
+ --cart-item-image-width: 100px;
34
+ --cart-item-image-width-fullscreen: 150px;
35
+ --cart-item-name-font-size: 18px;
36
+ --cart-item-name-font-weight: bold;
37
+ --cart-item-name-font-color: #000;
38
+ --cart-item-description-font-size: 14px;
39
+ --cart-item-description-font-weight: lighter;
40
+ --cart-item-description-font-color: #000;
41
+ --cart-item-delete-icon-color: #404040;
42
+ --cart-item-delete-icon-color-hover: #000;
43
+ --cart-item-delete-icon-size: 18px;
44
+ --cart-item-form-border-color: #e5e5e5;
45
+ --cart-item-form-border-color-hover: #000;
46
+ --cart-item-form-border-width: 1px;
47
+ --cart-item-form-text-size: 14px;
48
+ --cart-item-form-text-weight: normal;
49
+ --cart-item-form-text-color: #000;
50
+ --cart-item-quantity-icon-color: #737373;
51
+ --cart-item-quantity-icon-background-color: transparent;
52
+ --cart-item-quantity-icon-size: 16px;
53
+ --cart-item-price-font-size: 16px;
54
+ --cart-item-price-font-weight: bold;
55
+ --cart-item-price-font-color: #404040;
56
+
57
+ --cart-button-font-size: 16px;
58
+ --cart-button-font-weight: normal;
59
+ --cart-button-font-color: #737373;
60
+ --cart-button-font-color-hover: #404040;
61
+ --cart-button-border-color: #e5e5e5;
62
+ --cart-button-border-color-hover: #404040;
63
+ --cart-button-border-radius: 4px;
64
+ --cart-button-background-color: transparent;
65
+ --cart-button-background-color-hover: transparent;
66
+ --cart-button-padding-x: 16px;
67
+ --cart-button-padding-y: 16px;
68
+
69
+ --cart-button-primary-text-color: #fff;
70
+ --cart-button-primary-text-color-hover: #fff;
71
+ --cart-button-primary-border-color: #1d4ed8;
72
+ --cart-button-primary-border-color-hover: #0d59f4;
73
+ --cart-button-primary-background-color: #1d4ed8;
74
+ --cart-button-primary-background-color-hover: #0d59f4;
75
+ /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
76
+ }
77
+
78
+ .apirocket-cart * { box-sizing: content-box; }
79
+
80
+ .apirocket-cart {
5
81
  position: fixed;
6
82
  z-index: 10000;
7
83
  right: 0;
8
84
  top: 0;
9
85
  overflow: hidden;
10
- overflow-y: auto;
11
- width: 100%;
86
+ width: var(--cart-width, 540px);
12
87
  height: 100vh;
88
+ box-shadow: 1px 20px 8px rgba(0,0,0,.1);
13
89
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
14
- background-color: #fff;
90
+ background-color: var(--cart-background-color, #fff);
15
91
  }
16
92
 
17
- .apirocket-checkout-wrap {
93
+ .apirocket-cart-content {
18
94
  display: flex;
19
- margin: 0 auto;
20
- width: 90%;
21
- min-height: 100%;
22
- max-width: 1100px;
23
- padding: 0 5%;
24
-
95
+ flex-direction: column;
96
+ height: 100%;
97
+ background-color: var(--cart-background-color, #fff);
25
98
  }
26
99
 
27
- .apirocket-checkout-main {
28
- order: 1;
29
- width: 52%;
30
- padding-right: 48px;
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);
31
108
  }
32
109
 
33
- .apirocket-checkout-summary {
34
- order: 2;
35
- position: relative;
36
- width: 40%;
37
- padding-left: 48px;
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)
38
114
  }
39
115
 
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;
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;
50
121
  }
51
122
 
52
- .apirocket-checkout-continue {
53
- display: flex;
123
+ .apirocket-cart-header-continue {
124
+ display: none;
54
125
  align-items: center;
55
126
  text-align: left;
56
- margin-top: 40px;
57
- margin-bottom: 40px;
58
127
  color: #737373;
59
128
  font-size: 16px;
60
129
  font-weight: normal;
61
130
  cursor: pointer;
62
131
  }
63
132
 
64
- .apirocket-checkout-close {
133
+ .apirocket-cart-header-login {
65
134
  display: none;
135
+ align-items: center;
136
+ text-align: right;
137
+ color: #737373;
138
+ font-size: 16px;
139
+ font-weight: normal;
66
140
  cursor: pointer;
67
- position: absolute;
68
- top: 16px;
69
- right: 32px;
70
141
  }
71
142
 
72
- .apirocket-checkout-summary-container {
73
- display: flex;
74
- flex-flow: column;
75
- max-height: calc(100vh - 5%);
76
- overflow: hidden;
77
- }
143
+ .apirocket-cart-header-login svg,
144
+ .apirocket-cart-header-continue svg { margin-right: 16px; }
78
145
 
79
- .apirocket-checkout-summary-top {
80
- flex: 0 0 auto;
146
+ .apirocket-cart-body {
147
+ flex: 1 1 auto;
148
+ padding: 0px;
149
+ background: var(--cart-background-color, #fff);
150
+ overflow-y: auto;
81
151
  }
82
152
 
83
- .apirocket-checkout-summary-content {
84
- flex: 1 1 auto;
85
- overflow-y: scroll;
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);
86
159
  }
87
160
 
88
- .apirocket-checkout-summary-footer {
161
+ .apirocket-cart-footer {
89
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);
90
169
  }
91
170
 
92
- .apirocket-checkout-summary-login {
93
- display: flex;
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;
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);
103
175
  }
104
176
 
105
- .apirocket-checkout-summary-login svg,
106
- .apirocket-checkout-continue svg { margin-right: 16px; }
107
-
108
- .apirocket-checkout-summary-header {
177
+ .apirocket-cart-row {
109
178
  display: flex;
110
179
  justify-content: space-between;
111
180
  align-items: center;
112
- margin-top: 56px;
113
- margin-bottom: 48px;
114
181
  }
115
182
 
116
- .apirocket-checkout-summary-header :last-child a {
117
- font-size: 14px;
118
- font-weight: normal;
119
- color: #737373;
183
+ .apirocket-cart-col {
184
+ flex: 1 1 auto;
185
+ margin-bottom: 16px;
120
186
  }
121
187
 
122
- .apirocket-checkout-summary-item {
123
- display: flex;
124
- justify-content: stretch;
125
- align-items: flex-start;
126
- padding-bottom: 16px;
127
- border-bottom: 1px solid #d9d9d9;
128
- margin-bottom: 16px;
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);
129
191
  }
130
192
 
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;
193
+ .apirocket-cart-item:last-child {
194
+ border-bottom: none;
195
+ margin-bottom: var(--cart-padding, 32px);
137
196
  }
138
197
 
139
- .apirocket-checkout-summary-item-col-image img {
140
- display: block;
141
- max-width: 100%;
142
- max-height: 100px;
198
+ .apirocket-cart-item-row {
199
+ display: flex;
200
+ justify-content: space-between;
201
+ align-items: center;
143
202
  }
144
203
 
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;
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;
152
209
  }
153
210
 
154
- .apirocket-checkout-summary-item-col-description small {
211
+ .apirocket-cart-item-col-image img {
155
212
  display: block;
156
- font-size: 14px;
157
- font-weight: normal;
158
- color: #a3a3a3;
213
+ max-width: 100%;
159
214
  }
160
215
 
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;
167
- }
168
-
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;
175
- }
176
-
177
- .apirocket-checkout-summary-row {
178
- display: flex;
179
- justify-content: space-between;
180
- align-items: center;
181
- padding-top: 16px;
182
- }
183
-
184
- .apirocket-checkout-summary-label {
185
- font-size: 16px;
186
- font-weight: normal;
187
- line-height: 18px;
188
- color: #404040;
189
- }
190
-
191
- .apirocket-checkout-summary-value {
192
- font-size: 18px;
193
- font-weight: bold;
194
- line-height: 18px;
195
- color: #404040;
196
- }
197
-
198
- .apirocket-checkout-summary-row-total {
199
- display: flex;
200
- justify-content: space-between;
201
- align-items: flex-start;
202
- border-top: 1px solid #d9d9d9;
203
- margin-top: 24px;
204
- padding-top: 24px;
205
- }
206
-
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;
216
+ .apirocket-cart-item-col-description {
217
+ align-self: flex-start;
218
+ padding-right: 32px;
219
+ flex-grow: 1;
219
220
  }
220
221
 
221
- .apirocket-checkout-summary-value-total {
222
- font-size: 24px;
223
- font-weight: bold;
224
- line-height: 24px;
225
- color: #404040;
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
226
  }
227
227
 
228
- .apirocket-checkout-breadcrumbs ol {
229
- display: flex;
230
- align-items: center;
231
- list-style: none;
232
- padding: 0;
233
- margin: 0;
234
- margin-top: 24px;
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);
235
232
  }
236
233
 
237
- .apirocket-checkout-breadcrumbs ol li {
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);
238
239
  cursor: pointer;
239
- color: #a3a3a3;
240
- font-size: 14px;
241
- line-height: 1;
240
+ text-align: center;
242
241
  }
243
242
 
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;
243
+ .apirocket-cart-item-col-delete:hover {
244
+ color: var(--cart-item-delete-icon-color-hover, #000);
253
245
  }
254
246
 
255
- .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
256
-
257
- .apirocket-checkout-breadcrumbs ol li a {
258
- color: #a3a3a3;
259
- text-decoration: underline;
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);
260
250
  }
261
251
 
262
- .apirocket-checkout-breadcrumbs-active {
263
- font-weight: bold;
264
- color: #404040 !important;
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;
265
257
  }
266
258
 
267
- .apirocket-checkout-steps-summary {
268
- border: 1px solid #d9d9d9;
269
- border-radius: 4px;
270
- overflow: hidden;
271
- margin-top: 48px;
259
+ .apirocket-cart-item-col-quantity {
260
+ margin-top: 16px;
272
261
  }
273
262
 
274
- .apirocket-checkout-steps-summary-row {
263
+ .apirocket-cart-item-quantity-wrapper {
275
264
  display: flex;
276
- position: relative;
277
- border-bottom: 1px solid #d9d9d9;
278
- padding: 16px;
265
+ justify-content: space-between;
266
+ border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
267
+ min-width: 160px;
268
+ user-select: none;
269
+ transition-property: border-color;
270
+ transition-timing-function: ease;
271
+ transition-duration: 350ms;
279
272
  }
280
273
 
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;
274
+ .apirocket-cart-item-quantity-wrapper:hover {
275
+ border-color: var(--cart-item-form-border-color-hover, #000);
287
276
  }
288
277
 
289
- .apirocket-checkout-steps-summary-text {
278
+ .apirocket-cart-item-quantity-number {
290
279
  flex: 1 1 auto;
291
- font-size: 14px;
292
- font-weight: normal;
293
- line-height: 18px;
294
- color: #404040;
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;
295
286
  }
296
287
 
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;
288
+ .apirocket-cart-item-quantity-button {
289
+ display: flex;
290
+ align-items: center;
291
+ background-color: var(--cart-item-quantity-icon-background-color, transparent);
292
+ padding: 0px 12px;
305
293
  cursor: pointer;
306
294
  }
307
295
 
308
- .apirocket-checkout-section {
309
- margin-top: 48px;
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);
310
300
  }
311
301
 
312
- .apirocket-checkout-section-header {
313
- margin-bottom: 24px;
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);
314
307
  }
315
308
 
316
- .apirocket-checkout-section-title {
317
- font-size: 18px;
318
- font-weight: bold;
319
- line-height: 1;
320
- color: #404040;
321
- }
322
309
 
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;
330
- }
310
+ @media (min-width: 720px) {
331
311
 
332
- .apirocket-checkout-button-edit {
333
- cursor: pointer;
334
- }
312
+ .apirocket-cart.apirocket-cart-full-screen {
313
+ width: 100%;
314
+ overflow-y: auto;
315
+ }
335
316
 
336
- .apirocket-checkout-button-edit:hover {
337
- text-decoration: underline;
338
- }
317
+ .apirocket-cart-full-screen .apirocket-cart-content {
318
+ display: block;
319
+ width: 90%;
320
+ max-width: 980px;
321
+ margin: 0 auto;
322
+ }
339
323
 
340
- .apirocket-checkout-section a {
341
- color: #404040;
342
- outline: none;
343
- text-decoration: underline;
344
- }
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
+ }
345
329
 
346
- .apirocket-checkout-section-text {
347
- font-size: 14px;
348
- line-height: 1;
349
- margin-top: 4px;
350
- color: #737373;
351
- }
330
+ .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
331
+ .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
352
332
 
353
- .apirocket-checkout-actions {
354
- display: flex;
355
- margin-top: 64px;
356
- align-items: center;
357
- max-width: 100%;
358
- }
333
+ .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
359
334
 
360
- .apirocket-checkout-actions > * { flex: 1 1; }
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
+ }
361
344
 
362
- .apirocket-checkout-footer {
363
- margin-top: 72px;
364
- border-top: 1px solid #d9d9d9;
365
- margin-bottom: 64px;
366
- padding-top: 16px;
367
- }
345
+ .apirocket-cart-full-screen .apirocket-cart-item {
346
+ display: flex;
347
+ position: relative;
348
+ padding-left: 0;
349
+ padding-right: 0;
350
+ }
368
351
 
369
- .apirocket-checkout-footer ul {
370
- display: flex;
371
- align-items: center;
372
- list-style: none;
373
- padding: 0;
374
- margin: 0;
375
- }
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%; }
376
354
 
377
- .apirocket-checkout-footer ul li { margin-right: 16px; }
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
+ }
378
358
 
379
- .apirocket-checkout-footer ul li a {
380
- color: #404040;
381
- font-size: 14px;
382
- line-height: 1;
383
- text-decoration: none;
384
- }
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
+ }
385
364
 
386
- .apirocket-checkout-footer ul li a:focus {
387
- outline: none;
388
- text-decoration: underline;
389
- }
365
+ .apirocket-cart-full-screen .apirocket-cart-item-col-image {
366
+ flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
367
+ }
390
368
 
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
- }
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; }
398
371
 
399
- .apircoket-checkout-legal a {
400
- text-decoration: underline;
401
- color: #404040;
372
+ .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
373
+ position: absolute;
374
+ right: 0px;
375
+ top: var(--cart-item-padding, 32px);
376
+ }
402
377
  }
403
378
 
404
- .apirocket-checkout-logo img {
405
- display: block;
406
- max-height: 80px;
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%; }
407
382
  }
408
383
 
409
- .apirocket-checkout-mobile { display: none; }
384
+ /* Mobile version */
410
385
 
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;
420
- }
386
+ @media (max-width: 720px) {
421
387
 
422
- .apirocket-checkout-mobile-menu {
423
- background-color: #f5f5f5;
424
- border-top: 1px solid #d9d9d9;
425
- }
388
+ .apirocket-cart {
389
+ width: 100%;
390
+ box-shadow: none;
391
+ }
426
392
 
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
- }
393
+ .apirocket-cart-header-continue { display: none; }
394
+ .apirocket-cart-header-login { display: none; }
395
+ }.apirocket-summary {}
437
396
 
438
- .apirocket-checkout-mobile-wrapper-cart {
439
- display: inline-flex;
440
- align-items: center;
441
- color: #404040;
442
- cursor: pointer;
397
+ .apirocket-summary-top {
398
+ margin-top: 56px;
399
+ margin-bottom: 32px;
443
400
  }
444
401
 
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;
402
+ .apirocket-summary-header {
403
+ display: flex;
404
+ justify-content: flex-start;
405
+ align-items: center;
406
+ margin-bottom: 32px;
451
407
  }
452
408
 
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;
409
+ .apirocket-summary-header-icon {
410
+ flex: 0 1;
411
+ margin-right: 16px;
461
412
  }
462
413
 
463
- .apirocket-checkout-mobile-summary--show {
464
- max-height: 1000px;
465
- overflow: auto;
466
- }
414
+ .apirocket-summary-header-content {}
467
415
 
468
- .apirocket-checkout-mobile-summary-wrapper {
469
- width: 90%;
470
- max-width: 560px;
471
- padding: 16px 0px;
472
- margin: 0 auto;
416
+ .apirocket-summary-header-title {
417
+ font-size: 24px;
418
+ font-weight: bold;
419
+ line-height: 1.2;
420
+ color: #404040;
421
+ margin-bottom: 4px;
473
422
  }
474
423
 
475
-
476
-
477
- /* Utils */
478
-
479
- .apirocket-checkout-row {
480
- display: flex;
481
- justify-content: space-between;
482
- align-items: flex-start;
483
- }
484
- .apirocket-checkout-row > * {
485
- flex: 1 1;
486
- margin-right: 16px;
424
+ .apirocket-summary-header-subtitle {
425
+ font-size: 18px;
426
+ font-weight: normal;
427
+ line-height: 1.2;
428
+ color: #737373;
487
429
  }
488
430
 
489
- .apirocket-checkout-row > *:last-child { margin-right: 0; }
490
-
491
- .apirocket-checkout-fieldset {
431
+ .apirocket-summary-section {
432
+ margin-top: 16px;
492
433
  border: 1px solid #d9d9d9;
493
434
  border-radius: 4px;
494
- overflow: hidden;
435
+ padding: 24px;
495
436
  }
496
437
 
497
- .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
498
-
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; }
438
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
439
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
504
440
 
505
- .apirocket-checkout-fieldset > * {
506
- padding: 16px;
507
- border-bottom: 1px solid #d9d9d9;
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;
508
447
  }
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;
448
+
449
+ .apirocket-summary-section-subtitle {
519
450
  font-size: 16px;
520
451
  font-weight: bold;
521
- line-height: 20px;
452
+ line-height: 1;
522
453
  color: #404040;
454
+ margin-bottom: 16px;
523
455
  }
524
456
 
525
- .apirocket-checkout-fieldset-row > :last-child img {
526
- display: block;
527
- max-height: 24px;
457
+ .apirocket-summary-section-text {
458
+ font-size: 14px;
459
+ font-weight: normal;
460
+ line-height: 18px;
461
+ color: #404040;
528
462
  }
529
463
 
530
- .apirocket-checkout-fieldset-row-wrapper {
531
- background-color: #f5f5f5;
464
+ .apirocket-summary-help {
465
+ display: flex;
466
+ justify-content: flex-start;
467
+ align-items: center;
532
468
  }
533
469
 
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; }
470
+ .apirocket-summary-help-icon {
471
+ flex: 0 1;
472
+ padding-right: 12px;
575
473
  }
576
474
 
475
+ .apirocket-summary-help-content {
476
+ font-size: 14px;
477
+ font-weight: normal;
478
+ line-height: 1.2;
479
+ color: #404040;
480
+ }
577
481
 
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
- }
482
+ .apirocket-summary-help-content a {
483
+ display: block;
484
+ color: #737373;
485
+ }
648
486
 
649
- .apirocket-checkout-summary-row {
650
- padding-top: 8px;
651
- }
487
+ @media (max-width: 1000px) {
488
+ .apirocket-summary-top { display: none; }
489
+ .apirocket-summary-header { margin-top: 32px; }
490
+ }
652
491
 
653
- .apirocket-checkout-summary-label {
654
- font-size: 14px;
655
- line-height: 14px;
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;
656
498
  }
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;
499
+ .apirocket-summary-header-icon {
500
+ margin-right: 0px;
501
+ margin-bottom: 16px;
666
502
  }
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;
503
+ .apirocket-summary-header-title {
504
+ font-size: 28px;
505
+ margin-bottom: 8px;
675
506
  }
507
+ }.apirocket-checkout * { box-sizing: content-box; }
676
508
 
677
- .apirocket-checkout-steps-summary-text { margin-top: 18px; }
678
- .apirocket-checkout-steps-summary-link { font-size: 12px; }
679
-
680
- }
681
-
682
-
683
- :root {
684
- --cart-width: 540px;
685
- --cart-background-color: #fff;
686
- --cart-padding: 32px;
687
- --cart-font-family: Arial, Helvetica, sans-serif;
688
-
689
- --cart-header-background-color: #f5f5f5;
690
- --cart-header-border-color: #f5f5f5;
691
- --cart-header-border-width: 1px;
692
- --cart-header-text-font-size: 18px;
693
- --cart-header-text-font-weight: normal;
694
- --cart-header-text-font-color: #404040;
695
- --cart-header-text-close-icon-color: #a3a3a3;
696
- --cart-header-text-close-icon-size: 24px;
697
-
698
- --cart-footer-background-color: #fff;
699
- --cart-footer-border-color: #e5e5e5;
700
- --cart-footer-border-width: 1px;
701
- --cart-footer-text-font-size: 16px;
702
- --cart-footer-text-font-weight: lighter;
703
- --cart-footer-text-font-color: #404040;
704
- --cart-footer-total-font-size: 18px;
705
- --cart-footer-total-font-weight: bold;
706
- --cart-footer-total-font-color: #000;
707
-
708
- --cart-item-border-color: #e5e5e5;
709
- --cart-item-border-width: 1px;
710
- --cart-item-padding: 32px;
711
- --cart-item-label-font-size: 14px;
712
- --cart-item-label-font-weight: lighter;
713
- --cart-item-label-font-color: #737373;
714
- --cart-item-image-display: inherit;
715
- --cart-item-image-width: 100px;
716
- --cart-item-image-width-fullscreen: 150px;
717
- --cart-item-name-font-size: 18px;
718
- --cart-item-name-font-weight: bold;
719
- --cart-item-name-font-color: #000;
720
- --cart-item-description-font-size: 14px;
721
- --cart-item-description-font-weight: lighter;
722
- --cart-item-description-font-color: #000;
723
- --cart-item-delete-icon-color: #404040;
724
- --cart-item-delete-icon-color-hover: #000;
725
- --cart-item-delete-icon-size: 18px;
726
- --cart-item-form-border-color: #e5e5e5;
727
- --cart-item-form-border-color-hover: #000;
728
- --cart-item-form-border-width: 1px;
729
- --cart-item-form-text-size: 14px;
730
- --cart-item-form-text-weight: normal;
731
- --cart-item-form-text-color: #000;
732
- --cart-item-quantity-icon-color: #737373;
733
- --cart-item-quantity-icon-background-color: transparent;
734
- --cart-item-quantity-icon-size: 16px;
735
- --cart-item-price-font-size: 16px;
736
- --cart-item-price-font-weight: bold;
737
- --cart-item-price-font-color: #404040;
738
-
739
- --cart-button-font-size: 16px;
740
- --cart-button-font-weight: normal;
741
- --cart-button-font-color: #737373;
742
- --cart-button-font-color-hover: #404040;
743
- --cart-button-border-color: #e5e5e5;
744
- --cart-button-border-color-hover: #404040;
745
- --cart-button-border-radius: 4px;
746
- --cart-button-background-color: transparent;
747
- --cart-button-background-color-hover: transparent;
748
- --cart-button-padding-x: 16px;
749
- --cart-button-padding-y: 16px;
750
-
751
- --cart-button-primary-text-color: #fff;
752
- --cart-button-primary-text-color-hover: #fff;
753
- --cart-button-primary-border-color: #1d4ed8;
754
- --cart-button-primary-border-color-hover: #0d59f4;
755
- --cart-button-primary-background-color: #1d4ed8;
756
- --cart-button-primary-background-color-hover: #0d59f4;
757
- /* --cart-shadow-button-primary-hover: 0 10px 4px -8px rgba(0,0,0,.5); */
758
- }
759
-
760
- .apirocket-cart * { box-sizing: content-box; }
761
-
762
- .apirocket-cart {
509
+ .apirocket-checkout {
510
+ display: block;
763
511
  position: fixed;
764
512
  z-index: 10000;
765
513
  right: 0;
766
514
  top: 0;
767
515
  overflow: hidden;
768
- width: var(--cart-width, 540px);
516
+ overflow-y: auto;
517
+ width: 100%;
769
518
  height: 100vh;
770
- box-shadow: 1px 20px 8px rgba(0,0,0,.1);
771
519
  font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
772
- background-color: var(--cart-background-color, #fff);
520
+ background-color: #fff;
773
521
  }
774
522
 
775
- .apirocket-cart-content {
776
- display: flex;
777
- flex-direction: column;
778
- height: 100%;
779
- background-color: var(--cart-background-color, #fff);
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%;
530
+
780
531
  }
781
532
 
782
- .apirocket-cart-header {
783
- display: flex;
784
- flex: 0 0 96px;
785
- align-items: center;
786
- justify-content: space-between;
787
- padding: 0px var(--cart-padding);
788
- background-color: var(--cart-header-background-color, #f5f5f5);
789
- border-bottom: var(--cart-header-border-width, 1px) solid var(--cart-header-border-color, #f5f5f5);
533
+ .apirocket-checkout-main {
534
+ order: 1;
535
+ width: 52%;
536
+ padding-right: 48px;
790
537
  }
791
538
 
792
- .apirocket-cart-header-title {
793
- font-size: var(--cart-header-text-font-size, 18px);
794
- font-weight: var(--cart-header-text-font-weight, normal);
795
- color: var(--cart-header-text-font-color, #404040)
539
+ .apirocket-checkout-summary {
540
+ order: 2;
541
+ position: relative;
542
+ width: 40%;
543
+ padding-left: 48px;
796
544
  }
797
545
 
798
- .apirocket-cart-header-close-icon {
799
- height: var(--cart-header-text-close-icon-size, 24px);
800
- width: var(--cart-header-text-close-icon-size, 24px);
801
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
802
- cursor: pointer;
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;
803
556
  }
804
557
 
805
- .apirocket-cart-header-continue {
806
- display: none;
558
+ .apirocket-checkout-continue {
559
+ display: flex;
807
560
  align-items: center;
808
561
  text-align: left;
562
+ margin-top: 40px;
563
+ margin-bottom: 40px;
809
564
  color: #737373;
810
565
  font-size: 16px;
811
566
  font-weight: normal;
812
567
  cursor: pointer;
813
568
  }
814
569
 
815
- .apirocket-cart-header-login {
570
+ .apirocket-checkout-close {
816
571
  display: none;
572
+ cursor: pointer;
573
+ position: absolute;
574
+ top: 16px;
575
+ right: 32px;
576
+ }
577
+
578
+ .apirocket-checkout-summary-container {
579
+ display: flex;
580
+ flex-flow: column;
581
+ max-height: calc(100vh - 5%);
582
+ overflow: hidden;
583
+ }
584
+
585
+ .apirocket-checkout-summary-top {
586
+ flex: 0 0 auto;
587
+ }
588
+
589
+ .apirocket-checkout-summary-content {
590
+ flex: 1 1 auto;
591
+ overflow-y: scroll;
592
+ }
593
+
594
+ .apirocket-checkout-summary-footer {
595
+ flex: 0 0 auto;
596
+ }
597
+
598
+ .apirocket-checkout-summary-login {
599
+ display: flex;
817
600
  align-items: center;
601
+ justify-content: end;
818
602
  text-align: right;
603
+ margin-top: 40px;
604
+ margin-bottom: 40px;
819
605
  color: #737373;
820
606
  font-size: 16px;
821
607
  font-weight: normal;
822
608
  cursor: pointer;
823
609
  }
824
610
 
825
- .apirocket-cart-header-login svg,
826
- .apirocket-cart-header-continue svg { margin-right: 16px; }
611
+ .apirocket-checkout-summary-login svg,
612
+ .apirocket-checkout-continue svg { margin-right: 16px; }
827
613
 
828
- .apirocket-cart-body {
829
- flex: 1 1 auto;
830
- padding: 0px;
831
- background: var(--cart-background-color, #fff);
832
- overflow-y: auto;
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;
833
620
  }
834
621
 
835
- .apirocket-cart-body-message {
836
- font-size: 18px;
837
- font-weight: var(--cart-item-description-font-weight, lighter);
838
- color: #666;
839
- padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
840
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
622
+ .apirocket-checkout-summary-header :last-child a {
623
+ font-size: 14px;
624
+ font-weight: normal;
625
+ color: #737373;
841
626
  }
842
627
 
843
- .apirocket-cart-footer {
628
+ .apirocket-checkout-summary-item {
629
+ display: flex;
630
+ justify-content: stretch;
631
+ align-items: flex-start;
632
+ padding-bottom: 16px;
633
+ border-bottom: 1px solid #d9d9d9;
634
+ margin-bottom: 16px;
635
+ }
636
+
637
+ .apirocket-checkout-summary-item-col-image {
844
638
  flex: 0 0 auto;
845
- padding: var(--cart-padding, 32px);
846
- background-color: var(--cart-footer-background-color, transparent);
847
- border-top: var(--cart-footer-border-width, 1px) solid var(--cart-footer-border-color, #e5e5e5);
848
- font-size: var(--cart-footer-text-font-size, 16px);
849
- font-weight: var(--cart-footer-text-font-weight, lighter);
850
- color: var(--cart-footer-text-font-color, #737373);
639
+ max-width: 100px;
640
+ border: 1px solid #e5e5e5;
641
+ border-radius: 4px;
642
+ overflow: hidden;
851
643
  }
852
644
 
853
- .apirocket-cart-footer-total {
854
- font-size: var(--cart-footer-total-font-size, 18px);
855
- font-weight: var(--cart-footer-total-font-weight, bold);
856
- color: var(--cart-footer-total-font-color, #000);
645
+ .apirocket-checkout-summary-item-col-image img {
646
+ display: block;
647
+ max-width: 100%;
648
+ max-height: 100px;
857
649
  }
858
650
 
859
- .apirocket-cart-row {
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;
658
+ }
659
+
660
+ .apirocket-checkout-summary-item-col-description small {
661
+ display: block;
662
+ font-size: 14px;
663
+ font-weight: normal;
664
+ color: #a3a3a3;
665
+ }
666
+
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;
673
+ }
674
+
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;
681
+ }
682
+
683
+ .apirocket-checkout-summary-row {
860
684
  display: flex;
861
685
  justify-content: space-between;
862
686
  align-items: center;
687
+ padding-top: 16px;
863
688
  }
864
689
 
865
- .apirocket-cart-col {
866
- flex: 1 1 auto;
867
- margin-bottom: 16px;
690
+ .apirocket-checkout-summary-label {
691
+ font-size: 16px;
692
+ font-weight: normal;
693
+ line-height: 18px;
694
+ color: #404040;
868
695
  }
869
696
 
870
- .apirocket-cart-item {
871
- padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
872
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
697
+ .apirocket-checkout-summary-value {
698
+ font-size: 18px;
699
+ font-weight: bold;
700
+ line-height: 18px;
701
+ color: #404040;
873
702
  }
874
703
 
875
- .apirocket-cart-item:last-child {
876
- border-bottom: none;
877
- margin-bottom: var(--cart-padding, 32px);
704
+ .apirocket-checkout-summary-row-total {
705
+ 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;
878
711
  }
879
712
 
880
- .apirocket-cart-item-row {
713
+ .apirocket-checkout-summary-label-total {
714
+ font-size: 18px;
715
+ font-weight: bold;
716
+ line-height: 21px;
717
+ color: #404040;
718
+ }
719
+ .apirocket-checkout-summary-label-total small {
720
+ display: block;
721
+ font-size: 14px;
722
+ line-height: 16px;
723
+ font-weight: normal;
724
+ color: #a3a3a3;
725
+ }
726
+
727
+ .apirocket-checkout-summary-value-total {
728
+ font-size: 24px;
729
+ font-weight: bold;
730
+ line-height: 24px;
731
+ color: #404040;
732
+ }
733
+
734
+ .apirocket-checkout-breadcrumbs ol {
881
735
  display: flex;
882
- justify-content: space-between;
883
736
  align-items: center;
737
+ list-style: none;
738
+ padding: 0;
739
+ margin: 0;
740
+ margin-top: 24px;
884
741
  }
885
742
 
886
- .apirocket-cart-item-col-image {
887
- display: var(--cart-item-image-display, inherit);
888
- flex: 0 0 var(--cart-item-image-width, 100px);
889
- align-self: flex-start;
890
- margin-right: 16px;
743
+ .apirocket-checkout-breadcrumbs ol li {
744
+ cursor: pointer;
745
+ color: #a3a3a3;
746
+ font-size: 14px;
747
+ line-height: 1;
748
+ }
749
+
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;
759
+ }
760
+
761
+ .apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
762
+
763
+ .apirocket-checkout-breadcrumbs ol li a {
764
+ color: #a3a3a3;
765
+ text-decoration: underline;
766
+ }
767
+
768
+ .apirocket-checkout-breadcrumbs-active {
769
+ font-weight: bold;
770
+ color: #404040 !important;
891
771
  }
892
772
 
893
- .apirocket-cart-item-col-image img {
894
- display: block;
895
- max-width: 100%;
773
+ .apirocket-checkout-steps-summary {
774
+ border: 1px solid #d9d9d9;
775
+ border-radius: 4px;
776
+ overflow: hidden;
777
+ margin-top: 48px;
896
778
  }
897
779
 
898
- .apirocket-cart-item-col-description {
899
- align-self: flex-start;
900
- padding-right: 32px;
901
- flex-grow: 1;
780
+ .apirocket-checkout-steps-summary-row {
781
+ display: flex;
782
+ position: relative;
783
+ border-bottom: 1px solid #d9d9d9;
784
+ padding: 16px;
902
785
  }
903
786
 
904
- .apirocket-cart-item-col-description-name {
905
- font-size: var(--cart-item-name-font-size, 18px);
906
- font-weight: var(--cart-item-name-font-weight, bold);
907
- color: var(--cart-item-name-font-color, #000);
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;
908
793
  }
909
794
 
910
- .apirocket-cart-item-col-description-text {
911
- font-size: var(--cart-item-description-font-size, 14px);
912
- font-weight: var(--cart-item-description-font-weight, lighter);
913
- color: var(--cart-item-description-font-color, #000);
795
+ .apirocket-checkout-steps-summary-text {
796
+ flex: 1 1 auto;
797
+ font-size: 14px;
798
+ font-weight: normal;
799
+ line-height: 18px;
800
+ color: #404040;
914
801
  }
915
802
 
916
- .apirocket-cart-item-col-delete {
917
- flex: 1 0 auto;
918
- align-self: flex-start;
919
- color: var(--cart-item-delete-icon-color, #404040);
920
- width: var(--cart-item-delete-icon-size, 24px);
803
+ .apirocket-checkout-steps-summary-link {
804
+ flex: 0 0 60px;
805
+ text-align: right;
806
+ font-size: 12px;
807
+ font-weight: normal;
808
+ line-height: 1;
809
+ text-decoration: underline;
810
+ color: #737373;
921
811
  cursor: pointer;
922
- text-align: center;
923
812
  }
924
813
 
925
- .apirocket-cart-item-col-delete:hover {
926
- color: var(--cart-item-delete-icon-color-hover, #000);
814
+ .apirocket-checkout-section {
815
+ margin-top: 48px;
927
816
  }
928
817
 
929
- .apirocket-cart-item-col-delete svg {
930
- width: var(--cart-item-delete-icon-size, 18px);
931
- height: var(--cart-item-delete-icon-size, 18px);
818
+ .apirocket-checkout-section-header {
819
+ margin-bottom: 24px;
932
820
  }
933
821
 
934
- .apirocket-cart-item-label {
935
- font-size: var(--cart-item-label-font-size, 14px);
936
- font-weight: var(--cart-item-label-font-weight, lighter);
937
- color: var(--cart-item-label-font-color, #737373);
938
- margin-bottom: 4px;
822
+ .apirocket-checkout-section-title {
823
+ font-size: 18px;
824
+ font-weight: bold;
825
+ line-height: 1;
826
+ color: #404040;
939
827
  }
940
828
 
941
- .apirocket-cart-item-col-quantity {
942
- margin-top: 16px;
829
+ .apirocket-checkout-section-subtitle {
830
+ font-size: 12px;
831
+ font-weight: normal;
832
+ padding-top: 4px;
833
+ line-height: 1;
834
+ color: #a3a3a3;
835
+ text-align: right;
943
836
  }
944
837
 
945
- .apirocket-cart-item-quantity-wrapper {
946
- display: flex;
947
- justify-content: space-between;
948
- border: var(--cart-item-form-border-width, 1px) solid var(--cart-item-form-border-color, #e5e5e5);
949
- min-width: 160px;
950
- user-select: none;
951
- transition-property: border-color;
952
- transition-timing-function: ease;
953
- transition-duration: 350ms;
838
+ .apirocket-checkout-button-edit {
839
+ cursor: pointer;
954
840
  }
955
841
 
956
- .apirocket-cart-item-quantity-wrapper:hover {
957
- border-color: var(--cart-item-form-border-color-hover, #000);
842
+ .apirocket-checkout-button-edit:hover {
843
+ text-decoration: underline;
958
844
  }
959
845
 
960
- .apirocket-cart-item-quantity-number {
961
- flex: 1 1 auto;
962
- font-size: var(--cart-item-form-text-size, 14px);
963
- font-weight: var(--cart-item-form-text-weight, normal);
964
- color: var(--cart-item-form-text-color, #000);
965
- padding: 16px;
846
+ .apirocket-checkout-section a {
847
+ color: #404040;
848
+ outline: none;
849
+ text-decoration: underline;
850
+ }
851
+
852
+ .apirocket-checkout-section-text {
853
+ font-size: 14px;
966
854
  line-height: 1;
967
- text-align: center;
855
+ margin-top: 4px;
856
+ color: #737373;
968
857
  }
969
858
 
970
- .apirocket-cart-item-quantity-button {
859
+ .apirocket-checkout-actions {
971
860
  display: flex;
861
+ margin-top: 64px;
972
862
  align-items: center;
973
- background-color: var(--cart-item-quantity-icon-background-color, transparent);
974
- padding: 0px 12px;
975
- cursor: pointer;
863
+ max-width: 100%;
976
864
  }
977
865
 
978
- .apirocket-cart-item-quantity-button svg {
979
- color: var(--cart-item-quantity-icon-color, #737373);
980
- width: var(--cart-item-quantity-icon-size, 16px);
981
- height: var(--cart-item-quantity-icon-size, 16px);
982
- }
866
+ .apirocket-checkout-actions > * { flex: 1 1; }
983
867
 
984
- .apirocket-cart-item-col-price {
985
- margin-top: 36px;
986
- font-size: var(--cart-item-price-font-size, 16px);
987
- font-weight: var(--cart-item-price-font-weight, normal);
988
- color: var(--cart-item-price-font-color, #404040);
868
+ .apirocket-checkout-footer {
869
+ margin-top: 72px;
870
+ border-top: 1px solid #d9d9d9;
871
+ margin-bottom: 64px;
872
+ padding-top: 16px;
989
873
  }
990
874
 
875
+ .apirocket-checkout-footer ul {
876
+ display: flex;
877
+ align-items: center;
878
+ list-style: none;
879
+ padding: 0;
880
+ margin: 0;
881
+ }
991
882
 
992
- @media (min-width: 720px) {
993
-
994
- .apirocket-cart.apirocket-cart-full-screen {
995
- width: 100%;
996
- overflow-y: auto;
997
- }
998
-
999
- .apirocket-cart-full-screen .apirocket-cart-content {
1000
- display: block;
1001
- width: 90%;
1002
- max-width: 980px;
1003
- margin: 0 auto;
1004
- }
1005
-
1006
- .apirocket-cart-full-screen .apirocket-cart-header {
1007
- background-color: #fff;
1008
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1009
- padding: 40px 0px;
1010
- }
883
+ .apirocket-checkout-footer ul li { margin-right: 16px; }
1011
884
 
1012
- .apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
1013
- .apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
885
+ .apirocket-checkout-footer ul li a {
886
+ color: #404040;
887
+ font-size: 14px;
888
+ line-height: 1;
889
+ text-decoration: none;
890
+ }
1014
891
 
1015
- .apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
892
+ .apirocket-checkout-footer ul li a:focus {
893
+ outline: none;
894
+ text-decoration: underline;
895
+ }
1016
896
 
1017
- .apirocket-cart-full-screen .apirocket-cart-footer {
1018
- width: 40%;
1019
- border-top: none;
1020
- margin-left: auto;
1021
- margin-right: 0;
1022
- padding: 0px;
1023
- padding-top: 32px;
1024
- padding-bottom: 96px;
1025
- }
897
+ .apircoket-checkout-legal {
898
+ margin-top: 16px;
899
+ font-size: 14px;
900
+ color: #737373;
901
+ font-weight: normal;
902
+ line-height: 1.4;
903
+ }
1026
904
 
1027
- .apirocket-cart-full-screen .apirocket-cart-item {
1028
- display: flex;
1029
- position: relative;
1030
- padding-left: 0;
1031
- padding-right: 0;
1032
- }
905
+ .apircoket-checkout-legal a {
906
+ text-decoration: underline;
907
+ color: #404040;
908
+ }
1033
909
 
1034
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 60%; }
1035
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 40%; }
910
+ .apirocket-checkout-logo img {
911
+ display: block;
912
+ max-height: 80px;
913
+ }
1036
914
 
1037
- .apirocket-cart-full-screen .apirocket-cart-item:last-child {
1038
- border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
1039
- }
915
+ .apirocket-checkout-mobile { display: none; }
1040
916
 
1041
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { margin-top: 0px; }
1042
- .apirocket-cart-full-screen .apirocket-cart-item-col-price {
1043
- align-self: flex-end;
1044
- line-height: 48px;
1045
- }
917
+ .apirocket-checkout-mobile .apirocket-checkout-logo {
918
+ display: block;
919
+ margin-top: 16px;
920
+ margin-bottom: 16px;
921
+ }
922
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
923
+ display: block;
924
+ margin: auto;
925
+ max-height: 80px;
926
+ }
1046
927
 
1047
- .apirocket-cart-full-screen .apirocket-cart-item-col-image {
1048
- flex: 0 0 var(--cart-item-image-width-fullscreen, 150px);
1049
- }
928
+ .apirocket-checkout-mobile-menu {
929
+ background-color: #f5f5f5;
930
+ border-top: 1px solid #d9d9d9;
931
+ }
1050
932
 
1051
- .apirocket-cart-full-screen .apirocket-cart-item-col-description { align-self: flex-start; }
1052
- .apirocket-cart-full-screen .apirocket-cart-item-col-quantity { align-self: flex-end; }
933
+ .apirocket-checkout-mobile-wrapper {
934
+ display: flex;
935
+ justify-content: space-between;
936
+ align-items: center;
937
+ width: 90%;
938
+ max-width: 560px;
939
+ margin: 0 auto;
940
+ padding: 16px 0px;
941
+ color: #404040;
942
+ }
1053
943
 
1054
- .apirocket-cart-full-screen .apirocket-cart-item-col-delete {
1055
- position: absolute;
1056
- right: 0px;
1057
- top: var(--cart-item-padding, 32px);
1058
- }
944
+ .apirocket-checkout-mobile-wrapper-cart {
945
+ display: inline-flex;
946
+ align-items: center;
947
+ color: #404040;
948
+ cursor: pointer;
1059
949
  }
1060
950
 
1061
- @media (min-width: 720px) and (max-width: 920px) {
1062
- .apirocket-cart-full-screen .apirocket-cart-item-row:first-child { flex: 1 1 55%; }
1063
- .apirocket-cart-full-screen .apirocket-cart-item-row:last-child { flex: 1 1 35%; }
951
+ .apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
952
+
953
+ .apirocket-checkout-mobile-wrapper-total {
954
+ line-height: 20px;
955
+ font-size: 20px;
956
+ font-weight: bold;
1064
957
  }
1065
958
 
1066
- /* Mobile version */
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;
967
+ }
1067
968
 
1068
- @media (max-width: 720px) {
969
+ .apirocket-checkout-mobile-summary--show {
970
+ max-height: 1000px;
971
+ overflow: auto;
972
+ }
1069
973
 
1070
- .apirocket-cart {
1071
- width: 100%;
1072
- box-shadow: none;
1073
- }
974
+ .apirocket-checkout-mobile-summary-wrapper {
975
+ width: 90%;
976
+ max-width: 560px;
977
+ padding: 16px 0px;
978
+ margin: 0 auto;
979
+ }
1074
980
 
1075
- .apirocket-cart-header-continue { display: none; }
1076
- .apirocket-cart-header-login { display: none; }
1077
- }.apirocket-summary {}
1078
981
 
1079
- .apirocket-summary-top {
1080
- margin-top: 56px;
1081
- margin-bottom: 32px;
1082
- }
1083
982
 
1084
- .apirocket-summary-header {
983
+ /* Utils */
984
+
985
+ .apirocket-checkout-row {
1085
986
  display: flex;
1086
- justify-content: flex-start;
1087
- align-items: center;
1088
- margin-bottom: 32px;
987
+ justify-content: space-between;
988
+ align-items: flex-start;
1089
989
  }
1090
-
1091
- .apirocket-summary-header-icon {
1092
- flex: 0 1;
990
+ .apirocket-checkout-row > * {
991
+ flex: 1 1;
1093
992
  margin-right: 16px;
1094
993
  }
1095
994
 
1096
- .apirocket-summary-header-content {}
1097
-
1098
- .apirocket-summary-header-title {
1099
- font-size: 24px;
1100
- font-weight: bold;
1101
- line-height: 1.2;
1102
- color: #404040;
1103
- margin-bottom: 4px;
1104
- }
1105
-
1106
- .apirocket-summary-header-subtitle {
1107
- font-size: 18px;
1108
- font-weight: normal;
1109
- line-height: 1.2;
1110
- color: #737373;
1111
- }
995
+ .apirocket-checkout-row > *:last-child { margin-right: 0; }
1112
996
 
1113
- .apirocket-summary-section {
1114
- margin-top: 16px;
997
+ .apirocket-checkout-fieldset {
1115
998
  border: 1px solid #d9d9d9;
1116
999
  border-radius: 4px;
1117
- padding: 24px;
1000
+ overflow: hidden;
1118
1001
  }
1119
1002
 
1120
- .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
1121
- .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
1003
+ .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
1122
1004
 
1123
- .apirocket-summary-section-title {
1124
- font-size: 18px;
1125
- font-weight: bold;
1126
- line-height: 1.2;
1127
- color: #404040;
1128
- margin-bottom: 24px;
1129
- }
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; }
1130
1010
 
1131
- .apirocket-summary-section-subtitle {
1011
+ .apirocket-checkout-fieldset > * {
1012
+ padding: 16px;
1013
+ border-bottom: 1px solid #d9d9d9;
1014
+ }
1015
+ .apirocket-checkout-fieldset-row {
1016
+ 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;
1132
1025
  font-size: 16px;
1133
1026
  font-weight: bold;
1134
- line-height: 1;
1135
- color: #404040;
1136
- margin-bottom: 16px;
1137
- }
1138
-
1139
- .apirocket-summary-section-text {
1140
- font-size: 14px;
1141
- font-weight: normal;
1142
- line-height: 18px;
1027
+ line-height: 20px;
1143
1028
  color: #404040;
1144
1029
  }
1145
1030
 
1146
- .apirocket-summary-help {
1147
- display: flex;
1148
- justify-content: flex-start;
1149
- align-items: center;
1031
+ .apirocket-checkout-fieldset-row > :last-child img {
1032
+ display: block;
1033
+ max-height: 24px;
1150
1034
  }
1151
1035
 
1152
- .apirocket-summary-help-icon {
1153
- flex: 0 1;
1154
- padding-right: 12px;
1036
+ .apirocket-checkout-fieldset-row-wrapper {
1037
+ background-color: #f5f5f5;
1155
1038
  }
1156
1039
 
1157
- .apirocket-summary-help-content {
1158
- font-size: 14px;
1159
- font-weight: normal;
1160
- line-height: 1.2;
1161
- color: #404040;
1162
- }
1040
+ .apirocket-checkout-fieldset-row-wrapper > * { margin-bottom: 16px !important; }
1041
+ .apirocket-checkout-fieldset-row-wrapper > *:last-child { margin-bottom: 0px !important; }
1163
1042
 
1164
- .apirocket-summary-help-content a {
1165
- display: block;
1166
- color: #737373;
1167
- }
1043
+ /* Responsive */
1168
1044
 
1169
1045
  @media (max-width: 1000px) {
1170
- .apirocket-summary-top { display: none; }
1171
- .apirocket-summary-header { margin-top: 32px; }
1172
- }
1173
1046
 
1174
- @media (max-width: 720px) {
1175
- .apirocket-summary-section-subtitle { margin-top: 24px; }
1176
- .apirocket-summary-header {
1177
- flex-direction: column;
1178
- align-items: center;
1179
- text-align: center;
1047
+ .apirocket-checkout-mobile { display: block; }
1048
+
1049
+ .apirocket-checkout-wrap {
1050
+ flex-flow: column;
1051
+ margin: 0;
1052
+ padding: 0;
1053
+ width: 100%;
1180
1054
  }
1181
- .apirocket-summary-header-icon {
1182
- margin-right: 0px;
1183
- margin-bottom: 16px;
1055
+
1056
+ .apirocket-checkout-main,
1057
+ .apirocket-checkout-summary {
1058
+ width: 90%;
1059
+ max-width: 560px;
1060
+ margin: 0 auto;
1061
+ padding: 0;
1184
1062
  }
1185
- .apirocket-summary-header-title {
1186
- font-size: 28px;
1187
- margin-bottom: 8px;
1063
+
1064
+ .apirocket-checkout-summary {
1065
+ /* order: 0;
1066
+ padding: 16px 0; */
1067
+ display: none;
1188
1068
  }
1189
- }
1190
- .apirocket-button,
1191
- button.apirocket-button {
1192
- box-sizing: border-box !important;
1193
- display: block;
1194
- width: 100%;
1195
- padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1196
- margin: 0px;
1197
- border-radius: var(--cart-button-border-radius, 4px);
1198
- background-color: var(--cart-button-background-color, transparent);
1199
- border: 1px solid var(--cart-button-border-color, #e5e5e5);
1200
- color: var(--cart-button-font-color, #737373);
1201
- line-height: 1;
1202
- font-size: var(--cart-button-font-size, 16px);
1203
- font-weight: var(--cart-button-font-weight, normal);
1204
- text-align: center;
1205
- transition-property: color, border-color, background-color, box-shadow;
1206
- transition-timing-function: ease;
1207
- transition-duration: 350ms;
1208
- cursor: pointer;
1209
- }
1069
+ .apirocket-checkout-summary::after { display: none; }
1210
1070
 
1211
- .apirocket-button:hover {
1212
- background-color: var(--cart-button-background-color-hover, transparent);
1213
- border-color: var(--cart-button-border-color-hover, #404040);
1214
- color: var(--cart-button-font-color-hover, #404040);
1215
- }
1071
+ .apirocket-checkout-summary-header,
1072
+ .apirocket-checkout-summary-login { display: none; }
1216
1073
 
1217
- .apirocket-button:focus {
1218
- outline: none;
1219
- text-decoration: underline;
1220
- }
1221
- /*
1222
- .apirocket-button-loading {
1223
- position: relative;
1224
- } */
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; }
1225
1079
 
1226
- .apirocket-button-wraper {
1227
- position: relative;
1228
- display: inline-block;
1229
- width: 32px;
1080
+ .apirocket-checkout-logo { display: none; }
1230
1081
  }
1231
1082
 
1232
- .apirocket-button-spinner {
1233
- position: absolute;
1234
- width: 22px;
1235
- height: 22px;
1236
- top: -11px;
1237
- left: 0;
1238
- right: 0;
1239
- bottom: 0;
1240
- margin: auto;
1241
- border: 4px solid currentColor;
1242
- border-top-color: transparent !important;
1243
- border-radius: 50%;
1244
- animation: button-loading-spinner 1s ease infinite;
1245
- }
1246
1083
 
1247
- @keyframes button-loading-spinner {
1248
- from { transform: rotate(0turn) }
1249
- to { transform: rotate(1turn) }
1250
- }
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;
1104
+ }
1105
+
1106
+ .apirocket-checkout-footer ul {
1107
+ display: block;
1108
+ text-align: center !important;
1109
+ line-height: 32px !important;
1110
+ }
1111
+
1112
+ .apirocket-checkout-footer ul li {
1113
+ display: inline-block;
1114
+ }
1115
+
1116
+ .apircoket-checkout-legal { text-align: center; }
1117
+
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
+ }
1251
1145
 
1252
- .apirocket-button-link,
1253
- button.apirocket-button-link {
1254
- display: flex;
1255
- align-items: center;
1256
- text-align: left;
1257
- justify-content: flex-start;
1258
- align-items: center;
1259
- border: none;
1260
- padding-left: 0;
1261
- padding-right: 0;
1262
- width: auto;
1263
- overflow: hidden;
1264
- white-space: nowrap;
1265
- text-overflow: ellipsis;
1266
- }
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;
1153
+ }
1267
1154
 
1268
- .apirocket-button-link span {
1269
- margin-left: 16px;
1270
- margin-right: 16px;
1271
- }
1155
+ .apirocket-checkout-summary-row {
1156
+ padding-top: 8px;
1157
+ }
1272
1158
 
1273
- .apirocket-button-primary,
1274
- button.apirocket-button-primary {
1275
- background-color: var(--cart-button-primary-background-color, #1d4ed8);
1276
- border-color: var(--cart-button-primary-border-color, #1d4ed8);
1277
- color: var(--cart-button-primary-text-color, #fff);
1278
- }
1159
+ .apirocket-checkout-summary-label {
1160
+ font-size: 14px;
1161
+ line-height: 14px;
1162
+ }
1279
1163
 
1280
- button.apirocket-button-primary:disabled {
1281
- background-color: #eee;
1282
- border-color: #eee;
1283
- color: #ccc;
1284
- }
1164
+ .apirocket-checkout-summary-value,
1165
+ .apirocket-checkout-summary-value-total {
1166
+ font-size: 16px;
1167
+ line-height: 16px;
1168
+ }
1285
1169
 
1286
- .apirocket-button-primary:hover {
1287
- background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1288
- border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1289
- color: var(--cart-button-primary-text-color-hover, #fff);
1290
- box-shadow: var(--cart-shadow-button-primary-hover, none);
1291
- }
1170
+ .apirocket-checkout-mobile .apirocket-checkout-logo img {
1171
+ max-height: 55px;
1172
+ }
1292
1173
 
1174
+ .apirocket-checkout-steps-summary { margin-top: 24px; }
1293
1175
 
1294
- @media (max-width: 720px) {
1176
+ .apirocket-checkout-steps-summary-row { position: relative; }
1295
1177
 
1296
- .apirocket-button-link {
1297
- width: 100%;
1298
- justify-content: center;
1178
+ .apirocket-checkout-steps-summary-label {
1179
+ position: absolute;
1180
+ font-size: 14px;
1299
1181
  }
1300
1182
 
1183
+ .apirocket-checkout-steps-summary-text { margin-top: 18px; }
1184
+ .apirocket-checkout-steps-summary-link { font-size: 12px; }
1185
+
1301
1186
  }
1302
1187
 
1303
- .apirocket-form-input {
1188
+
1189
+ .apirocket-error-block {
1190
+ display: flex;
1191
+ justify-content: start;
1192
+ align-items: center;
1193
+ background-color: #fef2f2;
1194
+ padding: 16px;
1195
+ color: #dc2626;
1196
+ font-size: 14px;
1197
+ line-height: 18px;
1198
+ border-radius: 8px;
1199
+ margin-top: 16px;
1200
+ margin-bottom: 0px;
1201
+ }
1202
+
1203
+ .apirocket-error-block-icon {
1204
+ margin-right: 12px;
1205
+ }.apirocket-form-input {
1304
1206
  display: block;
1305
1207
  position: relative;
1306
1208
  margin-bottom: 16px;
@@ -1878,20 +1780,118 @@ button.apirocket-button-primary:disabled {
1878
1780
  text-align: center;
1879
1781
  line-height: 16px;
1880
1782
  margin-bottom: 32px;
1881
- }.apirocket-error-block {
1783
+ }
1784
+ .apirocket-button,
1785
+ button.apirocket-button {
1786
+ box-sizing: border-box !important;
1787
+ display: block;
1788
+ width: 100%;
1789
+ padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
1790
+ margin: 0px;
1791
+ border-radius: var(--cart-button-border-radius, 4px);
1792
+ background-color: var(--cart-button-background-color, transparent);
1793
+ border: 1px solid var(--cart-button-border-color, #e5e5e5);
1794
+ color: var(--cart-button-font-color, #737373);
1795
+ line-height: 1;
1796
+ font-size: var(--cart-button-font-size, 16px);
1797
+ font-weight: var(--cart-button-font-weight, normal);
1798
+ text-align: center;
1799
+ transition-property: color, border-color, background-color, box-shadow;
1800
+ transition-timing-function: ease;
1801
+ transition-duration: 350ms;
1802
+ cursor: pointer;
1803
+ }
1804
+
1805
+ .apirocket-button:hover {
1806
+ background-color: var(--cart-button-background-color-hover, transparent);
1807
+ border-color: var(--cart-button-border-color-hover, #404040);
1808
+ color: var(--cart-button-font-color-hover, #404040);
1809
+ }
1810
+
1811
+ .apirocket-button:focus {
1812
+ outline: none;
1813
+ text-decoration: underline;
1814
+ }
1815
+ /*
1816
+ .apirocket-button-loading {
1817
+ position: relative;
1818
+ } */
1819
+
1820
+ .apirocket-button-wraper {
1821
+ position: relative;
1822
+ display: inline-block;
1823
+ width: 32px;
1824
+ }
1825
+
1826
+ .apirocket-button-spinner {
1827
+ position: absolute;
1828
+ width: 22px;
1829
+ height: 22px;
1830
+ top: -11px;
1831
+ left: 0;
1832
+ right: 0;
1833
+ bottom: 0;
1834
+ margin: auto;
1835
+ border: 4px solid currentColor;
1836
+ border-top-color: transparent !important;
1837
+ border-radius: 50%;
1838
+ animation: button-loading-spinner 1s ease infinite;
1839
+ }
1840
+
1841
+ @keyframes button-loading-spinner {
1842
+ from { transform: rotate(0turn) }
1843
+ to { transform: rotate(1turn) }
1844
+ }
1845
+
1846
+ .apirocket-button-link,
1847
+ button.apirocket-button-link {
1882
1848
  display: flex;
1883
- justify-content: start;
1884
1849
  align-items: center;
1885
- background-color: #fef2f2;
1886
- padding: 16px;
1887
- color: #dc2626;
1888
- font-size: 14px;
1889
- line-height: 18px;
1890
- border-radius: 8px;
1891
- margin-top: 16px;
1892
- margin-bottom: 0px;
1893
- }
1850
+ text-align: left;
1851
+ justify-content: flex-start;
1852
+ align-items: center;
1853
+ border: none;
1854
+ padding-left: 0;
1855
+ padding-right: 0;
1856
+ width: auto;
1857
+ overflow: hidden;
1858
+ white-space: nowrap;
1859
+ text-overflow: ellipsis;
1860
+ }
1894
1861
 
1895
- .apirocket-error-block-icon {
1896
- margin-right: 12px;
1897
- }.spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}
1862
+ .apirocket-button-link span {
1863
+ margin-left: 16px;
1864
+ margin-right: 16px;
1865
+ }
1866
+
1867
+ .apirocket-button-primary,
1868
+ button.apirocket-button-primary {
1869
+ background-color: var(--cart-button-primary-background-color, #1d4ed8);
1870
+ border-color: var(--cart-button-primary-border-color, #1d4ed8);
1871
+ color: var(--cart-button-primary-text-color, #fff);
1872
+ }
1873
+
1874
+ button.apirocket-button-primary:disabled {
1875
+ background-color: #eee;
1876
+ border-color: #eee;
1877
+ color: #ccc;
1878
+ }
1879
+
1880
+ .apirocket-button-primary:hover {
1881
+ background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
1882
+ border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
1883
+ color: var(--cart-button-primary-text-color-hover, #fff);
1884
+ box-shadow: var(--cart-shadow-button-primary-hover, none);
1885
+ }
1886
+
1887
+
1888
+ @media (max-width: 720px) {
1889
+
1890
+ .apirocket-button-link {
1891
+ width: 100%;
1892
+ justify-content: center;
1893
+ }
1894
+
1895
+ }
1896
+
1897
+ .spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}