From 32b4349130e8f5dd3c598f13676d894bd20ec588 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Mon, 18 Dec 2017 17:59:35 -0800 Subject: [PATCH] Update to primer on npm, set tooltipped-no-delay for all tooltips --- client/css/style.css | 203 +------------------------------------------ client/index.html | 1 + package.json | 1 + webpack.config.js | 4 + 4 files changed, 10 insertions(+), 199 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 57b2e8d8..9a8da7d3 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -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 */ diff --git a/client/index.html b/client/index.html index e51999d7..dd0bd3f9 100644 --- a/client/index.html +++ b/client/index.html @@ -8,6 +8,7 @@ + diff --git a/package.json b/package.json index 5c836ff5..1936fabb 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/webpack.config.js b/webpack.config.js index 0f38b7a8..45ea8e9b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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")),