diff options
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; |