VInput.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. .v-input {
  2. display: grid;
  3. flex: 1 1 auto;
  4. font-size: 1rem;
  5. font-weight: 400;
  6. line-height: 1.5;
  7. }
  8. .v-input--disabled {
  9. pointer-events: none;
  10. }
  11. .v-input--density-default {
  12. --v-input-control-height: 56px;
  13. --v-input-padding-top: 16px;
  14. }
  15. .v-input--density-comfortable {
  16. --v-input-control-height: 48px;
  17. --v-input-padding-top: 12px;
  18. }
  19. .v-input--density-compact {
  20. --v-input-control-height: 40px;
  21. --v-input-padding-top: 8px;
  22. }
  23. .v-input--vertical {
  24. grid-template-areas: "append" "control" "prepend";
  25. grid-template-rows: max-content auto max-content;
  26. grid-template-columns: min-content;
  27. }
  28. .v-input--vertical .v-input__prepend {
  29. margin-block-start: 16px;
  30. }
  31. .v-input--vertical .v-input__append {
  32. margin-block-end: 16px;
  33. }
  34. .v-input--horizontal {
  35. grid-template-areas: "prepend control append" "a messages b";
  36. grid-template-columns: max-content minmax(0, 1fr) max-content;
  37. grid-template-rows: auto auto;
  38. }
  39. .v-input--horizontal .v-input__prepend {
  40. margin-inline-end: 16px;
  41. }
  42. .v-input--horizontal .v-input__append {
  43. margin-inline-start: 16px;
  44. }
  45. .v-input__details {
  46. align-items: flex-end;
  47. display: flex;
  48. font-size: 0.75rem;
  49. font-weight: 400;
  50. grid-area: messages;
  51. letter-spacing: 0.0333333333em;
  52. line-height: normal;
  53. min-height: 22px;
  54. padding-top: 6px;
  55. overflow: hidden;
  56. justify-content: space-between;
  57. }
  58. .v-input__details > .v-icon,
  59. .v-input__prepend > .v-icon,
  60. .v-input__append > .v-icon {
  61. opacity: var(--v-medium-emphasis-opacity);
  62. }
  63. .v-input--disabled .v-input__details > .v-icon,
  64. .v-input--disabled .v-input__details .v-messages, .v-input--error .v-input__details > .v-icon,
  65. .v-input--error .v-input__details .v-messages,
  66. .v-input--disabled .v-input__prepend > .v-icon,
  67. .v-input--disabled .v-input__prepend .v-messages,
  68. .v-input--error .v-input__prepend > .v-icon,
  69. .v-input--error .v-input__prepend .v-messages,
  70. .v-input--disabled .v-input__append > .v-icon,
  71. .v-input--disabled .v-input__append .v-messages,
  72. .v-input--error .v-input__append > .v-icon,
  73. .v-input--error .v-input__append .v-messages {
  74. opacity: 1;
  75. }
  76. .v-input--disabled .v-input__details,
  77. .v-input--disabled .v-input__prepend,
  78. .v-input--disabled .v-input__append {
  79. opacity: var(--v-disabled-opacity);
  80. }
  81. .v-input--error:not(.v-input--disabled) .v-input__details > .v-icon,
  82. .v-input--error:not(.v-input--disabled) .v-input__details .v-messages,
  83. .v-input--error:not(.v-input--disabled) .v-input__prepend > .v-icon,
  84. .v-input--error:not(.v-input--disabled) .v-input__prepend .v-messages,
  85. .v-input--error:not(.v-input--disabled) .v-input__append > .v-icon,
  86. .v-input--error:not(.v-input--disabled) .v-input__append .v-messages {
  87. color: rgb(var(--v-theme-error));
  88. }
  89. .v-input__prepend,
  90. .v-input__append {
  91. display: flex;
  92. align-items: flex-start;
  93. padding-top: var(--v-input-padding-top);
  94. }
  95. .v-input--center-affix .v-input__prepend,
  96. .v-input--center-affix .v-input__append {
  97. align-items: center;
  98. padding-top: 0;
  99. }
  100. .v-input__prepend {
  101. grid-area: prepend;
  102. }
  103. .v-input__append {
  104. grid-area: append;
  105. }
  106. .v-input__control {
  107. display: flex;
  108. grid-area: control;
  109. }
  110. .v-input--hide-spin-buttons input::-webkit-outer-spin-button,
  111. .v-input--hide-spin-buttons input::-webkit-inner-spin-button {
  112. -webkit-appearance: none;
  113. margin: 0;
  114. }
  115. .v-input--hide-spin-buttons input[type=number] {
  116. -moz-appearance: textfield;
  117. }
  118. .v-input--plain-underlined .v-input__prepend,
  119. .v-input--plain-underlined .v-input__append {
  120. align-items: flex-start;
  121. }
  122. .v-input--density-default.v-input--plain-underlined .v-input__prepend, .v-input--density-default.v-input--plain-underlined .v-input__append {
  123. padding-top: calc(var(--v-input-padding-top) + 4px);
  124. }
  125. .v-input--density-comfortable.v-input--plain-underlined .v-input__prepend, .v-input--density-comfortable.v-input--plain-underlined .v-input__append {
  126. padding-top: calc(var(--v-input-padding-top) + 2px);
  127. }
  128. .v-input--density-compact.v-input--plain-underlined .v-input__prepend, .v-input--density-compact.v-input--plain-underlined .v-input__append {
  129. padding-top: calc(var(--v-input-padding-top) + 0px);
  130. }