123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- @use 'sass:selector'
- @use 'sass:math'
- @use '../../styles/settings'
- @use '../../styles/tools'
- @use './variables' as *
- @include tools.layer('components')
- .v-combobox
- .v-field
- .v-text-field__prefix,
- .v-text-field__suffix,
- .v-field__input,
- &.v-field
- cursor: text
- .v-field
- .v-field__input
- > input
- flex: 1 1
- .v-field
- input
- min-width: $combobox-focused-input
- &:not(.v-field--focused)
- input
- min-width: 0
- .v-field--dirty
- .v-combobox__selection
- margin-inline-end: $combobox-selection-gap
- .v-combobox__selection-text
- overflow: hidden
- text-overflow: ellipsis
- white-space: nowrap
- .v-combobox
- &__content
- overflow: hidden
- @include tools.elevation($combobox-content-elevation)
- @include tools.rounded($combobox-content-border-radius)
- &__mask
- background: rgb(var(--v-theme-surface-light))
- &__selection
- display: inline-flex
- align-items: center
- height: calc($input-font-size * $input-line-height)
- letter-spacing: inherit
- line-height: inherit
- max-width: calc(100% - $combobox-selection-gap - $combobox-input-buffer)
- &__selection
- &:first-child
- margin-inline-start: 0
- &--chips.v-input--density-compact
- .v-field--variant-solo,
- .v-field--variant-solo-inverted,
- .v-field--variant-filled,
- .v-field--variant-solo-filled
- .v-label.v-field-label
- &--floating
- top: 0px
- &--selecting-index
- .v-combobox__selection
- opacity: var(--v-medium-emphasis-opacity)
- &--selected
- opacity: 1
- .v-field__input > input
- caret-color: transparent
- &--single:not(.v-combobox--selection-slot)
- &.v-text-field input
- flex: 1 1
- position: absolute
- left: 0
- right: 0
- width: 100%
- padding-inline: inherit
- .v-field--active
- input
- transition: none
- .v-field--dirty:not(.v-field--focused)
- input
- opacity: 0
- .v-field--focused
- .v-combobox__selection
- opacity: 0
- &__menu-icon
- margin-inline-start: 4px
- transition: $combobox-transition
- .v-combobox--active-menu &
- opacity: var(--v-high-emphasis-opacity)
- transform: rotate(180deg)
|