ux(sass): a lot of polish on headings and margins, ONLY USE bottom margins, othewise margin collapse causes issues

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

@@ -38,7 +38,7 @@
 			</div>
 		</div>
 
-		<div class="" style="margin-top: 35px">
+		<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)">
@@ -46,6 +46,5 @@
 			</button>
 			<a class="btn-text" href="datasources">Cancel</a>
 		</div>
-		<br>
 	</form>
 </div>

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

@@ -1,7 +1,7 @@
 
 
 <div class="gf-form-group">
-	<h3>Http settings</h3>
+	<h3 class="page-heading">Http settings</h3>
 
 	<div class="gf-form">
 		<span class="gf-form-label gf-size-sm">Url</span>

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

@@ -25,8 +25,8 @@
 					<th><strong>Name</strong></th>
 					<th><strong>Url</strong></th>
 					<th style="width: 60px;"></th>
-					<th style="width: 65px;"></th>
-					<th style="width: 34px;"></th>
+					<th style="width: 85px;"></th>
+					<th style="width: 44px;"></th>
 				</tr>
 			</thead>
 			<tbody>
@@ -45,13 +45,13 @@
 						</span>
 					</td>
 					<td class="text-right">
-						<a href="datasources/edit/{{ds.id}}" class="btn btn-inverse btn-mini">
+						<a href="datasources/edit/{{ds.id}}" class="btn btn-inverse btn-small">
 							<i class="fa fa-edit"></i>
 							Edit
 						</a>
 					</td>
 					<td class="text-right">
-						<a ng-click="ctrl.removeDataSource(ds)" class="btn btn-danger btn-mini">
+						<a ng-click="ctrl.removeDataSource(ds)" class="btn btn-danger btn-small">
 							<i class="fa fa-remove"></i>
 						</a>
 					</td>

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

@@ -2,54 +2,49 @@
 </navbar>
 
 <div class="page-container">
-	<div class="page-wide">
-		<h1>
-			API Keys
-		</h1>
-
-		<form name="addTokenrForm" class="form-inline norm-form last">
-			<ul class="norm-form-list">
-				<li class="norm-form-item" style="width: 100px">
-					Add a key
-				</li>
-				<li>
-					<input type="text" class="input-xlarge norm-form-input" ng-model='token.name' placeholder="Name"></input>
-				</li>
-				<li class="norm-form-item">
-					Role
-				</li>
-				<li>
-					<select class="input-small norm-form-input" ng-model="token.role" ng-options="r for r in roleTypes"></select>
-				</li>
-				</ul>
-				<button class="btn btn-success" style="margin-left:15px; vertical-algin:middle;" ng-click="addToken()">Add</button>
-
-				<div class="clearfix"></div>
-
-		</form>
-
-		<table class="filter-table">
-			<thead>
-				<tr>
-					<th>Name</th>
-					<th>Role</th>
-					<th style="width: 34px;"></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr ng-repeat="t in tokens">
-					<td>{{t.name}}</td>
-					<td>{{t.role}}</td>
-					<td>
-						<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
-							<i class="fa fa-remove"></i>
-						</a>
-					</td>
-				</tr>
-			</tbody>
-		</table>
+	<div class="page-header">
+		<h1>API Keys</h1>
 	</div>
 
+	<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">
+				<span class="gf-form-label">Add a key</span>
+				<input type="text" class="gf-form-input" ng-model='token.name' placeholder="Name"></input>
+			</div>
+			<div class="gf-form">
+				<span class="gf-form-label">Role</span>
+				<select class="gf-form-input gf-size-auto" ng-model="token.role" ng-options="r for r in roleTypes"></select>
+			</div>
+			<div class="gf-form">
+				<button class="btn gf-form-btn btn-success" ng-click="addToken()">Add</button>
+			</div>
+		</div>
+	</form>
+
+	<h3 class="page-heading">Existing Keys</h3>
+	<table class="filter-table">
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Role</th>
+				<th style="width: 34px;"></th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr ng-repeat="t in tokens">
+				<td>{{t.name}}</td>
+				<td>{{t.role}}</td>
+				<td>
+					<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
+						<i class="fa fa-remove"></i>
+					</a>
+				</td>
+			</tr>
+		</tbody>
+	</table>
 </div>
 
 
+

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

@@ -6,21 +6,23 @@
 		<h1>Preferences</h1>
 	</div>
 
+	<h3 class="page-heading">General</h3>
 	<form name="orgForm" class="gf-form-group">
-		<div class="gf-form">
-			<span class="gf-form-label gf-size-xs">Name</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="org.name">
-		</div>
-
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
+		<div class="gf-form-inline">
+			<div class="gf-form gf-size-max-xxxl">
+				<span class="gf-form-label gf-size-xs">Name</span>
+				<input class="gf-form-input" type="text" required ng-model="org.name">
+			</div>
+			<div class="gf-form">
+				<button type="submit" class="btn gf-form-btn btn-success" ng-click="update()">Update</button>
+			</div>
 		</div>
 	</form>
 
 
