VOtpInput.css 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. .v-otp-input {
  2. align-items: center;
  3. display: flex;
  4. justify-content: center;
  5. padding: 0.5rem 0;
  6. position: relative;
  7. }
  8. .v-otp-input {
  9. border-radius: 4px;
  10. }
  11. .v-otp-input .v-field {
  12. height: 100%;
  13. }
  14. .v-otp-input__divider {
  15. margin: 0 8px;
  16. }
  17. .v-otp-input__content {
  18. align-items: center;
  19. display: flex;
  20. gap: 0.5rem;
  21. height: 64px;
  22. padding: 0.5rem;
  23. justify-content: center;
  24. max-width: 320px;
  25. position: relative;
  26. border-radius: inherit;
  27. }
  28. .v-otp-input--divided .v-otp-input__content {
  29. max-width: 360px;
  30. }
  31. .v-otp-input__field {
  32. color: inherit;
  33. font-size: 1.25rem;
  34. height: 100%;
  35. outline: none;
  36. text-align: center;
  37. width: 100%;
  38. }
  39. .v-otp-input__field[type=number]::-webkit-outer-spin-button, .v-otp-input__field[type=number]::-webkit-inner-spin-button {
  40. -webkit-appearance: none;
  41. margin: 0;
  42. }
  43. .v-otp-input__field[type=number] {
  44. -moz-appearance: textfield;
  45. }
  46. .v-otp-input__loader {
  47. align-items: center;
  48. display: flex;
  49. height: 100%;
  50. justify-content: center;
  51. width: 100%;
  52. }
  53. .v-otp-input__loader .v-progress-linear {
  54. position: absolute;
  55. }