ux(timepicker): fix css for the timepicker

public/app/features/dashboard/timepicker/dropdown.html

@@ -1,37 +1,52 @@
 <div class="row pull-right">
 	<form name="timeForm" class="gf-timepicker-absolute-section">
 		<h3>Time range</h3>
+
 		<label class="small">From:</label>
-		<div class="input-prepend">
+		<div class="gf-form-inline">
-			<input type="text" class="input-large" ng-model="ctrl.timeRaw.from" input-datetime>
+			<div class="gf-form gf-size-max-xxxl">
-			<button class="btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
+				<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.from" input-datetime>
-				<i class="fa fa-calendar"></i>
+			</div>
-			</button>
+			<div class="gf-form">
+				<button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
+					<i class="fa fa-calendar"></i>
+				</button>
+			</div>
 		</div>
 
 		<div ng-if="openFromPicker">
 			<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
 		</div>
 
+
 		<label class="small">To:</label>
-		<div class="input-prepend">
+		<div class="gf-form-inline">
-			<input type="text" class="input-large" ng-model="ctrl.timeRaw.to" input-datetime>
+			<div class="gf-form gf-size-max-xxxl">
-			<button class="btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
+				<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.to" input-datetime>
-				<i class="fa fa-calendar"></i>
+			</div>
-			</button>
+			<div class="gf-form">
+				<button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
+					<i class="fa fa-calendar"></i>
+				</button>
+			</div>
 		</div>
 
 		<div ng-if="openToPicker">
 			<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
 		</div>
 
-		<label class="small">Refreshing every:</label>
-		<select ng-model="ctrl.refresh.value" class='input-medium' ng-options="f.value as f.text for f in ctrl.refresh.options">
-		</select>
 
-		<button type="submit" class="btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">
+
-			Apply
+		<label class="small">Refreshing every:</label>
-		</button>
+		<div class="gf-form-inline">
+			<div class="gf-form gf-size-max-xxxl">
+				<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+			</div>
+			<div class="gf-form">
+				<button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+			</div>
+		</div>
+
 	</form>
 
 	<div class="gf-timepicker-relative-section">

public/sass/_grafana.scss

@@ -15,6 +15,7 @@
 @import "base/forms";
 @import "base/fonts";
 @import "base/grid";
+@import "base/font_awesome";
 
 // UTILS
 @import "utils/utils";

public/sass/components/_timepicker.scss

@@ -21,10 +21,10 @@
 }
 
 .gf-timepicker-absolute-section {
-  width: 300px;
+  width: 290px;
   float: left;
   border-right: 1px solid $divider-border-color;
-  padding: 0 0 0 20px;
+  padding: 0 10px;
   select {
     width: 183px;
     margin-bottom: 0;
@@ -47,7 +47,7 @@
 
 .gf-timepicker-relative-section {
   padding: 0 20px 0 30px;
-  min-height: 258px;
+  min-height: 237px;
   float: left;
   ul {
     list-style: none;
@@ -66,11 +66,14 @@
 
 .gf-timepicker-component {
   margin-bottom: 10px;
+  td {
+    padding: 1px;
+  }
   button.btn-sm {
     @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
     background-image: none;
     border: none;
-    padding: 6px 9px;
+    padding: 6px 10px;
     color: $text-color;
     &.active span {
       color: $blue;
@@ -86,3 +89,31 @@
 .input-datetime-format {
   color: $link-color-disabled
 }
+
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fa-chevron-left:before {
+  content: "\f053";
+}
+.fa-chevron-right:before {
+  content: "\f054";
+}
+
+.glyphicon-chevron-right {
+
+  @extend .fa;
+  @extend .fa-chevron-right;
+}
+
+.glyphicon-chevron-left {
+
+  @extend .fa;
+  @extend .fa-chevron-left;
+}