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

SASS updated for icon changes

Browse Source
This commit is contained in:
Sam Potts 2015-03-04 21:44:41 +11:00
parent 3459387f04
commit 617ae146c1
1 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/sass/plyr.scss
View File

@ -202,13 +202,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
transition: fill .3s ease; transition: fill .3s ease;
} }
} }
input + label, [type="checkbox"] + label,
input.inverted:checked + label { .inverted:checked + label {
color: $control-color-inactive; color: $control-color-inactive;
} }
button, button,
input.inverted + label, .inverted + label,
input:checked + label { [type="checkbox"]:checked + label {
color: $control-color; color: $control-color;
} }
button { button {
@ -216,18 +216,19 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
background: transparent; background: transparent;
overflow: hidden; overflow: hidden;
} }
input:focus + label, [type="checkbox"]:focus + label,
button:focus { button:focus {
@include tab-focus(); @include tab-focus();
color: $control-color-focus; color: $control-color-focus;
} }
button:hover, button:hover,
input + label:hover { [type="checkbox"] + label:hover {
background: $control-bg-hover; background: $control-bg-hover;
color: $control-color-hover; color: $control-color-hover;
} }
.icon-exit-fullscreen, .icon-exit-fullscreen,
.icon-muted { .icon-muted,
.icon-captions-on {
display: none; display: none;
} }
.player-time { .player-time {
@ -301,15 +302,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
display: inline-block; display: inline-block;
} }
// Muted
&.muted .player-controls .icon-muted {
display: block;
& + svg {
display: none;
}
}
// Volume control // Volume control
// <input[type='range']> element // <input[type='range']> element
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
@ -412,8 +404,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
} }
} }
// When true full screen, show exit fullscreen icon // Change icons on state change
&.fullscreen-active .icon-exit-fullscreen { &.fullscreen-active .icon-exit-fullscreen,
&.muted .player-controls .icon-muted,
&.captions-active .player-controls .icon-captions-on {
display: block; display: block;
& + svg { & + svg {