Merge remote-tracking branch 'upstream/master' into add_permissions_10676

public/sass/_grafana.scss

@@ -91,6 +91,7 @@
 @import 'components/popper';
 @import 'components/form_select_box';
 @import 'components/user-picker';
+@import 'components/description-picker';
 
 // PAGES
 @import 'pages/login';

public/sass/_variables.dark.scss

@@ -135,6 +135,7 @@ $list-item-bg: $card-background;
 $list-item-hover-bg: lighten($gray-blue, 2%);
 $list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
+$empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
 $scrollbarBackground: #404357;

public/sass/_variables.light.scss

@@ -133,6 +133,7 @@ $list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background;
 $list-item-hover-bg: darken($gray-5, 5%);
 $list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
+$empty-list-cta-bg: $gray-6;
 
 // Tables
 // -------------------------

public/sass/components/_description-picker.scss

@@ -0,0 +1,11 @@
+.description-picker-option__button {
+  position: relative;
+  text-align: left;
+  width: 100%;
+  display: block;
+  border-radius: 0;
+  white-space: normal;
+  i.fa-check {
+    padding-left: 2px;
+  }
+}

public/sass/components/_dropdown.scss

@@ -33,7 +33,7 @@
   border-top: 4px solid $text-color-weak;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
-  content: "";
+  content: '';
 }
 
 // Place the caret
@@ -218,7 +218,7 @@
   .caret {
     border-top: 0;
     border-bottom: 4px solid $black;
-    content: "";
+    content: '';
   }
   // Different positioning for bottom up menu
   .dropdown-menu {
@@ -255,9 +255,9 @@
 }
 
 // Caret to indicate there is a submenu
-.dropdown-submenu > a::after {
+.dropdown-submenu > a::before {
   display: block;
-  content: " ";
+  content: ' ';
   float: right;
   width: 0;
   height: 0;
@@ -312,7 +312,7 @@
     width: 2rem;
     display: inline-block;
     text-align: center;
-    content: "\f11c";
+    content: '\f11c';
   }
 }
 

public/sass/components/_empty_list_cta.scss

@@ -1,5 +1,5 @@
 .empty-list-cta {
-  background-color: $search-filter-box-bg;
+  background-color: $empty-list-cta-bg;
   text-align: center;
   padding: $spacer*2;
   border-radius: $border-radius;

public/sass/components/_search.scss

@@ -10,7 +10,7 @@
 }
 
 .search-container {
-  left: $side-menu-width;
+  left: 0;
   top: 0;
   right: 0;
   bottom: 0;
@@ -38,13 +38,6 @@
     background-color: $navbarButtonBackground;
     flex-grow: 10;
   }
-
-  // .tag-filter {
-  //   .Select-control {
-  //     width: 300px;
-  //     background-color: $navbarBackground;
-  //   }
-  // }
 }
 
 .search-field-spacer {
@@ -58,7 +51,7 @@
 
 .search-dropdown {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   height: calc(100% - #{$navbarHeight});
 }
 
@@ -74,9 +67,8 @@
   flex-grow: 1;
   height: 100%;
   padding-top: 16px;
-  display: flex;
+  display: none;
   flex-direction: column;
-  align-items: flex-start;
 }
 
 .search-filter-box {
@@ -85,7 +77,6 @@
   padding: $spacer*1.5;
   min-width: 340px;
   margin-bottom: $spacer * 1.5;
-  margin-left: $spacer * 1.5;
 }
 
 .search-filter-box__header {
@@ -215,7 +206,8 @@
 }
 
 .search-item__tags {
-  padding: 10px;
+  display: none;
+  //padding: 10px;
 }
 
 .search-item__actions {
@@ -248,16 +240,46 @@
   background: $panel-bg;
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-up(sm) {
   .search-container {
-    left: 0;
+    left: $side-menu-width;
   }
 
   .search-dropdown__col_2 {
-    display: none;
-  }
-
-  .search-item__tags {
-    display: none;
+    display: flex;
+    margin-bottom: 1rem;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .search-dropdown__col_2 {
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 700px;
+    height: 260px;
+    align-items: flex-start;
+  }
+
+  .search-dropdown__col_1 {
+    height: 100%;
+  }
+
+  .search-filter-box {
+    margin: 0;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .search-dropdown {
+    flex-direction: row;
+  }
+
+  .search-dropdown__col_2 {
+    flex-direction: column;
+  }
+
+  .search-filter-box {
+    margin-left: $spacer * 1.5;
+    margin-bottom: $spacer * 1.5;
   }
 }