index.less 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @import '../style/var';
  2. .van-password-input {
  3. position: relative;
  4. margin: @password-input-margin;
  5. user-select: none;
  6. &__info,
  7. &__error-info {
  8. margin-top: @padding-md;
  9. font-size: @password-input-info-font-size;
  10. text-align: center;
  11. }
  12. &__info {
  13. color: @password-input-info-color;
  14. }
  15. &__error-info {
  16. color: @password-input-error-info-color;
  17. }
  18. &__security {
  19. display: flex;
  20. width: 100%;
  21. height: @password-input-height;
  22. cursor: pointer;
  23. &::after {
  24. border-radius: @password-input-border-radius;
  25. }
  26. li {
  27. position: relative;
  28. display: flex;
  29. flex: 1;
  30. align-items: center;
  31. justify-content: center;
  32. height: 100%;
  33. font-size: @password-input-font-size;
  34. line-height: 1.2;
  35. background-color: @password-input-background-color;
  36. }
  37. i {
  38. position: absolute;
  39. top: 50%;
  40. left: 50%;
  41. width: @password-input-dot-size;
  42. height: @password-input-dot-size;
  43. background-color: @password-input-dot-color;
  44. border-radius: 100%;
  45. transform: translate(-50%, -50%);
  46. visibility: hidden;
  47. }
  48. }
  49. &__cursor {
  50. position: absolute;
  51. top: 50%;
  52. left: 50%;
  53. width: @number-keyboard-cursor-width;
  54. height: @number-keyboard-cursor-height;
  55. background-color: @number-keyboard-cursor-color;
  56. transform: translate(-50%, -50%);
  57. animation: @number-keyboard-cursor-animation-duration van-cursor-flicker
  58. infinite;
  59. }
  60. }
  61. @keyframes van-cursor-flicker {
  62. from {
  63. opacity: 0;
  64. }
  65. 50% {
  66. opacity: 1;
  67. }
  68. 100% {
  69. opacity: 0;
  70. }
  71. }