Merge pull request #1392 from influxdata/overlay-all-the-way

Make overlay technology full screen

CHANGELOG.md

@@ -11,6 +11,7 @@
   1. [#1365](https://github.com/influxdata/chronograf/pull/1365): Show red indicator on Hosts Page for an offline host
   1. [#1373](https://github.com/influxdata/chronograf/pull/1373): Re-address dashboard cell stacking contexts
   1. [#602](https://github.com/influxdata/chronograf/pull/602): Normalize terminology in app
+  1. [#1392](https://github.com/influxdata/chronograf/pull/1392): Overlays are now full screen
   1. [#1395](https://github.com/influxdata/chronograf/pull/1395): Change default global time range to past 1 hour
 
 ## v1.2.0-beta10 [2017-04-28]

ui/src/style/chronograf.scss

@@ -22,6 +22,7 @@
 @import 'layout/page';
 @import 'layout/page-header';
 @import 'layout/sidebar';
+@import 'layout/overlay';
 
 // Components
 @import 'components/confirm-buttons';

ui/src/style/layout/overlay.scss

@@ -0,0 +1,23 @@
+/*
+    Manages Overlays
+    ----------------------------------------------
+*/
+
+.page, .sidebar {
+  position: relative;
+}
+.page {
+  z-index: 2;
+}
+.sidebar {
+  z-index: 1;
+
+  // Ensures that sidebar menus appear above the rest of the app on hover
+  &:hover {z-index: 2;}
+  &:hover + .page {z-index: 1;}
+}
+
+// Make Overlay Technology full screen
+.overlay-technology {
+  left: -($sidebar-width) !important;
+}

ui/src/style/layout/page.scss

@@ -13,9 +13,7 @@
   color: $g17-whisper;
 }
 .page {
-  position: relative;
   flex-grow: 1;
-  overflow: hidden;
 }
 .page-contents {
   position: absolute;

ui/src/style/pages/overlay-technology.scss

@@ -11,7 +11,6 @@ $overlay-z: 100;
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
   right: 0;
   z-index: $overlay-z;
   padding: 0 30px;