You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.6 KiB
Stylus
62 lines
1.6 KiB
Stylus
.slider-input
|
|
appearance none
|
|
-webkit-appearance none
|
|
width 100%
|
|
height 4px
|
|
margin 14px 0 10px
|
|
border-radius 999px
|
|
border 1px solid var(--glass-border)
|
|
background linear-gradient(to right, rgba(255, 255, 255, .6) var(--progress, 0%), var(--glass-bg) var(--progress, 0%))
|
|
cursor pointer
|
|
outline none
|
|
transition border-color .25s
|
|
|
|
&:hover,
|
|
&:focus
|
|
border-color var(--glass-border-active)
|
|
|
|
&::-webkit-slider-runnable-track
|
|
height 4px
|
|
border-radius 999px
|
|
background transparent
|
|
|
|
&::-moz-range-track
|
|
height 4px
|
|
border-radius 999px
|
|
background transparent
|
|
|
|
&::-webkit-slider-thumb
|
|
appearance none
|
|
-webkit-appearance none
|
|
width 16px
|
|
height 16px
|
|
margin-top -6px
|
|
border-radius 50%
|
|
background linear-gradient(180deg, #fff, #dcdcdc)
|
|
box-shadow 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .8)
|
|
cursor pointer
|
|
transition box-shadow .2s
|
|
|
|
&::-moz-range-thumb
|
|
width 16px
|
|
height 16px
|
|
border 0
|
|
border-radius 50%
|
|
background linear-gradient(180deg, #fff, #dcdcdc)
|
|
box-shadow 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .8)
|
|
cursor pointer
|
|
|
|
&:active::-webkit-slider-thumb,
|
|
&:focus::-webkit-slider-thumb
|
|
box-shadow 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .8), var(--glass-glow)
|
|
|
|
&:active::-moz-range-thumb,
|
|
&:focus::-moz-range-thumb
|
|
box-shadow 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .8), var(--glass-glow)
|
|
|
|
.app-slider__content
|
|
white-space nowrap
|
|
display flex
|
|
justify-content space-between
|
|
padding 0 3.5%
|