diff options
author | Danielh112 <Daniel@sbgsportssoftware.com> | 2020-08-18 11:29:25 +0100 |
---|---|---|
committer | Danielh112 <Daniel@sbgsportssoftware.com> | 2020-08-18 11:29:25 +0100 |
commit | f7e9ee56d2ed5447f59e5548f005fabdab2f0a72 (patch) | |
tree | a16300fa62e68b3310ae96e36dba65981f0024ef /src/sass/components/sliders.scss | |
parent | 22af7f16ea4a4269321d29242d63ec23718c92da (diff) | |
parent | 423b7b276f1572eb666de32094a9aacd32e87d18 (diff) | |
download | plyr-f7e9ee56d2ed5447f59e5548f005fabdab2f0a72.tar.lz plyr-f7e9ee56d2ed5447f59e5548f005fabdab2f0a72.tar.xz plyr-f7e9ee56d2ed5447f59e5548f005fabdab2f0a72.zip |
Fix merge conflicts
Diffstat (limited to 'src/sass/components/sliders.scss')
-rw-r--r-- | src/sass/components/sliders.scss | 154 |
1 files changed, 77 insertions, 77 deletions
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index 7b519fc6..b90e7229 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -3,92 +3,92 @@ // -------------------------------------------------------------- .plyr--full-ui input[type='range'] { - // WebKit + // WebKit + -webkit-appearance: none; /* stylelint-disable-line */ + background: transparent; + border: 0; + border-radius: calc(#{$plyr-range-thumb-height} * 2); + // `color` property is used in JS to populate lower fill for WebKit + color: $plyr-range-fill-background; + display: block; + height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height}); + margin: 0; + padding: 0; + transition: box-shadow 0.3s ease; + width: 100%; + + &::-webkit-slider-runnable-track { + @include plyr-range-track(); + background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); + } + + &::-webkit-slider-thumb { + @include plyr-range-thumb(); -webkit-appearance: none; /* stylelint-disable-line */ - background: transparent; + margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1); + } + + // Mozilla + &::-moz-range-track { + @include plyr-range-track(); + } + + &::-moz-range-thumb { + @include plyr-range-thumb(); + } + + &::-moz-range-progress { + background: currentColor; + border-radius: calc(#{$plyr-range-track-height} / 2); + height: $plyr-range-track-height; + } + + // Microsoft + &::-ms-track { + @include plyr-range-track(); + color: transparent; + } + + &::-ms-fill-upper { + @include plyr-range-track(); + } + + &::-ms-fill-lower { + @include plyr-range-track(); + + background: currentColor; + } + + &::-ms-thumb { + @include plyr-range-thumb(); + // For some reason, Edge uses the -webkit margin above + margin-top: 0; + } + + &::-ms-tooltip { + display: none; + } + + // Focus styles + &:focus { + outline: 0; + } + + &::-moz-focus-outer { border: 0; - border-radius: ($plyr-range-thumb-height * 2); - // color is used in JS to populate lower fill for WebKit - color: $plyr-range-fill-bg; - display: block; - height: $plyr-range-max-height; - margin: 0; - padding: 0; - transition: box-shadow 0.3s ease; - width: 100%; + } + &.plyr__tab-focus { &::-webkit-slider-runnable-track { - @include plyr-range-track(); - background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); + @include plyr-tab-focus(); } - &::-webkit-slider-thumb { - @include plyr-range-thumb(); - -webkit-appearance: none; /* stylelint-disable-line */ - margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2); - } - - // Mozilla &::-moz-range-track { - @include plyr-range-track(); - } - - &::-moz-range-thumb { - @include plyr-range-thumb(); - } - - &::-moz-range-progress { - background: currentColor; - border-radius: ($plyr-range-track-height / 2); - height: $plyr-range-track-height; + @include plyr-tab-focus(); } - // Microsoft &::-ms-track { - @include plyr-range-track(); - color: transparent; - } - - &::-ms-fill-upper { - @include plyr-range-track(); - } - - &::-ms-fill-lower { - @include plyr-range-track(); - - background: currentColor; - } - - &::-ms-thumb { - @include plyr-range-thumb(); - // For some reason, Edge uses the -webkit margin above - margin-top: 0; - } - - &::-ms-tooltip { - display: none; - } - - // Focus styles - &:focus { - outline: 0; - } - - &::-moz-focus-outer { - border: 0; - } - - &.plyr__tab-focus { - &::-webkit-slider-runnable-track { - @include plyr-tab-focus(); - } - - &::-moz-range-track { - @include plyr-tab-focus(); - } - - &::-ms-track { - @include plyr-tab-focus(); - } + @include plyr-tab-focus(); } + } } |