ux(sass): fixes and tweaks

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

@@ -1,22 +1,19 @@
-<div class="navbar">
-	<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>
-
+<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>
 
-		<div ng-if="ctrl.title">
-			<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
-			</nav-button>
-		</div>
 
-		<div ng-transclude></div>
+	<div ng-if="ctrl.title">
+		<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
+		</nav-button>
 	</div>
-</div>
 
+	<div ng-transclude></div>
+</div>

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

@@ -25,6 +25,7 @@ export function navbarDirective() {
     },
     link: function(scope, elem, attrs, ctrl) {
       ctrl.icon = attrs.icon;
+      elem.addClass('navbar');
     }
   };
 }

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

@@ -17,9 +17,10 @@
 		</div>
 	</form>
 
-	<h3>Address</h3>
 
 	<form name="addressForm" class="gf-form-group">
+		<h3>Address</h3>
+
 		<div class="gf-form-inline">
 			<div class="gf-form gf-size-max-xxxl">
 				<span class="gf-form-label gf-size-sm">Address1</span>

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

@@ -2,15 +2,13 @@
 </navbar>
 
 <div class="page-container">
-	<div class="page-wide">
-
-		<button class="btn btn-success pull-right" ng-click="openInviteModal()">
+	<div class="page-header">
+		<h1>Organization users</h1>
+		<button class="btn btn-success" ng-click="openInviteModal()">
 			<i class="fa fa-plus"></i>
 			Add or Invite
 		</button>
-
-		<h1>Organization users</h1>
-		<br>
+	</div>
 
 		<tabset>
 			<tab heading="Users ({{users.length}})">

public/sass/_old_responsive.scss

@@ -28,7 +28,7 @@
     display: none;
   }
   .page-container {
-    padding: 10px 20px;
+    padding: ($spacer * 1) ($spacer * 2);
   }
 }
 

public/sass/_variables.dark.scss

@@ -105,7 +105,6 @@ $table-border:                $gray-dark; // table and cell border
 // -------------------------
 $btnBackground:                     $gray-dark;
 $btnBackgroundHighlight:            darken($gray-light, 15%);
-$btnBackgroundShadow:            	darken($gray-light, 15%);
 $btnBorder:                         #bbb;
 
 $btnPrimaryBackground:              $blue-dark;

public/sass/_variables.scss

