diff options
| author | Sam Potts <sam@potts.es> | 2018-01-08 20:53:18 +1100 |
|---|---|---|
| committer | Sam Potts <sam@potts.es> | 2018-01-08 20:53:18 +1100 |
| commit | 8786377a755224ebc281488c5bea849639ae4f2a (patch) | |
| tree | 31ceb00b871bae39696456b3005ba575f7f6340e /src/sass/components/sliders.scss | |
| parent | f0322e8d94953ecc1373e31e34e31a24f7698079 (diff) | |
| download | plyr-8786377a755224ebc281488c5bea849639ae4f2a.tar.lz plyr-8786377a755224ebc281488c5bea849639ae4f2a.tar.xz plyr-8786377a755224ebc281488c5bea849639ae4f2a.zip | |
Use CSS custom property for webkit range fill
Diffstat (limited to 'src/sass/components/sliders.scss')
| -rw-r--r-- | src/sass/components/sliders.scss | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index 7ede4415..2e3597a1 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -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; } } |