| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- @use 'sass:map'
- @use 'sass:list'
- @use '../../styles/settings'
- @use '../../styles/tools'
- @use './variables' as *
- .v-selection-control
- align-items: center
- contain: layout
- display: flex
- flex: 1 0
- grid-area: control
- position: relative
- user-select: none
- .v-label
- white-space: normal
- word-break: break-word
- height: 100%
- width: 100%
- &--disabled
- opacity: var(--v-disabled-opacity)
- pointer-events: none
- &--error,
- &--disabled
- .v-label
- opacity: 1
- &--error:not(.v-selection-control--disabled)
- .v-label
- color: rgb(var(--v-theme-error))
- &--inline
- display: inline-flex
- flex: 0 0 auto
- min-width: 0
- max-width: 100%
- .v-label
- width: auto
- @at-root
- @include tools.density('v-selection-control', $selection-control-density) using ($modifier)
- --v-selection-control-size: #{$selection-control-size + $modifier}
- .v-selection-control__wrapper
- width: var(--v-selection-control-size)
- height: var(--v-selection-control-size)
- display: inline-flex
- align-items: center
- position: relative
- justify-content: center
- flex: none
- .v-selection-control__input
- width: var(--v-selection-control-size)
- height: var(--v-selection-control-size)
- align-items: center
- display: flex
- flex: none
- justify-content: center
- position: relative
- border-radius: 50%
- input
- cursor: pointer
- position: absolute
- left: 0
- top: 0
- width: 100%
- height: 100%
- opacity: 0
- &::before
- @include tools.absolute(true)
- border-radius: 100%
- background-color: currentColor
- opacity: 0
- pointer-events: none
- &:hover::before
- opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
- > .v-icon
- opacity: var(--v-medium-emphasis-opacity)
- .v-selection-control--disabled &,
- .v-selection-control--dirty &,
- .v-selection-control--error &
- > .v-icon
- opacity: 1
- .v-selection-control--error:not(.v-selection-control--disabled) &
- > .v-icon
- color: rgb(var(--v-theme-error))
- .v-selection-control--focus-visible &::before
- opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
|