@@ -78,8 +78,8 @@ $grid-gutter-width: 30px !default;
 $enable-flex: false;
 
 $form-sizes: (
-  xs: 60px,
-  sm: 80px,
+  xs: 80px,
+  sm: 100px,
   md: 120px,
   lg: 150px,
   xl: 200px,
@@ -172,7 +172,7 @@ $table-sm-cell-padding:         .3rem !default;
 // Forms
 $input-padding-x:                .75rem !default;
 $input-padding-y:                .5rem !default;
-$input-line-height:              1.25 !default;
+$input-line-height:              1.25rem !default;
 
 $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;

public/sass/base/_forms.scss

@@ -6,17 +6,6 @@
 // GENERAL STYLES
 // --------------
 
-// Make all forms have space below them
-form {
-  margin: 0 0 $line-height-base;
-}
-
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
 // Groups of fields with labels on top (legends)
 legend {
   display: block;
@@ -56,84 +45,69 @@ label {
   display: block;
 }
 
-// Form controls
-// -------------------------
-
-// Shared size and type resets
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-.uneditable-input {
-  display: inline-block;
-  height: $input-height;
-  line-height: $input-line-height;
-  padding: 4px 6px;
-  font-size: $font-size-base;
-  color: $input-color;
-  vertical-align: top;
-}
+// // Form controls
+// // -------------------------
+//
+// // Shared size and type resets
+// select,
+// textarea,
+// input[type="text"],
+// input[type="password"],
+// input[type="datetime"],
+// input[type="datetime-local"],
+// input[type="date"],
+// input[type="month"],
+// input[type="time"],
+// input[type="week"],
+// input[type="number"],
+// input[type="email"],
+// input[type="url"],
+// input[type="search"],
+// input[type="tel"],
+// input[type="color"],
+// .uneditable-input {
+//   display: inline-block;
+//   height: $input-height;
+//   line-height: $input-line-height;
+//   padding: 4px 6px;
+//   font-size: $font-size-base;
+//   color: $input-color;
+//   vertical-align: top;
+// }
 
-// Reset appearance properties for textual inputs and textarea
-// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
-input,
-textarea,
-.uneditable-input {
-  width: 206px; // plus 12px padding and 2px border
-}
 // Reset height since textareas have rows
 textarea {
   height: auto;
 }
 
-// Everything else
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-.uneditable-input {
-  background-color: $input-bg;
-  border: 1px solid $input-border-color;
-  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @include transition("border linear .2s, box-shadow linear .2s");
-
-  // Focus state
-  &:focus {
-    border-color: rgba(82,168,236, .8);
-    outline: 0;
-    @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-  }
-}
-
-// Position radios and checkboxes better
-input[type="radio"],
-input[type="checkbox"] {
-  margin: 4px 0 0;
-  line-height: normal;
-}
+// // Everything else
+// textarea,
+// input[type="text"],
+// input[type="password"],
+// input[type="datetime"],
+// input[type="datetime-local"],
+// input[type="date"],
+// input[type="month"],
+// input[type="time"],
+// input[type="week"],
+// input[type="number"],
+// input[type="email"],
+// input[type="url"],
+// input[type="search"],
+// input[type="tel"],
+// input[type="color"] {
+//   background-color: $input-bg;
+//   border: 1px solid $input-border-color;
+//   @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+//   @include transition("border linear .2s, box-shadow linear .2s");
+//
+//   // Focus state
+//   &:focus {
+//     border-color: rgba(82,168,236, .8);
+//     outline: 0;
+//     @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+//   }
+// }
 
 // Reset width of input images, buttons, radios, checkboxes
 input[type="file"],
@@ -207,7 +181,7 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly] {
-  cursor: not-allowed;
+  cursor: $cursor-disabled;
   background-color: $input-bg-disabled;
 }
 
@@ -216,6 +190,7 @@ input[type="radio"][disabled],
 input[type="checkbox"][disabled],
 input[type="radio"][readonly],
 input[type="checkbox"][readonly] {
+  cursor: $cursor-disabled;
   background-color: transparent;
 }
 

public/sass/components/_gf-form.scss

@@ -42,12 +42,15 @@ $gf-form-margin: 4px;
 }
 
 .gf-form-label {
+  padding: $input-padding-y $input-padding-x;
+  line-height: $input-line-height;
   flex-shrink: 0;
+
   background-color: $input-label-bg;
   display: block;
-  padding: 8px 7px;
   font-size: $font-size-sm;
   margin-right: $gf-form-margin;
+  border: $input-btn-border-width solid transparent;
 }
 
 .gf-form-checkbox {
@@ -65,53 +68,46 @@ $gf-form-margin: 4px;
 .gf-size-max { width: 100%; }
 .gf-size-auto { width: auto; }
 
+.gf-form-input {
+  display: block;
+  width: 100%;
+  padding: $input-padding-y $input-padding-x;
+  font-size: $font-size-base;
+  line-height: $input-line-height;
+  color: $input-color;
+  background-color: $input-bg;
+  background-image: none;
+  background-clip: padding-box;
+  border: $input-btn-border-width solid $input-border-color;
+  @include border-radius($input-border-radius);
+  @include box-shadow($input-box-shadow);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+
+  // Unstyle the caret on `<select>`s in IE10+.
+  &::-ms-expand {
+    background-color: transparent;
+    border: 0;
+  }
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  @include form-control-focus();
+
+  // Placeholder
+  &::placeholder {
+    color: $input-color-placeholder;
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+
+  &:disabled,
+  &[readonly] {
+    background-color: $input-bg-disabled;
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
 
-select,
-[type=text],
-[type=email],
-[type=number],
-[type=password] {
-  &.gf-form-input {
-    display: block;
-    width: 100%;
-    padding: $input-padding-y $input-padding-x;
-    font-size: $font-size-base;
-    line-height: $input-line-height;
-    color: $input-color;
-    background-color: $input-bg;
-    background-image: none;
-    background-clip: padding-box;
-    border: $input-btn-border-width solid $input-border-color;
-    @include border-radius($input-border-radius);
-    @include box-shadow($input-box-shadow);
-    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-
-    // Unstyle the caret on `<select>`s in IE10+.
-    &::-ms-expand {
-      background-color: transparent;
-      border: 0;
-    }
-
-    // Customize the `:focus` state to imitate native WebKit styles.
-    @include form-control-focus();
-
-    // Placeholder
-    &::placeholder {
-      color: $input-color-placeholder;
-      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-      opacity: 1;
-    }
-
-    &:disabled,
-    &[readonly] {
-      background-color: $input-bg-disabled;
-      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-      opacity: 1;
-    }
-
-    &:disabled {
-      cursor: $cursor-disabled;
-    }
+  &:disabled {
+    cursor: $cursor-disabled;
   }
 
   &.gf-size-auto { width: auto; }

public/sass/components/_navbar.scss

@@ -1,6 +1,6 @@
 
-
 .navbar {
+  display: block;
   overflow: visible;
   position: relative;
   z-index: 110;

public/sass/components/_navs.scss

@@ -16,78 +16,23 @@
 .nav > li > a {
   display: block;
 }
-.nav > li > a:hover,
-.nav > li > a:focus {
-  text-decoration: none;
-  background-color: $gray-lighter;
-}
 
 // Redeclare pull classes because of specifity
 .nav > .pull-right {
   float: right;
 }
 
-// Nav headers (for dropdowns and lists)
-.nav-header {
-  display: block;
-  padding: 3px 15px;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: $line-height-base;
-  color: $gray-light;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  text-transform: uppercase;
-}
-// Space them out when they follow another list item (link)
-.nav li + .nav-header {
-  margin-top: 9px;
-}
-
-
-
-// NAV LIST
-// --------
-
-.nav-list {
-  padding-left: 15px;
-  padding-right: 15px;
-  margin-bottom: 0;
-}
-.nav-list > li > a,
-.nav-list .nav-header {
-  margin-left:  -15px;
-  margin-right: -15px;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.nav-list > li > a {
-  padding: 3px 15px;
-}
-.nav-list > .active > a,
-.nav-list > .active > a:hover,
-.nav-list > .active > a:focus {
-  color: $white;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
-  background-color: $link-color;
-}
-.nav-list [class^="icon-"],
-.nav-list [class*=" icon-"] {
-  margin-right: 2px;
-}
-
 // TABS AND PILLS
 // -------------
 
 // Common styles
-.nav-tabs,
-.nav-pills {
+.nav-tabs {
   @include clearfix();
 }
-.nav-tabs > li,
-.nav-pills > li {
+.nav-tabs > li {
   float: left;
 }
-.nav-tabs > li > a,
-.nav-pills > li > a {
+.nav-tabs > li > a {
   padding-right: 12px;
   padding-left: 12px;
   margin-right: 2px;
@@ -99,12 +44,16 @@
 
 // Give the tabs something to sit on
 .nav-tabs {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid $divider-border-color;
+  padding-left: 10px;
+  margin: 0 0 10px 0;
 }
+
 // Make the list-items overlay the bottom border
 .nav-tabs > li {
   margin-bottom: -1px;
 }
+
 // Actual tabs (as links)
 .nav-tabs > li > a {
   padding-top: 8px;
@@ -114,80 +63,18 @@
   @include border-radius(4px 4px 0 0);
   &:hover,
   &:focus {
-    border-color: $gray-lighter $gray-lighter #ddd;
+    border-color: $divider-border-color;
   }
 }
 // Active state, and it's :hover/:focus to override normal :hover/:focus
 .nav-tabs > .active > a,
 .nav-tabs > .active > a:hover,
 .nav-tabs > .active > a:focus {
-  color: $gray;
-  background-color: $body-bg;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-
-
-// Default dropdown links
-// -------------------------
-// Make carets use linkColor to start
-.nav .dropdown-toggle .caret {
-  border-top-color: $link-color;
-  border-bottom-color: $link-color;
-  margin-top: 6px;
-}
-.nav .dropdown-toggle:hover .caret,
-.nav .dropdown-toggle:focus .caret {
-  border-top-color: $link-hover-color;
-  border-bottom-color: $link-hover-color;
-}
-/* move down carets for tabs */
-.nav-tabs .dropdown-toggle .caret {
-  margin-top: 8px;
-}
-
-// Active dropdown links
-// -------------------------
-.nav .active .dropdown-toggle .caret {
-  border-top-color: #fff;
-  border-bottom-color: #fff;
-}
-.nav-tabs .active .dropdown-toggle .caret {
-  border-top-color: $gray;
-  border-bottom-color: $gray;
-}
-
-// Active:hover/:focus dropdown links
-// -------------------------
-.nav > .dropdown.active > a:hover,
-.nav > .dropdown.active > a:focus {
-  cursor: pointer;
-}
-
-// Open dropdowns
-// -------------------------
-.nav-tabs .open .dropdown-toggle,
-.nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover,
-.nav > li.dropdown.open.active > a:focus {
-  color: $white;
-  background-color: $gray-light;
-  border-color: $gray-light;
-}
-.nav li.dropdown.open .caret,
-.nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret,
-.nav li.dropdown.open a:focus .caret {
-  border-top-color: $white;
-  border-bottom-color: $white;
-  @include opacity(100);
-}
-
-// Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover,
-.tabs-stacked .open > a:focus {
-  border-color: $gray-light;
+  @include border-radius(3px);
+  border: 1px solid $divider-border-color;
+  background-color: transparent;
+  border-bottom: 1px solid $panel-bg;
+  color: $link-color;
 }
 
 // Show/hide tabbable areas

public/sass/components/_tabs.scss

@@ -1,8 +1,5 @@
 
 .nav-tabs-alt {
-  border-bottom: 1px solid $divider-border-color;
-  padding-left: 10px;
-  margin: 0 0 10px 0;
 
 	& > li > a {
 	  color: darken($link-color, 20%);
@@ -16,7 +13,7 @@
 	li.active > a:focus,
 	li.active > a:hover {
     @include border-radius(3px);
-	  border: 1px solid $divider-border-color;	  
+	  border: 1px solid $divider-border-color;
 	  background-color: transparent;
 	  border-bottom: 1px solid $panel-bg;
 	  color: $link-color;

public/sass/components/_tightform.scss

@@ -112,7 +112,7 @@
 
 .tight-form-func {
   background: $tight-form-func-bg;
-  
+
   &.show-function-controls {
     padding-top: 5px;
     min-width: 100px;
@@ -131,7 +131,7 @@ input[type=text].tight-form-clear-input {
   padding: 8px 7px;
   border: none;
   margin: 0px;
-  background: transparent;  
+  background: transparent;
   border-radius: 0;
   border-right: 1px solid $tight-form-border;
 }
@@ -141,6 +141,7 @@ input[type=text].tight-form-clear-input {
 [type=number],
 [type=password] {
   &.tight-form-input {
+    background-color: $input-bg;
     border: none;
     border-right: 1px solid $tight-form-border;
     margin: 0px;
@@ -167,6 +168,7 @@ input[type=checkbox].tight-form-checkbox {
 select.tight-form-input {
   border: none;
   border-right: 1px solid $tight-form-border;
+  background-color: $input-bg;
   margin: 0px;
   border-radius: 0;
   height: 36px;

public/sass/layout/_page.scss

@@ -25,10 +25,11 @@
 .page-container {
   background-color: $page-bg;
   position: relative;
-  padding: 25px 56px 10px 56px;
+  padding: ($spacer * 2) ($spacer * 4);
   max-width: 1060px;
   margin-left: 0;
-  height: 100%;
+  //min-height: 100%;
+  padding-bottom: $spacer * 5;
 }
 
 .page-header {