stripe.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /* stylesheet pertaining specifically to Stripe elements */
  2. @keyframes fade {
  3. from {
  4. opacity: 0;
  5. transform: scale3D(0.95, 0.95, 0.95);
  6. }
  7. to {
  8. opacity: 1;
  9. transform: scale3D(1, 1, 1);
  10. }
  11. }
  12. @keyframes void-animation-out {
  13. 0%,
  14. to {
  15. opacity: 1;
  16. }
  17. }
  18. .StripeElement--webkit-autofill {
  19. background: transparent !important;
  20. }
  21. .StripeElement {
  22. width: 100%;
  23. }
  24. .ErrorMessage {
  25. color: black;
  26. position: absolute;
  27. display: flex;
  28. justify-content: center;
  29. padding: 0 15px;
  30. font-size: 13px;
  31. margin-top: 0px;
  32. width: 100%;
  33. transform: translateY(-15px);
  34. opacity: 0;
  35. animation: fade 150ms ease-out;
  36. animation-delay: 50ms;
  37. animation-fill-mode: forwards;
  38. will-change: opacity, transform;
  39. }
  40. .ErrorMessage svg {
  41. margin-right: 10px;
  42. }
  43. .Result {
  44. margin-top: 50px;
  45. text-align: center;
  46. animation: fade 200ms ease-out;
  47. }
  48. .ResultTitle {
  49. color: black;
  50. font-weight: 500;
  51. margin-bottom: 8px;
  52. font-size: 17px;
  53. text-align: center;
  54. }
  55. .ResultMessage {
  56. color: black;
  57. font-size: 14px;
  58. font-weight: 400;
  59. margin-bottom: 25px;
  60. line-height: 1.6em;
  61. text-align: center;
  62. }
  63. .ResetButton {
  64. border: 0;
  65. cursor: pointer;
  66. background: transparent;
  67. }