@reevit/react 0.1.0 → 0.2.0
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.
- package/dist/index.d.mts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +165 -126
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1,35 +1,48 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @reevit/react - Checkout Widget Styles
|
|
3
|
-
*
|
|
3
|
+
* Minimal design system matching Reevit dashboard
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
/*
|
|
6
|
+
/* Import Geist Mono font */
|
|
7
|
+
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap');
|
|
8
|
+
|
|
9
|
+
/* CSS Variables for theming - Light mode */
|
|
7
10
|
:root {
|
|
8
|
-
--reevit-primary:
|
|
9
|
-
--reevit-primary-hover:
|
|
10
|
-
--reevit-
|
|
11
|
-
--reevit-
|
|
12
|
-
--reevit-
|
|
13
|
-
--reevit-
|
|
14
|
-
--reevit-text
|
|
15
|
-
--reevit-
|
|
16
|
-
--reevit-
|
|
17
|
-
--reevit-
|
|
18
|
-
--reevit-
|
|
19
|
-
--reevit-
|
|
20
|
-
--reevit-
|
|
21
|
-
--reevit-
|
|
22
|
-
--reevit-
|
|
11
|
+
--reevit-primary: oklch(0.922 0 0);
|
|
12
|
+
--reevit-primary-hover: oklch(0.85 0 0);
|
|
13
|
+
--reevit-primary-foreground: oklch(0.145 0 0);
|
|
14
|
+
--reevit-background: oklch(1 0 0);
|
|
15
|
+
--reevit-surface: oklch(0.97 0 0);
|
|
16
|
+
--reevit-border: oklch(0.922 0 0);
|
|
17
|
+
--reevit-text: oklch(0.145 0 0);
|
|
18
|
+
--reevit-text-secondary: oklch(0.556 0 0);
|
|
19
|
+
--reevit-muted: oklch(0.708 0 0);
|
|
20
|
+
--reevit-success: oklch(0.696 0.17 162.48);
|
|
21
|
+
--reevit-error: oklch(0.577 0.245 27.325);
|
|
22
|
+
--reevit-warning: oklch(0.828 0.189 84.429);
|
|
23
|
+
--reevit-radius: 0.625rem;
|
|
24
|
+
--reevit-radius-sm: 0.5rem;
|
|
25
|
+
--reevit-radius-lg: 0.75rem;
|
|
26
|
+
--reevit-font: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
|
|
27
|
+
--reevit-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
|
28
|
+
--reevit-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
23
29
|
}
|
|
24
30
|
|
|
25
31
|
/* Dark mode support */
|
|
26
32
|
@media (prefers-color-scheme: dark) {
|
|
27
33
|
:root {
|
|
28
|
-
--reevit-
|
|
29
|
-
--reevit-
|
|
30
|
-
--reevit-
|
|
31
|
-
--reevit-
|
|
32
|
-
--reevit-
|
|
34
|
+
--reevit-primary: oklch(0.922 0 0);
|
|
35
|
+
--reevit-primary-hover: oklch(0.85 0 0);
|
|
36
|
+
--reevit-primary-foreground: oklch(0.145 0 0);
|
|
37
|
+
--reevit-background: oklch(0.145 0 0);
|
|
38
|
+
--reevit-surface: oklch(0.205 0 0);
|
|
39
|
+
--reevit-border: oklch(1 0 0 / 10%);
|
|
40
|
+
--reevit-text: oklch(0.985 0 0);
|
|
41
|
+
--reevit-text-secondary: oklch(0.708 0 0);
|
|
42
|
+
--reevit-muted: oklch(0.556 0 0);
|
|
43
|
+
--reevit-success: oklch(0.696 0.17 162.48);
|
|
44
|
+
--reevit-error: oklch(0.704 0.191 22.216);
|
|
45
|
+
--reevit-warning: oklch(0.828 0.189 84.429);
|
|
33
46
|
}
|
|
34
47
|
}
|
|
35
48
|
|
|
@@ -37,8 +50,9 @@
|
|
|
37
50
|
.reevit-overlay {
|
|
38
51
|
position: fixed;
|
|
39
52
|
inset: 0;
|
|
40
|
-
background: rgba(0, 0, 0, 0.
|
|
41
|
-
backdrop-filter: blur(
|
|
53
|
+
background: rgba(0, 0, 0, 0.7);
|
|
54
|
+
backdrop-filter: blur(8px);
|
|
55
|
+
-webkit-backdrop-filter: blur(8px);
|
|
42
56
|
display: flex;
|
|
43
57
|
align-items: center;
|
|
44
58
|
justify-content: center;
|
|
@@ -55,22 +69,23 @@
|
|
|
55
69
|
/* ===== MODAL ===== */
|
|
56
70
|
.reevit-modal {
|
|
57
71
|
background: var(--reevit-background);
|
|
58
|
-
border-radius: var(--reevit-radius);
|
|
72
|
+
border-radius: var(--reevit-radius-lg);
|
|
73
|
+
border: 1px solid var(--reevit-border);
|
|
59
74
|
box-shadow: var(--reevit-shadow);
|
|
60
75
|
width: 100%;
|
|
61
|
-
max-width:
|
|
76
|
+
max-width: 400px;
|
|
62
77
|
max-height: 90vh;
|
|
63
78
|
overflow: hidden;
|
|
64
79
|
display: flex;
|
|
65
80
|
flex-direction: column;
|
|
66
81
|
font-family: var(--reevit-font);
|
|
67
|
-
animation: reevit-slide-up 0.
|
|
82
|
+
animation: reevit-slide-up 0.25s cubic-bezier(0.22, 1, 0.36, 1);
|
|
68
83
|
}
|
|
69
84
|
|
|
70
85
|
@keyframes reevit-slide-up {
|
|
71
86
|
from {
|
|
72
87
|
opacity: 0;
|
|
73
|
-
transform: translateY(
|
|
88
|
+
transform: translateY(16px) scale(0.98);
|
|
74
89
|
}
|
|
75
90
|
to {
|
|
76
91
|
opacity: 1;
|
|
@@ -79,7 +94,7 @@
|
|
|
79
94
|
}
|
|
80
95
|
|
|
81
96
|
.reevit-modal--success {
|
|
82
|
-
border:
|
|
97
|
+
border-color: var(--reevit-success);
|
|
83
98
|
}
|
|
84
99
|
|
|
85
100
|
/* Modal Header */
|
|
@@ -98,20 +113,20 @@
|
|
|
98
113
|
}
|
|
99
114
|
|
|
100
115
|
.reevit-modal__logo {
|
|
101
|
-
font-size:
|
|
102
|
-
font-weight:
|
|
116
|
+
font-size: 14px;
|
|
117
|
+
font-weight: 600;
|
|
103
118
|
color: var(--reevit-text);
|
|
104
|
-
letter-spacing: -0.
|
|
119
|
+
letter-spacing: -0.02em;
|
|
105
120
|
}
|
|
106
121
|
|
|
107
122
|
.reevit-modal__close {
|
|
108
|
-
width:
|
|
109
|
-
height:
|
|
110
|
-
border-radius:
|
|
111
|
-
border:
|
|
112
|
-
background:
|
|
123
|
+
width: 28px;
|
|
124
|
+
height: 28px;
|
|
125
|
+
border-radius: var(--reevit-radius-sm);
|
|
126
|
+
border: 1px solid var(--reevit-border);
|
|
127
|
+
background: transparent;
|
|
113
128
|
color: var(--reevit-text-secondary);
|
|
114
|
-
font-size:
|
|
129
|
+
font-size: 14px;
|
|
115
130
|
cursor: pointer;
|
|
116
131
|
display: flex;
|
|
117
132
|
align-items: center;
|
|
@@ -120,32 +135,35 @@
|
|
|
120
135
|
}
|
|
121
136
|
|
|
122
137
|
.reevit-modal__close:hover {
|
|
123
|
-
background: var(--reevit-
|
|
138
|
+
background: var(--reevit-surface);
|
|
124
139
|
color: var(--reevit-text);
|
|
140
|
+
border-color: var(--reevit-text-secondary);
|
|
125
141
|
}
|
|
126
142
|
|
|
127
143
|
/* Modal Amount */
|
|
128
144
|
.reevit-modal__amount {
|
|
129
|
-
padding:
|
|
145
|
+
padding: 32px 20px;
|
|
130
146
|
text-align: center;
|
|
131
|
-
background:
|
|
132
|
-
|
|
147
|
+
background: var(--reevit-surface);
|
|
148
|
+
border-bottom: 1px solid var(--reevit-border);
|
|
133
149
|
}
|
|
134
150
|
|
|
135
151
|
.reevit-modal__amount-label {
|
|
136
152
|
display: block;
|
|
137
|
-
font-size:
|
|
153
|
+
font-size: 11px;
|
|
154
|
+
font-weight: 500;
|
|
138
155
|
text-transform: uppercase;
|
|
139
|
-
letter-spacing:
|
|
140
|
-
|
|
141
|
-
margin-bottom:
|
|
156
|
+
letter-spacing: 0.1em;
|
|
157
|
+
color: var(--reevit-text-secondary);
|
|
158
|
+
margin-bottom: 8px;
|
|
142
159
|
}
|
|
143
160
|
|
|
144
161
|
.reevit-modal__amount-value {
|
|
145
162
|
display: block;
|
|
146
|
-
font-size:
|
|
163
|
+
font-size: 36px;
|
|
147
164
|
font-weight: 700;
|
|
148
|
-
letter-spacing: -
|
|
165
|
+
letter-spacing: -0.03em;
|
|
166
|
+
color: var(--reevit-text);
|
|
149
167
|
}
|
|
150
168
|
|
|
151
169
|
/* Modal Content */
|
|
@@ -157,14 +175,17 @@
|
|
|
157
175
|
|
|
158
176
|
/* Modal Footer */
|
|
159
177
|
.reevit-modal__footer {
|
|
160
|
-
padding:
|
|
178
|
+
padding: 14px 20px;
|
|
161
179
|
border-top: 1px solid var(--reevit-border);
|
|
162
180
|
text-align: center;
|
|
181
|
+
background: var(--reevit-surface);
|
|
163
182
|
}
|
|
164
183
|
|
|
165
184
|
.reevit-modal__secured {
|
|
166
|
-
font-size:
|
|
185
|
+
font-size: 11px;
|
|
186
|
+
font-weight: 500;
|
|
167
187
|
color: var(--reevit-text-secondary);
|
|
188
|
+
letter-spacing: 0.02em;
|
|
168
189
|
}
|
|
169
190
|
|
|
170
191
|
/* ===== PAYMENT METHOD SELECTOR ===== */
|
|
@@ -173,16 +194,17 @@
|
|
|
173
194
|
}
|
|
174
195
|
|
|
175
196
|
.reevit-method-selector__label {
|
|
176
|
-
font-size:
|
|
177
|
-
font-weight:
|
|
197
|
+
font-size: 12px;
|
|
198
|
+
font-weight: 500;
|
|
178
199
|
color: var(--reevit-text);
|
|
179
200
|
margin-bottom: 12px;
|
|
201
|
+
letter-spacing: 0.02em;
|
|
180
202
|
}
|
|
181
203
|
|
|
182
204
|
.reevit-method-selector__options {
|
|
183
205
|
display: flex;
|
|
184
206
|
flex-direction: column;
|
|
185
|
-
gap:
|
|
207
|
+
gap: 8px;
|
|
186
208
|
}
|
|
187
209
|
|
|
188
210
|
.reevit-method-option {
|
|
@@ -190,9 +212,9 @@
|
|
|
190
212
|
align-items: center;
|
|
191
213
|
gap: 12px;
|
|
192
214
|
padding: 14px 16px;
|
|
193
|
-
background:
|
|
194
|
-
border:
|
|
195
|
-
border-radius: var(--reevit-radius
|
|
215
|
+
background: transparent;
|
|
216
|
+
border: 1px solid var(--reevit-border);
|
|
217
|
+
border-radius: var(--reevit-radius);
|
|
196
218
|
cursor: pointer;
|
|
197
219
|
transition: all 0.15s ease;
|
|
198
220
|
text-align: left;
|
|
@@ -200,13 +222,13 @@
|
|
|
200
222
|
}
|
|
201
223
|
|
|
202
224
|
.reevit-method-option:hover {
|
|
203
|
-
border-color: var(--reevit-
|
|
204
|
-
background: var(--reevit-
|
|
225
|
+
border-color: var(--reevit-text-secondary);
|
|
226
|
+
background: var(--reevit-surface);
|
|
205
227
|
}
|
|
206
228
|
|
|
207
229
|
.reevit-method-option--selected {
|
|
208
|
-
border-color: var(--reevit-
|
|
209
|
-
background:
|
|
230
|
+
border-color: var(--reevit-text);
|
|
231
|
+
background: var(--reevit-surface);
|
|
210
232
|
}
|
|
211
233
|
|
|
212
234
|
.reevit-method-option--disabled {
|
|
@@ -215,8 +237,9 @@
|
|
|
215
237
|
}
|
|
216
238
|
|
|
217
239
|
.reevit-method-option__icon {
|
|
218
|
-
font-size:
|
|
240
|
+
font-size: 20px;
|
|
219
241
|
flex-shrink: 0;
|
|
242
|
+
opacity: 0.8;
|
|
220
243
|
}
|
|
221
244
|
|
|
222
245
|
.reevit-method-option__content {
|
|
@@ -226,48 +249,52 @@
|
|
|
226
249
|
|
|
227
250
|
.reevit-method-option__label {
|
|
228
251
|
display: block;
|
|
229
|
-
font-size:
|
|
252
|
+
font-size: 13px;
|
|
230
253
|
font-weight: 600;
|
|
231
254
|
color: var(--reevit-text);
|
|
255
|
+
letter-spacing: -0.01em;
|
|
232
256
|
}
|
|
233
257
|
|
|
234
258
|
.reevit-method-option__description {
|
|
235
259
|
display: block;
|
|
236
|
-
font-size:
|
|
260
|
+
font-size: 11px;
|
|
237
261
|
color: var(--reevit-text-secondary);
|
|
238
262
|
margin-top: 2px;
|
|
263
|
+
letter-spacing: 0.01em;
|
|
239
264
|
}
|
|
240
265
|
|
|
241
266
|
.reevit-method-option__check {
|
|
242
|
-
color: var(--reevit-
|
|
267
|
+
color: var(--reevit-text);
|
|
243
268
|
flex-shrink: 0;
|
|
269
|
+
font-size: 14px;
|
|
244
270
|
}
|
|
245
271
|
|
|
246
272
|
/* ===== MOBILE MONEY FORM ===== */
|
|
247
273
|
.reevit-momo-form {
|
|
248
274
|
display: flex;
|
|
249
275
|
flex-direction: column;
|
|
250
|
-
gap:
|
|
276
|
+
gap: 16px;
|
|
251
277
|
}
|
|
252
278
|
|
|
253
279
|
.reevit-momo-form__field {
|
|
254
280
|
display: flex;
|
|
255
281
|
flex-direction: column;
|
|
256
|
-
gap:
|
|
282
|
+
gap: 6px;
|
|
257
283
|
}
|
|
258
284
|
|
|
259
285
|
.reevit-momo-form__label {
|
|
260
|
-
font-size:
|
|
261
|
-
font-weight:
|
|
286
|
+
font-size: 12px;
|
|
287
|
+
font-weight: 500;
|
|
262
288
|
color: var(--reevit-text);
|
|
289
|
+
letter-spacing: 0.02em;
|
|
263
290
|
}
|
|
264
291
|
|
|
265
292
|
.reevit-momo-form__input {
|
|
266
|
-
padding:
|
|
267
|
-
font-size:
|
|
268
|
-
border:
|
|
269
|
-
border-radius: var(--reevit-radius
|
|
270
|
-
background:
|
|
293
|
+
padding: 10px 14px;
|
|
294
|
+
font-size: 14px;
|
|
295
|
+
border: 1px solid var(--reevit-border);
|
|
296
|
+
border-radius: var(--reevit-radius);
|
|
297
|
+
background: transparent;
|
|
271
298
|
color: var(--reevit-text);
|
|
272
299
|
transition: all 0.15s ease;
|
|
273
300
|
font-family: var(--reevit-font);
|
|
@@ -275,8 +302,8 @@
|
|
|
275
302
|
|
|
276
303
|
.reevit-momo-form__input:focus {
|
|
277
304
|
outline: none;
|
|
278
|
-
border-color: var(--reevit-
|
|
279
|
-
|
|
305
|
+
border-color: var(--reevit-text-secondary);
|
|
306
|
+
background: var(--reevit-surface);
|
|
280
307
|
}
|
|
281
308
|
|
|
282
309
|
.reevit-momo-form__input--error {
|
|
@@ -284,32 +311,32 @@
|
|
|
284
311
|
}
|
|
285
312
|
|
|
286
313
|
.reevit-momo-form__input--error:focus {
|
|
287
|
-
|
|
314
|
+
border-color: var(--reevit-error);
|
|
288
315
|
}
|
|
289
316
|
|
|
290
317
|
.reevit-momo-form__formatted {
|
|
291
|
-
font-size:
|
|
318
|
+
font-size: 11px;
|
|
292
319
|
color: var(--reevit-text-secondary);
|
|
293
320
|
}
|
|
294
321
|
|
|
295
322
|
.reevit-momo-form__error {
|
|
296
|
-
font-size:
|
|
323
|
+
font-size: 11px;
|
|
297
324
|
color: var(--reevit-error);
|
|
298
325
|
}
|
|
299
326
|
|
|
300
327
|
.reevit-momo-form__networks {
|
|
301
328
|
display: flex;
|
|
302
|
-
gap:
|
|
329
|
+
gap: 8px;
|
|
303
330
|
}
|
|
304
331
|
|
|
305
332
|
.reevit-network-btn {
|
|
306
333
|
flex: 1;
|
|
307
|
-
padding:
|
|
308
|
-
font-size:
|
|
334
|
+
padding: 10px 14px;
|
|
335
|
+
font-size: 12px;
|
|
309
336
|
font-weight: 600;
|
|
310
|
-
border:
|
|
311
|
-
border-radius: var(--reevit-radius
|
|
312
|
-
background:
|
|
337
|
+
border: 1px solid var(--reevit-border);
|
|
338
|
+
border-radius: var(--reevit-radius);
|
|
339
|
+
background: transparent;
|
|
313
340
|
color: var(--reevit-text);
|
|
314
341
|
cursor: pointer;
|
|
315
342
|
transition: all 0.15s ease;
|
|
@@ -317,26 +344,27 @@
|
|
|
317
344
|
}
|
|
318
345
|
|
|
319
346
|
.reevit-network-btn:hover {
|
|
320
|
-
border-color: var(--
|
|
347
|
+
border-color: var(--reevit-text-secondary);
|
|
348
|
+
background: var(--reevit-surface);
|
|
321
349
|
}
|
|
322
350
|
|
|
323
351
|
.reevit-network-btn--selected {
|
|
324
|
-
border-color: var(--
|
|
325
|
-
background: var(--
|
|
326
|
-
color:
|
|
352
|
+
border-color: var(--reevit-text);
|
|
353
|
+
background: var(--reevit-text);
|
|
354
|
+
color: var(--reevit-background);
|
|
327
355
|
}
|
|
328
356
|
|
|
329
357
|
.reevit-momo-form__actions {
|
|
330
358
|
display: flex;
|
|
331
|
-
gap:
|
|
359
|
+
gap: 10px;
|
|
332
360
|
margin-top: 8px;
|
|
333
361
|
}
|
|
334
362
|
|
|
335
363
|
.reevit-momo-form__hint {
|
|
336
|
-
font-size:
|
|
364
|
+
font-size: 11px;
|
|
337
365
|
color: var(--reevit-text-secondary);
|
|
338
366
|
text-align: center;
|
|
339
|
-
margin-top:
|
|
367
|
+
margin-top: 4px;
|
|
340
368
|
}
|
|
341
369
|
|
|
342
370
|
/* ===== BUTTONS ===== */
|
|
@@ -344,22 +372,23 @@
|
|
|
344
372
|
display: inline-flex;
|
|
345
373
|
align-items: center;
|
|
346
374
|
justify-content: center;
|
|
347
|
-
gap:
|
|
348
|
-
padding:
|
|
349
|
-
font-size:
|
|
375
|
+
gap: 6px;
|
|
376
|
+
padding: 10px 18px;
|
|
377
|
+
font-size: 13px;
|
|
350
378
|
font-weight: 600;
|
|
351
|
-
border-radius: var(--reevit-radius
|
|
379
|
+
border-radius: var(--reevit-radius);
|
|
352
380
|
cursor: pointer;
|
|
353
381
|
transition: all 0.15s ease;
|
|
354
382
|
font-family: var(--reevit-font);
|
|
355
383
|
border: none;
|
|
356
|
-
min-height:
|
|
384
|
+
min-height: 42px;
|
|
385
|
+
letter-spacing: -0.01em;
|
|
357
386
|
}
|
|
358
387
|
|
|
359
388
|
.reevit-btn--primary {
|
|
360
389
|
flex: 1;
|
|
361
390
|
background: var(--reevit-primary);
|
|
362
|
-
color:
|
|
391
|
+
color: var(--reevit-primary-foreground);
|
|
363
392
|
}
|
|
364
393
|
|
|
365
394
|
.reevit-btn--primary:hover:not(:disabled) {
|
|
@@ -372,26 +401,28 @@
|
|
|
372
401
|
}
|
|
373
402
|
|
|
374
403
|
.reevit-btn--secondary {
|
|
375
|
-
background:
|
|
404
|
+
background: transparent;
|
|
376
405
|
color: var(--reevit-text);
|
|
377
|
-
border:
|
|
406
|
+
border: 1px solid var(--reevit-border);
|
|
378
407
|
}
|
|
379
408
|
|
|
380
409
|
.reevit-btn--secondary:hover:not(:disabled) {
|
|
381
|
-
background: var(--reevit-
|
|
410
|
+
background: var(--reevit-surface);
|
|
411
|
+
border-color: var(--reevit-text-secondary);
|
|
382
412
|
}
|
|
383
413
|
|
|
384
414
|
.reevit-trigger-btn {
|
|
385
|
-
padding:
|
|
386
|
-
font-size:
|
|
415
|
+
padding: 10px 18px;
|
|
416
|
+
font-size: 13px;
|
|
387
417
|
font-weight: 600;
|
|
388
418
|
background: var(--reevit-primary);
|
|
389
|
-
color:
|
|
419
|
+
color: var(--reevit-primary-foreground);
|
|
390
420
|
border: none;
|
|
391
|
-
border-radius: var(--reevit-radius
|
|
421
|
+
border-radius: var(--reevit-radius);
|
|
392
422
|
cursor: pointer;
|
|
393
423
|
font-family: var(--reevit-font);
|
|
394
424
|
transition: all 0.15s ease;
|
|
425
|
+
letter-spacing: -0.01em;
|
|
395
426
|
}
|
|
396
427
|
|
|
397
428
|
.reevit-trigger-btn:hover {
|
|
@@ -408,16 +439,16 @@
|
|
|
408
439
|
justify-content: center;
|
|
409
440
|
padding: 40px 20px;
|
|
410
441
|
text-align: center;
|
|
411
|
-
gap:
|
|
442
|
+
gap: 12px;
|
|
412
443
|
}
|
|
413
444
|
|
|
414
445
|
.reevit-success__icon {
|
|
415
|
-
width:
|
|
416
|
-
height:
|
|
446
|
+
width: 48px;
|
|
447
|
+
height: 48px;
|
|
417
448
|
border-radius: 50%;
|
|
418
449
|
background: var(--reevit-success);
|
|
419
450
|
color: white;
|
|
420
|
-
font-size:
|
|
451
|
+
font-size: 24px;
|
|
421
452
|
display: flex;
|
|
422
453
|
align-items: center;
|
|
423
454
|
justify-content: center;
|
|
@@ -425,12 +456,12 @@
|
|
|
425
456
|
}
|
|
426
457
|
|
|
427
458
|
.reevit-error__icon {
|
|
428
|
-
width:
|
|
429
|
-
height:
|
|
459
|
+
width: 48px;
|
|
460
|
+
height: 48px;
|
|
430
461
|
border-radius: 50%;
|
|
431
462
|
background: var(--reevit-error);
|
|
432
463
|
color: white;
|
|
433
|
-
font-size:
|
|
464
|
+
font-size: 24px;
|
|
434
465
|
display: flex;
|
|
435
466
|
align-items: center;
|
|
436
467
|
justify-content: center;
|
|
@@ -438,33 +469,34 @@
|
|
|
438
469
|
|
|
439
470
|
@keyframes reevit-pop {
|
|
440
471
|
0% { transform: scale(0); }
|
|
441
|
-
50% { transform: scale(1.
|
|
472
|
+
50% { transform: scale(1.1); }
|
|
442
473
|
100% { transform: scale(1); }
|
|
443
474
|
}
|
|
444
475
|
|
|
445
476
|
.reevit-success h3,
|
|
446
477
|
.reevit-error h3 {
|
|
447
|
-
font-size:
|
|
478
|
+
font-size: 14px;
|
|
448
479
|
font-weight: 600;
|
|
449
480
|
color: var(--reevit-text);
|
|
450
481
|
margin: 0;
|
|
482
|
+
letter-spacing: -0.01em;
|
|
451
483
|
}
|
|
452
484
|
|
|
453
485
|
.reevit-success p,
|
|
454
486
|
.reevit-error p {
|
|
455
|
-
font-size:
|
|
487
|
+
font-size: 12px;
|
|
456
488
|
color: var(--reevit-text-secondary);
|
|
457
489
|
margin: 0;
|
|
458
490
|
}
|
|
459
491
|
|
|
460
492
|
/* ===== SPINNER ===== */
|
|
461
493
|
.reevit-spinner {
|
|
462
|
-
width:
|
|
463
|
-
height:
|
|
464
|
-
border:
|
|
465
|
-
border-top-color: var(--reevit-
|
|
494
|
+
width: 20px;
|
|
495
|
+
height: 20px;
|
|
496
|
+
border: 2px solid var(--reevit-border);
|
|
497
|
+
border-top-color: var(--reevit-text);
|
|
466
498
|
border-radius: 50%;
|
|
467
|
-
animation: reevit-spin 0.
|
|
499
|
+
animation: reevit-spin 0.7s linear infinite;
|
|
468
500
|
}
|
|
469
501
|
|
|
470
502
|
@keyframes reevit-spin {
|
|
@@ -473,9 +505,15 @@
|
|
|
473
505
|
|
|
474
506
|
/* Large spinner for loading states */
|
|
475
507
|
.reevit-loading .reevit-spinner {
|
|
476
|
-
width:
|
|
477
|
-
height:
|
|
478
|
-
border-width:
|
|
508
|
+
width: 32px;
|
|
509
|
+
height: 32px;
|
|
510
|
+
border-width: 2px;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.reevit-loading p {
|
|
514
|
+
font-size: 12px;
|
|
515
|
+
color: var(--reevit-text-secondary);
|
|
516
|
+
margin: 0;
|
|
479
517
|
}
|
|
480
518
|
|
|
481
519
|
/* ===== PSP BRIDGE ===== */
|
|
@@ -486,18 +524,18 @@
|
|
|
486
524
|
justify-content: center;
|
|
487
525
|
padding: 40px 20px;
|
|
488
526
|
text-align: center;
|
|
489
|
-
gap:
|
|
527
|
+
gap: 12px;
|
|
490
528
|
}
|
|
491
529
|
|
|
492
530
|
.reevit-psp-bridge__loading p {
|
|
493
|
-
font-size:
|
|
531
|
+
font-size: 12px;
|
|
494
532
|
color: var(--reevit-text-secondary);
|
|
495
533
|
margin: 0;
|
|
496
534
|
}
|
|
497
535
|
|
|
498
536
|
/* ===== METHOD STEP ACTIONS ===== */
|
|
499
537
|
.reevit-method-step__actions {
|
|
500
|
-
margin-top:
|
|
538
|
+
margin-top: 16px;
|
|
501
539
|
}
|
|
502
540
|
|
|
503
541
|
/* ===== RESPONSIVE ===== */
|
|
@@ -505,7 +543,8 @@
|
|
|
505
543
|
.reevit-modal {
|
|
506
544
|
max-width: 100%;
|
|
507
545
|
max-height: 100%;
|
|
508
|
-
border-radius: 0;
|
|
546
|
+
border-radius: var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;
|
|
547
|
+
margin-top: auto;
|
|
509
548
|
}
|
|
510
549
|
|
|
511
550
|
.reevit-modal__amount-value {
|