@reevit/react 0.4.3 → 0.4.5
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 +16 -8
- package/dist/index.d.ts +16 -8
- package/dist/index.js +90 -22
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +90 -22
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +29 -25
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
--reevit-error: #dc2626;
|
|
22
22
|
--reevit-warning: #f59e0b;
|
|
23
23
|
--reevit-radius: 0.75rem;
|
|
24
|
-
--reevit-radius-sm: 0.
|
|
25
|
-
--reevit-radius-lg:
|
|
24
|
+
--reevit-radius-sm: 0.5rem;
|
|
25
|
+
--reevit-radius-lg: 1.25rem;
|
|
26
26
|
--reevit-font: 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
|
|
27
27
|
--reevit-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.35);
|
|
28
28
|
--reevit-shadow-sm: 0 12px 24px -18px rgba(15, 23, 42, 0.3);
|
|
@@ -374,40 +374,44 @@
|
|
|
374
374
|
display: flex;
|
|
375
375
|
align-items: center;
|
|
376
376
|
gap: 14px;
|
|
377
|
-
padding:
|
|
378
|
-
border-radius:
|
|
377
|
+
padding: 14px 16px;
|
|
378
|
+
border-radius: 12px;
|
|
379
379
|
border: 1px solid var(--reevit-border);
|
|
380
380
|
background: var(--reevit-surface);
|
|
381
381
|
cursor: pointer;
|
|
382
|
-
transition: all 0.
|
|
382
|
+
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
383
383
|
text-align: left;
|
|
384
384
|
width: 100%;
|
|
385
385
|
position: relative;
|
|
386
386
|
}
|
|
387
387
|
|
|
388
|
-
.reevit-psp-option:hover:not(.reevit-psp-option--disabled) {
|
|
389
|
-
border-color: var(--reevit-primary);
|
|
390
|
-
background: color-mix(in srgb, var(--reevit-primary)
|
|
388
|
+
.reevit-psp-option:hover:not(.reevit-psp-option--disabled):not(.reevit-psp-option--selected) {
|
|
389
|
+
border-color: color-mix(in srgb, var(--reevit-primary) 50%, var(--reevit-border));
|
|
390
|
+
background: color-mix(in srgb, var(--reevit-primary) 4%, var(--reevit-surface));
|
|
391
391
|
transform: translateY(-1px);
|
|
392
392
|
}
|
|
393
393
|
|
|
394
394
|
.reevit-psp-option--selected {
|
|
395
|
-
border-radius:
|
|
396
|
-
box-shadow:
|
|
397
|
-
border-color: var(--reevit-primary);
|
|
395
|
+
border-radius: 12px 12px 0 0 !important;
|
|
396
|
+
box-shadow: none;
|
|
397
|
+
border-color: color-mix(in srgb, var(--reevit-primary) 40%, var(--reevit-border));
|
|
398
|
+
border-bottom-color: transparent;
|
|
398
399
|
background: color-mix(in srgb, var(--reevit-primary) 5%, var(--reevit-surface));
|
|
400
|
+
position: relative;
|
|
401
|
+
z-index: 1;
|
|
399
402
|
}
|
|
400
403
|
|
|
401
404
|
.reevit-psp-accordion__content {
|
|
402
|
-
padding:
|
|
405
|
+
padding: 16px;
|
|
403
406
|
background: transparent;
|
|
404
|
-
border: 1px solid var(--reevit-border);
|
|
407
|
+
border: 1px solid color-mix(in srgb, var(--reevit-primary) 40%, var(--reevit-border));
|
|
405
408
|
border-top: none;
|
|
406
|
-
border-radius: 0 0
|
|
407
|
-
margin-top:
|
|
409
|
+
border-radius: 0 0 12px 12px;
|
|
410
|
+
margin-top: 0;
|
|
408
411
|
overflow: hidden;
|
|
409
|
-
animation: reevit-accordion-expand 0.
|
|
412
|
+
animation: reevit-accordion-expand 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
410
413
|
transform-origin: top;
|
|
414
|
+
position: relative;
|
|
411
415
|
}
|
|
412
416
|
|
|
413
417
|
/* ===== PAYMENT METHOD SELECTOR ===== */
|
|
@@ -510,11 +514,11 @@
|
|
|
510
514
|
flex-direction: row;
|
|
511
515
|
align-items: center;
|
|
512
516
|
gap: 16px;
|
|
513
|
-
padding:
|
|
514
|
-
background: color-mix(in srgb, var(--reevit-
|
|
515
|
-
border: 1px solid
|
|
516
|
-
border-radius:
|
|
517
|
-
box-shadow:
|
|
517
|
+
padding: 14px 16px;
|
|
518
|
+
background: color-mix(in srgb, var(--reevit-text) 4%, transparent);
|
|
519
|
+
border: 1px solid transparent;
|
|
520
|
+
border-radius: 12px;
|
|
521
|
+
box-shadow: none;
|
|
518
522
|
cursor: pointer;
|
|
519
523
|
transition: all 0.2s ease;
|
|
520
524
|
text-align: left;
|
|
@@ -524,16 +528,16 @@
|
|
|
524
528
|
}
|
|
525
529
|
|
|
526
530
|
.reevit-method-option--list:hover:not(.reevit-method-option--disabled) {
|
|
527
|
-
border-color: var(--reevit-primary);
|
|
528
|
-
background: var(--reevit-surface);
|
|
531
|
+
border-color: color-mix(in srgb, var(--reevit-primary) 60%, var(--reevit-border));
|
|
532
|
+
background: color-mix(in srgb, var(--reevit-primary) 8%, var(--reevit-surface));
|
|
529
533
|
transform: translateY(-1px);
|
|
530
534
|
box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.35);
|
|
531
535
|
}
|
|
532
536
|
|
|
533
537
|
.reevit-method-option--list.reevit-method-option--selected {
|
|
534
538
|
border-color: var(--reevit-primary);
|
|
535
|
-
background: color-mix(in srgb, var(--reevit-primary)
|
|
536
|
-
box-shadow: 0
|
|
539
|
+
background: color-mix(in srgb, var(--reevit-primary) 12%, var(--reevit-surface));
|
|
540
|
+
box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--reevit-primary) 40%, transparent);
|
|
537
541
|
}
|
|
538
542
|
|
|
539
543
|
.reevit-method-option--list .reevit-method-option__icon-wrapper {
|