ux(sass): work on sass variables, getting messy

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

@@ -4,19 +4,19 @@
 	<h3>Http settings</h3>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-xs">Url</span>
+		<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>
 	</div>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-xs">
+		<span class="gf-form-label gf-size-sm">
 			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-xs">
+		<span class="gf-form-label gf-size-sm">
 			Http Auth
 		</span>
 		<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
@@ -24,14 +24,14 @@
 	</div>
 
 	<div class="gf-form" ng-if="current.basicAuth">
-		<span class="gf-form-label gf-size-xs">
+		<span class="gf-form-label gf-size-sm">
 			User
 		</span>
 		<input class="gf-form-input gf-size-max-xxl" 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-xs">
+		<span class="gf-form-label gf-size-sm">
 			Passord
 		</span>
 		<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>

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

@@ -10,19 +10,19 @@
 		<h3>Preferences</h3>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-xs">Name</span>
+			<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" >
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-xs">Email</span>
+			<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">
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-xs">Username</span>
+			<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">
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-xs">UI Theme</span>
+			<span class="gf-form-label gf-size-sm">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>
 
@@ -36,29 +36,30 @@
 		<a href="profile/password" class="btn btn-inverse">Change Password</a>
 	</div>
 
-	<h3>Organizations</h3>
-	<table class="filter-table form-inline">
-		<thead>
-			<tr>
-				<th>Name</th>
-				<th>Role</th>
-				<th></th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr ng-repeat="org in orgs">
-				<td>{{org.name}}</td>
-				<td>{{org.role}}</td>
-				<td class="text-right">
-					<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
-						Current
-					</span>
-					<a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
-						Select
-					</a>
-				</td>
-			</tr>
-		</tbody>
-	</table>
-</div>
+	<div class="gf-form-group">
+		<h3>Organizations</h3>
+		<table class="filter-table form-inline">
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>Role</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="org in orgs">
+					<td>{{org.name}}</td>
+					<td>{{org.role}}</td>
+					<td class="text-right">
+						<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
+							Current
+						</span>
+						<a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
+							Select
+						</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 

public/sass/_grafana.scss

@@ -5,6 +5,7 @@
 @import "mixins/grid";
 @import "mixins/grid-framework";
 @import "mixins/hover";
+@import "mixins/forms";
 
 
 // BASE
@@ -38,7 +39,6 @@
 @import "components/sidemenu";
 @import "components/navbar";
 @import "components/gfbox";
-@import "components/pagination";
 @import "components/tabs";
 @import "components/timepicker";
 @import "components/filter-controls";

public/sass/_variables.dark.scss

@@ -25,6 +25,11 @@ $pink:                  #FF4444;
 $purple:                #9933CC;
 $variable:              #32D1DF;
 
+$brand-primary:         $blue-dark;
+$brand-success:         $green;
+$brand-warning:         $orange;
+$brand-danger:          $red;
+
 // Status colors
 // -------------------------
 $online:                #10a345;
@@ -46,9 +51,8 @@ $link-hover-color:        $white;
 
 // Typography
 // -------------------------
-$headings-color:         darken($white,11%); 
+$headings-color:         darken($white,11%);
 $abbr-border-color: 	 $gray-light !default;
-
 $text-muted: 			 darken($link-color,30%);
 
 $blockquote-small-color:  $gray-light !default;
@@ -56,31 +60,34 @@ $blockquote-border-color: $gray-lighter !default;
 
 $hr-border-color: rgba(0,0,0,.1) !default;
 
+// Components
+$component-active-color: #fff !default;
+$component-active-bg:    $brand-primary !default;
+
 // Panel
 // -------------------------
 $panel-bg: 					$gray-darker;
 $panel-border: 				solid 1px $gray-dark;
 
-$divider-border-color: 		#555; 
+$divider-border-color: 		#555;
 
 // Graphite Target Editor
 $tight-form-border:         #050505;
 $tight-form-bg:     		$gray-dark;
-  
+
 $tight-form-func-bg: 		#333;
 $tight-form-func-highlight-bg: #444;
 
 $modal-background: $black;
 $code-tag-bg: #444;
 
-
 // Lists
