apirocket 0.0.11 → 0.0.12

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