123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- @use 'sass:map'
- @use 'sass:selector'
- @use 'sass:math'
- @use '../../styles/settings'
- @use '../../styles/tools'
- @use './variables' as *
- @include tools.layer('components')
- // Theme
- .v-slider-thumb
- touch-action: none
- color: rgb(var(--v-theme-surface-variant))
- .v-input--error:not(.v-input--disabled) &
- color: inherit
- .v-slider-thumb__label
- background: rgba(var(--v-theme-surface-variant), .7)
- color: rgb(var(--v-theme-on-surface-variant))
- &::before
- color: rgba(var(--v-theme-surface-variant), .7)
- // Block
- .v-slider-thumb
- outline: none
- position: absolute
- transition: $slider-transition
- .v-slider-thumb__surface
- cursor: pointer
- width: var(--v-slider-thumb-size)
- height: var(--v-slider-thumb-size)
- border-radius: $slider-thumb-border-radius
- user-select: none
- background-color: currentColor
- @media (forced-colors: active)
- background-color: highlight
- &::before
- transition: 0.3s settings.$standard-easing
- content: ''
- color: inherit
- top: 0
- left: 0
- width: 100%
- height: 100%
- border-radius: $slider-thumb-border-radius
- background: currentColor
- position: absolute
- pointer-events: none
- opacity: 0
- &::after
- content: ''
- width: $slider-thumb-touch-size
- height: $slider-thumb-touch-size
- position: absolute
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
- .v-slider-thumb__label-container
- position: absolute
- transition: $slider-thumb-label-transition
- .v-slider-thumb__label
- display: flex
- align-items: center
- justify-content: center
- font-size: $slider-thumb-label-font-size
- min-width: $slider-thumb-label-min-width
- height: $slider-thumb-label-height
- border-radius: $slider-thumb-label-border-radius
- padding: $slider-thumb-label-padding
- position: absolute
- user-select: none
- transition: $slider-thumb-label-transition
- &::before
- content: ''
- width: 0
- height: 0
- position: absolute
- .v-slider-thumb__ripple
- position: absolute
- left: calc(var(--v-slider-thumb-size) / -2)
- top: calc(var(--v-slider-thumb-size) / -2)
- width: calc(var(--v-slider-thumb-size) * 2)
- height: calc(var(--v-slider-thumb-size) * 2)
- background: inherit
- // Horizontal
- .v-slider.v-input--horizontal
- .v-slider-thumb
- top: 50%
- transform: translateY(-50%)
- inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
- .v-slider-thumb__label-container
- left: calc(var(--v-slider-thumb-size) / 2)
- top: 0
- .v-slider-thumb__label
- bottom: $slider-thumb-label-offset
- @include tools.ltr()
- transform: translateX(-50%)
- @include tools.rtl()
- transform: translateX(50%)
- &::before
- border-left: $slider-thumb-label-wedge-size solid transparent
- border-right: $slider-thumb-label-wedge-size solid transparent
- border-top: $slider-thumb-label-wedge-size solid currentColor
- bottom: -$slider-thumb-label-wedge-size
- // Vertical
- .v-slider.v-input--vertical
- .v-slider-thumb
- top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
- .v-slider-thumb__label-container
- top: calc(var(--v-slider-thumb-size) / 2)
- right: 0
- .v-slider-thumb__label
- top: math.div($slider-thumb-label-height, -2)
- left: $slider-thumb-label-offset
- &::before
- border-right: $slider-thumb-label-wedge-size solid currentColor
- border-top: $slider-thumb-label-wedge-size solid transparent
- border-bottom: $slider-thumb-label-wedge-size solid transparent
- left: -$slider-thumb-label-wedge-size
- // Modifiers
- .v-slider-thumb--focused
- .v-slider-thumb__surface::before
- transform: scale(2)
- opacity: $slider-thumb-focus-opacity
- .v-slider-thumb--pressed
- transition: none
- .v-slider-thumb__surface::before
- opacity: $slider-thumb-pressed-opacity
- @media (hover: hover)
- .v-slider-thumb:hover
- .v-slider-thumb__surface::before
- transform: scale(2)
- .v-slider-thumb:hover:not(.v-slider-thumb--focused)
- .v-slider-thumb__surface::before
- opacity: $slider-thumb-hover-opacity
|