diff options
| author | Sam Potts <me@sampotts.me> | 2018-01-07 22:35:52 +1100 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2018-01-07 22:35:52 +1100 |
| commit | eb38e0394d7ad95f3039ad88f9f564f3a9703503 (patch) | |
| tree | 9b87d2296c124fd933864053cf948a4dbab5e20d /src | |
| parent | e14e2cfaff8acb9a11719d8f5e5684ca7ff48a02 (diff) | |
| download | plyr-eb38e0394d7ad95f3039ad88f9f564f3a9703503.tar.lz plyr-eb38e0394d7ad95f3039ad88f9f564f3a9703503.tar.xz plyr-eb38e0394d7ad95f3039ad88f9f564f3a9703503.zip | |
Slider styling
Diffstat (limited to 'src')
| -rw-r--r-- | src/sass/components/sliders.scss | 2 | ||||
| -rw-r--r-- | src/sass/lib/mixins.scss | 8 | ||||
| -rw-r--r-- | src/sass/settings/sliders.scss | 16 |
3 files changed, 15 insertions, 11 deletions
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index 73a7c25c..7ede4415 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -12,7 +12,7 @@ color: $plyr-range-fill-bg; cursor: pointer; display: block; - height: $plyr-range-thumb-active-height; + height: $plyr-range-max-height; margin: 0; padding: 0; transition: box-shadow 0.3s ease; diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 59b693cf..2abe6b8f 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -34,20 +34,18 @@ @mixin plyr-range-thumb() { background: $plyr-range-thumb-bg; - border: $plyr-range-thumb-border; + border: 0; border-radius: 100%; box-shadow: $plyr-range-thumb-shadow; box-sizing: border-box; height: $plyr-range-thumb-height; position: relative; - transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease; + transition: all 0.2s ease; width: $plyr-range-thumb-height; } @mixin plyr-range-thumb-active() { - background: $plyr-range-thumb-active-bg; - border-color: $plyr-range-thumb-active-border-color; - transform: scale($plyr-range-thumb-active-height / $plyr-range-thumb-height); + box-shadow: 0 0 0 $plyr-range-thumb-active-shadow-width transparentize($plyr-range-thumb-bg, 0.5); } // Fullscreen styles diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss index ddff0a81..25d64c05 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -2,16 +2,22 @@ // Sliders // ========================================================================== -$plyr-range-track-height: 6px !default; +// Active state +$plyr-range-thumb-active-shadow-width: 3px !default; + +// Thumb $plyr-range-thumb-height: 14px !default; $plyr-range-thumb-bg: #fff !default; $plyr-range-thumb-border: 2px solid transparent !default; $plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default; -$plyr-range-fill-bg: $plyr-color-main !default; -$plyr-range-thumb-active-border-color: #fff !default; -$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default; -$plyr-range-thumb-active-height: 20px !default; +// Track +$plyr-range-track-height: 6px !default; +$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default; + +// Fill +$plyr-range-fill-bg: $plyr-color-main !default; +// Type specific $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; $plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default; |