-	<form name="addressForm" class="gf-form-group">
-		<h3>Address</h3>
+	<h3 class="page-heading">Address</h3>
 
+	<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>
@@ -59,16 +61,16 @@
 		</div>
 	</form>
 
+	<h3 class="page-heading">Admin Pages</h3>
 	<div class="gf-form-group">
-		<h3>Users</h3>
-		<a href="org/users" class="btn btn-inverse">Manage</a>
-	</div>
-
-	<div class="gf-form-group">
-		<h3>API Keys</h3>
-		<a href="org/apikeys" class="btn btn-inverse">Manage</a>
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<a href="org/users" class="btn gf-form-btn btn-inverse">Users &amp; Roles</a>
+			</div>
+			<div class="gf-form">
+			<a href="org/apikeys" class="btn gf-form-btn btn-inverse">API Keys</a>
+		</div>
 	</div>
-
 </div>
 
 

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

@@ -8,17 +8,17 @@
 
 	<form name="userForm" class="gf-form-group">
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-md">Old Password</span>
+			<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">
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-md">New Password</span>
+			<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">
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-md">Confirm Password</span>
+			<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">
 		</div>
 

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

@@ -7,7 +7,7 @@
 	</div>
 
 	<form name="userForm" class="gf-form-group">
-		<h3>Preferences</h3>
+		<h3 class="page-heading">Preferences</h3>
 
 		<div class="gf-form">
 			<span class="gf-form-label gf-size-sm">Name</span>
@@ -31,13 +31,13 @@
 		</div>
 	</form>
 
+	<h3 class="page-heading">Password</h3>
 	<div class="gf-form-group">
-		<h3>Password</h3>
 		<a href="profile/password" class="btn btn-inverse">Change Password</a>
 	</div>
 
+	<h3 class="page-heading">Organizations</h3>
 	<div class="gf-form-group">
-		<h3>Organizations</h3>
 		<table class="filter-table form-inline">
 			<thead>
 				<tr>

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

@@ -1,9 +1,9 @@
 <datasource-http-settings current="ctrl.current">
 </datasource-http-settings>
 
-<div class="gf-form-group">
-	<h3>Elasticsearch details</h3>
+<h3 class="page-heading">Elasticsearch details</h3>
 
+<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>
@@ -28,9 +28,8 @@
 
 </div>
 
+<h3 class="page-heading">Default query settings</h3>
 <div class="gf-form-group">
-	<h4>Default query settings</h4>
-
 	<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">

public/sass/_grafana.scss

@@ -26,6 +26,12 @@
 @import "layout/page";
 
 // COMPONENTS
+@import "components/buttons";
+@import "components/navs";
+@import "components/tabs";
+@import "components/alerts";
+@import "components/tooltip";
+@import "components/tags";
 @import "components/panel_graph";
 @import "components/submenu";
 @import "components/panel_dashlist";
@@ -40,7 +46,6 @@
 @import "components/sidemenu";
 @import "components/navbar";
 @import "components/gfbox";
-@import "components/tabs";
 @import "components/timepicker";
 @import "components/filter-controls";
 @import "components/filter-list";
@@ -48,19 +53,14 @@
 @import "components/scrollbar";
 @import "components/old_stuff";
 @import "components/popovers";
-@import "components/alerts";
 @import "components/typeahead";
-@import "components/tags";
 @import "components/modals";
 @import "components/dropdown";
 @import "components/color_picker";
-@import "components/tooltip";
-@import "components/buttons";
 @import "components/footer";
 @import "components/infobox";
 @import "components/shortcuts";
 @import "components/query_editor";
-@import "components/navs";
 
 // PAGES
 @import "pages/login";

public/sass/_variables.scss

@@ -78,13 +78,13 @@ $grid-gutter-width: 30px !default;
 $enable-flex: false;
 
 $form-sizes: (
-  xs: 80px,
-  sm: 100px,
-  md: 120px,
-  lg: 150px,
-  xl: 200px,
-  xxl: 300px,
-  xxxl: 400px
+  xs: 5.7rem,
+  sm: 7rem,
+  md: 8.5rem,
+  lg: 10rem,
+  xl: 14rem,
+  xxl: 21rem,
+  xxxl: 28rem
 ) !default;
 
 
@@ -135,12 +135,7 @@ $blockquote-font-size:    ($font-size-base * 1.25) !default;
 $blockquote-border-width: .25rem !default;
 
 $hr-border-width: $border-width !default;
-
 $dt-font-weight: bold !default;
-
-$kbd-box-shadow:         inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
-$nested-kbd-font-weight: bold !default;
-
 $list-inline-padding: 5px !default;
 
 // Components
@@ -208,4 +203,19 @@ $zindex-navbar-fixed:      1030;
 $zindex-modal-backdrop:    1040;
 $zindex-modal:             1050;
 
