Import styles as CSS

gw2efficiency · Sep 30, 2017 · f3c5712 · f3c5712
1 parent 365e04a
commit f3c5712
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 34 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -6,40 +6,6 @@
     <title>GW2 API STATUS</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css">
-    <style>
-      .has-tooltip { position: relative; }
-      .has-tooltip:hover .status-tooltip { opacity: 1; }
-      .status-tooltip {
-        opacity: 0;
-        transition: opacity ease .3s;
-        pointer-events: none;
-        position: absolute;
-        left: 50%;
-        top: -5px;
-        transform: translate(-50%, -100%);
-        background: black;
-        border-radius: 3px;
-        white-space: nowrap;
-        color: #fff;
-        padding: 2px 8px;
-        font-size: 12px;
-      }
-      .status-tooltip:after {
-        content: '';
-        display: block;
-        border: solid;
-        border-width: 6px 6px 0 6px;
-        border-color: black transparent;
-        position: absolute;
-        left: 50%;
-        margin-left: -6px;
-        bottom: -6px;
-
-      .result-row--summary:hover {
-        cursor: pointer;
-        background: #f7f7f7;
-      }
-    </style>
   </head>
   <body>
     <noscript>

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -1,4 +1,5 @@
 import {h, render} from 'preact'
 import App from './App'
+import './styles.css'
 
 render(<App />, document.getElementById('root'))
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -0,0 +1,40 @@
+.has-tooltip {
+  position: relative;
+}
+
+.has-tooltip:hover .status-tooltip {
+  opacity: 1;
+}
+
+.status-tooltip {
+  opacity: 0;
+  transition: opacity ease .3s;
+  pointer-events: none;
+  position: absolute;
+  left: 50%;
+  top: -5px;
+  transform: translate(-50%, -100%);
+  background: black;
+  border-radius: 3px;
+  white-space: nowrap;
+  color: #fff;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.status-tooltip:after {
+  content: '';
+  display: block;
+  border: solid;
+  border-width: 6px 6px 0 6px;
+  border-color: black transparent;
+  position: absolute;
+  left: 50%;
+  margin-left: -6px;
+  bottom: -6px;
+}
+
+.result-row--summary:hover {
+  cursor: pointer;
+  background: #f7f7f7;
+}