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:
parent
cc5b363d66
commit
2a822d7b45
@ -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
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user