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

Controls spacing improvements

Browse Source
This commit is contained in:
Sam Potts
2018-08-13 23:43:22 +10:00
parent 211ad6c8f5
commit 1aeef81288
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/sass/components/controls.scss
View File

@ -18,20 +18,24 @@
> .plyr__control, > .plyr__control,
.plyr__progress, .plyr__progress,
.plyr__time, .plyr__time,
.plyr__menu { .plyr__menu,
margin-left: ($plyr-control-spacing / 2);
&:first-child,
&:first-child + [data-plyr='pause'] {
margin-left: 0;
margin-right: auto;
}
}
.plyr__volume { .plyr__volume {
margin-left: ($plyr-control-spacing / 2); margin-left: ($plyr-control-spacing / 2);
} }
.plyr__menu + .plyr__control,
> .plyr__control + .plyr__menu,
> .plyr__control + .plyr__control,
.plyr__progress + .plyr__control {
margin-left: floor($plyr-control-spacing / 4);
}
> .plyr__control:first-child,
> .plyr__control:first-child + [data-plyr='pause'] {
margin-left: 0;
margin-right: auto;
}
// Hide empty controls // Hide empty controls
&:empty { &:empty {
display: none; display: none;
@ -39,17 +43,12 @@
@media (min-width: $plyr-bp-sm) { @media (min-width: $plyr-bp-sm) {
> .plyr__control, > .plyr__control,
.plyr__menu,
.plyr__progress, .plyr__progress,
.plyr__time, .plyr__time,
.plyr__menu { .plyr__volume {
margin-left: $plyr-control-spacing; margin-left: $plyr-control-spacing;
} }
> .plyr__control + .plyr__control,
.plyr__menu + .plyr__control,
> .plyr__control + .plyr__menu {
margin-left: ($plyr-control-spacing / 2);
}
} }
} }
@ -72,12 +71,15 @@
bottom: 0; bottom: 0;
color: $plyr-video-control-color; color: $plyr-video-control-color;
left: 0; left: 0;
padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
$plyr-control-spacing;
position: absolute; position: absolute;
right: 0; right: 0;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
z-index: 3; z-index: 3;
@media (min-width: $plyr-bp-sm) {
padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
}
} }
// Hide video controls // Hide video controls