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
This commit is contained in:
Robin Poort 2016-05-11 13:46:19 +02:00
parent cc5b363d66
commit 2a822d7b45
2 changed files with 35 additions and 15 deletions

View File

@ -21,18 +21,22 @@
min-width: 200px; min-width: 200px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
// border-box everything & when (@plyr-border-box = true) {
// http://paulirish.com/2012/box-sizing-border-box-ftw/ // border-box everything
&, // http://paulirish.com/2012/box-sizing-border-box-ftw/
*, &,
*::after, *,
*::before { *::after,
box-sizing: border-box; *::before {
box-sizing: border-box;
}
} }
// Fix 300ms delay & when (@plyr-touch-action = true) {
a, button, input, label { // Fix 300ms delay
touch-action: manipulation; a, button, input, label {
touch-action: manipulation;
}
} }
// Media elements // Media elements
@ -138,13 +142,24 @@
// Screen reader only elements // Screen reader only elements
.plyr__sr-only { .plyr__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden; 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 // Video

View File

@ -3,6 +3,11 @@
// https://github.com/selz/plyr // https://github.com/selz/plyr
// ========================================================================== // ==========================================================================
// Settings
@plyr-border-box: true;
@plyr-touch-action: true;
@plyr-sr-only-important: true;
// Colors // Colors
@plyr-color-main: #3498db; @plyr-color-main: #3498db;