VOtpInput.sass 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. // Imports
  2. @use '../../styles/settings'
  3. @use '../../styles/tools'
  4. @use './variables' as *
  5. @include tools.layer('components')
  6. .v-otp-input
  7. align-items: center
  8. display: flex
  9. justify-content: center
  10. padding: $otp-input-padding
  11. position: relative
  12. @include tools.rounded(4px)
  13. .v-field
  14. height: 100%
  15. .v-otp-input__divider
  16. margin: $otp-input-divider-margin
  17. .v-otp-input__content
  18. align-items: center
  19. display: flex
  20. gap: $otp-input-content-gap
  21. height: $otp-input-content-height
  22. padding: $otp-input-content-padding
  23. justify-content: center
  24. max-width: $otp-input-content-max-width
  25. position: relative
  26. border-radius: inherit
  27. .v-otp-input--divided &
  28. max-width: $otp-input-divided-content-max-width
  29. .v-otp-input__field
  30. color: inherit
  31. font-size: $otp-input-field-font-size
  32. height: 100%
  33. outline: none
  34. text-align: center
  35. width: 100%
  36. &[type=number]::-webkit-outer-spin-button,
  37. &[type=number]::-webkit-inner-spin-button
  38. -webkit-appearance: none
  39. margin: 0
  40. &[type=number]
  41. -moz-appearance: textfield
  42. .v-otp-input__loader
  43. align-items: center
  44. display: flex
  45. height: 100%
  46. justify-content: center
  47. width: 100%
  48. .v-progress-linear
  49. position: absolute