160 lines
3.8 KiB
Sass
160 lines
3.8 KiB
Sass
@use 'sass:map'
|
|
@use 'sass:selector'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
// Theme
|
|
.v-slider-track__background
|
|
background-color: rgb(var(--v-theme-surface-variant))
|
|
|
|
.v-slider-track__fill
|
|
background-color: rgb(var(--v-theme-surface-variant))
|
|
|
|
.v-slider-track__tick
|
|
background-color: rgb(var(--v-theme-surface-variant))
|
|
|
|
&--filled
|
|
background-color: $slider-tick-background
|
|
|
|
// Elements
|
|
.v-slider-track
|
|
border-radius: $slider-track-border-radius
|
|
|
|
.v-slider-track
|
|
&__background, &__fill
|
|
position: absolute
|
|
transition: $slider-transition
|
|
border-radius: inherit
|
|
|
|
.v-slider--pressed &
|
|
transition: none
|
|
|
|
.v-input--error:not(.v-input--disabled) &
|
|
background-color: currentColor
|
|
|
|
.v-slider-track__ticks
|
|
height: 100%
|
|
width: 100%
|
|
position: relative
|
|
|
|
.v-slider-track__tick
|
|
position: absolute
|
|
opacity: 0
|
|
transition: 0.2s opacity settings.$standard-easing
|
|
border-radius: $slider-tick-border-radius
|
|
width: var(--v-slider-tick-size)
|
|
height: var(--v-slider-tick-size)
|
|
transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2))
|
|
|
|
&--first .v-slider-track__tick-label
|
|
@include tools.ltr()
|
|
transform: none
|
|
|
|
@include tools.rtl()
|
|
transform: translateX(100%)
|
|
|
|
&--last .v-slider-track__tick-label
|
|
@include tools.ltr()
|
|
transform: translateX(-100%)
|
|
|
|
@include tools.rtl()
|
|
transform: none
|
|
|
|
.v-slider-track__tick-label
|
|
position: absolute
|
|
user-select: none
|
|
white-space: nowrap
|
|
|
|
// Horizontal
|
|
.v-slider.v-input--horizontal
|
|
.v-slider-track
|
|
display: flex
|
|
align-items: center
|
|
width: 100%
|
|
height: $slider-track-active-size
|
|
touch-action: pan-y
|
|
|
|
&__background
|
|
height: var(--v-slider-track-size)
|
|
|
|
&__fill
|
|
height: inherit
|
|
|
|
.v-slider-track__tick
|
|
margin-top: calc(#{$slider-track-active-size} / 2)
|
|
|
|
@include tools.rtl()
|
|
transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2))
|
|
|
|
.v-slider-track__tick-label
|
|
margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top})
|
|
|
|
@include tools.ltr()
|
|
transform: translateX(-50%)
|
|
|
|
@include tools.rtl()
|
|
transform: translateX(50%)
|
|
|
|
&--first
|
|
margin-inline-start: calc(var(--v-slider-tick-size) + 1px)
|
|
|
|
.v-slider-track__tick-label
|
|
@include tools.ltr()
|
|
transform: translateX(0%)
|
|
|
|
@include tools.rtl()
|
|
transform: translateX(0%)
|
|
|
|
&--last
|
|
margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px)
|
|
|
|
.v-slider-track__tick-label
|
|
@include tools.ltr()
|
|
transform: translateX(-100%)
|
|
|
|
@include tools.rtl()
|
|
transform: translateX(100%)
|
|
|
|
// Vertical
|
|
.v-slider.v-input--vertical
|
|
.v-slider-track
|
|
height: 100%
|
|
display: flex
|
|
justify-content: center
|
|
width: $slider-track-active-size
|
|
touch-action: pan-x
|
|
|
|
&__background
|
|
width: var(--v-slider-track-size)
|
|
|
|
&__fill
|
|
width: inherit
|
|
|
|
.v-slider-track__ticks
|
|
height: 100%
|
|
|
|
.v-slider-track__tick
|
|
margin-inline-start: calc(#{$slider-track-active-size} / 2)
|
|
transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2))
|
|
|
|
@include tools.rtl()
|
|
transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2))
|
|
|
|
&--first
|
|
bottom: calc(0% + var(--v-slider-tick-size) + 1px)
|
|
&--last
|
|
bottom: calc(100% - var(--v-slider-tick-size) - 1px)
|
|
|
|
.v-slider-track__tick-label
|
|
margin-inline-start: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-start})
|
|
transform: translateY(-50%)
|
|
|
|
// Modifiers
|
|
.v-slider-track__ticks--always-show, .v-slider--focused
|
|
.v-slider-track__tick
|
|
opacity: 1
|
|
|
|
.v-slider-track__background--opacity
|
|
opacity: 0.38
|