@reevit/core 0.3.7 → 0.4.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/styles.css +152 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -599,6 +599,158 @@
|
|
|
599
599
|
margin-top: 16px;
|
|
600
600
|
}
|
|
601
601
|
|
|
602
|
+
/* ===== STRIPE BRIDGE ===== */
|
|
603
|
+
.reevit-stripe-bridge {
|
|
604
|
+
display: flex;
|
|
605
|
+
flex-direction: column;
|
|
606
|
+
gap: 20px;
|
|
607
|
+
width: 100%;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.reevit-stripe-loading {
|
|
611
|
+
display: flex;
|
|
612
|
+
flex-direction: column;
|
|
613
|
+
align-items: center;
|
|
614
|
+
justify-content: center;
|
|
615
|
+
padding: 40px 20px;
|
|
616
|
+
text-align: center;
|
|
617
|
+
gap: 12px;
|
|
618
|
+
min-height: 200px;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.reevit-stripe-loading p {
|
|
622
|
+
font-size: 12px;
|
|
623
|
+
color: var(--reevit-text-secondary);
|
|
624
|
+
margin: 0;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.reevit-stripe-element {
|
|
628
|
+
min-height: 200px;
|
|
629
|
+
border-radius: var(--reevit-radius);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
/* Override Stripe's default form styling for better dark mode compatibility */
|
|
633
|
+
.reevit-stripe-element iframe {
|
|
634
|
+
border-radius: var(--reevit-radius);
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
.reevit-stripe-error {
|
|
638
|
+
padding: 10px 14px;
|
|
639
|
+
background: oklch(0.577 0.245 27.325 / 0.1);
|
|
640
|
+
border: 1px solid var(--reevit-error);
|
|
641
|
+
border-radius: var(--reevit-radius);
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
.reevit-stripe-error p {
|
|
645
|
+
font-size: 12px;
|
|
646
|
+
color: var(--reevit-error);
|
|
647
|
+
margin: 0;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.reevit-stripe-actions {
|
|
651
|
+
display: flex;
|
|
652
|
+
gap: 10px;
|
|
653
|
+
margin-top: 4px;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
/* Submit Button - Primary action */
|
|
657
|
+
.reevit-submit-btn {
|
|
658
|
+
flex: 1;
|
|
659
|
+
display: inline-flex;
|
|
660
|
+
align-items: center;
|
|
661
|
+
justify-content: center;
|
|
662
|
+
gap: 6px;
|
|
663
|
+
padding: 12px 18px;
|
|
664
|
+
font-size: 13px;
|
|
665
|
+
font-weight: 600;
|
|
666
|
+
border-radius: var(--reevit-radius);
|
|
667
|
+
cursor: pointer;
|
|
668
|
+
transition: all 0.15s ease;
|
|
669
|
+
font-family: var(--reevit-font);
|
|
670
|
+
min-height: 44px;
|
|
671
|
+
letter-spacing: -0.01em;
|
|
672
|
+
background: oklch(1 0 0);
|
|
673
|
+
color: oklch(0.145 0 0);
|
|
674
|
+
border: 1px solid var(--reevit-border);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.reevit-submit-btn:hover:not(:disabled) {
|
|
678
|
+
background: oklch(0.97 0 0);
|
|
679
|
+
border-color: var(--reevit-text-secondary);
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.reevit-submit-btn:focus:not(:disabled) {
|
|
683
|
+
outline: none;
|
|
684
|
+
border-color: var(--reevit-text);
|
|
685
|
+
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
.reevit-submit-btn:active:not(:disabled) {
|
|
689
|
+
background: oklch(0.95 0 0);
|
|
690
|
+
transform: scale(0.98);
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
.reevit-submit-btn:disabled {
|
|
694
|
+
opacity: 0.5;
|
|
695
|
+
cursor: not-allowed;
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
/* Cancel Button - Secondary action */
|
|
699
|
+
.reevit-cancel-btn {
|
|
700
|
+
display: inline-flex;
|
|
701
|
+
align-items: center;
|
|
702
|
+
justify-content: center;
|
|
703
|
+
gap: 6px;
|
|
704
|
+
padding: 12px 18px;
|
|
705
|
+
font-size: 13px;
|
|
706
|
+
font-weight: 600;
|
|
707
|
+
border-radius: var(--reevit-radius);
|
|
708
|
+
cursor: pointer;
|
|
709
|
+
transition: all 0.15s ease;
|
|
710
|
+
font-family: var(--reevit-font);
|
|
711
|
+
min-height: 44px;
|
|
712
|
+
letter-spacing: -0.01em;
|
|
713
|
+
background: transparent;
|
|
714
|
+
color: var(--reevit-text);
|
|
715
|
+
border: 1px solid var(--reevit-border);
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.reevit-cancel-btn:hover:not(:disabled) {
|
|
719
|
+
background: transparent;
|
|
720
|
+
border-color: var(--reevit-text);
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.reevit-cancel-btn:focus:not(:disabled) {
|
|
724
|
+
outline: none;
|
|
725
|
+
border-color: var(--reevit-text);
|
|
726
|
+
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.reevit-cancel-btn:active:not(:disabled) {
|
|
730
|
+
transform: scale(0.98);
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.reevit-cancel-btn:disabled {
|
|
734
|
+
opacity: 0.5;
|
|
735
|
+
cursor: not-allowed;
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
/* Dark mode button overrides for Stripe */
|
|
739
|
+
@media (prefers-color-scheme: dark) {
|
|
740
|
+
.reevit-submit-btn {
|
|
741
|
+
background: oklch(0.985 0 0);
|
|
742
|
+
color: oklch(0.145 0 0);
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.reevit-submit-btn:hover:not(:disabled) {
|
|
746
|
+
background: oklch(0.9 0 0);
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.reevit-submit-btn:active:not(:disabled) {
|
|
750
|
+
background: oklch(0.85 0 0);
|
|
751
|
+
}
|
|
752
|
+
}
|
|
753
|
+
|
|
602
754
|
/* ===== RESPONSIVE ===== */
|
|
603
755
|
@media (max-width: 480px) {
|
|
604
756
|
.reevit-modal {
|