VAutocomplete.css 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .v-autocomplete .v-field .v-text-field__prefix,
  2. .v-autocomplete .v-field .v-text-field__suffix,
  3. .v-autocomplete .v-field .v-field__input, .v-autocomplete .v-field.v-field {
  4. cursor: text;
  5. }
  6. .v-autocomplete .v-field .v-field__input > input {
  7. align-self: flex-start;
  8. flex: 1 1;
  9. }
  10. .v-autocomplete .v-field input {
  11. min-width: 64px;
  12. }
  13. .v-autocomplete .v-field:not(.v-field--focused) input {
  14. min-width: 0;
  15. }
  16. .v-autocomplete .v-field--dirty .v-autocomplete__selection {
  17. margin-inline-end: 2px;
  18. }
  19. .v-autocomplete .v-autocomplete__selection-text {
  20. overflow: hidden;
  21. text-overflow: ellipsis;
  22. white-space: nowrap;
  23. }
  24. .v-autocomplete__content {
  25. overflow: hidden;
  26. box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
  27. border-radius: 4px;
  28. }
  29. .v-autocomplete__mask {
  30. background: rgb(var(--v-theme-on-surface-variant));
  31. }
  32. .v-autocomplete__selection {
  33. display: inline-flex;
  34. align-items: center;
  35. letter-spacing: inherit;
  36. line-height: inherit;
  37. max-width: 90%;
  38. }
  39. .v-autocomplete__selection {
  40. margin-top: var(--v-input-chips-margin-top);
  41. margin-bottom: var(--v-input-chips-margin-bottom);
  42. }
  43. .v-autocomplete__selection:first-child {
  44. margin-inline-start: 0;
  45. }
  46. .v-autocomplete--selecting-index .v-autocomplete__selection {
  47. opacity: var(--v-medium-emphasis-opacity);
  48. }
  49. .v-autocomplete--selecting-index .v-autocomplete__selection--selected {
  50. opacity: 1;
  51. }
  52. .v-autocomplete--selecting-index .v-field__input > input {
  53. caret-color: transparent;
  54. }
  55. .v-autocomplete--single.v-text-field input {
  56. flex: 1 1;
  57. position: absolute;
  58. left: 0;
  59. right: 0;
  60. width: 100%;
  61. padding-inline-start: inherit;
  62. padding-inline-end: inherit;
  63. }
  64. .v-autocomplete--single .v-field--variant-outlined input {
  65. top: 50%;
  66. transform: translateY(calc(-50% - (var(--v-input-chips-margin-top) + var(--v-input-chips-margin-bottom)) / 2));
  67. }
  68. .v-autocomplete--single .v-field--active input {
  69. transition: none;
  70. }
  71. .v-autocomplete--single .v-field--dirty:not(.v-field--focused) input {
  72. opacity: 0;
  73. }
  74. .v-autocomplete--single .v-field--focused .v-autocomplete__selection {
  75. opacity: 0;
  76. }
  77. .v-autocomplete__menu-icon {
  78. margin-inline-start: 4px;
  79. transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  80. }
  81. .v-autocomplete--active-menu .v-autocomplete__menu-icon {
  82. opacity: var(--v-high-emphasis-opacity);
  83. transform: rotate(180deg);
  84. }