fix(css): Switch to using px instead of em. Pass sizes to svg icons.

ui-router · Jan 3, 2018 · fc38027 · fc38027
1 parent d75b716
commit fc38027
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 22 deletions.
diff --git a/src/statevis/Controls.tsx b/src/statevis/Controls.tsx
@@ -36,7 +36,7 @@ export class Controls extends Component<IControlsProps, IControlsState> {
                 <StateSelector router={this.props.router} />
                 <div style={{ marginLeft: 'auto', cursor: 'pointer' }} className="uirStateVisIcons">
                     <span className="uirStateVisHover">
-                        <Help/>
+                        <Help size="16px"/>
                         <div className="hoverBlock">
                             <ul>
                                 <li>Click a node to activate that state.</li>
@@ -49,18 +49,18 @@ export class Controls extends Component<IControlsProps, IControlsState> {
                     </span>
 
                     <span className="uirStateVisHover">
-                        <Gear/>
+                        <Gear size="16px"/>
                         <div className="hoverBlock"><LayoutPrefs onRendererChange={this.props.onRendererChange}/></div>
                     </span>
 
                     <span className="uirStateVisHover" onClick={this.props.onMinimize}>
-                        <ChevronDown/>
+                        <ChevronDown size="16px"/>
                         <div><span style={{float: 'right'}}>Minimize</span></div>
                         <div>Minimize</div>
                     </span>
 
                     <span className="uirStateVisHover" onClick={this.props.onClose}>
-                        <Close/>
+                        <Close size="16px"/>
                         <div><span style={{float: 'right'}}>Close</span></div>
                     </span>
                 </div>
@@ -69,4 +69,4 @@ export class Controls extends Component<IControlsProps, IControlsState> {
             </div>
         )
     }
-}
+}
diff --git a/src/statevis/icons/ChevronDown.tsx b/src/statevis/icons/ChevronDown.tsx
@@ -1,3 +1,8 @@
 import { h } from 'preact';
-export const ChevronDown = () => 
-    <svg width="1em" height="1em" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"/></svg>
+export const ChevronDown = ({ size }) =>
+    <svg width={size}
+         height={size}
+         viewBox="0 0 1792 1792"
+         xmlns="http://www.w3.org/2000/svg">
+      <path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"/>
+    </svg>;
diff --git a/src/statevis/icons/Close.tsx b/src/statevis/icons/Close.tsx
@@ -1,3 +1,8 @@
 import { h } from 'preact';
-export const Close = () => 
-    <svg width="1em" height="1em" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>
+export const Close = ({ size }) =>
+    <svg width={size}
+         height={size}
+         viewBox="0 0 1792 1792"
+         xmlns="http://www.w3.org/2000/svg">
+      <path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
+    </svg>;
diff --git a/src/statevis/icons/Gear.tsx b/src/statevis/icons/Gear.tsx
@@ -1,3 +1,8 @@
 import { h } from 'preact';
-export const Gear = () => 
-    <svg width="1em" height="1em" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"/></svg>
+export const Gear = ({ size }) =>
+    <svg width={size}
+         height={size}
+         viewBox="0 0 1792 1792"
+         xmlns="http://www.w3.org/2000/svg">
+      <path d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"/>
+    </svg>;
diff --git a/src/statevis/icons/Help.tsx b/src/statevis/icons/Help.tsx
@@ -1,3 +1,8 @@
 import { h } from 'preact';
-export const Help = () => 
-    <svg width="1em" height="1em" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1008 1200v160q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-160q0-14 9-23t23-9h160q14 0 23 9t9 23zm256-496q0 50-15 90t-45.5 69-52 44-59.5 36q-32 18-46.5 28t-26 24-11.5 29v32q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-68q0-35 10.5-64.5t24-47.5 39-35.5 41-25.5 44.5-21q53-25 75-43t22-49q0-42-43.5-71.5t-95.5-29.5q-56 0-95 27-29 20-80 83-9 12-25 12-11 0-19-6l-108-82q-10-7-12-20t5-23q122-192 349-192 129 0 238.5 89.5t109.5 214.5zm-368-448q-130 0-248.5 51t-204 136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5-51-248.5-136.5-204-204-136.5-248.5-51zm768 640q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>
+export const Help = ({ size }) =>
+    <svg width={size}
+         height={size}
+         viewBox="0 0 1792 1792"
+         xmlns="http://www.w3.org/2000/svg">
+      <path d="M1008 1200v160q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-160q0-14 9-23t23-9h160q14 0 23 9t9 23zm256-496q0 50-15 90t-45.5 69-52 44-59.5 36q-32 18-46.5 28t-26 24-11.5 29v32q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-68q0-35 10.5-64.5t24-47.5 39-35.5 41-25.5 44.5-21q53-25 75-43t22-49q0-42-43.5-71.5t-95.5-29.5q-56 0-95 27-29 20-80 83-9 12-25 12-11 0-19-6l-108-82q-10-7-12-20t5-23q122-192 349-192 129 0 238.5 89.5t109.5 214.5zm-368-448q-130 0-248.5 51t-204 136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5-51-248.5-136.5-204-204-136.5-248.5-51zm768 640q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
+    </svg>;
diff --git a/src/statevis/statevis.css b/src/statevis/statevis.css
@@ -1,9 +1,29 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+#uirStateVisualizer {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 16px;
+    font-family: sans-serif;
+    font-weight: normal;
+    vertical-align: baseline;
+    line-height: 1;
+    display: block;
+    box-sizing: content-box;
+}
+#uirStateVisualizer svg {
+    box-sizing: content-box;
+}
 
 .uirStateVisContainer {
     z-index: 3;
     position: fixed;
-    right: 2em;
-    bottom: 4em;
+    right: 32px;
+    bottom: 64px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -21,7 +41,7 @@
 }
 
 .uirStateVisContainer:hover {
-    outline: 3px solid rgba(0,0,0,0.35)
+    outline: 2px solid rgba(0,0,0,0.35)
 }
 
 .uirStateVisContainer:hover .uirStateVisControls {
@@ -39,7 +59,7 @@
 }
 
 .uirStateVisContainer .uirStateVisControls .uirStateVisIcons span svg {
-    padding: 0.25em;
+    padding: 3px;
     fill: #777777;
 }
 
@@ -50,16 +70,16 @@
 .uirStateVisHover > div {
     transition: opacity 500ms ease;
     opacity: 0;
-    height: 0px;
+    height: 0;
     padding: 0;
 
     position: absolute;
     top: 0;
     right: 0;
     overflow: hidden;
 
-    margin-top: 1.5em;
-    font-size: 0.8em;
+    margin-top: 26px;
+    font-size: 14px;
 }
 
 .uirStateVisHover > div.hoverBlock {
@@ -79,7 +99,7 @@
 }
 
 .uirStateVisHover .uirStateVisLayoutPrefs {
-    padding: 0.75em 1.5em;
+    padding: 12px 24px;
 }
 
 .uirStateVisContainer .statevis {
@@ -169,4 +189,4 @@
 
 /*.draggable:hover {*/
     /*outline: 3px solid rgba(0,0,0,0.15)*/
-/*}*/
+/*}*/