Introduce styles for overlay sub-components

ui/src/style/theme/_overlays.scss

@@ -0,0 +1,74 @@
+/*
+   Overlays
+   -----------------------------------------------------------------------------
+*/
+
+$overlay-title-height: $chronograf-page-header-height;
+$overlay-gutter: 30px;
+$overlay-min-height: 150px;
+
+.overlay--container {
+  margin: 0 auto;
+}
+
+.overlay--heading {
+  height: $overlay-title-height;
+  background: $g0-obsidian;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 $overlay-gutter;
+  @include no-user-select();
+}
+
+.overlay--title {
+  font-size: 19px;
+  font-weight: 400;
+  color: $g17-whisper;
+  white-space: nowrap;
+}
+
+.overlay--dismiss {
+  width: ($overlay-title-height - 20px);
+  height: ($overlay-title-height - 20px);
+  position: relative;
+  background-color: transparent;
+  border: 0;
+  outline: none;
+
+  /* Use psuedo elements to render the X */
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+    background-color: $g11-sidewalk;
+    transition: background-color 0.25s ease;
+  }
+  &:before {
+    transform: translate(-50%,-50%) rotate(45deg);
+  }
+  &:after {
+    transform: translate(-50%,-50%) rotate(-45deg);
+  }
+  /* Hover State */
+  &:hover {
+    cursor: pointer;
+  }
+  &:hover:before,
+  &:hover:after {
+    background-color: $g18-cloud;
+  }
+}
+
+.overlay--body {
+  padding: $overlay-gutter;
+  padding-top: 18px; 
+  border-radius: 0 0 $radius $radius;
+  min-height: $overlay-min-height;
+  @include gradient-v($g2-kevlar, $g0-obsidian);
+}

ui/src/style/theme/chronograf-theme.scss

@@ -18,3 +18,4 @@
 @import 'radio-buttons';
 @import 'misc';
 @import 'code-styles';
+@import 'overlays';