apirocket 0.0.14 → 0.0.18

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