Merge pull request #209 from robinpoort/master

Add CSS settings

4 files changed, 68 insertions, 29 deletions

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