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

Fix for Tooltips overflowing (fixes #230)

Browse Source
This commit is contained in:
Sam
2016-05-23 22:29:20 +01:00
parent be2e7d4c99
commit b3299b4641
5 changed files with 83 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/scss/plyr.scss
View File

@ -484,6 +484,40 @@
z-index: 3;
}
// First tooltip
.plyr__controls button:first-child .plyr__tooltip {
$tooltip-arrow-offset: ;
left: 0;
transform: translate(0, 10px) scale(.8);
transform-origin: 0 100%;
&::before {
left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
}
}
// Last tooltip
.plyr__controls button:last-child .plyr__tooltip {
right: 0;
transform: translate(0, 10px) scale(.8);
transform-origin: 100% 100%;
&::before {
left: auto;
right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
transform: translateX(50%);
}
}
.plyr__controls button:first-child,
.plyr__controls button:last-child {
&:hover .plyr__tooltip,
&.tab-focus:focus .plyr__tooltip,
.plyr__tooltip--visible {
transform: translate(0, 0) scale(1);
}
}
// Playback progress
// --------------------------------------------------------------
// <progress> element