ux: sass fixes and polish

public/app/core/components/search/search.html

@@ -52,7 +52,7 @@
 		</div>
 
 		<div class="search-results-container" ng-if="!ctrl.tagsMode" grafana-scrollbar>
-			<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
+			<h6 ng-show="!ctrl.isLoading && results.length">No dashboards matching your query were found.</h6>
 
 			<div ng-repeat="section in ctrl.results" class="search-section">
 				<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">

public/app/core/components/search/search.ts

@@ -13,8 +13,7 @@ export class SearchCtrl {
   showImport: boolean;
   dismiss: any;
   ignoreClose: any;
-  // triggers fade animation class
-  openCompleted: boolean;
+  isLoading: boolean;
 
   /** @ngInject */
   constructor($scope, private $location, private $timeout, private searchSrv: SearchSrv, $rootScope) {
@@ -24,7 +23,6 @@ export class SearchCtrl {
 
   closeSearch() {
     this.isOpen = this.ignoreClose;
-    this.openCompleted = false;
   }
 
   openSearch(evt, payload) {
@@ -40,6 +38,7 @@ export class SearchCtrl {
     this.query = { query: '', tag: [], starred: false };
     this.currentSearchId = 0;
     this.ignoreClose = true;
+    this.isLoading = true;
 
     if (payload && payload.starred) {
       this.query.starred = true;
@@ -54,7 +53,6 @@ export class SearchCtrl {
     }
 
     this.$timeout(() => {
-      this.openCompleted = true;
       this.ignoreClose = false;
       this.giveSearchFocus = this.giveSearchFocus + 1;
       this.search();
@@ -102,6 +100,7 @@ export class SearchCtrl {
     return this.searchSrv.search(this.query).then(results => {
       if (localSearchId < this.currentSearchId) { return; }
       this.results = results;
+      this.isLoading = false;
     });
   }
 

public/app/features/panel/panel_directive.ts

@@ -86,7 +86,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       }
 
       function panelHeightUpdated() {
-        panelContent.height(ctrl.height);
+        panelContent.css({height: ctrl.height + 'px'});
         if (panelScrollbar) {
           panelScrollbar.update();
         }

public/app/plugins/panel/alertlist/module.html

@@ -1,4 +1,4 @@
-<div class="panel-alert-list" ng-style="{height: ctrl.height + 'px'}">
+<div class="panel-alert-list">
 	<div class="panel-alert-list__no-alerts" ng-show="ctrl.noAlertsMessage">
 		{{ctrl.noAlertsMessage}}
 	</div>

public/sass/components/_scrollbar.scss

@@ -1,4 +1,53 @@
-@import "~perfect-scrollbar/css/perfect-scrollbar.css";
+/*
+ * Container style
+ */
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
 
 .ps__rail-x:hover,
 .ps__rail-y:hover,
@@ -8,14 +57,51 @@
   opacity: 0.9;
 }
 
-.ps__thumb-y {
-  @include gradient-vertical($blue, lighten($blue, 20%));
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
 }
 
-.ps__rail-y:hover > .ps__thumb-y,
-.ps__rail-y:focus > .ps__thumb-y {
-  background-color: #999;
+.ps__thumb-y {
+  @include gradient-vertical($blue, lighten($blue, 20%));
+  border-radius: 6px;
   width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y {
+}
+
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus {
+  background-color: transparent;
+  opacity: 0.9;
 }
 
 // Srollbars

public/sass/components/_search.scss

@@ -59,16 +59,8 @@
   display: flex;
   flex-direction: column;
   max-width: 800px;
-  visibility: none;
-  opacity: 0;
   background: $page-bg;
   height: calc(100% - #{$navbarHeight});
-
-  &--fade-in {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.3s;
-  }
 }
 
 .search-results-container {