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

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

40
src/less/plyr.less
View File

@ -285,7 +285,7 @@
flex-shrink: 0; flex-shrink: 0;
overflow: visible; // IE11 overflow: visible; // IE11
vertical-align: middle; vertical-align: middle;
padding: (@plyr-control-spacing * .7); padding: @plyr-control-padding;
border: 0; border: 0;
background: transparent; background: transparent;
border-radius: 3px; border-radius: 3px;
@ -294,8 +294,8 @@
color: inherit; color: inherit;
svg { svg {
width: 18px; width: @plyr-control-icon-size;
height: 18px; height: @plyr-control-icon-size;
display: block; display: block;
fill: currentColor; fill: currentColor;
} }
@ -485,6 +485,40 @@
z-index: 3; z-index: 3;
} }
// First tooltip
.plyr__controls button:first-child .plyr__tooltip {
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 // Playback progress
// -------------------------------------------------------------- // --------------------------------------------------------------
// <progress> element // <progress> element

2
src/less/variables.less
View File

@ -23,7 +23,9 @@
@plyr-font-size-captions-large: (@plyr-font-size-base * 2); @plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls // Controls
@plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px; @plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * .7);
@plyr-video-controls-bg: #000; @plyr-video-controls-bg: #000;
@plyr-video-control-color: #fff; @plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff; @plyr-video-control-color-hover: #fff;

34
src/scss/plyr.scss
View File

@ -484,6 +484,40 @@
z-index: 3; 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 // Playback progress
// -------------------------------------------------------------- // --------------------------------------------------------------
// <progress> element // <progress> element

2
src/scss/variables.scss
View File

@ -24,7 +24,9 @@ $plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !defaul
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default; $plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
// Controls // Controls
$plyr-control-icon-size: 18px !default;
$plyr-control-spacing: 10px !default; $plyr-control-spacing: 10px !default;
$plyr-control-padding: ($plyr-control-spacing * .7) !default;
$plyr-video-controls-bg: #000 !default; $plyr-video-controls-bg: #000 !default;
$plyr-video-control-color: #fff !default; $plyr-video-control-color: #fff !default;
$plyr-video-control-color-hover: #fff !default; $plyr-video-control-color-hover: #fff !default;