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

Slider styling

Browse Source
This commit is contained in:
Sam Potts 2018-01-07 22:35:52 +11:00
parent e14e2cfaff
commit eb38e0394d
5 changed files with 17 additions and 13 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

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

@ -12,7 +12,7 @@
color: $plyr-range-fill-bg; color: $plyr-range-fill-bg;
cursor: pointer; cursor: pointer;
display: block; display: block;
height: $plyr-range-thumb-active-height; height: $plyr-range-max-height;
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;

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

@ -34,20 +34,18 @@
@mixin plyr-range-thumb() { @mixin plyr-range-thumb() {
background: $plyr-range-thumb-bg; background: $plyr-range-thumb-bg;
border: $plyr-range-thumb-border; border: 0;
border-radius: 100%; border-radius: 100%;
box-shadow: $plyr-range-thumb-shadow; box-shadow: $plyr-range-thumb-shadow;
box-sizing: border-box; box-sizing: border-box;
height: $plyr-range-thumb-height; height: $plyr-range-thumb-height;
position: relative; 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; width: $plyr-range-thumb-height;
} }
@mixin plyr-range-thumb-active() { @mixin plyr-range-thumb-active() {
background: $plyr-range-thumb-active-bg; box-shadow: 0 0 0 $plyr-range-thumb-active-shadow-width transparentize($plyr-range-thumb-bg, 0.5);
border-color: $plyr-range-thumb-active-border-color;
transform: scale($plyr-range-thumb-active-height / $plyr-range-thumb-height);
} }
// Fullscreen styles // Fullscreen styles

16
src/sass/settings/sliders.scss
View File

@ -2,16 +2,22 @@
// Sliders // 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-height: 14px !default;
$plyr-range-thumb-bg: #fff !default; $plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !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-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !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; $plyr-range-fill-bg: $plyr-color-main !default;
$plyr-range-thumb-active-border-color: #fff !default; // Type specific
$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
$plyr-range-thumb-active-height: 20px !default;
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default; $plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;