From 9787eb7aaa60ec603b7012c3b6a2e5d33db8c8ba Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 29 May 2018 17:31:58 -0700
Subject: [PATCH] Introduce styles for overlay sub-components

---
 ui/src/style/theme/_overlays.scss        | 74 ++++++++++++++++++++++++
 ui/src/style/theme/chronograf-theme.scss |  1 +
 2 files changed, 75 insertions(+)
 create mode 100644 ui/src/style/theme/_overlays.scss

diff --git a/ui/src/style/theme/_overlays.scss b/ui/src/style/theme/_overlays.scss
new file mode 100644
index 0000000000..a6de1e2fff
--- /dev/null
+++ b/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);
+}
diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss
index e7b84ab3d2..b3085129d0 100644
--- a/ui/src/style/theme/chronograf-theme.scss
+++ b/ui/src/style/theme/chronograf-theme.scss
@@ -18,3 +18,4 @@
 @import 'radio-buttons';
 @import 'misc';
 @import 'code-styles';
+@import 'overlays';