-$grafanaListBackground:  $gray-dark;
-$grafanaListAccent:      lighten($gray-darker, 2%);
+$grafanaListBackground:  	$gray-dark;
+$grafanaListAccent:      	lighten($gray-darker, 2%);
 $grafanaListBorderTop:      $gray-dark;
 $grafanaListBorderBottom:   $black;
 $grafanaListHighlight:      #333;
-$grafanaListMainLinkColor: $text-color;
+$grafanaListMainLinkColor:  $text-color;
 
 // Scrollbars
 $scrollbarBackground: #3a3a3a;
@@ -128,22 +135,19 @@ $iconContainerBackgroundHighlight:	lighten($black, 5%);
 $iconContainerBorder:				        1px solid transparent;
 $iconContainerShadow:				        0 0 14px 2px rgba(255,255,255, 0.05);
 
-// Hero unit
-// -------------------------
-$heroUnitBackground:              $gray-dark;
-$heroUnitHeadingColor:            inherit;
-$heroUnitLeadColor:               inherit;
-
 // Forms
 // -------------------------
-$inputBackground:               lighten($gray-dark,5%);
-$inputBorder:                   lighten($gray-dark,5%);
-$inputBorderRadius:             $baseBorderRadius;
-$inputText:              		$gray-light;
-$inputDisabledBackground:       #555;
-$formActionsBackground:         transparent;
-$inputHeight:                   $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
-$labelBackground:				$gray-dark;
+$input-bg:                       lighten($gray-dark,5%);
+$input-bg-disabled:              #555;
+
+$input-color:                    $gray-light;
+$input-border-color:             lighten($gray-dark,5%);
+$input-btn-border-width:         1px;
+$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
+$input-border-focus:             $input-border-color !default;
+$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
+$input-color-placeholder:        #999 !default;
+$input-label-bg:				 $gray-dark;
 
 
 // Search
@@ -151,7 +155,7 @@ $searchShadow: 0 0 35px 0 $body-bg;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground:            $heroUnitBackground;
+$dropdownBackground:            $gray-dark;
 $dropdownBorder:                rgba(0,0,0,.2);
 $dropdownDividerTop:            transparent;
 $dropdownDividerBottom:         #444;
@@ -185,11 +189,6 @@ $zindexModal:             1050;
 $placeholderText:         darken($text-color, 25%);
 
 
-// Hr border color
-// -------------------------
-$hrBorder:                $gray-dark;
-
-
 // Horizontal forms & lists
 // -------------------------
 $horizontalComponentOffset:       180px;
@@ -251,7 +250,7 @@ $tooltipArrowWidth:       5px;
 $tooltipArrowColor:       $tooltipBackground;
 $tooltipLinkColor:        $link-color;
 
-$popoverBackground:       $heroUnitBackground;
+$popoverBackground:       $dropdownBackground;
 $popoverArrowWidth:       10px;
 $popoverArrowColor:       $popoverBackground;
 $popoverTitleBackground:  $popoverBackground;
@@ -262,38 +261,3 @@ $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
 // images
 $checkboxImageUrl: '../img/checkbox.png';
-
-// GRID
-// --------------------------------------------------
-
-
-// Default 940px grid
-// -------------------------
-$gridColumns:             12;
-$gridColumnWidth:         60px;
-$gridGutterWidth:         20px;
-$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
-
-// 1200px min
-$gridColumnWidth1200:     70px;
-$gridGutterWidth1200:     30px;
-$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
-
-// 768px-979px
-$gridColumnWidth768:      42px;
-$gridGutterWidth768:      20px;
-$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
-
-
-// Fluid grid
-// -------------------------
-$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
-$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
-
-// 1200px min
-$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
-$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
-
-// 768px-979px
-$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
-$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);

public/sass/_variables.light.scss

@@ -30,6 +30,11 @@ $pink:                  #E671B8;
 $purple:                #9954BB;
 $variable:              #2AB2E4;
 
+$brand-primary:         $blue-dark;
+$brand-success:         $green;
+$brand-warning:         $orange;
+$brand-danger:          $red;
+
 // Status colors
 // -------------------------
 $online:                #01A64F;
@@ -53,7 +58,7 @@ $link-hover-color:        darken($link-color, 20%);
 // Typography
 // -------------------------
 $headings-color:         $text-color;
