From fc1f3ae480ec38f3577d27c16b89dc0efe1cff45 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 28 Apr 2017 15:33:25 -0700
Subject: [PATCH] Move template control styles into their own sheet

---
 .../components/template-control-bar.scss      | 77 +++++++++++++++++++
 ui/src/style/pages/dashboards.scss            | 25 ++----
 2 files changed, 83 insertions(+), 19 deletions(-)
 create mode 100644 ui/src/style/components/template-control-bar.scss

diff --git a/ui/src/style/components/template-control-bar.scss b/ui/src/style/components/template-control-bar.scss
new file mode 100644
index 000000000..328600551
--- /dev/null
+++ b/ui/src/style/components/template-control-bar.scss
@@ -0,0 +1,77 @@
+/*
+  Template Control Bar
+  ------------------------------------------------------
+  Used within a dashboard to control values for
+  template variables
+*/
+
+.template-control-bar {
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+  padding: 0 14px;
+  @extend .cell-shell;
+}
+.template-control--heading {
+  font-size: 16px;
+  font-weight: 500;
+  color: $g13-mist;
+  margin: 0 8px 0 0;
+  @include no-user-select();
+  white-space: nowrap;
+}
+
+.template-control--dropdown {
+  flex: 0 1 auto;
+  min-width: 160px;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin: 0 0 0 8px;
+
+  .dropdown {
+    order: 2;
+    margin: 0;
+    flex: 1 0 0;
+  }
+
+  .dropdown-toggle {
+    border-radius: 0 $radius-small $radius-small 0;
+    width: 100%;
+  }
+  .dropdown.open > div.btn.dropdown-toggle {
+    @include gradient-h($c-comet,$c-pool);
+  }
+  .dropdown-menu {
+    @include gradient-h($c-amethyst,$c-ocean);
+    @include custom-scrollbar-round($c-ocean,$c-laser);
+
+    > li > a {
+      &, &:active {background-color: transparent !important;}
+    }
+    > li {
+      &:hover {@include gradient-h($c-star,$c-ocean);}
+    }
+  }
+}
+.template-control--label {
+  order: 1;
+  height: 30px;
+  padding: 0 9px;
+  margin: 0;
+  font-size: 12px;
+  font-family: $code-font;
+  color: $c-potassium;
+  line-height: 30px;
+  border-radius: $radius-small 0 0 $radius-small;
+  background-color: $g5-pepper;
+  // transition:
+  //   background-color 0.25s ease,
+  //   color 0.25s ease;
+}
+.dropdown.open + .template-control--label {
+  @include gradient-h($c-star,$c-comet);
+  color: $g20-white;
+}
\ No newline at end of file
diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss
index 964a03fde..71dd3f054 100644
--- a/ui/src/style/pages/dashboards.scss
+++ b/ui/src/style/pages/dashboards.scss
@@ -41,25 +41,6 @@ $dash-graph-options-arrow: 8px;
 }
 
 .dashboard {
-  .template-control-bar {
-    height: 50px;
-    font-size: 18px;
-    font-weight: 400;
-    color: $g14-chromium;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 4px;
-    padding: 10px 15px;
-    @extend .cell-shell;
-    .dropdown {
-      flex: 0 1 auto;
-      min-width: 100px;
-    }
-    .dropdown-toggle {
-      width: 100%;
-    }
-  }
   .react-grid-item {
     @extend .cell-shell;
   }
@@ -376,6 +357,12 @@ $dash-graph-options-arrow: 8px;
   }
 }
 
+/*
+  Template Control Bar
+  ------------------------------------------------------
+*/
+@import '../components/template-control-bar';
+
 /*
   Overylay Technology (Cell Edit Mode)
   ------------------------------------------------------