Merged with master, I think

public/app/core/components/navbar/navbar.html

@@ -1,19 +1,16 @@
 <div class="navbar-inner">
-	<div class="top-nav-btn top-nav-menu-btn">
-		<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
-			<span class="top-nav-logo-background">
-				<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
-			</span>
-			<i class="icon-gf icon-gf-grafana_wordmark"></i>
-			<i class="fa fa-caret-down"></i>
-		</a>
-	</div>
+	<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
+		<span class="navbar-brand-btn-background">
+			<img src="public/img/grafana_icon.svg"></img>
+		</span>
+		<i class="icon-gf icon-gf-grafana_wordmark"></i>
+		<i class="fa fa-caret-down"></i>
+	</a>
 
-
-	<div ng-if="ctrl.title">
-		<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
-		</nav-button>
-	</div>
+	<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
+		<i class="{{::ctrl.icon}}"></i>
+		{{::ctrl.title}}
+	</a>
 
 	<div ng-transclude></div>
 </div>

public/app/core/components/navbar/navbar.ts

@@ -30,28 +30,4 @@ export function navbarDirective() {
   };
 }
 
-var navButtonTemplate = `
-<div class="top-nav-btn dashnav-dashboards-btn">
-  <a href="{{::titleUrl}}">
-    <i class="{{::icon}}"></i>
-    <span class="dashboard-title">{{::title}}</span>
-  </a>
-</div>
-`;
-
-function navButton() {
-  return {
-    restrict: 'E',
-    template: navButtonTemplate,
-    scope: {
-      title: "@",
-      titleUrl: "@",
-    },
-    link: function(scope, elem, attrs, ctrl) {
-      scope.icon = attrs.icon;
-    }
-  };
-}
-
 coreModule.directive('navbar', navbarDirective);
-coreModule.directive('navButton', navButton);

public/app/core/routes/routes.ts

@@ -186,7 +186,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/global-alerts', {
     templateUrl: 'public/app/features/dashboard/partials/globalAlerts.html',
   })
