Merge branch 'develop' into develop-newgrid-rows

public/sass/components/_cards.scss

@@ -97,7 +97,7 @@
   color: $text-color-weak;
   text-transform: uppercase;
   font-size: $font-size-sm;
-  font-weight: bold;
+  font-weight: $font-weight-semi-bold;
 }
 
 .card-item-notice {
@@ -144,7 +144,7 @@
 
   .card-item-wrapper {
     width: 100%;
-    padding: 0 1.5rem 1.5rem 0rem;
+    padding: 0 1rem 1rem 0rem;
   }
 
   .card-item-wrapper--clickable {
@@ -158,6 +158,9 @@
     img {
       width: 6rem;
     }
+    .fa, .icon-gf {
+      font-size: 3.5rem;
+    }
   }
 
   .card-item-name {

public/sass/components/_dropdown.scss

@@ -120,6 +120,14 @@
       }
     }
   }
+
+  &--sidemenu {
+    li.sidemenu-org-switcher {
+      > a {
+        padding: 8px 10px 8px 15px;
+      }
+    }
+  }
 }
 
 .dropdown-item-text {
@@ -213,7 +221,7 @@
   // Different positioning for bottom up menu
   .dropdown-menu {
     top: auto;
-    bottom: 100%;
+    bottom: 0;
     margin-bottom: 1px;
   }
 }

public/sass/components/_gf-form.scss

