From 1f28ff6890ab260e469b6fe1c1491d9b43915af8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sat, 20 Feb 2016 17:21:35 +0100
Subject: [PATCH] ux(): added gf-form-select-wrapper

---
 .../features/datasources/partials/edit.html   |  4 +-
 public/sass/components/_gf-form.scss          | 53 +++++++++----------
 2 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html
index 8c362ab7e6b..e96e8d0e08a 100644
--- a/public/app/features/datasources/partials/edit.html
+++ b/public/app/features/datasources/partials/edit.html
@@ -20,7 +20,9 @@
 
 			<div class="gf-form">
 				<span class="gf-form-label width-7">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>
+				<div class="gf-form-select-wrapper">
+					<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>
+				</div>
 			</div>
 		</div>
 
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index c860d474f34..347c96310b4 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -104,34 +104,31 @@ $gf-form-label-margin: 0.2rem;
   &.gf-size-auto { width: auto; }
 }
 
-// select.gf-form-input {
-//   -webkit-appearance: none;
-//   -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
-//   appearance: none;
-//
-//
-//   &:-moz-focusring {
-//     color: transparent;
-//   }
-// }
-//
-// .gf-form-select-wrapper {
-//   position: relative;
-//   &: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-select-wrapper {
+  position: relative;
+
+  select.gf-form-input {
+    padding-right: $input-padding-x*2;
+    -webkit-appearance: none;
+    -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
+    appearance: none;
+
+    &:-moz-focusring {
+      color: transparent;
+    }
+  }
+
+  &:after {
+    position: absolute;
+    top: 35%;
+    right: $input-padding-x/2;
+    background-color: transparent;
+    color: $input-color;
+    font: normal normal normal $font-size-sm/1 FontAwesome;
+    content: '\f0d7';
+    pointer-events: none;
+  }
+}
 
 .gf-form-btn {
   padding: $input-padding-y $input-padding-x;