Organize time machine styles

ui/src/style/chronograf.scss

@@ -71,7 +71,6 @@
 @import 'components/threesizer';
 @import 'components/threshold-controls';
 @import 'components/kapacitor-logs-table';
-@import 'components/func-node.scss';
 
 // Pages
 @import 'pages/config-endpoints';
@@ -82,11 +81,8 @@
 @import 'pages/admin';
 @import 'pages/users';
 @import 'pages/tickscript-editor';
+@import 'pages/time-machine';
 @import 'pages/manage-providers';
 
 // TODO
 @import 'unsorted';
-
-// IFQL - Time Machine
-@import 'components/funcs-button';
-@import 'components/time-machine';

ui/src/style/components/time-machine/ifql-editor.scss

@@ -1,3 +1,8 @@
+/*
+    IFQL Code Mirror Editor
+    ----------------------------------------------------------------------------
+*/
+
 .time-machine-container {
   display: flex;
   height: 90%;

ui/src/style/components/time-machine/visualization.scss

@@ -0,0 +1,48 @@
+/*
+    Time Machine Visualization
+    ----------------------------------------------------------------------------
+*/
+
+.time-machine-visualization {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  @include gradient-v($g2-kevlar, $g0-obsidian);
+}
+
+.time-machine--graph {
+  width: calc(100% - 60px);
+  height: calc(100% - 60px);
+  background-color: $g3-castle;
+  border-radius: $radius;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+
+.time-machine--graph-header {
+  height: 56px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.time-machine--graph-header .nav.nav-tablist {
+  width: 180px;
+
+  li {
+    justify-content: center;
+    flex: 1 0 0;
+    white-space: nowrap;
+  }
+}
+
+.time-machine--graph-body {
+  padding: 0 16px 8px 16px;
+  flex: 1 0 0;
+}

ui/src/style/pages/time-machine.scss

@@ -0,0 +1,9 @@
+/*
+    Styles for IFQL Builder aka TIME MACHINE aka DELOREAN
+    ----------------------------------------------------------------------------
+*/
+
+@import '../components/time-machine/ifql-editor';
+@import '../components/time-machine/ifql-builder';
+@import '../components/time-machine/visualization';
+@import '../components/time-machine/add-func-button';