ux: work on dashboard settings views

public/sass/components/_dashboard_settings.scss

@@ -1,7 +1,8 @@
 .dashboard-settings {
   opacity: 0;
-  display: block;
-  padding: $spacer*2;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
 }
 
 .dashboard-page--settings-opening {
@@ -13,6 +14,44 @@
 .dashboard-page--settings-open {
   .dashboard-settings {
     opacity: 1;
-    transition: opacity 250ms ease-in-out;
+    transition: opacity 300ms ease-in-out;
+  }
+}
+
+.dashboard-settings__content {
+  flex-grow: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 30px;
+}
+
+.dashboard-settings__aside {
+  padding: 30px 0 0 30px;
+  background: $search-filter-box-bg;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-settings__aside-header {
+  color: $text-muted;
+  font-size: $font-size-h3;
+  margin-bottom: 20px;
+  padding-right: 60px;
+  white-space: nowrap;
+}
+
+.dashboard-settings__header {
+  font-size: $font-size-h3;
+  margin-bottom: 20px;
+}
+
+.dashboard-settings__nav-item {
+  padding: 7px 12px;
+  color: $text-color;
+  @include left-brand-border;
+
+  &.active {
+    @include left-brand-border-gradient();
+    background: $page-bg;
   }
 }

public/sass/components/_navbar.scss

@@ -9,10 +9,26 @@
   padding-right: $spacer;
   display: flex;
   flex-grow: 1;
+  border-bottom: 1px solid transparent;
+  transition: all 300ms ease-in-out;
+}
 
-  background: $page-header-bg;
-  box-shadow: $page-header-shadow;
-  border-bottom: 1px solid $page-header-border-color;
+.dashboard-page--settings-open {
+  .navbar {
+    background: $page-header-bg;
+    box-shadow: $search-shadow;
+    border-bottom: $navbarBorder;
+  }
+
+  .navbar-buttons--actions,
+  .navbar-page-btn .fa-caret-down,
+  .gf-timepicker-nav {
+    display: none;
+  }
+
+  .navbar-buttons--close {
+    display: flex;
+  }
 }
 
 .sidemenu-open {
@@ -29,8 +45,9 @@
   margin: 0;
   color: darken($link-color, 5%);
   font-size: $font-size-lg;
-  padding: 1rem 1rem 0.75rem 1rem;
+  padding-left: 1rem;
   min-height: $navbarHeight;
+  line-height: $navbarHeight;
 
   .fa-caret-down {
     font-size: 60%;
@@ -71,6 +88,10 @@
   align-items: center;
   justify-content: flex-end;
   margin-right: $spacer;
+
+  &--close {
+    display: none;
+  }
 }
 
 .navbar__spacer {
@@ -82,7 +103,7 @@
 
   display: inline-block;
   font-weight: $btn-font-weight;
-  padding: 8px 11px;
+  padding: 6px 11px;
   line-height: 16px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
@@ -98,7 +119,7 @@
   }
 
   &--add-panel {
-    padding: 5px 10px;
+    padding: 3px 10px;
 
     .gicon {
       font-size: 22px;
@@ -106,7 +127,7 @@
   }
 
   &--tight {
-    padding: 9px 4px;
+    padding: 7px 4px;
 
     .fa {
       font-size: 14px;
@@ -114,4 +135,8 @@
       top: 2px;
     }
   }
+
+  &--primary {
+    @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+  }
 }

public/sass/components/_sidenav.scss

@@ -1,15 +0,0 @@
-.sidenav {
-  display: flex;
-  flex-direction: row;
-}
-
-.sidenav__content {
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.sidenav__aside {
-  margin-right: $spacer*2;
-}
-
-

public/sass/components/_view_states.scss

@@ -45,7 +45,7 @@
     background: transparent;
     transform: translate3d(-40px, 0, 0);
     transition: all 1.5s ease-in-out 1s;
-    .icon-gf {
+    i {
       opacity: 0;
       transition: all 1.5s ease-in-out 1s;
     }