-$abbr-border-color: 	 $gray-light !default; 
+$abbr-border-color: 	 $gray-light !default;
 $text-muted: 			 darken($link-color,30%);
 
 $blockquote-small-color:  $gray-light !default;
@@ -61,9 +66,13 @@ $blockquote-border-color: $gray-lighter !default;
 
 $hr-border-color: rgba(0,0,0,.1) !default;
 
+// Components
+$component-active-color: #fff !default;
+$component-active-bg:    $brand-primary !default;
+
 // Panel
 // -------------------------
-  
+
 $panel-bg: 		  $gray-lighter;
 $panel-border: 	  solid 1px #ddd;
 
@@ -83,22 +92,6 @@ $tight-form-func-highlight-bg: 	darken($tight-form-bg, 10%);
 $modal-background: 		$body-bg;
 $code-tag-bg: 	#ddd;
 
-// Component sizing
-// -------------------------
-// Based on 14px font-size and 20px line-height
-
-$font-size-lg:         $font-size-base * 1.25; // ~18px
-$font-size-sm:         $font-size-base * 0.85; // ~12px
-$font-size-xs:          $font-size-base * 0.75; // ~11px
-
-$paddingLarge:          22px 30px; // 66px
-$paddingSmall:          2px 10px;  // 26px
-$paddingMini:           2px 6px;   // 24px
-
-$baseBorderRadius:      3px;
-$borderRadiusLarge:     4px;
-$borderRadiusSmall:     2px;
-
 // Lists
 $grafanaListBackground:  	     darken($gray-lighter,5%);
 $grafanaListAccent:            darken($gray-lighter,8%);
@@ -159,15 +152,17 @@ $iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);
 
 // Forms
 // -------------------------
-$inputBackground:               $white;
-$inputBorder:                   $gray-lighter;
-$inputBorderRadius:             $baseBorderRadius;
-$inputDisabledBackground:       $gray-lighter;
-$formActionsBackground:         #f5f5f5;
-$inputHeight:                   $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
-$inputText:                     #020202;
-$labelBackground:				#f8f8f8;
-
+$input-bg:                       $white;
+$input-bg-disabled:              $gray-lighter;
+
+$input-color:                    #020202;
+$input-border-color:             $gray-lighter;
+$input-btn-border-width:         1px;
+$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
+$input-border-focus:             #66afe9 !default;
+$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
+$input-color-placeholder:        #999 !default;
+$input-label-bg:				 #f8f8f8;
 
 // Sidemenu
 // -------------------------
@@ -259,13 +254,6 @@ $paginationBorder:                    transparent;
 $paginationActiveBackground:          $blue;
 
 
-// Hero unit
-// -------------------------
-$heroUnitBackground:              $gray-lighter;
-$heroUnitHeadingColor:            inherit;
-$heroUnitLeadColor:               inherit;
-
-
 // Form states and alerts
 // -------------------------
 $state-warning-text:             lighten($orange, 10%);
@@ -305,36 +293,4 @@ $popoverArrowOuterColor:  rgba(0,0,0,.25);
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 
-// GRID
-// --------------------------------------------------
-
-// Default 940px grid
-// -------------------------
-$gridColumns:             12;
-$gridColumnWidth:         60px;
-$gridGutterWidth:         20px;
-$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
-
-// 1200px min
-$gridColumnWidth1200:     70px;
-$gridGutterWidth1200:     30px;
-$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
-
-// 768px-979px
-$gridColumnWidth768:      42px;
-$gridGutterWidth768:      20px;
-$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
-
-
-// Fluid grid
-// -------------------------
-$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
-$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
-
-// 1200px min
-$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
-$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
 
-// 768px-979px
-$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
-$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);

public/sass/_variables.scss

@@ -106,11 +106,11 @@ $font-size-xs:   .75rem !default;
 $line-height-base: 1.5 !default;
 $font-weight-semi-bold:       600;
 
-$font-size-h1: 2.5rem !default;
-$font-size-h2: 2rem !default;
-$font-size-h3: 1.75rem !default;
-$font-size-h4: 1.5rem !default;
-$font-size-h5: 1.25rem !default;
+$font-size-h1: 2.0rem !default;
+$font-size-h2: 1.75rem !default;
+$font-size-h3: 1.50rem !default;
+$font-size-h4: 1.30rem !default;
+$font-size-h5: 1.20rem !default;
 $font-size-h6: 1rem !default;
 
 $display1-size: 6rem !default;