-  .when('/styleguide', {
+  .when('/styleguide/:page?', {
     controller: 'StyleGuideCtrl',
     controllerAs: 'ctrl',
     templateUrl: 'public/app/features/styleguide/styleguide.html',

public/app/features/admin/partials/admin_home.html

@@ -24,5 +24,9 @@
 		View Server Stats
 	</a>
 
+	<a class="btn btn-inverse" href="styleguide">
+	  Style guide
+	</a>
+
 </div>
 

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

@@ -1,12 +1,10 @@
 <navbar>
 
-<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
-	<a class="pointer" ng-click="openSearch()">
-		<i class="icon-gf icon-gf-dashboard"></i>
-		<span class="dashboard-title">{{dashboard.title}}</span>
-		<i class="fa fa-caret-down"></i>
-	</a>
-</div>
+<a class="pointer navbar-page-btn" ng-show="!dashboardMeta.isSnapshot" ng-click="openSearch()">
+	<i class="icon-gf icon-gf-dashboard"></i>
+	<span>{{dashboard.title}}</span>
+	<i class="fa fa-caret-down"></i>
+</a>
 
 <div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
 	<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()">

public/app/features/dashboard/timepicker/dropdown.html

@@ -4,7 +4,7 @@
 
 		<label class="small">From:</label>
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.from" input-datetime>
 			</div>
 			<div class="gf-form">
@@ -21,7 +21,7 @@
 
 		<label class="small">To:</label>
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.to" input-datetime>
 			</div>
 			<div class="gf-form">
@@ -35,15 +35,13 @@
 			<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
 		</div>
 
-
-
 		<label class="small">Refreshing every:</label>
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
 			</div>
 			<div class="gf-form">
-				<button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+				<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
 			</div>
 		</div>
 

public/app/features/datasources/partials/edit.html

@@ -13,14 +13,14 @@
 	<form name="editForm">
 		<div class="gf-form-group">
 			<div class="gf-form">
-				<span class="gf-form-label gf-size-sm">Name</span>
-				<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
+				<span class="gf-form-label width-7">Name</span>
+				<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>
 
 			<div class="gf-form">
-				<span class="gf-form-label gf-size-sm">Type</span>
-				<select class="gf-form-input gf-size-auto gf-form-select-input" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
+				<span class="gf-form-label width-7">Type</span>
+				<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
 			</div>
 		</div>
 
@@ -41,7 +41,7 @@
 		<div class="gf-form-button-row">
 			<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
 			<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
-			<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
+			<button type="submit" class="btn btn-secondary" ng-show="!isNew" ng-click="saveChanges(true)">
 				Test Connection
 			</button>
 			<a class="btn btn-link" href="datasources">Cancel</a>

public/app/features/datasources/partials/http_settings.html

@@ -4,19 +4,19 @@
 	<h3 class="page-heading">Http settings</h3>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-sm">Url</span>
-		<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
+		<span class="gf-form-label width-7">Url</span>
+		<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
 	</div>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-sm">
+		<span class="gf-form-label width-7">
 			Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
 		</span>
 		<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
 	</div>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-sm">
+		<span class="gf-form-label width-7">
 			Http Auth
 		</span>
 		<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
@@ -24,17 +24,17 @@
 	</div>
 
 	<div class="gf-form" ng-if="current.basicAuth">
-		<span class="gf-form-label gf-size-sm">
+		<span class="gf-form-label width-7">
 			User
 		</span>
-		<input class="gf-form-input gf-size-max-xxl" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
+		<input class="gf-form-input max-width-21" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
 	</div>
 
 	<div class="gf-form" ng-if="current.basicAuth">
-		<span class="gf-form-label gf-size-sm">
+		<span class="gf-form-label width-7">
 			Passord
 		</span>
-		<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
+		<input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
 	</div>
 </div>
 

public/app/features/org/partials/invite.html

@@ -19,15 +19,15 @@
 
 		<form name="inviteForm">
 			<div class="gf-form-inline" ng-repeat="invite in invites">
-				<div class="gf-form gf-size-max-xxl">
+				<div class="gf-form max-width-21">
 					<span class="gf-form-label">Email or Username</span>
 					<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
 				</div>
-				<div class="gf-form gf-size-max-xl">
+				<div class="gf-form max-width-14">
 					<span class="gf-form-label">Name</span>
 					<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
 				</div>
-				<div class="gf-form gf-size-max-lg">
+				<div class="gf-form max-width-10">
 					<span class="gf-form-label">Role</span>
 					<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
 					</select>

public/app/features/org/partials/orgApiKeys.html

@@ -1,4 +1,4 @@
-<navbar icon="icon-gf icon-gf-users" title="Organization">
+<navbar icon="icon-gf icon-gf-users" title="Organization" title-url="org">
 </navbar>
 
 <div class="page-container">
@@ -9,7 +9,7 @@
 	<h3 class="page-heading">Add new</h3>
 	<form name="addTokenForm" class="gf-form-group">
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxl">
+			<div class="gf-form max-width-21">
 				<span class="gf-form-label">Add a key</span>
 				<input type="text" class="gf-form-input" ng-model='token.name' placeholder="Name"></input>
 			</div>

public/app/features/org/partials/orgDetails.html

@@ -9,8 +9,8 @@
 	<h3 class="page-heading">General</h3>
 	<form name="orgForm" class="gf-form-group">
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-xs">Name</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-6">Name</span>
 				<input class="gf-form-input" type="text" required ng-model="org.name">
 			</div>
 			<div class="gf-form">
@@ -24,34 +24,34 @@
 
 	<form name="addressForm" class="gf-form-group">
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-sm">Address1</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-7">Address1</span>
 				<input class="gf-form-input" type="text" ng-model="address.address1">
 			</div>
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-sm">Address2</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-7">Address2</span>
 				<input class="gf-form-input" type="text" ng-model="address.address2">
 			</div>
 		</div>
 
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-sm">City</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-7">City</span>
 				<input class="gf-form-input" type="text" ng-model="address.city">
 			</div>
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-sm">Postal code</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-7">Postal code</span>
 				<input class="gf-form-input" type="text" ng-model="address.zipCode">
 			</div>
 		</div>
 
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-sm">State</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-7">State</span>
 				<input class="gf-form-input" type="text" ng-model="address.state">
 			</div>
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-sm">Country</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-7">Country</span>
 				<input class="gf-form-input" type="text" ng-model="address.country">
 			</div>
 		</div>

public/app/features/org/partials/orgUsers.html

@@ -1,4 +1,4 @@
-<navbar icon="icon-gf icon-gf-users" title="Organization Users">
+<navbar icon="icon-gf icon-gf-users" title="Organization Users" title-url="org">
 </navbar>
 
 <div class="page-container">

public/app/features/playlist/partials/playlist.html

@@ -9,17 +9,17 @@
 
 	<div class="gf-form-group">
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-sm">Name</span>
-			<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-size-max-xxl">
+			<span class="gf-form-label width-7">Name</span>
+			<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input max-width-21">
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-sm">Interval</span>
-			<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-size-max-xxl">
+			<span class="gf-form-label width-7">Interval</span>
+			<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input max-width-21">
 		</div>
 	</div>
 
 	<div class="gf-form-group">
-		<div class="gf-size-max-xxxl">
+		<div class="max-width-28">
 			<h5 class="page-headering">Add dashboards</h5>
 			<div style="">
 				<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>

public/app/features/profile/partials/password.html

@@ -8,18 +8,18 @@
 
 	<form name="userForm" class="gf-form-group">
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-lg">Old Password</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="command.oldPassword">
+			<span class="gf-form-label width-10">Old Password</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-model="command.oldPassword">
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-lg">New Password</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.newPassword">
+			<span class="gf-form-label width-10">New Password</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-minlength="4"  ng-model="command.newPassword">
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-lg">Confirm Password</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
+			<span class="gf-form-label width-10">Confirm Password</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
 		</div>
 
 		<div class="gf-form-button-row">

public/app/features/profile/partials/profile.html

@@ -10,19 +10,19 @@
 		<h3 class="page-heading">Preferences</h3>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-sm">Name</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
+			<span class="gf-form-label width-7">Name</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-model="user.name" >
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-sm">Email</span>
-			<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
+			<span class="gf-form-label width-7">Email</span>
+			<input class="gf-form-input max-width-21" type="email" required ng-model="user.email">
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-sm">Username</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
+			<span class="gf-form-label width-7">Username</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-model="user.login">
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-sm">UI Theme</span>
+			<span class="gf-form-label width-7">UI Theme</span>
 			<select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
 		</div>
 

public/app/features/styleguide/styleguide.html

@@ -15,35 +15,34 @@
 		</a>
 	</div>
 
-	<tabset>
-		<tab heading="Colors">
-			<ul>
-				<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
-					<strong>${{color.name}}</strong>
-					<em>{{color.value}}</em>
-				</li>
-			</ul>
-		</tab>
-		<tab heading="Buttons">
-
-			<div class="style-guide-button-list p-a-2">
-				<button class="btn btn-primary">btn-primary</button>
-				<button class="btn btn-info">btn-info</button>
-				<button class="btn btn-inverse">btn-inverse</button>
-				<button class="btn btn-success">btn-success</button>
-				<button class="btn btn-warning">btn-warning</button>
-				<button class="btn btn-danger">btn-danger</button>
-			</div>
-
+	<ul class="nav nav-tabs">
+		<li ng-repeat="page in ctrl.pages" ng-class="{active: ctrl.page[page]}" class="tab">
+			<a href="styleguide/{{page}}">{{page}}</a>
+		</li>
+	</ul>
+
+	<div class="tab-pane" ng-if="ctrl.page.colors">
+		<ul>
+			<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
+				<strong>${{color.name}}</strong>
+				<em>{{color.value}}</em>
+			</li>
+		</ul>
+	</div>
 
-			<div class="style-guide-button-list p-a-2">
-				<button class="btn btn-primary btn-small">btn-small</button>
-				<button class="btn btn-success btn-large">btn-large</button>
+	<div class="tab-pane" ng-if="ctrl.page.buttons">
+		<div ng-repeat="variant in ctrl.buttonVariants" class="row">
+			<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
+				<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
+					btn{{variant}}{{buttonName}}
+				</button>
 			</div>
-		</tab>
-		<tab heading="Forms">
-		</tab>
-	</tabset>
+		</div>
+	</div>
+
+	<div class="tab-pane" ng-if="ctrl.page.forms">
+		forms
+	</div>
 
 </div>
 

public/app/features/styleguide/styleguide.ts

@@ -6,12 +6,30 @@ import _ from 'lodash';
 class StyleGuideCtrl {
   colors: any = [];
   theme: string;
+  buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
+  buttonSizes = ['btn-small', '', 'btn-large'];
+  buttonVariants = ['-', '-outline-'];
+  page: any;
+  pages = ['colors', 'buttons', 'forms', 'dashboard', 'query-editors'];
 
   /** @ngInject **/
-  constructor($http) {
+  constructor(private $http, $routeParams) {
     this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
+    this.page = {};
 
-    $http.get('public/sass/styleguide.json').then(res => {
+    if ($routeParams.page) {
+      this.page[$routeParams.page] = 1;
+    } else {
+      this.page.colors = true;
+    }
+
+    if (this.page.colors) {
+      this.loadColors();
+    }
+   }
+
+  loadColors() {
+   this.$http.get('public/sass/styleguide.json').then(res => {
       this.colors = _.map(res.data[this.theme], (value, key) => {
         return {name: key, value: value};
       });
@@ -20,7 +38,7 @@ class StyleGuideCtrl {
 
   switchTheme() {
     var other = this.theme === 'dark' ? 'light' : 'dark';
-    window.location.href = config.appSubUrl + '/styleguide?theme=' + other;
+    window.location.href = window.location.href + '?theme=' + other;
   }
 
 }

public/app/partials/dashboard.html

@@ -100,7 +100,7 @@
 
 		<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
 			<div class="span12" style="text-align:right;">
-				<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-info btn-small">
+				<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small">
 					<span><i class="fa fa-plus"></i> ADD ROW</span>
 				</span>
 			</div>

public/app/partials/login.html

@@ -19,17 +19,17 @@
 
       <form name="loginForm" class="login-form gf-form-group">
 				<div class="gf-form" ng-if="loginMode">
-					<span class="gf-form-label gf-size-sm">User</span>
-					<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
+					<span class="gf-form-label width-7">User</span>
+					<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.user' placeholder={{loginHint}}>
 				</div>
 				<div class="gf-form" ng-if="loginMode">
-					<span class="gf-form-label gf-size-sm">Password</span>
-					<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
+					<span class="gf-form-label width-7">Password</span>
+					<input type="password" name="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password">
 				</div>
 
 				<div class="gf-form" ng-if="!loginMode">
-						<span class="gf-form-label gf-size-sm">Email</span>
-						<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
+						<span class="gf-form-label width-7">Email</span>
+						<input type="email" class="gf-form-input max-width-14" required ng-model='formModel.email' placeholder="email">
 				</div>
 
 				<div class="gf-form-button-row">

public/app/partials/panelgeneral.html

@@ -1,29 +1,29 @@
 <div class="gf-form-group">
 	<div class="gf-form-inline">
-		<div class="gf-form gf-size-max-xxl">
-			<span class="gf-form-label gf-size-sm">Title</span>
+		<div class="gf-form max-width-21">
+			<span class="gf-form-label width-8">Title</span>
 			<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-xs">Span</span>
+			<span class="gf-form-label width-6">Span</span>
 			<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
 		</div>
-		<div class="gf-form gf-size-max-xxl">
-			<span class="gf-form-label gf-size-sm">Height</span>
-			<input type="text" class="gf-form-input gf-size-max-xs" ng-model='ctrl.panel.height' placeholder="100px"></input>
+		<div class="gf-form max-width-21">
+			<span class="gf-form-label width-8">Height</span>
+			<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
 			<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
 		</div>
 	</div>
 
 	<div class="gf-form-inline">
-		<div class="gf-form gf-size-max-xxl">
-			<span class="gf-form-label gf-size-sm">Repeat Panel</span>
+		<div class="gf-form max-width-21">
+			<span class="gf-form-label width-8">Repeat Panel</span>
 			<select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
 				<option value=""></option>
 			</select>
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-xs">Min span</span>
+			<span class="gf-form-label width-6">Min span</span>
 			<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
 				<option value=""></option>
 			</select>

public/app/partials/signup_invited.html

@@ -21,20 +21,20 @@
 
 			<form name="inviteForm" class="login-form gf-form-group">
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-sm">Email</span>
-					<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
+					<span class="gf-form-label width-7">Email</span>
+					<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-sm">Name</span>
-					<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
+					<span class="gf-form-label width-7">Name</span>
+					<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-sm">Username</span>
-					<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
+					<span class="gf-form-label width-7">Username</span>
+					<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-sm">Password</span>
-					<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
+					<span class="gf-form-label width-7">Password</span>
+					<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
 				</div>
 
 				<div style="margin-left: 7.5rem; width: 254px;">

public/app/partials/signup_step2.html

@@ -31,28 +31,28 @@
 			<form name="signUpForm" class="login-form gf-form-group">
 
 				<div class="gf-form" ng-if="verifyEmailEnabled">
-					<span class="gf-form-label gf-size-md">
+					<span class="gf-form-label width-9">
 						Email code<tip>Email verification code (sent to your email)</tip>
 					</span>
-					<input type="text" class="gf-form-input gf-size-max-xl" ng-model="formModel.code" required></input>
+					<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
 				</div>
 
 				<div class="gf-form" ng-if="!autoAssignOrg">
-					<span class="gf-form-label gf-size-md">Org. name</span>
-					<input type="text" name="orgName" class="gf-form-input gf-size-max-xl" ng-model='formModel.orgName' placeholder="Name your organization">
+					<span class="gf-form-label width-9">Org. name</span>
+					<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model='formModel.orgName' placeholder="Name your organization">
 				</div>
 
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-md">Your name</span>
-					<input type="text" name="name" class="gf-form-input gf-size-max-xl" ng-model='formModel.name' placeholder="(optional)">
+					<span class="gf-form-label width-9">Your name</span>
+					<input type="text" name="name" class="gf-form-input max-width-14" ng-model='formModel.name' placeholder="(optional)">
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-md">Username</span>
-					<input type="text" class="gf-form-input gf-size-max-xl" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
+					<span class="gf-form-label width-9">Username</span>
+					<input type="text" class="gf-form-input max-width-14" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-md">Password</span>
-					<input type="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
+					<span class="gf-form-label width-9">Password</span>
+					<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
 				</div>
 
 				<div style="margin-left: 7.5rem; width: 254px;">

public/app/plugins/datasource/elasticsearch/partials/config.html

@@ -5,24 +5,24 @@
 
 <div class="gf-form-group">
 	<div class="gf-form-inline">
-		<div class="gf-form gf-size-max-xxxl">
-			<span class="gf-form-label gf-size-md">Index name</span>
+		<div class="gf-form max-width-28">
+			<span class="gf-form-label width-9">Index name</span>
 			<input class="gf-form-input" type="text" ng-model='ctrl.current.database' placeholder="" required></input>
 		</div>
 
-		<div class="gf-form gf-size-xl">
-			<span class="gf-form-label gf-size-md">Pattern</span>
+		<div class="gf-form width-14">
+			<span class="gf-form-label width-9">Pattern</span>
 			<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
 		</div>
 	</div>
 
-	<div class="gf-form gf-size-max-xxxl">
-		<span class="gf-form-label gf-size-md">Time field name</span>
+	<div class="gf-form max-width-28">
+		<span class="gf-form-label width-9">Time field name</span>
 		<input class="gf-form-input" type="text"  ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
 	</div>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-md">Version</span>
+		<span class="gf-form-label width-9">Version</span>
 		<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
 	</div>
 
@@ -32,6 +32,6 @@
 <div class="gf-form-group">
 	<div class="gf-form">
 		<span class="gf-form-label">Group by time interval</span>
-		<input class="gf-form-input gf-size-max-md" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
+		<input class="gf-form-input max-width-9" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
 	</div>
 </div>

public/app/plugins/datasource/influxdb/partials/config.html

@@ -1,52 +1,33 @@
 <datasource-http-settings current="ctrl.current">
 </datasource-http-settings>
 
-<h4>InfluxDB Details</h4>
+<h3 class="page-heading">InfluxDB Details</h3>
 
-<div class="tight-form">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 80px">
-			Database
-		</li>
-		<li>
-			<input type="text" class="tight-form-input input-large" ng-model='ctrl.current.database' placeholder="" required></input>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
-</div>
-<div class="tight-form last">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 80px">
-			User
-		</li>
-		<li>
-			<input type="text" class="tight-form-input input-large" ng-model='ctrl.current.user' placeholder="" required></input>
-		</li>
-		<li class="tight-form-item">
-			Password
-		</li>
-		<li>
-			<input type="password" class="tight-form-input input-large" ng-model='ctrl.current.password' placeholder="" required></input>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
-</div>
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form max-width-30">
+			<span class="gf-form-label width-7">Database</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="" required></input>
+		</div>
+	</div>
 
+	<div class="gf-form-inline">
+		<div class="gf-form max-width-15">
+			<span class="gf-form-label width-7">User</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder="" required></input>
+		</div>
+		<div class="gf-form max-width-15">
+			<span class="gf-form-label width-7">Password</span>
+			<input type="password" class="gf-form-input" ng-model='ctrl.current.password' placeholder="" required></input>
+		</div>
+	</div>
+</div>
 
-<br>
-<h4>Default query settings</h4>
-<div class="tight-form last">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 200px">
-			Group by time interval
-		</li>
-		<li>
-			<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="ctrl.current.jsonData.timeInterval"
-			spellcheck='false' placeholder="example: >10s">
-		</li>
-		<li class="tight-form-item">
-			<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
+<div class="gf-form-group">
+	<div class="gf-form max-width-21">
+		<span class="gf-form-label">Default group by time</span>
+		<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval"
+		spellcheck='false' placeholder="example: >10s"></input>
+		<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
+	</div>
 </div>

public/sass/_grafana.scss

@@ -22,6 +22,7 @@
 @import "utils/validation";
 @import "utils/angular";
 @import "utils/spacings";
+@import "utils/widths";
 
 // LAYOUTS
 @import "layout/page";

public/sass/_old_responsive.scss

@@ -17,7 +17,7 @@
   body {
     padding: 0;
   }
-  .dashnav-dashboards-btn a {
+  .page-dashboard .navbar-page-btn {
     max-width: 200px;
   }
   .gf-timepicker-nav-btn {
@@ -34,7 +34,7 @@
 
 // form styles
 @include media-breakpoint-up(md) {
-  .dashnav-dashboards-btn a {
+  .page-dashboard .navbar-page-btn {
     max-width: 180px;
   }
   .gf-timepicker-nav-btn {
@@ -51,7 +51,7 @@
 }
 
 @include media-breakpoint-up(lg) {
-  .dashnav-dashboards-btn a {
+  .page-dashboard .navbar-page-btn {
     max-width: 290px;
   }
   .gf-timepicker-nav-btn {

public/sass/_variables.dark.scss

@@ -8,17 +8,17 @@ $black:                 #000;
 
 // -------------------------
 $black:            #000;
-$dark-1:           #141414; // (body)
-$dark-2:           #1f1d1d; // ($gray-darker)
-$dark-3:           #262626; // ($gray-dark)
+$dark-1:           #141414; 
+$dark-2:           #1f1d1d;
+$dark-3:           #262626;
 $dark-4:           #333333;
 $dark-5:           #444444;
 $gray-1:           #555555;
-$gray-2:           #6e7580;
+$gray-2:           #7B7B7B;
 $gray-3:           #b3b3b3;
-$gray-4:           #cfd4d9;
-$gray-5:           #e8edf0;
-$gray-6:           #f7f9fa;
+$gray-4:           #D8D9DA;
+$gray-5:           #ECECEC;
+$gray-6:           #f4f5f8;
 $gray-7:           #fbfbfb;
 
 $white:            #fff;
@@ -50,7 +50,6 @@ $critical:              #ed2e18;
 // -------------------------
 $body-bg:  			   rgb(20,20,20);
 $page-bg:  			   $dark-2;
-$pageImageUrl: 		   '../img/angle_gradient_rev.png';
 $body-color:   		   $gray-4;
 $text-color:   	       $gray-4;
 
@@ -75,7 +74,6 @@ $hr-border-color: rgba(0,0,0,.1) !default;
 $component-active-color: #fff !default;
 $component-active-bg:    $brand-primary !default;
 
-
 // Panel
 // -------------------------
 $panel-bg: 				 $dark-2;
@@ -94,8 +92,8 @@ $modal-background: $black;
 $code-tag-bg: #444;
 
 // Lists
-$grafanaListBackground:  	$dark-3;
-$grafanaListAccent:      	lighten($dark-2, 2%);
+$grafanaListBackground:  	  $dark-3;
+$grafanaListAccent:      	  lighten($dark-2, 2%);
 $grafanaListBorderTop:      $dark-3;
 $grafanaListBorderBottom:   $black;
 $grafanaListHighlight:      #333;
@@ -120,22 +118,19 @@ $btn-primary-bg:              $brand-primary;
 $btn-primary-bg-hl:           lighten($brand-primary, 8%);
 
 $btn-secondary-bg:            $blue-dark;
-$btn-secondary-bg-hl:         lighten($blue-dark, 8%);
-
-$btn-info-bg:                 lighten($purple, 3%);
-$btn-info-bg-hl:     		  darken($purple, 3%);
+$btn-secondary-bg-hl:     		lighten($blue-dark, 3%);
 
-$btn-success-bg-hl:     	  darken($green, 3%);
+$btn-success-bg-hl:     	    darken($green, 3%);
 $btn-success-bg:              lighten($green, 3%);
 
 $btn-warning-bg:              $brand-warning;
-$btn-warning-bg-hl:     	  lighten($brand-warning, 8%);
+$btn-warning-bg-hl:     	    lighten($brand-warning, 8%);
 
 $btn-danger-bg:               lighten($red, 3%);
 $btn-danger-bg-hl:            darken($red, 3%);
 
 $btn-inverse-bg:              $dark-3;
-$btn-inverse-bg-hl:     	  lighten($dark-3, 1%);
+$btn-inverse-bg-hl:     	    lighten($dark-3, 1%);
 $btn-inverse-text-color:      $link-color;
 
 $btn-link-color:              $gray-3;
@@ -231,7 +226,7 @@ $successText:             #468847;
 $successBackground:       $btn-success-bg;
 
 $infoText:                $blue-dark;
-$infoBackground:          $btn-info-bg;
+$infoBackground:          $blue-dark;
 
 // Tooltips and popovers
 // -------------------------

public/sass/_variables.light.scss

@@ -13,9 +13,9 @@ $black:                 #000;
 
 // -------------------------
 $black:            #000;
-$dark-1:           #141414; // (body)
-$dark-2:           #1f1d1d; // ($gray-darker)
-$dark-3:           #262626; // ($gray-dark)
+$dark-1:           #141414; 
+$dark-2:           #1f1d1d;
+$dark-3:           #262626;
 $dark-4:           #333333;
 $dark-5:           #444444;
 $gray-1:           #555555;
@@ -31,7 +31,7 @@ $white:            #fff;
 // Accent colors
 // -------------------------
 $blue:             	   	#2AB2E4;
-$blue-dark:             #75CAEB;
+$blue-dark:             #3CAAD6;
 $green:                 #28B62C;
 $red:                   #FF4136;
 $yellow:                #FF851B;
@@ -54,9 +54,8 @@ $critical:              #EC2128;
 // Scaffolding
 // -------------------------
 
-$body-bg:  		$white;
-$page-bg:  		$white;
-$pageImageUrl: 	'../img/angle_gradient_light_rev.png';
+$body-bg:  		  $white;
+$page-bg:  		  $white;
 $body-color:    $gray-1;
 $text-color:    $gray-1;
 
@@ -81,7 +80,6 @@ $hr-border-color: $dark-3 !default;
 $component-active-color: $white !default;
 $component-active-bg:    $brand-primary !default;
 
-
 // Panel
 // -------------------------
 
@@ -128,10 +126,7 @@ $btn-primary-bg:        $brand-primary;
 $btn-primary-bg-hl:     lighten($brand-primary, 8%);
 
 $btn-secondary-bg:      $blue-dark;
-$btn-secondary-bg-hl:   lighten($blue-dark, 8%);
-
-$btn-info-bg:           lighten($purple, 3%);
-$btn-info-bg-hl:        darken($purple, 3%);
+$btn-secondary-bg-hl:   lighten($blue-dark, 4%);
 
 $btn-success-bg:        lighten($green, 3%);
 $btn-success-bg-hl:     darken($green, 3%);
@@ -255,8 +250,8 @@ $successText:             lighten($green, 10%);
 $successBackground:       $green;
 $successBorder:           transparent;
 
-$infoText:                lighten($purple,10%);
-$infoBackground:          $purple;
+$infoText:                $blue;
+$infoBackground:          $blue-dark;
 $infoBorder:              transparent;
 
 
@@ -278,6 +273,4 @@ $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
 // images
-$checkboxImageUrl: '../img/checkbox_white.png';
-
-
+$checkboxImageUrl: '../img/checkbox_white.png';

public/sass/_variables.scss

@@ -77,17 +77,6 @@ $grid-gutter-width: 30px !default;
 
 $enable-flex: false;
 
-$form-sizes: (
-  xs: 5.7rem,
-  sm: 7rem,
-  md: 8.5rem,
-  lg: 10rem,
-  xl: 14rem,
-  xxl: 21rem,
-  xxxl: 28rem
-) !default;
-
-
 // Typography
 // -------------------------
 
@@ -189,6 +178,7 @@ $input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-pa
 $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
 
 $form-group-margin-bottom:       $spacer-y !default;
+$gf-form-margin: 0.2rem;
 
 $cursor-disabled:                not-allowed !default;
 
@@ -225,4 +215,4 @@ $btn-padding-y-lg:               .75rem !default;
 $btn-border-radius:              3px;
 
 // sidemenu
-$side-menu-width:  15rem;
+$side-menu-width:  14rem;

public/sass/components/_buttons.scss

@@ -65,7 +65,7 @@
 }
 
 .btn-link {
-  color: $btn-link-color;   
+  color: $btn-link-color;
 }
 
 // Set the backgrounds
@@ -89,8 +89,8 @@
   @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
 }
 // Info appears as a neutral blue
-.btn-info {
-  @include buttonBackground($btn-info-bg, $btn-info-bg-hl);
+.btn-secondary {
+  @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
 }
 // Inverse appears as dark gray
 .btn-inverse {
@@ -103,10 +103,10 @@
   @include button-outline-variant($btn-primary-bg);
 }
 .btn-outline-secondary {
-  @include button-outline-variant($btn-inverse-bg);
+  @include button-outline-variant($btn-secondary-bg);
 }
-.btn-outline-info {
-  @include button-outline-variant($btn-info-bg);
+.btn-outline-inverse {
+  @include button-outline-variant($btn-inverse-bg);
 }
 .btn-outline-success {
   @include button-outline-variant($btn-success-bg);

public/sass/components/_dashboard.scss

@@ -58,7 +58,7 @@
 
 .row-open {
   margin-top: 5px;
-  left: -28px;
+  left: -30px;
   position: absolute;
   z-index: 100;
   transition: .10s left;

public/sass/components/_gf-form.scss

@@ -59,18 +59,6 @@ $gf-form-label-margin: 0.2rem;
   flex-shrink: 0;
 }
 
-@each $size, $value in $form-sizes {
-  .gf-size-#{$size} { width: $value; }
-
-  .gf-size-max-#{$size} {
-    flex-grow: 1;
-    max-width: $value;
-  }
-}
-
-.gf-size-max { width: 100%; }
-.gf-size-auto { width: auto; }
-
 .gf-form-input {
   display: block;
   width: 100%;

public/sass/components/_navbar.scss

@@ -56,52 +56,30 @@
   background-color: $navbarLinkBackgroundActive;
 }
 
-
-.fa.top-nav-breadcrumb-icon {
-  margin: 18px 0 6px 5px;
-  float: left;
-  font-size: 120%;
-  color: $text-color;
-}
-
-.top-nav-btn {
+.navbar-brand-btn {
   display: block;
   position: relative;
   float: left;
   margin: 0;
-  font-size: 1.4em;
   border-right: 1px solid $tight-form-border;
+  background-color: $navbarButtonBackground;
+  padding: 0.6rem 1.0rem 0.5rem 1rem;
 
   .fa-caret-down {
-    font-size: 55%;
-    position: absolute;
-    right: 8px;
-    top: 23px;
-    margin-right: 2px;
+    font-size: 70%;
   }
 
-  a {
-    color: darken($link-color, 5%);
-    background-color: $navbarButtonBackground;
-    display: inline-block;
-    &:hover {
-      background: $navbarButtonBackgroundHighlight;
-      color: $link-color;
-      // border-bottom: 1px solid $blue;
-    }
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
   }
-}
 
-.top-nav-menu-btn {
-  a {
-     padding: 7px 20px 6px 13px;
-  }
   img {
     width: 30px;
     position: relative;
     top: -2px;
   }
-  .top-nav-logo-background {
+
+  .navbar-brand-btn-background {
     display: inline-block;
     border: 1px solid $body-bg;
     padding: 4px;
@@ -110,6 +88,7 @@
     width: 40px;
     height: 40px;
   }
+
   .icon-gf-grafana_wordmark {
     font-size: 21px;
     position: relative;
@@ -119,13 +98,28 @@
   }
 }
 
-.dashnav-dashboards-btn {
-  a {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: block;
-    padding: 11px 17px 12px 13px;
+.navbar-page-btn {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  float: left;
+  display: block;
+  margin: 0;
+  font-size: 1.4em;
+  border-right: 1px solid $tight-form-border;
+  color: darken($link-color, 5%);
+  background-color: $navbarButtonBackground;
+  font-size: $font-size-lg;
+  padding: 1rem 0.8rem;
+
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
+    color: $link-color;
+  }
+
+  .fa-caret-down {
+    font-size: 60%;
+    padding-left: 0.2rem;
   }
 
   .fa-th-large {
@@ -141,32 +135,3 @@
   }
 }
 
-.dashboard-title {
-  padding: 0 0.4rem 0 0.5rem;
-  font-size: $font-size-lg;
-}
-
-.top-nav-icon {
-  margin: 5px 0px 0 11px;
-  line-height: 41px;
-  float: left;
-}
-
-.top-nav-section {
-  display: block;
-  float: left;
-  padding: 19px 9px 8px 0;
-  font-weight: bold;
-  i {
-    padding-left: 8px;
-  }
-}
-
-.top-nav-title {
-  display: block;
-  float: left;
-  font-size: 17px;
-  padding: 18px 10px 10px 13px;
-  color: $link-color;
-}
-

public/sass/components/_sidemenu.scss

@@ -30,16 +30,15 @@
     min-height: calc(100% - 54px);
   }
   .dashboard-container {
-    padding-left: $side-menu-width;
+    padding-left: $side-menu-width + 0.2rem;
   }
   .page-container {
     margin-left: $side-menu-width;
   }
-  .top-nav-menu-btn {
-    a {
-      background-color: $page-bg;
-      width: $side-menu-width;
-    }
+  .navbar-brand-btn {
+    background-color: $page-bg;
+    width: $side-menu-width;
+
     .icon-gf-grafana_wordmark  {
       display: inline-block;
     }
@@ -47,9 +46,6 @@
       display: none;
     }
   }
-  .sidemenu-org {
-    box-shadow: none;
-  }
   .search-container {
     left: auto;
   }
@@ -195,7 +191,7 @@
 .sidemenu .fa-caret-right {
   position: absolute;
   top: 38%;
-  right: 25px;
+  right: 6px;
   font-size: 14px;
   color: $link-color;
 }

public/sass/layout/_page.scss

@@ -18,9 +18,9 @@
   }
 }
 
+$color-page-hero-bg: #2e2e2e;
 .page-container {
   background-color: $page-bg;
-  background-image: url($pageImageUrl); /* this is an experiment */
   background-position: left;
   background-size: 60%;
   background-repeat: no-repeat;
@@ -30,6 +30,7 @@
   margin-left: 0;
   min-height: calc(100% - 54px);
   padding-bottom: $spacer * 5;
+  background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%);
 }
 
 .page-header {

public/sass/pages/_login.scss

@@ -1,5 +1,4 @@
 .login-container {
-  background-image: url($pageImageUrl); /* this is an experiment */
   background-position: left;
   background-size: 60%;
   background-repeat: no-repeat;

public/sass/pages/_styleguide.scss

@@ -16,6 +16,7 @@
 .style-guide-button-list {
   padding: $spacer;
   button {
+    display: block;
     margin: 0 $spacer $spacer 0;
   }
 }

public/sass/utils/_spacings.scss

@@ -28,6 +28,7 @@
   }
 }
 
+
 // Positioning
 
 .pos-f-t {

public/sass/utils/_widths.scss

@@ -0,0 +1,19 @@
+
+
+.max-width { width: 100%; }
+.width-auto { width: auto; }
+
+// widths
+@for $i from 1 through 30 {
+  .width-#{$i} {
+    width: ($spacer * $i) - $gf-form-margin;
+  }
+}
+
+@for $i from 1 through 30 {
+  .max-width-#{$i} {
+    max-width: ($spacer * $i) - $gf-form-margin;
+    flex-grow: 1;
+  }
+}
+