VAutocomplete.sass 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. @use 'sass:selector'
  2. @use 'sass:math'
  3. @use '../../styles/settings'
  4. @use '../../styles/tools'
  5. @use './variables' as *
  6. @include tools.layer('components')
  7. .v-autocomplete
  8. .v-field
  9. .v-text-field__prefix,
  10. .v-text-field__suffix,
  11. .v-field__input,
  12. &.v-field
  13. cursor: text
  14. .v-field
  15. .v-field__input
  16. > input
  17. flex: 1 1
  18. .v-field
  19. input
  20. min-width: $autocomplete-focused-input
  21. &:not(.v-field--focused)
  22. input
  23. min-width: 0
  24. .v-field--dirty
  25. .v-autocomplete__selection
  26. margin-inline-end: $autocomplete-selection-gap
  27. .v-autocomplete__selection-text
  28. overflow: hidden
  29. text-overflow: ellipsis
  30. white-space: nowrap
  31. .v-autocomplete
  32. &__content
  33. overflow: hidden
  34. @include tools.elevation($autocomplete-content-elevation)
  35. @include tools.rounded($autocomplete-content-border-radius)
  36. &__mask
  37. background: rgb(var(--v-theme-surface-light))
  38. &__selection
  39. display: inline-flex
  40. align-items: center
  41. height: calc($input-font-size * $input-line-height)
  42. letter-spacing: inherit
  43. line-height: inherit
  44. max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer)
  45. &__selection
  46. &:first-child
  47. margin-inline-start: 0
  48. &--chips.v-input--density-compact
  49. .v-field--variant-solo,
  50. .v-field--variant-solo-inverted,
  51. .v-field--variant-filled,
  52. .v-field--variant-solo-filled
  53. .v-label.v-field-label
  54. &--floating
  55. top: 0px
  56. &--selecting-index
  57. .v-autocomplete__selection
  58. opacity: var(--v-medium-emphasis-opacity)
  59. &--selected
  60. opacity: 1
  61. .v-field__input > input
  62. caret-color: transparent
  63. &--single:not(.v-autocomplete--selection-slot)
  64. &.v-text-field input
  65. flex: 1 1
  66. position: absolute
  67. left: 0
  68. right: 0
  69. width: 100%
  70. padding-inline: inherit
  71. .v-field--active
  72. input
  73. transition: none
  74. .v-field--dirty:not(.v-field--focused)
  75. input
  76. opacity: 0
  77. .v-field--focused
  78. .v-autocomplete__selection
  79. opacity: 0
  80. &__menu-icon
  81. margin-inline-start: 4px
  82. transition: $autocomplete-transition
  83. .v-autocomplete--active-menu &
  84. opacity: var(--v-high-emphasis-opacity)
  85. transform: rotate(180deg)