diff options
author | Sam Potts <sam@potts.es> | 2017-12-08 15:54:08 +0000 |
---|---|---|
committer | Sam Potts <sam@potts.es> | 2017-12-08 15:54:08 +0000 |
commit | 82f81f4f735c74b7425a66b7c9ec6f0bd91ae7a2 (patch) | |
tree | 8a0f1839efbf7b91d346cc79b87ca6f5324df347 /src/less/components | |
parent | c8990bd379d97f4eb14cc35aaa90caebfb7db220 (diff) | |
download | plyr-82f81f4f735c74b7425a66b7c9ec6f0bd91ae7a2.tar.lz plyr-82f81f4f735c74b7425a66b7c9ec6f0bd91ae7a2.tar.xz plyr-82f81f4f735c74b7425a66b7c9ec6f0bd91ae7a2.zip |
More Edge fixes and small UI bugs
Diffstat (limited to 'src/less/components')
-rw-r--r-- | src/less/components/menus.less | 3 | ||||
-rw-r--r-- | src/less/components/progress.less | 21 | ||||
-rw-r--r-- | src/less/components/sliders.less | 4 |
3 files changed, 7 insertions, 21 deletions
diff --git a/src/less/components/menus.less b/src/less/components/menus.less index 80b8fabe..f0a92d06 100644 --- a/src/less/components/menus.less +++ b/src/less/components/menus.less @@ -3,6 +3,7 @@ // -------------------------------------------------------------- .plyr__menu { + display: flex; // Edge fix position: relative; // Animate the icon @@ -11,7 +12,7 @@ } .plyr__control[aria-expanded='true'] { svg { - transform: rotate(45deg); + transform: rotate(90deg); } // Hide tooltip diff --git a/src/less/components/progress.less b/src/less/components/progress.less index 1472f9c5..1a252937 100644 --- a/src/less/components/progress.less +++ b/src/less/components/progress.less @@ -4,7 +4,7 @@ .plyr__progress { position: relative; - display: none; + display: flex; flex: 1; input[type='range'] { @@ -19,10 +19,6 @@ } } -.plyr .plyr__progress { - display: inline-block; -} - .plyr__progress--buffer { position: absolute; left: 0; @@ -40,6 +36,7 @@ &::-webkit-progress-bar { background: transparent; + transition: width 0.2s ease; } &::-webkit-progress-value { @@ -53,24 +50,12 @@ background: currentColor; border-radius: 100px; min-width: @plyr-range-track-height; + transition: width 0.2s ease; } // Microsoft &::-ms-fill { border-radius: 100px; - } -} - -.plyr__progress--buffer { - &::-webkit-progress-value { - transition: width 0.2s ease; - } - - &::-moz-progress-bar { - transition: width 0.2s ease; - } - - &::-ms-fill { transition: width 0.2s ease; } } diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less index b420c8ad..41954a97 100644 --- a/src/less/components/sliders.less +++ b/src/less/components/sliders.less @@ -5,7 +5,7 @@ // Specificity is for bootstrap compatibility .plyr--full-ui input[type='range'] { display: block; - height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); + height: @plyr-range-thumb-active-height; width: 100%; margin: 0; padding: 0; @@ -16,7 +16,7 @@ border-radius: (@plyr-range-thumb-height * 2); // Used in JS to populate lower fill for WebKit - color: @plyr-range-selected-bg; + color: @plyr-range-fill-bg; // WebKit -webkit-appearance: none; |