From 27dc32e2e8ed0f5a40d4ce414a83b7e15d6bd53f Mon Sep 17 00:00:00 2001
From: Matthew Toback <matt@Mattbook.local>
Date: Fri, 19 Feb 2016 21:24:46 -0500
Subject: [PATCH] Started moving select box styles into gf-form

---
 .bra.toml                                     |  2 +-
 .../features/datasources/partials/edit.html   |  2 +-
 public/sass/components/_gf-form.scss          | 69 ++++++++++++++++++-
 public/sass/layout/_page.scss                 |  2 +-
 4 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/.bra.toml b/.bra.toml
index 54019208984..f56e88fb02a 100644
--- a/.bra.toml
+++ b/.bra.toml
@@ -3,7 +3,7 @@ init_cmds = [
   ["go", "build", "-o", "./bin/grafana-server", "./pkg/cmd/grafana-server"],
 	["./bin/grafana-server"]
 ]
-watch_all = true
+watch_all = false
 watch_dirs = [
 	"$WORKDIR/pkg",
 	"$WORKDIR/public/views",
diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html
index 5c8a6492bb1..1d9a20444d4 100644
--- a/public/app/features/datasources/partials/edit.html
+++ b/public/app/features/datasources/partials/edit.html
@@ -20,7 +20,7 @@
 
 			<div class="gf-form">
 				<span class="gf-form-label gf-size-sm">Type</span>
-				<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
+				<select class="gf-form-input gf-size-auto gf-form-select-input" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
 			</div>
 		</div>
 
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index e300f4aa304..0b80def21e2 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -81,7 +81,7 @@ $gf-form-label-margin: 0.2rem;
   background-color: $input-bg;
   background-image: none;
   background-clip: padding-box;
-  border: $input-btn-border-width solid transparent;
+  border: $input-btn-border-width solid $input-bg;
   @include border-radius($input-border-radius-sm);
   @include box-shadow($input-box-shadow);
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
@@ -116,6 +116,73 @@ $gf-form-label-margin: 0.2rem;
   &.gf-size-auto { width: auto; }
 }
 
+.gf-form-input > select {
+  width: 115%;
+  min-width: 110%;
+  max-width: 115%;
+  height: 24px;
+  margin: 0;
+  padding: 0 20px 0 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: $input-color;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-indent: .01px;
+  text-overflow: '';
+  -webkit-appearance: none;
+  -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
+  appearance: none;
+}
+
+// This hides native dropdown button arrow in IE
+.gf-form-input > select::-ms-expand {
+  display: none;
+}
+
+.gf-form-input:after > select:after {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  height: 12px;
+  margin-top: -6px;
+  padding: 0;
+  background-color: transparent;
+  color: $input-color;
+  font: normal normal normal 14px/1 FontAwesome;
+  text-align: center;
+  content: '\f0d7';
+  pointer-events: none;
+}
+
+.gf-form-input > select:focus {
+  outline: none;
+}
+
+// This hides focus around selected option in FF
+.gf-form-input > select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #adafae;
+}
+
+// .gf-form-input {
+//   margin: 0;
+//   background: $input-color;
+// }
+
+.gf-form-select-interior {
+  margin: 0;
+  background-color: $input-bg;
+  border: 1px solid $input-bg;
+}
+
+.gf-form-input > select {
+  height: 34px;
+  line-height: 34px;
+}
+
 .gf-form-btn {
   padding: $input-padding-y $input-padding-x;
   line-height: $input-line-height;
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 48c4e33b5df..78b6936623d 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -40,7 +40,7 @@
   border-top: 0;
   border-right: 0;
   border-left: 0;
-  border-bottom: 4px solid transparent;
+  border-bottom: 2px solid transparent;
 
   h1 {
     font-style: italic;