@reevit/react 0.1.0 → 0.2.2
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 +11 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +11 -2
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +232 -132
- 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,19 @@
|
|
|
98
113
|
}
|
|
99
114
|
|
|
100
115
|
.reevit-modal__logo {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
letter-spacing: -0.5px;
|
|
116
|
+
height: 18px;
|
|
117
|
+
width: auto;
|
|
118
|
+
object-fit: contain;
|
|
105
119
|
}
|
|
106
120
|
|
|
107
121
|
.reevit-modal__close {
|
|
108
|
-
width:
|
|
109
|
-
height:
|
|
110
|
-
border-radius:
|
|
111
|
-
border:
|
|
112
|
-
background:
|
|
122
|
+
width: 28px;
|
|
123
|
+
height: 28px;
|
|
124
|
+
border-radius: var(--reevit-radius-sm);
|
|
125
|
+
border: 1px solid var(--reevit-border);
|
|
126
|
+
background: transparent;
|
|
113
127
|
color: var(--reevit-text-secondary);
|
|
114
|
-
font-size:
|
|
128
|
+
font-size: 14px;
|
|
115
129
|
cursor: pointer;
|
|
116
130
|
display: flex;
|
|
117
131
|
align-items: center;
|
|
@@ -120,32 +134,35 @@
|
|
|
120
134
|
}
|
|
121
135
|
|
|
122
136
|
.reevit-modal__close:hover {
|
|
123
|
-
background: var(--reevit-
|
|
137
|
+
background: var(--reevit-surface);
|
|
124
138
|
color: var(--reevit-text);
|
|
139
|
+
border-color: var(--reevit-text-secondary);
|
|
125
140
|
}
|
|
126
141
|
|
|
127
142
|
/* Modal Amount */
|
|
128
143
|
.reevit-modal__amount {
|
|
129
|
-
padding:
|
|
144
|
+
padding: 32px 20px;
|
|
130
145
|
text-align: center;
|
|
131
|
-
background:
|
|
132
|
-
|
|
146
|
+
background: var(--reevit-surface);
|
|
147
|
+
border-bottom: 1px solid var(--reevit-border);
|
|
133
148
|
}
|
|
134
149
|
|
|
135
150
|
.reevit-modal__amount-label {
|
|
136
151
|
display: block;
|
|
137
|
-
font-size:
|
|
152
|
+
font-size: 11px;
|
|
153
|
+
font-weight: 500;
|
|
138
154
|
text-transform: uppercase;
|
|
139
|
-
letter-spacing:
|
|
140
|
-
|
|
141
|
-
margin-bottom:
|
|
155
|
+
letter-spacing: 0.1em;
|
|
156
|
+
color: var(--reevit-text-secondary);
|
|
157
|
+
margin-bottom: 8px;
|
|
142
158
|
}
|
|
143
159
|
|
|
144
160
|
.reevit-modal__amount-value {
|
|
145
161
|
display: block;
|
|
146
|
-
font-size:
|
|
162
|
+
font-size: 36px;
|
|
147
163
|
font-weight: 700;
|
|
148
|
-
letter-spacing: -
|
|
164
|
+
letter-spacing: -0.03em;
|
|
165
|
+
color: var(--reevit-text);
|
|
149
166
|
}
|
|
150
167
|
|
|
151
168
|
/* Modal Content */
|
|
@@ -157,14 +174,17 @@
|
|
|
157
174
|
|
|
158
175
|
/* Modal Footer */
|
|
159
176
|
.reevit-modal__footer {
|
|
160
|
-
padding:
|
|
177
|
+
padding: 14px 20px;
|
|
161
178
|
border-top: 1px solid var(--reevit-border);
|
|
162
179
|
text-align: center;
|
|
180
|
+
background: var(--reevit-surface);
|
|
163
181
|
}
|
|
164
182
|
|
|
165
183
|
.reevit-modal__secured {
|
|
166
|
-
font-size:
|
|
184
|
+
font-size: 11px;
|
|
185
|
+
font-weight: 500;
|
|
167
186
|
color: var(--reevit-text-secondary);
|
|
187
|
+
letter-spacing: 0.02em;
|
|
168
188
|
}
|
|
169
189
|
|
|
170
190
|
/* ===== PAYMENT METHOD SELECTOR ===== */
|
|
@@ -173,16 +193,17 @@
|
|
|
173
193
|
}
|
|
174
194
|
|
|
175
195
|
.reevit-method-selector__label {
|
|
176
|
-
font-size:
|
|
177
|
-
font-weight:
|
|
196
|
+
font-size: 12px;
|
|
197
|
+
font-weight: 500;
|
|
178
198
|
color: var(--reevit-text);
|
|
179
199
|
margin-bottom: 12px;
|
|
200
|
+
letter-spacing: 0.02em;
|
|
180
201
|
}
|
|
181
202
|
|
|
182
203
|
.reevit-method-selector__options {
|
|
183
204
|
display: flex;
|
|
184
205
|
flex-direction: column;
|
|
185
|
-
gap:
|
|
206
|
+
gap: 8px;
|
|
186
207
|
}
|
|
187
208
|
|
|
188
209
|
.reevit-method-option {
|
|
@@ -190,9 +211,9 @@
|
|
|
190
211
|
align-items: center;
|
|
191
212
|
gap: 12px;
|
|
192
213
|
padding: 14px 16px;
|
|
193
|
-
background:
|
|
194
|
-
border:
|
|
195
|
-
border-radius: var(--reevit-radius
|
|
214
|
+
background: transparent;
|
|
215
|
+
border: 1px solid var(--reevit-border);
|
|
216
|
+
border-radius: var(--reevit-radius);
|
|
196
217
|
cursor: pointer;
|
|
197
218
|
transition: all 0.15s ease;
|
|
198
219
|
text-align: left;
|
|
@@ -200,13 +221,13 @@
|
|
|
200
221
|
}
|
|
201
222
|
|
|
202
223
|
.reevit-method-option:hover {
|
|
203
|
-
border-color: var(--reevit-
|
|
204
|
-
background: var(--reevit-
|
|
224
|
+
border-color: var(--reevit-text-secondary);
|
|
225
|
+
background: var(--reevit-surface);
|
|
205
226
|
}
|
|
206
227
|
|
|
207
228
|
.reevit-method-option--selected {
|
|
208
|
-
border-color: var(--reevit-
|
|
209
|
-
background:
|
|
229
|
+
border-color: var(--reevit-text);
|
|
230
|
+
background: var(--reevit-surface);
|
|
210
231
|
}
|
|
211
232
|
|
|
212
233
|
.reevit-method-option--disabled {
|
|
@@ -215,8 +236,9 @@
|
|
|
215
236
|
}
|
|
216
237
|
|
|
217
238
|
.reevit-method-option__icon {
|
|
218
|
-
font-size:
|
|
239
|
+
font-size: 20px;
|
|
219
240
|
flex-shrink: 0;
|
|
241
|
+
opacity: 0.8;
|
|
220
242
|
}
|
|
221
243
|
|
|
222
244
|
.reevit-method-option__content {
|
|
@@ -226,48 +248,52 @@
|
|
|
226
248
|
|
|
227
249
|
.reevit-method-option__label {
|
|
228
250
|
display: block;
|
|
229
|
-
font-size:
|
|
251
|
+
font-size: 13px;
|
|
230
252
|
font-weight: 600;
|
|
231
253
|
color: var(--reevit-text);
|
|
254
|
+
letter-spacing: -0.01em;
|
|
232
255
|
}
|
|
233
256
|
|
|
234
257
|
.reevit-method-option__description {
|
|
235
258
|
display: block;
|
|
236
|
-
font-size:
|
|
259
|
+
font-size: 11px;
|
|
237
260
|
color: var(--reevit-text-secondary);
|
|
238
261
|
margin-top: 2px;
|
|
262
|
+
letter-spacing: 0.01em;
|
|
239
263
|
}
|
|
240
264
|
|
|
241
265
|
.reevit-method-option__check {
|
|
242
|
-
color: var(--reevit-
|
|
266
|
+
color: var(--reevit-text);
|
|
243
267
|
flex-shrink: 0;
|
|
268
|
+
font-size: 14px;
|
|
244
269
|
}
|
|
245
270
|
|
|
246
271
|
/* ===== MOBILE MONEY FORM ===== */
|
|
247
272
|
.reevit-momo-form {
|
|
248
273
|
display: flex;
|
|
249
274
|
flex-direction: column;
|
|
250
|
-
gap:
|
|
275
|
+
gap: 16px;
|
|
251
276
|
}
|
|
252
277
|
|
|
253
278
|
.reevit-momo-form__field {
|
|
254
279
|
display: flex;
|
|
255
280
|
flex-direction: column;
|
|
256
|
-
gap:
|
|
281
|
+
gap: 6px;
|
|
257
282
|
}
|
|
258
283
|
|
|
259
284
|
.reevit-momo-form__label {
|
|
260
|
-
font-size:
|
|
261
|
-
font-weight:
|
|
285
|
+
font-size: 12px;
|
|
286
|
+
font-weight: 500;
|
|
262
287
|
color: var(--reevit-text);
|
|
288
|
+
letter-spacing: 0.02em;
|
|
263
289
|
}
|
|
264
290
|
|
|
265
291
|
.reevit-momo-form__input {
|
|
266
|
-
padding:
|
|
267
|
-
font-size:
|
|
268
|
-
border:
|
|
269
|
-
border-radius: var(--reevit-radius
|
|
270
|
-
background:
|
|
292
|
+
padding: 10px 14px;
|
|
293
|
+
font-size: 14px;
|
|
294
|
+
border: 1px solid var(--reevit-border);
|
|
295
|
+
border-radius: var(--reevit-radius);
|
|
296
|
+
background: transparent;
|
|
271
297
|
color: var(--reevit-text);
|
|
272
298
|
transition: all 0.15s ease;
|
|
273
299
|
font-family: var(--reevit-font);
|
|
@@ -275,8 +301,8 @@
|
|
|
275
301
|
|
|
276
302
|
.reevit-momo-form__input:focus {
|
|
277
303
|
outline: none;
|
|
278
|
-
border-color: var(--reevit-
|
|
279
|
-
|
|
304
|
+
border-color: var(--reevit-text-secondary);
|
|
305
|
+
background: var(--reevit-surface);
|
|
280
306
|
}
|
|
281
307
|
|
|
282
308
|
.reevit-momo-form__input--error {
|
|
@@ -284,32 +310,32 @@
|
|
|
284
310
|
}
|
|
285
311
|
|
|
286
312
|
.reevit-momo-form__input--error:focus {
|
|
287
|
-
|
|
313
|
+
border-color: var(--reevit-error);
|
|
288
314
|
}
|
|
289
315
|
|
|
290
316
|
.reevit-momo-form__formatted {
|
|
291
|
-
font-size:
|
|
317
|
+
font-size: 11px;
|
|
292
318
|
color: var(--reevit-text-secondary);
|
|
293
319
|
}
|
|
294
320
|
|
|
295
321
|
.reevit-momo-form__error {
|
|
296
|
-
font-size:
|
|
322
|
+
font-size: 11px;
|
|
297
323
|
color: var(--reevit-error);
|
|
298
324
|
}
|
|
299
325
|
|
|
300
326
|
.reevit-momo-form__networks {
|
|
301
327
|
display: flex;
|
|
302
|
-
gap:
|
|
328
|
+
gap: 8px;
|
|
303
329
|
}
|
|
304
330
|
|
|
305
331
|
.reevit-network-btn {
|
|
306
332
|
flex: 1;
|
|
307
|
-
padding:
|
|
308
|
-
font-size:
|
|
333
|
+
padding: 10px 14px;
|
|
334
|
+
font-size: 12px;
|
|
309
335
|
font-weight: 600;
|
|
310
|
-
border:
|
|
311
|
-
border-radius: var(--reevit-radius
|
|
312
|
-
background:
|
|
336
|
+
border: 1px solid var(--reevit-border);
|
|
337
|
+
border-radius: var(--reevit-radius);
|
|
338
|
+
background: transparent;
|
|
313
339
|
color: var(--reevit-text);
|
|
314
340
|
cursor: pointer;
|
|
315
341
|
transition: all 0.15s ease;
|
|
@@ -317,26 +343,38 @@
|
|
|
317
343
|
}
|
|
318
344
|
|
|
319
345
|
.reevit-network-btn:hover {
|
|
320
|
-
border-color: var(--
|
|
346
|
+
border-color: var(--reevit-text);
|
|
347
|
+
background: transparent;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.reevit-network-btn:focus {
|
|
351
|
+
outline: none;
|
|
352
|
+
border-color: var(--reevit-text);
|
|
353
|
+
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
321
354
|
}
|
|
322
355
|
|
|
323
356
|
.reevit-network-btn--selected {
|
|
324
|
-
border-color: var(--
|
|
325
|
-
background: var(--
|
|
326
|
-
color:
|
|
357
|
+
border-color: var(--reevit-text);
|
|
358
|
+
background: var(--reevit-text);
|
|
359
|
+
color: var(--reevit-background);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.reevit-network-btn--selected:hover {
|
|
363
|
+
background: var(--reevit-text-secondary);
|
|
364
|
+
border-color: var(--reevit-text-secondary);
|
|
327
365
|
}
|
|
328
366
|
|
|
329
367
|
.reevit-momo-form__actions {
|
|
330
368
|
display: flex;
|
|
331
|
-
gap:
|
|
369
|
+
gap: 10px;
|
|
332
370
|
margin-top: 8px;
|
|
333
371
|
}
|
|
334
372
|
|
|
335
373
|
.reevit-momo-form__hint {
|
|
336
|
-
font-size:
|
|
374
|
+
font-size: 11px;
|
|
337
375
|
color: var(--reevit-text-secondary);
|
|
338
376
|
text-align: center;
|
|
339
|
-
margin-top:
|
|
377
|
+
margin-top: 4px;
|
|
340
378
|
}
|
|
341
379
|
|
|
342
380
|
/* ===== BUTTONS ===== */
|
|
@@ -344,26 +382,40 @@
|
|
|
344
382
|
display: inline-flex;
|
|
345
383
|
align-items: center;
|
|
346
384
|
justify-content: center;
|
|
347
|
-
gap:
|
|
348
|
-
padding:
|
|
349
|
-
font-size:
|
|
385
|
+
gap: 6px;
|
|
386
|
+
padding: 10px 18px;
|
|
387
|
+
font-size: 13px;
|
|
350
388
|
font-weight: 600;
|
|
351
|
-
border-radius: var(--reevit-radius
|
|
389
|
+
border-radius: var(--reevit-radius);
|
|
352
390
|
cursor: pointer;
|
|
353
391
|
transition: all 0.15s ease;
|
|
354
392
|
font-family: var(--reevit-font);
|
|
355
393
|
border: none;
|
|
356
|
-
min-height:
|
|
394
|
+
min-height: 42px;
|
|
395
|
+
letter-spacing: -0.01em;
|
|
357
396
|
}
|
|
358
397
|
|
|
359
398
|
.reevit-btn--primary {
|
|
360
399
|
flex: 1;
|
|
361
|
-
background:
|
|
362
|
-
color:
|
|
400
|
+
background: oklch(1 0 0);
|
|
401
|
+
color: oklch(0.145 0 0);
|
|
402
|
+
border: 1px solid var(--reevit-border);
|
|
363
403
|
}
|
|
364
404
|
|
|
365
405
|
.reevit-btn--primary:hover:not(:disabled) {
|
|
366
|
-
background:
|
|
406
|
+
background: oklch(0.97 0 0);
|
|
407
|
+
border-color: var(--reevit-text-secondary);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.reevit-btn--primary:focus:not(:disabled) {
|
|
411
|
+
outline: none;
|
|
412
|
+
border-color: var(--reevit-text);
|
|
413
|
+
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.reevit-btn--primary:active:not(:disabled) {
|
|
417
|
+
background: oklch(0.95 0 0);
|
|
418
|
+
transform: scale(0.98);
|
|
367
419
|
}
|
|
368
420
|
|
|
369
421
|
.reevit-btn--primary:disabled {
|
|
@@ -372,30 +424,70 @@
|
|
|
372
424
|
}
|
|
373
425
|
|
|
374
426
|
.reevit-btn--secondary {
|
|
375
|
-
background:
|
|
427
|
+
background: transparent;
|
|
376
428
|
color: var(--reevit-text);
|
|
377
|
-
border:
|
|
429
|
+
border: 1px solid var(--reevit-border);
|
|
378
430
|
}
|
|
379
431
|
|
|
380
432
|
.reevit-btn--secondary:hover:not(:disabled) {
|
|
381
|
-
background:
|
|
433
|
+
background: transparent;
|
|
434
|
+
border-color: var(--reevit-text);
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.reevit-btn--secondary:focus:not(:disabled) {
|
|
438
|
+
outline: none;
|
|
439
|
+
border-color: var(--reevit-text);
|
|
440
|
+
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
382
441
|
}
|
|
383
442
|
|
|
384
443
|
.reevit-trigger-btn {
|
|
385
|
-
padding:
|
|
386
|
-
font-size:
|
|
444
|
+
padding: 10px 18px;
|
|
445
|
+
font-size: 13px;
|
|
387
446
|
font-weight: 600;
|
|
388
|
-
background:
|
|
389
|
-
color:
|
|
390
|
-
border:
|
|
391
|
-
border-radius: var(--reevit-radius
|
|
447
|
+
background: oklch(1 0 0);
|
|
448
|
+
color: oklch(0.145 0 0);
|
|
449
|
+
border: 1px solid var(--reevit-border);
|
|
450
|
+
border-radius: var(--reevit-radius);
|
|
392
451
|
cursor: pointer;
|
|
393
452
|
font-family: var(--reevit-font);
|
|
394
453
|
transition: all 0.15s ease;
|
|
454
|
+
letter-spacing: -0.01em;
|
|
395
455
|
}
|
|
396
456
|
|
|
397
457
|
.reevit-trigger-btn:hover {
|
|
398
|
-
background:
|
|
458
|
+
background: oklch(0.97 0 0);
|
|
459
|
+
border-color: var(--reevit-text-secondary);
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.reevit-trigger-btn:focus {
|
|
463
|
+
outline: none;
|
|
464
|
+
border-color: var(--reevit-text);
|
|
465
|
+
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
/* Dark mode button overrides */
|
|
469
|
+
@media (prefers-color-scheme: dark) {
|
|
470
|
+
.reevit-btn--primary {
|
|
471
|
+
background: oklch(0.985 0 0);
|
|
472
|
+
color: oklch(0.145 0 0);
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.reevit-btn--primary:hover:not(:disabled) {
|
|
476
|
+
background: oklch(0.9 0 0);
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.reevit-btn--primary:active:not(:disabled) {
|
|
480
|
+
background: oklch(0.85 0 0);
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.reevit-trigger-btn {
|
|
484
|
+
background: oklch(0.985 0 0);
|
|
485
|
+
color: oklch(0.145 0 0);
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.reevit-trigger-btn:hover {
|
|
489
|
+
background: oklch(0.9 0 0);
|
|
490
|
+
}
|
|
399
491
|
}
|
|
400
492
|
|
|
401
493
|
/* ===== STATES ===== */
|
|
@@ -408,16 +500,16 @@
|
|
|
408
500
|
justify-content: center;
|
|
409
501
|
padding: 40px 20px;
|
|
410
502
|
text-align: center;
|
|
411
|
-
gap:
|
|
503
|
+
gap: 12px;
|
|
412
504
|
}
|
|
413
505
|
|
|
414
506
|
.reevit-success__icon {
|
|
415
|
-
width:
|
|
416
|
-
height:
|
|
507
|
+
width: 48px;
|
|
508
|
+
height: 48px;
|
|
417
509
|
border-radius: 50%;
|
|
418
510
|
background: var(--reevit-success);
|
|
419
511
|
color: white;
|
|
420
|
-
font-size:
|
|
512
|
+
font-size: 24px;
|
|
421
513
|
display: flex;
|
|
422
514
|
align-items: center;
|
|
423
515
|
justify-content: center;
|
|
@@ -425,12 +517,12 @@
|
|
|
425
517
|
}
|
|
426
518
|
|
|
427
519
|
.reevit-error__icon {
|
|
428
|
-
width:
|
|
429
|
-
height:
|
|
520
|
+
width: 48px;
|
|
521
|
+
height: 48px;
|
|
430
522
|
border-radius: 50%;
|
|
431
523
|
background: var(--reevit-error);
|
|
432
524
|
color: white;
|
|
433
|
-
font-size:
|
|
525
|
+
font-size: 24px;
|
|
434
526
|
display: flex;
|
|
435
527
|
align-items: center;
|
|
436
528
|
justify-content: center;
|
|
@@ -438,33 +530,34 @@
|
|
|
438
530
|
|
|
439
531
|
@keyframes reevit-pop {
|
|
440
532
|
0% { transform: scale(0); }
|
|
441
|
-
50% { transform: scale(1.
|
|
533
|
+
50% { transform: scale(1.1); }
|
|
442
534
|
100% { transform: scale(1); }
|
|
443
535
|
}
|
|
444
536
|
|
|
445
537
|
.reevit-success h3,
|
|
446
538
|
.reevit-error h3 {
|
|
447
|
-
font-size:
|
|
539
|
+
font-size: 14px;
|
|
448
540
|
font-weight: 600;
|
|
449
541
|
color: var(--reevit-text);
|
|
450
542
|
margin: 0;
|
|
543
|
+
letter-spacing: -0.01em;
|
|
451
544
|
}
|
|
452
545
|
|
|
453
546
|
.reevit-success p,
|
|
454
547
|
.reevit-error p {
|
|
455
|
-
font-size:
|
|
548
|
+
font-size: 12px;
|
|
456
549
|
color: var(--reevit-text-secondary);
|
|
457
550
|
margin: 0;
|
|
458
551
|
}
|
|
459
552
|
|
|
460
553
|
/* ===== SPINNER ===== */
|
|
461
554
|
.reevit-spinner {
|
|
462
|
-
width:
|
|
463
|
-
height:
|
|
464
|
-
border:
|
|
465
|
-
border-top-color: var(--reevit-
|
|
555
|
+
width: 20px;
|
|
556
|
+
height: 20px;
|
|
557
|
+
border: 2px solid var(--reevit-border);
|
|
558
|
+
border-top-color: var(--reevit-text);
|
|
466
559
|
border-radius: 50%;
|
|
467
|
-
animation: reevit-spin 0.
|
|
560
|
+
animation: reevit-spin 0.7s linear infinite;
|
|
468
561
|
}
|
|
469
562
|
|
|
470
563
|
@keyframes reevit-spin {
|
|
@@ -473,9 +566,15 @@
|
|
|
473
566
|
|
|
474
567
|
/* Large spinner for loading states */
|
|
475
568
|
.reevit-loading .reevit-spinner {
|
|
476
|
-
width:
|
|
477
|
-
height:
|
|
478
|
-
border-width:
|
|
569
|
+
width: 32px;
|
|
570
|
+
height: 32px;
|
|
571
|
+
border-width: 2px;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.reevit-loading p {
|
|
575
|
+
font-size: 12px;
|
|
576
|
+
color: var(--reevit-text-secondary);
|
|
577
|
+
margin: 0;
|
|
479
578
|
}
|
|
480
579
|
|
|
481
580
|
/* ===== PSP BRIDGE ===== */
|
|
@@ -486,18 +585,18 @@
|
|
|
486
585
|
justify-content: center;
|
|
487
586
|
padding: 40px 20px;
|
|
488
587
|
text-align: center;
|
|
489
|
-
gap:
|
|
588
|
+
gap: 12px;
|
|
490
589
|
}
|
|
491
590
|
|
|
492
591
|
.reevit-psp-bridge__loading p {
|
|
493
|
-
font-size:
|
|
592
|
+
font-size: 12px;
|
|
494
593
|
color: var(--reevit-text-secondary);
|
|
495
594
|
margin: 0;
|
|
496
595
|
}
|
|
497
596
|
|
|
498
597
|
/* ===== METHOD STEP ACTIONS ===== */
|
|
499
598
|
.reevit-method-step__actions {
|
|
500
|
-
margin-top:
|
|
599
|
+
margin-top: 16px;
|
|
501
600
|
}
|
|
502
601
|
|
|
503
602
|
/* ===== RESPONSIVE ===== */
|
|
@@ -505,7 +604,8 @@
|
|
|
505
604
|
.reevit-modal {
|
|
506
605
|
max-width: 100%;
|
|
507
606
|
max-height: 100%;
|
|
508
|
-
border-radius: 0;
|
|
607
|
+
border-radius: var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;
|
|
608
|
+
margin-top: auto;
|
|
509
609
|
}
|
|
510
610
|
|
|
511
611
|
.reevit-modal__amount-value {
|