@@ -143,14 +143,19 @@ $nested-kbd-font-weight: bold !default;
 
 $list-inline-padding: 5px !default;
 
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:         (4 / 3) !default;
+$line-height-sm:         1.5 !default;
 
-$paddingLarge:          11px 19px; // 44px
-$paddingSmall:          2px 10px;  // 26px
-$paddingMini:           0px 6px;   // 22px
+$border-radius:          0.0rem !default;
+$border-radius-lg:       0.3rem !default;
+$border-radius-sm:       0.2rem !default;
 
-$baseBorderRadius:      3px;
-$borderRadiusLarge:     4px;
-$borderRadiusSmall:     2px;
+$caret-width:            .3em !default;
+$caret-width-lg:         $caret-width !default;
 
 // Links
 // -------------------------
@@ -162,4 +167,32 @@ $link-hover-decoration:   none !default;
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 $table-cell-padding:            .75rem !default;
-$table-sm-cell-padding:         .3rem !default;
+$table-sm-cell-padding:         .3rem !default;
+
+// Forms
+$input-padding-x:                .75rem !default;
+$input-padding-y:                .5rem !default;
+$input-line-height:              1.25 !default;
+
+$input-border-radius:            $border-radius !default;
+$input-border-radius-lg:         $border-radius-lg !default;
+$input-border-radius-sm:         $border-radius-sm !default;
+
+$input-padding-x-sm:             .5rem !default;
+$input-padding-y-sm:             .25rem !default;
+
+$input-padding-x-lg:             1.5rem !default;
+$input-padding-y-lg:             .75rem !default;
+
+$input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
+$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
+$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
+
+$form-group-margin-bottom:       $spacer-y !default;
+
+$cursor-disabled:                not-allowed !default;
+
+// Form validation icons
+$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
+$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
+$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;

public/sass/base/_forms.scss

@@ -78,11 +78,11 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   display: inline-block;
-  height: $line-height-base;
+  height: $input-height;
+  line-height: $input-line-height;
   padding: 4px 6px;
   font-size: $font-size-base;
-  line-height: $line-height-base;
-  color: $inputText;
+  color: $input-color;
   vertical-align: top;
 }
 
@@ -115,8 +115,8 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  background-color: $inputBackground;
-  border: 1px solid $inputBorder;
+  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");
 
@@ -149,15 +149,15 @@ input[type="checkbox"] {
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
-  line-height: $inputHeight;
+  height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  line-height: $input-height;
 }
 
 // Make select elements obey height by applying a border
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
-  border: 1px solid $inputBorder;
-  background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
+  border: 1px solid $input-border-color;
+  background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
 }
 
 // Make multiple select elements height not fixed
@@ -183,7 +183,6 @@ textarea {
   @include placeholder();
 }
 
-
 // INPUT SIZES
 // -----------
 
@@ -209,7 +208,7 @@ input[readonly],
 select[readonly],
 textarea[readonly] {
   cursor: not-allowed;
-  background-color: $inputDisabledBackground;
+  background-color: $input-bg-disabled;
 }
 
 // Explicitly reset the colors here
@@ -288,3 +287,41 @@ input[type="checkbox"]:checked+label {
     box-sizing: border-box;
   }
 }
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+.form-control-success,
+.form-control-warning,
+.form-control-danger {
+  padding-right: ($input-padding-x * 3);
+  background-repeat: no-repeat;
+  background-position: center right ($input-height / 4);
+  background-size: ($input-height / 2) ($input-height / 2);
+}
+
+// Form validation states
+.has-success {
+  @include form-control-validation($brand-success);
+
+  .form-control-success {
+    background-image: $form-icon-success;
+  }
+}
+
+.has-warning {
+  @include form-control-validation($brand-warning);
+
+  .form-control-warning {
+    background-image: $form-icon-warning;
+  }
+}
+
+.has-danger {
+  @include form-control-validation($brand-danger);
+
+  .form-control-danger {
+    background-image: $form-icon-danger;
+  }
+}

