ux: dashboard nav update

public/app/features/dashboard/dashnav/dashnav.html

@@ -18,6 +18,8 @@
 		</li>
 		</li>
 	</ul>
 	</ul>
 
 
+	<div class="navbar__spacer"></div>
+
 	<div class="navbar-buttons">
 	<div class="navbar-buttons">
 		<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
 		<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
 			<i class="gicon gicon-add-panel"></i>
 			<i class="gicon gicon-add-panel"></i>

public/sass/components/_navbar.scss

@@ -16,49 +16,7 @@
   }
   }
 }
 }
 
 
-// .navbar .nav {
-//   position: relative;
-//   left: 0;
-//   float: left;
-//
-//   &--grow {
-//     flex-grow: 1;
-//   }
-// }
-//
-//
-// .navbar .nav > li {
-//   float: left;
-// }
-//
-// // Links
-// .navbar .nav > li > a {
-//   float: none;
-//   padding: 17px 13px 13px;
-//   color: $navbarLinkColor;
-//   text-decoration: none;
-//
-//   .fa { font-size: 115%; }
-// }
-//
-// // Hover/focus
-// .navbar .nav > li > a:focus,
-// .navbar .nav > li > a:hover {
-//   color: $navbarLinkColorHover;
-//   text-decoration: none;
-// }
-//
-// // Active nav items
-// .navbar .nav > .active > a,
-// .navbar .nav > .active > a:hover,
-// .navbar .nav > .active > a:focus {
-//   color: $navbarLinkColorActive;
-//   text-decoration: none;
-//   background-color: $navbarLinkBackgroundActive;
-// }
-
 .navbar-page-btn {
 .navbar-page-btn {
-  flex-grow: 1;
   text-overflow: ellipsis;
   text-overflow: ellipsis;
   overflow: hidden;
   overflow: hidden;
   white-space: nowrap;
   white-space: nowrap;
@@ -110,6 +68,10 @@
   margin-right: $spacer;
   margin-right: $spacer;
 }
 }
 
 
+.navbar__spacer {
+  flex-grow: 1;
+}
+
 .navbar-button {
 .navbar-button {
   @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
   @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
 
 
@@ -130,18 +92,20 @@
   }
   }
 
 
   &--add-panel {
   &--add-panel {
+    padding: 2px 8px;
+
     .gicon {
     .gicon {
       font-size: 22px;
       font-size: 22px;
     }
     }
-    padding: 2px 8px;
   }
   }
 
 
   &--tight {
   &--tight {
+    padding: 6px 4px;
+
     .fa {
     .fa {
       font-size: 14px;
       font-size: 14px;
       position: relative;
       position: relative;
       top: 2px;
       top: 2px;
     }
     }
-    padding: 6px 4px;
   }
   }
 }
 }