Mirrors/thelounge
2
0
Fork 0
mirror of https://github.com/thelounge/thelounge synced 2024-09-21 06:32:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update Primer tooltips to latest v0.5.3

Browse source 
This:

- Makes tooltips appear after timer instead of instantly, necessary for timestamp tooltips (see https://github.com/thelounge/lounge/pull/824#pullrequestreview-13676231)
- Uses Primer default animation (not sure if .2s transition was ours or theirs but here it is)
- Goes closer to default tooltips which will help to bump future versions and/or to streamline this in build process
This commit is contained in:
Jérémie Astori 2017-04-04 01:27:13 -04:00
parent 5d36b29aa8
commit 5b721c1b99
1 changed files with 49 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
client/css/style.css
View file

@ -1519,9 +1519,10 @@ kbd {
} }
/** /**
* Tooltips * Tooltips v0.5.3
* See http://primercss.io/tooltips/ * See http://primercss.io/tooltips/
*/ */
.tooltipped { .tooltipped {
position: relative; position: relative;
} }
@ -1529,12 +1530,11 @@ kbd {
.tooltipped:after { .tooltipped:after {
position: absolute; position: absolute;
z-index: 1000000; z-index: 1000000;
display: inline-block; display: none;
visibility: hidden;
opacity: 0;
padding: 5px 8px; padding: 5px 8px;
font: 12px Lato; font: 12px Lato;
line-height: 1.2; line-height: 1.2;
-webkit-font-smoothing: subpixel-antialiased;
color: #fff; color: #fff;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -1547,23 +1547,40 @@ kbd {
content: attr(aria-label); content: attr(aria-label);
background: #222; background: #222;
border-radius: 3px; border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased; opacity: 0;
transition: .2s;
} }
.tooltipped:before { .tooltipped:before {
position: absolute; position: absolute;
z-index: 1000001; z-index: 1000001;
display: inline-block; display: none;
visibility: hidden;
opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
color: #fff; color: #fff;
pointer-events: none; pointer-events: none;
content: ""; content: "";
border: 5px solid transparent; border: 5px solid transparent;
transition: .2s; opacity: 0;
}
@-webkit-keyframes tooltip-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes tooltip-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
} }
.tooltipped:hover:before, .tooltipped:hover:before,
@ -1572,9 +1589,18 @@ kbd {
.tooltipped:active:after, .tooltipped:active:after,
.tooltipped:focus:before, .tooltipped:focus:before,
.tooltipped:focus:after { .tooltipped:focus:after {
visibility: visible; display: inline-block;
opacity: 1;
text-decoration: none; text-decoration: none;
-webkit-animation-name: tooltip-appear;
animation-name: tooltip-appear;
-webkit-animation-duration: .1s;
animation-duration: .1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-delay: .4s;
animation-delay: .4s;
} }
.tooltipped-s:after, .tooltipped-s:after,
@ -1671,6 +1697,17 @@ kbd {
border-right-color: #222; border-right-color: #222;
} }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.tooltipped-w:after {
margin-right: 4.5px;
}
}
/* End tooltips */ /* End tooltips */
/** /**