Update to primer on npm, set tooltipped-no-delay for all tooltips

This commit is contained in:
Max Leiter 2017-12-18 17:59:35 -08:00
parent 95ff256e68
commit 32b4349130
4 changed files with 10 additions and 199 deletions

View File

@ -1694,205 +1694,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
display: block;
}
/**
* Tooltips v0.5.3
* See http://primercss.io/tooltips/
*/
.tooltipped {
position: relative;
}
.tooltipped::after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font-size: 12px;
line-height: 1.2;
-webkit-font-smoothing: subpixel-antialiased;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: #222;
border-radius: 3px;
opacity: 0;
}
.tooltipped::before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: #fff;
pointer-events: none;
content: "";
border: 5px solid transparent;
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::after,
.tooltipped:active::before,
.tooltipped:active::after,
.tooltipped:focus::before,
.tooltipped:focus::after {
display: inline-block;
text-decoration: none;
-webkit-animation-name: tooltip-appear;
animation-name: tooltip-appear;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.tooltipped-no-delay:hover::before,
.tooltipped-no-delay:hover::after,
.tooltipped-no-delay:active::before,
.tooltipped-no-delay:active::after,
.tooltipped-no-delay:focus::before,
.tooltipped-no-delay:focus::after {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.tooltipped-s::after,
.tooltipped-se::after,
.tooltipped-sw::after {
top: 100%;
right: 50%;
margin-top: 5px;
}
.tooltipped-s::before,
.tooltipped-se::before,
.tooltipped-sw::before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: #222;
}
.tooltipped-se::after {
right: auto;
left: 50%;
margin-left: -15px;
}
.tooltipped-sw::after {
margin-right: -15px;
}
.tooltipped-n::after,
.tooltipped-ne::after,
.tooltipped-nw::after {
right: 50%;
bottom: 100%;
margin-bottom: 5px;
}
.tooltipped-n::before,
.tooltipped-ne::before,
.tooltipped-nw::before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: #222;
}
.tooltipped-ne::after {
right: auto;
left: 50%;
margin-left: -15px;
}
.tooltipped-nw::after {
margin-right: -15px;
}
.tooltipped-s::after,
.tooltipped-n::after {
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.tooltipped-w::after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.tooltipped-w::before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: #222;
}
.tooltipped-e::after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.tooltipped-e::before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: #222;
}
@media
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.tooltipped-w::after {
margin-right: 4.5px;
}
}
/* End tooltips */
/**
* IRC Message Styling
* Colours are credit to http://clrs.cc/
@ -2114,6 +1915,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
font-style: italic;
}
.tooltipped::after {
font-size: 12px;
}
@media (min-width: 480px) {
/* Fade out for long usernames */

View File

@ -8,6 +8,7 @@
<link rel="preload" as="script" href="js/bundle.vendor.js">
<link rel="preload" as="script" href="js/bundle.js">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/primer-tooltips.css">
<link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="<%- theme %>">
<style id="user-specified-css"></style>

View File

@ -51,6 +51,7 @@
"lodash": "4.17.4",
"moment": "2.20.0",
"package-json": "4.0.1",
"primer-tooltips": "1.5.0",
"read": "1.0.7",
"request": "2.83.0",
"semver": "5.4.1",

View File

@ -90,6 +90,10 @@ const config = {
from: "./client/css/*",
to: "css/[name].[ext]",
},
{
from: "./node_modules/primer-tooltips/build/build.css",
to: "css/primer-tooltips.[ext]",
},
]),
// socket.io uses debug, we don't need it
new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")),