Started moving select box styles into gf-form

.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",

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>
 

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;

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;