public/sass/base/_type.scss

@@ -194,14 +194,6 @@ dd {
 // MISC
 // ----
 
-// Horizontal rules
-hr {
-  margin: $line-height-base 0;
-  border: 0;
-  border-top: 1px solid $hrBorder;
-  border-bottom: 1px solid $white;
-}
-
 // Abbreviations and acronyms
 abbr[title],
 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257

public/sass/components/_color_picker.scss

@@ -13,7 +13,7 @@
 
 .sp-container {
   border-radius: 0;
-  background-color: $heroUnitBackground;
+  background-color: $dropdownBackground;
   border: none;
   padding: 0;
 }

public/sass/components/_dropdown.scss

@@ -239,6 +239,5 @@
 // ---------
 .typeahead {
   z-index: 1051;
-  margin-top: 2px; // give it some space to breathe
-  @include border-radius($baseBorderRadius);
+  margin-top: 2px; // give it some space to breathe  
 }

public/sass/components/_gf-form.scss

@@ -19,7 +19,10 @@ $gf-form-margin: 4px;
 }
 
 .gf-form-group {
-  margin-bottom: 20px;
+  h3, h2, h4 {
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer * 1;
+  }
 }
 
 .gf-form-inline {
@@ -40,7 +43,7 @@ $gf-form-margin: 4px;
 
 .gf-form-label {
   flex-shrink: 0;
-  background-color: $labelBackground;
+  background-color: $input-label-bg;
   display: block;
   padding: 8px 7px;
   font-size: $font-size-sm;
@@ -51,39 +54,6 @@ $gf-form-margin: 4px;
   flex-shrink: 0;
 }
 
-[type=text],
-[type=email],
-[type=number],
-[type=password], {
-  &.gf-form-input {
-    border: none;
-    margin: 0px;
-    border-radius: 0;
-    padding: 8px 6px;
-    height: 100%;
-    box-sizing: border-box;
-    font-size: 15px;
-    display: block;
-    width: 100%;
-    margin-right: $gf-form-margin;
-  }
-  &.gf-size-auto { width: auto; }
-}
-
-input[type=checkbox].gf-form-checkbox {
-  margin: 0;
-}
-
-select.gf-form-input {
-  padding: 2px 3px;
-  font-size: 15px;
-  box-sizing: content-box;
-  display: block;
-  width: 100%;
-  margin-right: $gf-form-margin;
-  &.gf-size-auto { width: auto; }
-}
-
 @each $size, $value in $form-sizes {
   .gf-size-#{$size} { width: $value; }
 
@@ -95,3 +65,55 @@ select.gf-form-input {
 .gf-size-max { width: 100%; }
 .gf-size-auto { width: auto; }
 
+
+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;
+    }
+  }
+
+  &.gf-size-auto { width: auto; }
+}
+

public/sass/components/_pagination.scss

