VSelect.sass 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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-select
  8. .v-field
  9. .v-text-field__prefix,
  10. .v-text-field__suffix,
  11. .v-field__input,
  12. &.v-field
  13. cursor: pointer
  14. .v-field
  15. .v-field__input
  16. > input
  17. align-self: flex-start
  18. opacity: 1
  19. flex: 0 0
  20. position: absolute
  21. width: 100%
  22. transition: none
  23. pointer-events: none
  24. caret-color: transparent
  25. .v-field--dirty
  26. .v-select__selection
  27. margin-inline-end: 2px
  28. .v-select__selection-text
  29. overflow: hidden
  30. text-overflow: ellipsis
  31. white-space: nowrap
  32. &__content
  33. overflow: hidden
  34. @include tools.elevation($select-content-elevation)
  35. @include tools.rounded($select-content-border-radius)
  36. &__selection
  37. display: inline-flex
  38. align-items: center
  39. letter-spacing: inherit
  40. line-height: inherit
  41. max-width: 100%
  42. .v-select__selection
  43. &:first-child
  44. margin-inline-start: 0
  45. &--selected
  46. .v-field
  47. .v-field__input
  48. > input
  49. opacity: 0
  50. &__menu-icon
  51. margin-inline-start: 4px
  52. transition: $select-transition
  53. .v-select--active-menu &
  54. opacity: var(--v-high-emphasis-opacity)
  55. transform: rotate(180deg)