ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #209 from robinpoort/master

Browse Source 
Add CSS settings
This commit is contained in:
Sam Potts 2016-05-11 22:39:54 +10:00
commit 31c933af38
5 changed files with 69 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

45
src/less/plyr.less
View File

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

5
src/less/variables.less
View File

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

42
src/scss/plyr.scss
View File

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

5
src/scss/variables.scss
View File

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