+// Buttons
+//
+
+$btn-padding-x:                  1rem !default;
+$btn-padding-y:                  .6rem !default;
+$btn-line-height:                1.25 !default;
+$btn-font-weight:                normal !default;
+
+$btn-padding-x-sm:               .5rem !default;
+$btn-padding-y-sm:               .25rem !default;
+
+$btn-padding-x-lg:               1.5rem !default;
+$btn-padding-y-lg:               .75rem !default;
+
+$btn-border-radius:              1px;
 

public/sass/components/_buttons.scss

@@ -8,41 +8,43 @@
 // Core
 .btn {
   display: inline-block;
-	padding: 8px 12px;
-	margin-right: 10px;
+  font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
   font-size: $font-size-base;
-  line-height: $line-height-base;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   border: none;
 
-  @include buttonBackground($btnBackground, $btnBackgroundHighlight,  $gray-dark, 0 1px 1px rgba(255,255,255,.75));
-  @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
 
-  // Hover/focus state
-  &:hover,
-  &:focus {
-    text-decoration: none;
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      @include tab-focus();
+    }
   }
 
-  // Focus state for keyboard and accessibility
-  &:focus {
-    @include tab-focus();
+  @include hover-focus {
+    text-decoration: none;
+  }
+  &.focus {
+    text-decoration: none;
   }
 
-  // Active state
-  &.active,
-  &:active {
+  &:active,
+  &.active {
     background-image: none;
+    outline: 0;
   }
 
-  // Disabled state
   &.disabled,
-  &[disabled] {
-    cursor: default;
-    background-image: none;
-    @include opacity(65);
+  &:disabled {
+    cursor: $cursor-disabled;
+    opacity: .65;
+    @include box-shadow(none);
   }
 }
 
@@ -51,20 +53,15 @@
 
 // Large
 .btn-large {
-  padding: 6px 20px;
-  font-size: $font-size-lg;
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius);
 }
 
 .btn-small {
-	padding: 2px 10px;
-  font-size: $font-size-sm;
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
 }
 
 .btn-mini {
-	padding: 2px 6px;
-	margin-right: 0;
-	margin-right: 0;
-  font-size: $font-size-xs;
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius);
 }
 
 // Set the backgrounds

public/sass/components/_gf-form.scss

@@ -1,7 +1,7 @@
 $gf-form-margin: 0.4rem;
 
 .gf-form {
-  margin-top: $gf-form-margin;
+  margin-bottom: $gf-form-margin;
   margin-right: $gf-form-margin;
   display: flex;
   flex-direction: row;
@@ -19,10 +19,7 @@ $gf-form-margin: 0.4rem;
 }
 
 .gf-form-group {
-  h3, h2, h4 {
-    margin-top: $spacer * 2;
-    margin-bottom: $spacer * 1;
-  }
+  margin-bottom: $spacer * 1.5;
 }
 
 .gf-form-inline {
@@ -37,8 +34,10 @@ $gf-form-margin: 0.4rem;
 }
 
 .gf-form-button-row {
-  margin-top: $spacer * 2;
-  margin-bottom: $spacer;
+  margin-top: $spacer * 1.5;
+  a, button {
+    margin-right: $spacer;
+  }
 }
 
 .gf-form-label {
@@ -114,3 +113,9 @@ $gf-form-margin: 0.4rem;
   &.gf-size-auto { width: auto; }
 }
 
+.gf-form-btn {
+  padding: $input-padding-y $input-padding-x;
+  line-height: $input-line-height;
+  flex-shrink: 0;
+  flex-grow: 0;
+}

public/sass/components/_navbar.scss

@@ -8,7 +8,7 @@
 
 .navbar-inner {
   min-height: $navbarHeight;
-  padding-right: 20px;
+  padding-right: $spacer;
   background-color: $navbarBackground;
   border-bottom: $navbarBorder;
   @include clearfix();
@@ -18,11 +18,6 @@
   position: relative;
   left: 0;
   float: left;
-  margin: 0 10px 0 0;
-}
-
-.nav {
-  display: block;
 }
 
 .navbar .nav.pull-right {
@@ -175,4 +170,3 @@
   color: $link-color;
 }
 
-

public/sass/components/_navs.scss

@@ -7,8 +7,7 @@
 // ----------
 
 .nav {
-  margin-left: 0;
-  margin-bottom: $line-height-base;
+  margin: 0;
   list-style: none;
 }
 

public/sass/layout/_page.scss

@@ -33,7 +33,7 @@
 }
 
 .page-header {
-  padding: 10px 0 39px 0px;
+  padding: $spacer 0 $spacer * 2.5;
 
   display: flex;
   justify-content: space-between;
@@ -44,13 +44,19 @@
   display: -webkit-flex;     /* NEW - Chrome */
   flex-wrap: wrap-reverse;
   background: transparent url(../img/page_header_line.png) no-repeat left 60px;
+
   h1 {
     font-style: italic;
   }
-
   margin-bottom: 2rem;
 }
 
+.page-heading {
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: $spacer * 0.6;
+}
+
 .admin-page {
   max-width: 800px;
   margin-left: 10px;

public/sass/mixins/_buttons.scss

@@ -16,3 +16,9 @@
 }
 
 
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  @include border-radius($border-radius);
+}