ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use CSS custom property for webkit range fill

Browse Source
This commit is contained in:
Sam Potts
2018-01-08 20:53:18 +11:00
parent f0322e8d94
commit 8786377a75
8 changed files with 15 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/sass/components/sliders.scss
View File

@ -20,6 +20,7 @@
&::-webkit-slider-runnable-track {
@include plyr-range-track();
background-image: linear-gradient(to right, currentColor var(--value), transparent var(--value));
}
&::-webkit-slider-thumb {
@ -111,29 +112,29 @@
// Video range inputs
.plyr--full-ui.plyr--video input[type='range'] {
&::-webkit-slider-runnable-track {
background: $plyr-video-range-track-bg;
background-color: $plyr-video-range-track-bg;
}
&::-moz-range-track {
background: $plyr-video-range-track-bg;
background-color: $plyr-video-range-track-bg;
}
&::-ms-track {
background: $plyr-video-range-track-bg;
background-color: $plyr-video-range-track-bg;
}
}
// Audio range inputs
.plyr--full-ui.plyr--audio input[type='range'] {
&::-webkit-slider-runnable-track {
background: $plyr-audio-range-track-bg;
background-color: $plyr-audio-range-track-bg;
}
&::-moz-range-track {
background: $plyr-audio-range-track-bg;
background-color: $plyr-audio-range-track-bg;
}
&::-ms-track {
background: $plyr-audio-range-track-bg;
background-color: $plyr-audio-range-track-bg;
}
}