@@ -1,113 +0,0 @@
-.pagination {
-}
-
-.pagination ul {
-  display: inline-block;
-  margin-left: 0;
-  margin-bottom: 0;
-  @include border-radius($baseBorderRadius);
-  @include box-shadow(0 1px 2px rgba(0,0,0,.05));
-}
-.pagination ul > li {
-  display: inline; // Remove list-style and block-level defaults
-}
-.pagination ul > li > a,
-.pagination ul > li > span {
-  float: left; // Collapse white-space
-  padding: 4px 12px;
-  line-height: $line-height-base;
-  text-decoration: none;
-  background-color: $paginationBackground;
-  border: 1px solid $paginationBorder;
-  border-left-width: 0;
-}
-.pagination ul > li > a:hover,
-.pagination ul > li > a:focus,
-.pagination ul > .active > a,
-.pagination ul > .active > span {
-  background-color: $paginationActiveBackground;
-}
-.pagination ul > .active > a,
-.pagination ul > .active > span {
-  color: $gray-light;
-  cursor: default;
-}
-.pagination ul > .disabled > span,
-.pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover,
-.pagination ul > .disabled > a:focus {
-  color: $gray-light;
-  background-color: transparent;
-  cursor: default;
-}
-.pagination ul > li:first-child > a,
-.pagination ul > li:first-child > span {
-  border-left-width: 1px;
-  @include border-left-radius($baseBorderRadius);
-}
-.pagination ul > li:last-child > a,
-.pagination ul > li:last-child > span {
-  @include border-right-radius($baseBorderRadius);
-}
-
-
-// Alignment
-// --------------------------------------------------
-
-.pagination-centered {
-  text-align: center;
-}
-.pagination-right {
-  text-align: right;
-}
-
-
-// Sizing
-// --------------------------------------------------
-
-// Large
-.pagination-large {
-  ul > li > a,
-  ul > li > span {
-    padding: $paddingLarge;
-    font-size: $font-size-lg;
-  }
-  ul > li:first-child > a,
-  ul > li:first-child > span {
-    @include border-left-radius($borderRadiusLarge);
-  }
-  ul > li:last-child > a,
-  ul > li:last-child > span {
-    @include border-right-radius($borderRadiusLarge);
-  }
-}
-
-// Small and mini
-.pagination-mini,
-.pagination-small {
-  ul > li:first-child > a,
-  ul > li:first-child > span {
-    @include border-left-radius($borderRadiusSmall);
-  }
-  ul > li:last-child > a,
-  ul > li:last-child > span {
-    @include border-right-radius($borderRadiusSmall);
-  }
-}
-
-// Small
-.pagination-small {
-  ul > li > a,
-  ul > li > span {
-    padding: $paddingSmall;
-    font-size: $font-size-sm;
-  }
-}
-// Mini
-.pagination-mini {
-  ul > li > a,
-  ul > li > span {
-    padding: $paddingMini;
-    font-size: $font-size-xs;
-  }
-}

public/sass/components/_tagsinput.scss

@@ -4,7 +4,7 @@
   vertical-align: middle;
   max-width: 100%;
   line-height: 22px;
-  background-color: $inputBackground;
+  background-color: $input-bg;
 
   input {
     border: none;

public/sass/components/_tooltip.scss

@@ -26,8 +26,7 @@
   color: $tooltipColor;
   text-align: center;
   text-decoration: none;
-  background-color: $tooltipBackground;
-  @include border-radius($baseBorderRadius);
+  background-color: $tooltipBackground;  
 }
 
 // Arrows

public/sass/layout/_page.scss

@@ -31,7 +31,6 @@
   height: 100%;
 }
 
-
 .page-header {
   padding: 10px 0 39px 0px;
 
@@ -47,6 +46,8 @@
   h1 {
     font-style: italic;
   }
+
+  margin-bottom: 2rem;
 }
 
 .admin-page {

public/sass/mixins/_forms.scss

@@ -0,0 +1,73 @@
+@mixin form-control-validation($color) {
+  // Color the label and help text
+  .text-help,
+  .form-control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  &.radio label,
+  &.checkbox label,
+  &.radio-inline label,
+  &.checkbox-inline label,
+  .custom-control {
+    color: $color;
+  }
+  // Set the border and box shadow on specific inputs to match
+  .form-control {
+    border-color: $color;
+    // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+
+    &:focus {
+      // border-color: darken($border-color, 10%);
+      // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
+      // @include box-shadow($shadow);
+    }
+  }
+
+  // Set validation states also for addons
+  .input-group-addon {
+    color: $color;
+    border-color: $color;
+    background-color: lighten($color, 40%);
+  }
+  // Optional feedback icon
+  .form-control-feedback {
+    color: $color;
+  }
+}
+
+@mixin form-control-focus() {
+  &:focus {
+    border-color: $input-border-focus;
+    outline: none;
+    $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
+    @include box-shadow($shadow);
+  }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  #{$parent} {
+    height: $input-height;
+    padding: $padding-y $padding-x;
+    font-size: $font-size;
+    line-height: $line-height;
+    @include border-radius($border-radius);
+  }
+
+  select#{$parent} {
+    height: $input-height;
+    line-height: $input-height;
+  }
+
+  textarea#{$parent},
+  select[multiple]#{$parent} {
+    height: auto;
+  }
+}

public/sass/mixins/_mixins.scss

@@ -118,7 +118,7 @@
 .input-block-level {
   display: block;
   width: 100%;
-  min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  min-height: $input-line-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   @include box-sizing(border-box); // Makes inputs behave like true block-level elements
 }