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

Fix for webkit redrawing issue

Browse Source
This commit is contained in:
Sam Potts 2018-07-29 12:32:26 +10:00
parent 53a3d06103
commit 3a8332bdb3
4 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -19,7 +19,11 @@
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
@include plyr-range-track(); @include plyr-range-track();
background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); background-image: linear-gradient(
to right,
currentColor var(--value, 0%),
transparent var(--value, 0%)
);
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@ -140,15 +144,21 @@
// Pressed styles // Pressed styles
&:active { &:active {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); @include plyr-range-thumb-active(
$plyr-audio-range-thumb-shadow-color
);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); @include plyr-range-thumb-active(
$plyr-audio-range-thumb-shadow-color
);
} }
&::-ms-thumb { &::-ms-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); @include plyr-range-thumb-active(
$plyr-audio-range-thumb-shadow-color
);
} }
} }
} }

4
src/sass/lib/mixins.scss
View File

@ -28,7 +28,6 @@
border: 0; border: 0;
border-radius: ($plyr-range-track-height / 2); border-radius: ($plyr-range-track-height / 2);
height: $plyr-range-track-height; height: $plyr-range-track-height;
transition: all 0.3s ease;
user-select: none; user-select: none;
} }
@ -45,7 +44,8 @@
} }
@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) { @mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; box-shadow: $plyr-range-thumb-shadow,
0 0 0 $plyr-range-thumb-active-shadow-width $color;
} }
// Fullscreen styles // Fullscreen styles