From 7e53f01d44d427a27f2a2c589f71fd535b777377 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 11 May 2016 10:17:28 +1000 Subject: Fix for #206 --- src/less/plyr.less | 1 + src/scss/plyr.scss | 1 + 2 files changed, 2 insertions(+) (limited to 'src') diff --git a/src/less/plyr.less b/src/less/plyr.less index 65268b0b..69846a10 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -629,6 +629,7 @@ // -------------------------------------------------------------- .plyr .plyr__volume { display: none; + flex: 1; position: relative; input[type="range"] { diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index fb203a5a..0cb8968d 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -629,6 +629,7 @@ // -------------------------------------------------------------- .plyr .plyr__volume { display: none; + flex: 1; position: relative; input[type="range"] { -- cgit v1.2.3 From cc5b363d662cf9a4f60919a4cf94913e6b588149 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 11 May 2016 10:18:34 +1000 Subject: Version bump --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 98063995..832df4af 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.4 +// plyr.js v1.6.5 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== -- cgit v1.2.3 From 2a822d7b45e83972ee84d3b5118c027258d70f5e Mon Sep 17 00:00:00 2001 From: Robin Poort Date: Wed, 11 May 2016 13:46:19 +0200 Subject: Adding LESS settings - Added setting to be able to disable the border-box if you already defined that in your own css - Added setting to be able to disable touch-action if you already defined that in your own css - Added setting to choose not to use !important for sr-only class --- src/less/plyr.less | 45 ++++++++++++++++++++++++++++++--------------- src/less/variables.less | 5 +++++ 2 files changed, 35 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/less/plyr.less b/src/less/plyr.less index 69846a10..1b5c7eb2 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -21,18 +21,22 @@ min-width: 200px; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; - // border-box everything - // http://paulirish.com/2012/box-sizing-border-box-ftw/ - &, - *, - *::after, - *::before { - box-sizing: border-box; + & when (@plyr-border-box = true) { + // border-box everything + // http://paulirish.com/2012/box-sizing-border-box-ftw/ + &, + *, + *::after, + *::before { + box-sizing: border-box; + } } - // Fix 300ms delay - a, button, input, label { - touch-action: manipulation; + & when (@plyr-touch-action = true) { + // Fix 300ms delay + a, button, input, label { + touch-action: manipulation; + } } // Media elements @@ -138,13 +142,24 @@ // Screen reader only elements .plyr__sr-only { - position: absolute !important; clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; overflow: hidden; + + // !important is not always needed + & when (@plyr-sr-only-important = true) { + position: absolute !important; + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + } + & when (@plyr-sr-only-important = false) { + position: absolute; + padding: 0; + border: 0; + height: 1px; + width: 1px; + } } // Video diff --git a/src/less/variables.less b/src/less/variables.less index ea5c6b8e..fa0f83e9 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -3,6 +3,11 @@ // https://github.com/selz/plyr // ========================================================================== +// Settings +@plyr-border-box: true; +@plyr-touch-action: true; +@plyr-sr-only-important: true; + // Colors @plyr-color-main: #3498db; -- cgit v1.2.3 From b23a16826ea2d9ee749449612f21c826d49c5616 Mon Sep 17 00:00:00 2001 From: Robin Poort Date: Wed, 11 May 2016 13:46:40 +0200 Subject: Adding SCSS settings - Added setting to be able to disable the border-box if you already defined that in your own css - Added setting to be able to disable touch-action if you already defined that in your own css - Added setting to choose not to use !important for sr-only class --- src/scss/plyr.scss | 42 ++++++++++++++++++++++++++++-------------- src/scss/variables.scss | 5 +++++ 2 files changed, 33 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 0cb8968d..917c0645 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -21,18 +21,22 @@ min-width: 200px; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; - // border-box everything - // http://paulirish.com/2012/box-sizing-border-box-ftw/ - &, - *, - *::after, - *::before { - box-sizing: border-box; + @if $plyr-border-box == true { + // border-box everything + // http://paulirish.com/2012/box-sizing-border-box-ftw/ + &, + *, + *::after, + *::before { + box-sizing: border-box; + } } - // Fix 300ms delay - a, button, input, label { + @if $plyr-touch-action == true { + // Fix 300ms delay + a, button, input, label { touch-action: manipulation; + } } // Media elements @@ -138,13 +142,23 @@ // Screen reader only elements .plyr__sr-only { - position: absolute !important; clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; overflow: hidden; + + // !important is not always needed + @if $plyr-sr-only-important == true { + position: absolute !important; + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + } @else { + position: absolute; + padding: 0; + border: 0; + height: 1px; + width: 1px; + } } // Video diff --git a/src/scss/variables.scss b/src/scss/variables.scss index baf47e25..7cc7e34c 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -4,6 +4,11 @@ // https://robots.thoughtbot.com/sass-default // ========================================================================== +// Settings +$plyr-border-box: true !default; +$plyr-touch-action: true !default; +$plyr-sr-only-important: true !default; + // Colors $plyr-color-main: #3498db !default; -- cgit v1.2.3