155 lines
3.8 KiB
Sass
155 lines
3.8 KiB
Sass
@use 'sass:map'
|
|
@use 'sass:selector'
|
|
@use 'sass:math'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
// 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
|
|
|
|
&::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
|
|
|
|
+tools.ltr()
|
|
transform: translateX(-50%)
|
|
+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
|