@@ -1,4 +1,4 @@
-$gf-form-margin: 0.25rem;
+$gf-form-margin: 0.1rem;
 
 .gf-form {
   margin-bottom: $gf-form-margin;
@@ -51,10 +51,10 @@ $gf-form-margin: 0.25rem;
 
 .gf-form-label {
   padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
   flex-shrink: 0;
+  font-weight: $font-weight-semi-bold;
 
-  background-color: $input-label-bg;
+  background-color: #292a2d; //$input-label-bg;
   display: block;
   font-size: $font-size-sm;
   margin-right: $gf-form-margin;
@@ -111,7 +111,9 @@ $gf-form-margin: 0.25rem;
   background-color: $input-bg;
   background-image: none;
   background-clip: padding-box;
-  border: $input-btn-border-width solid $input-border-color;
+  border: 1px solid $input-border-color;
+  border-bottom: none;
+  border-left: none;
   @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;
@@ -192,7 +194,7 @@ $gf-form-margin: 0.25rem;
   select.gf-form-input {
     text-indent: .01px;
     text-overflow: '';
-    padding-right: $input-padding-x*2;
+    padding-right: $input-padding-x*4;
     -webkit-appearance: none;
     -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
     appearance: none;

public/sass/components/_navbar.scss

@@ -3,7 +3,7 @@
   display: block;
   overflow: visible;
   position: relative;
-  z-index: 110;
+  margin-left: $side-menu-width;
 }
 
 .navbar-inner {
@@ -14,6 +14,12 @@
   @include clearfix();
 }
 
+.sidemenu-open {
+  .navbar {
+    margin-left: 0;
+  }
+}
+
 .navbar .nav {
   position: relative;
   left: 0;
@@ -55,52 +61,6 @@
   background-color: $navbarLinkBackgroundActive;
 }
 
-.navbar-brand-btn {
-  display: block;
-  position: relative;
-  float: left;
-  margin: 0;
-  background-color: $side-menu-bg;
-  padding: 0.4rem 1.0rem 0.4rem 1rem;
-  min-height: $navbarHeight;
-
-  .fa-caret-down {
-    font-size: 70%;
-  }
-
-  .fa-chevron-left{
-    display: none;
-  }
-
-  &:hover {
-    background: $navbarButtonBackgroundHighlight;
-  }
-
-  img {
-    width: 30px;
-    position: relative;
-    top: -1px;
-  }
-
-  .navbar-brand-btn-background {
-    display: inline-block;
-    border: 1px solid $body-bg;
-    padding: 4px;
-    border-radius: 50%;
-    background: $iconContainerBackground;
-    width: 40px;
-    height: 40px;
-  }
-
-  .icon-gf-grafana_wordmark {
-    font-size: 21px;
-    position: relative;
-    top: 6px;
-    padding-left: 5px;
-    display: none;
-  }
-}
-
 .navbar-page-btn-wrapper {
   float: left;
   &:hover {

public/sass/components/_panel_table.scss

@@ -84,7 +84,7 @@
       a {
         padding: 0.45em 0 0.45em 1.1em;
         height: 100%;
-        width: 100%;
+        display: inline-block;
       }
     }
 

public/sass/components/_query_editor.scss

@@ -1,5 +1,5 @@
 .query-keyword {
-  font-weight: bold;
+  font-weight: $font-weight-semi-bold;
   color: $blue;
 }
 

public/sass/components/_query_part.scss

@@ -1,6 +1,6 @@
 
 .query-part {
-  background-color: $input-bg !important;
+  background-color: lighten($input-label-bg, 5%);
 
   &.show-function-controls {
     padding-top: 5px;

public/sass/components/_row.scss

@@ -122,7 +122,7 @@ $dash-row-menu-animation-speed: 0.20s;
   min-height: 100%;
   transform: translate(-131px, 0);
   transition: 0.1s ease-out 0.4s;
-  z-index: 99;
+  z-index: 0;
   display: flex;
   flex-direction: row;
 

public/sass/components/_scrollbar.scss

@@ -1,4 +1,127 @@
-//
+/**
+ * gemini-scrollbar
+ * @version 1.5.2
+ * @link http://noeldelgado.github.io/gemini-scrollbar/
+ * @license MIT
+ */
+
+/* disable selection while dragging */
+.gm-scrollbar-disable-selection {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* fallback for native floating scrollbars */
+.gm-prevented {
+  -webkit-overflow-scrolling: touch;
+}
+.gm-prevented > .gm-scrollbar {
+  display: none;
+}
+
+/* actual gemini-scrollbar styles */
+.gm-scrollbar-container {
+  position: relative;
+  overflow: hidden!important;
+  width: 100%;
+  height: 100%;
+}
+
+.gm-scrollbar {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  border-radius: 3px;
+
+  &:hover {
+    .thumb {
+      opacity: 1;
+      transition: opacity 100ms ease-in-out;
+    }
+  }
+}
+
+.gm-scrollbar.-vertical {
+  width: 6px;
+  top: 2px;
+}
+
+.gm-scrollbar.-horizontal {
+  height: 6px;
+  left: 2px;
+}
+
+.gm-scrollbar .thumb {
+  position: relative;
+  display: block;
+  width: 0;
+  height: 0;
+  cursor: pointer;
+  border-radius: inherit;
+  background-color: $dark-5;
+  transform: translate3d(0,0,0);
+  opacity: 0;
+}
+
+.gemini-scrolling {
+  .gm-scrollbar .thumb {
+    opacity: 1;
+    transition: opacity 100ms ease-in-out;
+  }
+}
+
+.gm-scrollbar .thumb:hover,
+.gm-scrollbar .thumb:active {
+  background-color: $blue;
+}
+
+.gm-scrollbar.-vertical .thumb {
+  width: 100%;
+}
+
+.gm-scrollbar.-horizontal .thumb {
+  height: 100%;
+}
+
+.gm-scrollbar-container .gm-scroll-view {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  transform: translate3d(0,0,0);
+  -webkit-overflow-scrolling: touch;
+}
+
+/* @option: autoshow */
+.gm-scrollbar-container.gm-autoshow .gm-scrollbar {
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+}
+.gm-scrollbar-container.gm-autoshow:hover > .gm-scrollbar,
+.gm-scrollbar-container.gm-autoshow:active > .gm-scrollbar,
+.gm-scrollbar-container.gm-autoshow:focus > .gm-scrollbar {
+  opacity: 1;
+  transition: opacity 340ms ease-out;
+}
+
+.gm-resize-trigger {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0;
+}
+
+
 // Srollbars
 //
 
@@ -38,4 +161,3 @@
   border-top: 1px solid $scrollbarBorder;
   border-left: 1px solid $scrollbarBorder;
 }
-

public/sass/components/_search.scss

@@ -1,8 +1,8 @@
 .search-backdrop {
   position: fixed;
   right: 0;
-  bottom: 0;
   left: 0;
+  bottom: 0;
   top: $navbarHeight;
   z-index: $zindex-modal-backdrop;
   background-color: $black;
@@ -10,7 +10,7 @@
 }
 
 .search-container {
-  left: 0;
+  left: $side-menu-width;
   top: 0;
   right: 0;
   bottom: 0;
@@ -65,7 +65,8 @@
   max-width: 1100px;
   visibility: none;
   opacity: 0;
-  height: 100%;
+  background: $panel-bg;
+  height: 65%;
 
   &--fade-in {
     visibility: visible;
@@ -75,12 +76,10 @@
 }
 
 .search-results-container {
-  height: 90%;
-  overflow: auto;
+  height: 100%;
   display: block;
   line-height: 28px;
   padding: $spacer;
-  background: $panel-bg;
   flex-grow: 10;
 
   .selected {

public/sass/components/_sidemenu.scss

@@ -1,17 +1,11 @@
-.sidemenu-canvas {
-  position: relative;
-}
-
-.sidemenu-wrapper {
-  position: absolute;
-  top: 52px;
-  left: 0;
-  //border-top: 1px solid $tight-form-border;
+.sidemenu {
+  position: fixed;
+  display: flex;
+  flex-flow: column;
+  flex-direction: column;
   width: $side-menu-width;
-  background-color: $side-menu-bg;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
+  background: $navbarBackground;
+  z-index: 1;
 
   a:focus {
     text-decoration: none;
@@ -19,98 +13,58 @@
 }
 
 .sidemenu-open {
-  .sidemenu-wrapper {
-    visibility: visible;
-    //transform: translate3d(0, 0, 0);
-    opacity: 1;
-    transition: opacity 0.3s;
+  .sidemenu {
+    background: $side-menu-bg;
+    position: initial;
+    height: auto;
+  }
+  .sidemenu__top,
+  .sidemenu__bottom {
+    display: block;
   }
 }
 
-.sidemenu-pinned {
-  .sidemenu-wrapper {
-    min-height: calc(100% - 54px);
-  }
-  .dashboard-container {
-    padding-left: $side-menu-width + 8px;
-  }
-  .page-container {
-    margin-left: $side-menu-width;
-  }
-  .search-container {
-    left: $side-menu-width;
-  }
+.sidemenu__top {
+  padding-top: 3rem;
+  flex-grow: 1;
+  display: none;
 }
 
-.sidemenu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.sidemenu__bottom {
+  padding-bottom: $spacer;
+  display: none;
+}
 
-  > li {
-    position: relative;
-    @include left-brand-border();
+.sidemenu-item {
+  position: relative;
+  @include left-brand-border();
 
-    &.active,
-    &:hover {
-      background-color: $side-menu-item-hover-bg;
-      @include left-brand-border-gradient();
+  &.active,
+  &:hover {
+    background-color: $side-menu-item-hover-bg;
+    @include left-brand-border-gradient();
 
-      .dropdown-menu {
-        margin: 0;
-        display: block;
-        opacity: 0;
-        top: 0px;
-        // important to overlap it otherwise it can be hidden
-        // again by the mouse getting outside the hover space
-        left: $side-menu-width - 2px;
-        @include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
-        z-index: -9999;
-      }
+    .dropdown-menu {
+      margin: 0;
+      display: block;
+      opacity: 0;
+      top: 0px;
+      // important to overlap it otherwise it can be hidden
+      // again by the mouse getting outside the hover space
+      left: $side-menu-width - 2px;
+      @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
+      z-index: 1;
     }
   }
 }
 
-@include keyframes(dropdown-anim) {
-  0% {
-    opacity: 0;
-    transform: translate3d(-5%,0,0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0,0,0);
-  }
+.dropup.sidemenu-item:hover .dropdown-menu {
+  top: auto !important;
 }
 
-.icon-circle {
-  width: 40px;
-  height: 40px;
-  display: inline-block;
-  i {
-    color: $link-color;
-    opacity: .7;
-    position: relative;
-    left: 7px;
-    font-size: 150%;
-  }
-
-  .fa {
-    top: 2px;
-  }
-
-  .icon-gf {
-    top: 5px;
-  }
-
-  img {
-    left: 7px;
-    position: relative;
-  }
-}
-
-.sidemenu-item {
+.sidemenu-link {
   color: $link-color;
-  line-height: 47px;
+  line-height: 42px;
   padding: 0px 10px 0px 10px;
   display: block;
   position: relative;
@@ -125,93 +79,94 @@
   }
 }
 
+@include keyframes(dropdown-anim) {
+  0% {
+    opacity: 0;
+    //transform: translate3d(-5%,0,0);
+  }
+  100% {
+    opacity: 1;
+    //transform: translate3d(0,0,0);
+  }
+}
+
+.icon-circle {
+  width: 35px;
+  height: 35px;
+  display: inline-block;
+  i {
+    color: $link-color;
+    opacity: .7;
+    position: relative;
+    left: 3px;
+    font-size: 130%;
+  }
+
+  .fa {
+    top: 2px;
+  }
+
+  .icon-gf {
+    top: 5px;
+  }
+
+  img {
+    left: 3px;
+    position: relative;
+  }
+}
+
 .side-menu-header {
   padding: 10px 10px 10px 20px;
   white-space: nowrap;
   background-color: $side-menu-item-hover-bg;
-  font-size: 18px;
+  font-size: 17px;
 }
 
-.sidemenu-org-section .dropdown-menu-title {
-  margin: 0 10px 0 6px;
-  padding: 7px 0 7px;
-  overflow: hidden;
-  color: $dropdownTitle;
+li.sidemenu-org-switcher {
+  border-bottom: 1px solid $dropdownDividerBottom;
 }
 
-.sidemenu-org-section .dropdown-menu-title > span {
-  display: inline-block;
+.sidemenu-org-switcher__org-name {
+  font-size: $font-size-base;
+}
+
+.sidemenu-org-switcher__org-current {
+  font-size: $font-size-xs;
+  color: $text-color-weak;
   position: relative;
+  top: -2px;
+}
 
-  &::after {
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 100%;
-    width: 200px;
-    height: 1px;
-    margin-left: 5px;
-    background: $dropdownDivider;
-    content: '';
+.sidemenu-org-switcher__switch {
+  font-size: $font-size-sm;
+  padding-left: 1.5rem;
+  display: flex;
+  align-items: center;
+  > i.fa.fa-random {
+    margin-right: 4px;
+    top: 1px;
   }
 }
 
-.sidemenu-org {
-  padding: 17px 10px 15px 14px;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: table;
-  position: relative;
-  width: 100%;
-}
+.sidemenu__logo {
+  display: block;
+  padding: 0.4rem 1.0rem 0.4rem 0.65rem;
+  min-height: $navbarHeight;
 
-.sidemenu .fa-caret-right {
-  position: absolute;
-  top: 38%;
-  right: 6px;
-  font-size: 14px;
-  color: $text-color-faint;
-}
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
 
-.sidemenu-org-avatar,
-.sidemenu-org-details {
-  display: table-cell;
-  vertical-align: top;
-}
+    .sidemenu__logo-expand {
+      display: block;
+    }
+  }
 
-.sidemenu-org-avatar {
-  >img {
-    position: absolute;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    left: 14px;
-    top: 12px;
-    z-index: 10;
+  img {
+    width: 30px;
+    position: relative;
+    top: 3px;
+    left: 4px;
   }
 }
 
-.sidemenu-org-avatar--missing {
-  color: $gray-4;
-  text-shadow: 0 1px 0 $dark-1;
-  line-height: 28px;
-  font-size: $font-size-lg;
-}
-
-.sidemenu-org-details {
-  padding-left: 10px;
-  color: $link-color;
-  display: none;
-}
-
-.sidemenu-org-name {
-  display: block;
-  font-size: 13px;
-  color: $link-color-disabled;
-}
-
-.sidemenu-org-user {
-  display: block;
-}
-

public/sass/components/_view_states.scss

@@ -36,7 +36,6 @@
   }
 
   // navbar buttons
-  .navbar-brand-btn,
   .navbar-inner {
     border-color: transparent;
     background: transparent;
@@ -50,7 +49,7 @@
   .navbar-page-btn {
     border-color: transparent;
     background: transparent;
-    transform: translate3d(-50px, 0, 0);
+    transform: translate3d(-40px, 0, 0);
     transition: all 1.5s ease-in-out 1s;
     .icon-gf {
       opacity: 0;