From 7c917156eee01048660531b6e2f16b26ee7039ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 16 Feb 2016 10:42:06 +0100
Subject: [PATCH] ux(sass): variable refactoring

---
 .../dashboard/timepicker/timepicker.html      |   2 +-
 public/sass/_grafana.scss                     |   5 +-
 public/sass/_variables.dark.scss              |  84 +----
 public/sass/_variables.light.scss             |  50 ++-
 public/sass/_variables.scss                   | 119 ++++++
 public/sass/base/_base.scss                   |  36 --
 public/sass/base/_code.scss                   |  10 +-
 public/sass/base/_forms.scss                  |  20 +-
 public/sass/base/_reboot.scss                 | 349 ++++++++++++++++++
 public/sass/base/_type.scss                   | 135 ++++---
 .../sass/bootstrap/responsive-767px-max.scss  |   2 +-
 public/sass/components/_alerts.scss           |   8 +-
 public/sass/components/_buttons.scss          |   8 +-
 public/sass/components/_dashboard.scss        |   2 +-
 public/sass/components/_dropdown.scss         |   4 +-
 public/sass/components/_gf-form.scss          |   2 +-
 public/sass/components/_modals.scss           |   2 +-
 public/sass/components/_navbar.scss           |   7 +-
 public/sass/components/_navs.scss             |  10 +-
 public/sass/components/_pagination.scss       |   6 +-
 public/sass/components/_panel_graph.scss      |   4 +-
 public/sass/components/_sidemenu.scss         |   1 -
 public/sass/components/_submenu.scss          |   2 +-
 public/sass/components/_tags.scss             |   2 +-
 public/sass/mixins/_hover.scss                |  59 +++
 public/sass/mixins/_mixins.scss               |   8 +-
 public/sass/utils/_utils.scss                 |   2 +-
 27 files changed, 706 insertions(+), 233 deletions(-)
 delete mode 100644 public/sass/base/_base.scss
 create mode 100644 public/sass/base/_reboot.scss
 create mode 100644 public/sass/mixins/_hover.scss

diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html
index 10a1d6820a3..008f4a149ce 100644
--- a/public/app/features/dashboard/timepicker/timepicker.html
+++ b/public/app/features/dashboard/timepicker/timepicker.html
@@ -1,6 +1,6 @@
 <ul class="nav gf-timepicker-nav">
 
-	<li class="dashnav-zoom-out">
+	<li class="dashnav-zoom-out" style="padding-top: 4px">
 		<a class='small' ng-click='ctrl.zoom(2)'>
 			Zoom Out
 		</a>
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index ddc27cf352e..0922e8f0b0d 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -4,10 +4,12 @@
 @import "mixins/breakpoints";
 @import "mixins/grid";
 @import "mixins/grid-framework";
+@import "mixins/hover";
+
 
 // BASE
 @import "base/normalize";
-@import "base/base";
+@import "base/reboot";
 @import "base/type";
 @import "base/forms";
 @import "base/fonts";
@@ -44,7 +46,6 @@
 @import "components/filter-table";
 @import "components/scrollbar";
 @import "components/old_stuff";
-@import "components/navbar";
 @import "components/popovers";
 @import "components/alerts";
 @import "components/typeahead";
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index dd1669f32fc..5fb7fcb982e 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -35,77 +35,26 @@ $critical:              #ed2e18;
 // -------------------------
 $body-bg:  				rgb(20,20,20);
 $page-bg:  				$gray-darker;
+$body-color:      		$gray-lighter;
 $text-color:      		$gray-lighter;
 
 // Links
 // -------------------------
-$link-color:             darken($white,11%);
+$link-color:              darken($white,11%);
 $link-color-disabled:     darken($link-color,30%);
-$link-color-hover:        $white;
+$link-hover-color:        $white;
 
 // Typography
 // -------------------------
+$headings-color:         darken($white,11%); 
+$abbr-border-color: 	 $gray-light !default;
 
-$font-family-sans-serif:    "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-serif:       	Georgia, "Times New Roman", Times, serif;
-$font-family-monospace:     Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-family-base:       	$font-family-sans-serif !default;
+$text-muted: 			 darken($link-color,30%);
 
-$font-size-root: 14px !default;
-
-$font-size-base: 1rem !default;
-$font-size-lg:   1.25rem !default;
-$font-size-sm:   .875rem !default;
-$font-size-xs:   .75rem !default;
-
-$line-height-base: 1.5 !default;
-
-$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-h6: 1rem !default;
-
-$display1-size: 6rem !default;
-$display2-size: 5.5rem !default;
-$display3-size: 4.5rem !default;
-$display4-size: 3.5rem !default;
-
-$display1-weight: 300 !default;
-$display2-weight: 300 !default;
-$display3-weight: 300 !default;
-$display4-weight: 300 !default;
-
-$baseFontSize:          14px;
-$baseFontWeight:		    400;
-$baseFontFamily:        $font-family-sans-serif;
-$baseLineHeight:        20px;
-$altFontFamily:         $font-family-serif;
-$fontWeightSemi:		    600;
-
-$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
-$headingsFontWeight:    400;    // instead of browser default, bold
-$headingsFontStyle:    	normal;
-$headingsColor:         darken($white,11%); // empty to use BS default, $text-color
-$inputText:             $gray-light;
-
-// Component sizing
-// -------------------------
-// Based on 14px font-size and 20px line-height
-
-$font-size-lg:         $baseFontSize * 1.25; // ~18px
-$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
-$fontSizeMini:          $baseFontSize * 0.75; // ~11px
-
-$paddingLarge:          11px 19px; // 44px
-$paddingSmall:          2px 10px;  // 26px
-$paddingMini:           0px 6px;   // 22px
-
-$baseBorderRadius:      3px;
-$borderRadiusLarge:     4px;
-$borderRadiusSmall:     2px;
+$blockquote-small-color:  $gray-light !default;
+$blockquote-border-color: $gray-lighter !default;
 
+$hr-border-color: rgba(0,0,0,.1) !default;
 
 // Panel
 // -------------------------
@@ -140,10 +89,10 @@ $scrollbarBorder: black;
 
 // Tables
 // -------------------------
-$tableBackground:                   transparent; // overall background-color
-$tableBackgroundAccent:             rgba(100, 100, 100, 0.3); // for striping
-$tableBackgroundHover:              $gray-dark; // for hover
-$tableBorder:                       $gray-dark; // table and cell border
+$table-bg:                    transparent; // overall background-color
+$table-bg-accent:             rgba(100, 100, 100, 0.3); // for striping
+$table-bg-hover:              $gray-dark; // for hover
+$table-border:                $gray-dark; // table and cell border
 
 // Buttons
 // -------------------------
@@ -190,9 +139,10 @@ $heroUnitLeadColor:               inherit;
 $inputBackground:               lighten($gray-dark,5%);
 $inputBorder:                   lighten($gray-dark,5%);
 $inputBorderRadius:             $baseBorderRadius;
+$inputText:              		$gray-light;
 $inputDisabledBackground:       #555;
 $formActionsBackground:         transparent;
-$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+$inputHeight:                   $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 $labelBackground:				$gray-dark;
 
 
@@ -281,8 +231,8 @@ $paginationActiveBackground:          $blue;
 
 // Form states and alerts
 // -------------------------
-$warningText:             darken(#c09853, 10%);
-$warningBackground:       $orange;
+$state-warning-text:             darken(#c09853, 10%);
+$state-warning-bg:       $orange;
 
 $errorText:               #b94a48;
 $errorBackground:         $btnDangerBackground;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 580297b3c22..02631edda52 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -39,33 +39,27 @@ $critical:              #EC2128;
 // Scaffolding
 // -------------------------
 
-$body-bg:  rgb(20,20,20);
-$page-bg:  $gray-darker;
-$text-color:       $gray-lighter;
+$body-bg:  		rgb(20,20,20);
+$page-bg:  		$gray-darker;
+$body-color:    $gray-lighter;
+$text-color:    $gray-lighter;
 
 // Links
 // -------------------------
 $link-color:             $gray;
 $link-color-disabled:     lighten($link-color,30%);
-$link-color-hover:        darken($link-color, 20%);
+$link-hover-color:        darken($link-color, 20%);
 
 // Typography
 // -------------------------
-$font-family-sans-serif:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-serif:       Georgia, "Times New Roman", Times, serif;
-$font-family-monospace:        Menlo, Monaco, Consolas, "Courier New", monospace;
+$headings-color:         $text-color;
+$abbr-border-color: 	 $gray-light !default; 
+$text-muted: 			 darken($link-color,30%);
 
-$baseFontSize:          14px;
-$baseFontWeight:		    400;
-$fontWeightSemi:		    600;
-$baseFontFamily:        $font-family-sans-serif;
-$baseLineHeight:        20px;
-$altFontFamily:         $font-family-serif;
+$blockquote-small-color:  $gray-light !default;
+$blockquote-border-color: $gray-lighter !default;
 
-$headingsFontFamily:    inherit; // inherit. empty to use BS default, $baseFontFamily
-$headingsFontWeight:    normal;    // instead of browser default, bold
-$headingsFontStyle:    	normal;
-$headingsColor:         $text-color; // empty to use BS default, $text-color
+$hr-border-color: rgba(0,0,0,.1) !default;
 
 // Panel
 // -------------------------
@@ -93,9 +87,9 @@ $code-tag-bg: 	#ddd;
 // -------------------------
 // Based on 14px font-size and 20px line-height
 
-$font-size-lg:         $baseFontSize * 1.25; // ~18px
-$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
-$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+$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
@@ -117,10 +111,12 @@ $grafanaListMainLinkColor:     $text-color;
 
 // Tables
 // -------------------------
-$tableBackground:                   transparent; // overall background-color
-$tableBackgroundAccent:             #f9f9f9; // for striping
-$tableBackgroundHover:              #E8F8FD; // for hover
-$tableBorder:                       #ddd; // table and cell border
+$table-bg:                   transparent; // overall background-color
+$table-bg-accent:            #f9f9f9; // for striping
+$table-bg-hover:             #E8F8FD; // for hover
+$table-bg-active:            $table-bg-hover !default;
+$table-border:               #ddd; // table and cell border
+
 
 // Scrollbars
 $scrollbarBackground: $gray-lighter;
@@ -168,7 +164,7 @@ $inputBorder:                   $gray-lighter;
 $inputBorderRadius:             $baseBorderRadius;
 $inputDisabledBackground:       $gray-lighter;
 $formActionsBackground:         #f5f5f5;
-$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+$inputHeight:                   $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 $inputText:                     #020202;
 $labelBackground:				#f8f8f8;
 
@@ -272,8 +268,8 @@ $heroUnitLeadColor:               inherit;
 
 // Form states and alerts
 // -------------------------
-$warningText:             lighten($orange, 10%);
-$warningBackground:       $orange;
+$state-warning-text:             lighten($orange, 10%);
+$state-warning-bg:       $orange;
 $warningBorder:           transparent;
 
 $errorText:               lighten($red, 10%);
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 7e80b5fda21..9e48afbefa3 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -1,5 +1,48 @@
 
 
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-flex:               false !default;
+$enable-rounded:            true !default;
+$enable-shadows:            false !default;
+$enable-gradients:          false !default;
+$enable-transitions:        false !default;
+$enable-hover-media-query:  false !default;
+$enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+
+$spacer:   1rem !default;
+$spacer-x: $spacer !default;
+$spacer-y: $spacer !default;
+$spacers: (
+  0: (
+    x: 0,
+    y: 0
+  ),
+  1: (
+    x: $spacer-x,
+    y: $spacer-y
+  ),
+  2: (
+    x: ($spacer-x * 1.5),
+    y: ($spacer-y * 1.5)
+  ),
+  3: (
+    x: ($spacer-x * 3),
+    y: ($spacer-y * 3)
+  )
+) !default;
+$border-width: 1px !default;
+
+
 // Grid breakpoints
 //
 // Define the minimum and maximum dimensions at which your layout will change,
@@ -44,3 +87,79 @@ $form-sizes: (
   xxxl: 400px
 ) !default;
 
+
+// Typography
+// -------------------------
+
+$font-family-sans-serif:    "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif:         Georgia, "Times New Roman", Times, serif;
+$font-family-monospace:     Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-root: 14px !default;
+
+$font-size-base: 1rem !default;
+$font-size-lg:   1.25rem !default;
+$font-size-sm:   .875rem !default;
+$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-h6: 1rem !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight: 400 !default;
+$display2-weight: 400 !default;
+$display3-weight: 400 !default;
+$display4-weight: 400 !default;
+
+$lead-font-size:   1.25rem !default;
+$lead-font-weight: 300 !default;
+
+$headings-margin-bottom: ($spacer / 2) !default;
+$headings-font-family:   inherit !default;
+$headings-font-weight:   400 !default;
+$headings-line-height:   1.1 !default;
+
+$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;
+
+
+$paddingLarge:          11px 19px; // 44px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           0px 6px;   // 22px
+
+$baseBorderRadius:      3px;
+$borderRadiusLarge:     4px;
+$borderRadiusSmall:     2px;
+
+// Links
+// -------------------------
+$link-decoration:         none !default;
+$link-hover-decoration:   none !default;
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:            .75rem !default;
+$table-sm-cell-padding:         .3rem !default;
\ No newline at end of file
diff --git a/public/sass/base/_base.scss b/public/sass/base/_base.scss
deleted file mode 100644
index ef8f243d07d..00000000000
--- a/public/sass/base/_base.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-html {
-	height: 100%;
-}
-
-body {
-	height: 100%;
-  margin: 0;
-  font-family: $baseFontFamily;
-  font-size: $baseFontSize;
-  line-height: $baseLineHeight;
-  color: $text-color;
-  background-color: $body-bg;
-}
-
-
-// Links
-// -------------------------
-
-a {
-  color: $link-color;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: $link-color-hover;
-    text-decoration: none;
-  }
-
-  &:focus {
-    @include tab-focus();
-  }
-}
-
-img {
-  vertical-align: middle;
-}
diff --git a/public/sass/base/_code.scss b/public/sass/base/_code.scss
index df3887d338e..db7a8cfab18 100644
--- a/public/sass/base/_code.scss
+++ b/public/sass/base/_code.scss
@@ -7,7 +7,7 @@
 code,
 pre {
   @include font-family-monospace();
-  font-size: $baseFontSize - 2;
+  font-size: $font-size-base - 2;
   background-color: $code-tag-bg;
   color: $text-color;
   border: 1px solid darken($code-tag-bg, 15%);
@@ -25,9 +25,9 @@ code {
 // Blocks of code
 pre {
   display: block;
-  margin: 0 0 $baseLineHeight / 2;
-  font-size: $baseFontSize - 1; // 14px to 13px
-  line-height: $baseLineHeight;
+  margin: 0 0 $line-height-base / 2;
+  font-size: $font-size-base - 1; // 14px to 13px
+  line-height: $line-height-base;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
@@ -36,7 +36,7 @@ pre {
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
-    margin-bottom: $baseLineHeight;
+    margin-bottom: $line-height-base;
   }
 
   // Account for some code outputs that place code tags in pre tags
diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss
index 0dd71b6e000..441f0341f27 100644
--- a/public/sass/base/_forms.scss
+++ b/public/sass/base/_forms.scss
@@ -8,7 +8,7 @@
 
 // Make all forms have space below them
 form {
-  margin: 0 0 $baseLineHeight;
+  margin: 0 0 $line-height-base;
 }
 
 fieldset {
@@ -22,16 +22,16 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: $baseLineHeight;
-  font-size: $baseFontSize * 1.5;
-  line-height: $baseLineHeight * 2;
+  margin-bottom: $line-height-base;
+  font-size: $font-size-base * 1.5;
+  line-height: $line-height-base * 2;
   color: $gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 
   // Small
   small {
-    font-size: $baseLineHeight * .75;
+    font-size: $line-height-base * .75;
     color: $gray-light;
   }
 }
@@ -42,13 +42,13 @@ input,
 button,
 select,
 textarea {
-  @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
+  @include font-shorthand($font-size-base,normal,$line-height-base); // Set size, weight, line-height here
 }
 input,
 button,
 select,
 textarea {
-  font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
+  font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
 }
 
 // Identify controls by their labels
@@ -78,10 +78,10 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   display: inline-block;
-  height: $baseLineHeight;
+  height: $line-height-base;
   padding: 4px 6px;
-  font-size: $baseFontSize;
-  line-height: $baseLineHeight;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
   color: $inputText;
   vertical-align: top;
 }
diff --git a/public/sass/base/_reboot.scss b/public/sass/base/_reboot.scss
new file mode 100644
index 00000000000..646a92d549e
--- /dev/null
+++ b/public/sass/base/_reboot.scss
@@ -0,0 +1,349 @@
+// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
+
+// Reboot
+//
+// Global resets to common HTML elements and more for easier usage by Bootstrap.
+// Adds additional rules on top of Normalize.css, including several overrides.
+
+
+// Reset the box-sizing
+//
+// Change from `box-sizing: content-box` to `border-box` so that when you add
+// `padding` or `border`s to an element, the overall declared `width` does not
+// change. For example, `width: 100px;` will always be `100px` despite the
+// `border: 10px solid red;` and `padding: 20px;`.
+//
+// Heads up! This reset may cause conflicts with some third-party widgets. For
+// recommendations on resolving such conflicts, see
+// http://getbootstrap.com/getting-started/#third-box-sizing.
+//
+// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+
+// Make viewport responsive
+//
+// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
+// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
+// Eventually @viewport will replace <meta name="viewport">.
+//
+// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
+// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
+// and the fix for that involves a snippet of JavaScript to sniff the user agent
+// and apply some conditional CSS.
+//
+// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
+//
+// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
+// `.class-name { @import "bootstrap"; }`).
+@at-root {
+  @-ms-viewport { width: device-width; }
+}
+
+
+//
+// Reset HTML, body, and more
+//
+
+html {
+  // Sets a specific default `font-size` for user with `rem` type scales.
+  font-size: $font-size-root;
+  // As a side-effect of setting the @viewport above,
+  // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
+  // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
+  // thus making it hard to click on stuff near the right edge of the page.
+  // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
+  // See https://github.com/twbs/bootstrap/issues/18543
+  -ms-overflow-style: scrollbar;
+  // Changes the default tap highlight to be completely transparent in iOS.
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  height: 100%;
+}
+
+body {
+  // Make the `body` use the `font-size-root`
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  // Go easy on the eyes and use something other than `#000` for text
+  color: $body-color;
+  // By default, `<body>` has no `background-color` so we set one as a best practice.
+  background-color: $body-bg;
+  height: 100%;
+}
+
+// Suppress the focus outline on elements that cannot be accessed via keyboard.
+// This prevents an unwanted focus outline from appearing around elements that
+// might still respond to pointer events.
+//
+// Credit: https://github.com/suitcss/base
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+
+//
+// Typography
+//
+
+// Remove top margins from headings
+//
+// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5rem;
+}
+
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `<p>`s get reset. However, we also reset the
+// bottom margin to use `rem` units instead of `em`.
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+// Abbreviations and acronyms
+abbr[title],
+// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted $abbr-border-color;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: $dt-font-weight;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0; // Undo browser default
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+
+//
+// Links
+//
+
+a {
+  color: $link-color;
+  text-decoration: $link-decoration;
+
+  @include hover-focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus {
+    @include tab-focus();
+  }
+}
+
+
+//
+// Code
+//
+
+pre {
+  // Remove browser default top margin
+  margin-top: 0;
+  // Reset browser default of `1em` to use `rem`s
+  margin-bottom: 1rem;
+}
+
+
+//
+// Figures
+//
+
+figure {
+  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
+  // We reset that to create a better flow in-page.
+  margin: 0 0 1rem;
+}
+
+
+//
+// Images
+//
+
+img {
+  // By default, `<img>`s are `inline-block`. This assumes that, and vertically
+  // centers them. This won't apply should you reset them to `block` level.
+  vertical-align: middle;
+  // Note: `<img>`s are deliberately not made responsive by default.
+  // For the rationale behind this, see the comments on the `.img-fluid` class.
+}
+
+
+// iOS "clickable elements" fix for role="button"
+//
+// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+// for traditionally non-focusable elements with role="button"
+// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+[role="button"] {
+  cursor: pointer;
+}
+
+
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support removing the click delay via `touch-action: manipulation`.
+// See:
+// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+
+//
+// Tables
+//
+
+table {
+  // Reset for nesting within parents with `background-color`.
+  background-color: $table-bg;
+}
+
+caption {
+  padding-top: $table-cell-padding;
+  padding-bottom: $table-cell-padding;
+  color: $text-muted;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  // Centered by default, but left-align-ed to match the `td`s below.
+  text-align: left;
+}
+
+
+//
+// Forms
+//
+
+label {
+  // Allow labels to use `margin` for spacing.
+  display: inline-block;
+  margin-bottom: .5rem;
+}
+
+// Work around a Firefox/IE bug where the transparent `button` background
+// results in a loss of the default `button` focus styles.
+//
+// Credit: https://github.com/suitcss/base/
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+textarea {
+  // Remove all `margin`s so our classes don't have to do it themselves.
+  margin: 0;
+  // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
+  // properly inherited. However, `line-height` isn't addressed there. Using this
+  // ensures we don't need to unnecessarily redeclare the global font stack.
+  line-height: inherit;
+  // iOS adds rounded borders by default
+  border-radius: 0;
+}
+
+textarea {
+  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+  resize: vertical;
+}
+
+fieldset {
+  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+  // so we reset that to ensure it behaves more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359.
+  min-width: 0;
+  // Reset the default outline behavior of fieldsets so they don't affect page layout.
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  // Reset the entire legend element to match the `fieldset`
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+//  border: 0;
+}
+
+input[type="search"] {
+  // This overrides the extra rounded corners on search inputs in iOS so that our
+  // `.form-control` class can properly style them. Note that this cannot simply
+  // be added to `.form-control` as it's not specific enough. For details, see
+  // https://github.com/twbs/bootstrap/issues/11586.
+  -webkit-appearance: none;
+}
+
+// todo: needed?
+output {
+  display: inline-block;
+//  font-size: $font-size-base;
+//  line-height: $line-height;
+//  color: $input-color;
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+[hidden] {
+  display: none !important;
+}
diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss
index 6910d3a795d..60a02755fe7 100644
--- a/public/sass/base/_type.scss
+++ b/public/sass/base/_type.scss
@@ -7,13 +7,13 @@
 // -------------------------
 
 p {
-  margin: 0 0 $baseLineHeight / 2;
+  margin: 0 0 $line-height-base / 2;
 }
 .lead {
-  margin-bottom: $baseLineHeight;
-  font-size: $baseFontSize * 1.5;
+  margin-bottom: $line-height-base;
+  font-size: $font-size-base * 1.5;
   font-weight: 200;
-  line-height: $baseLineHeight * 1.5;
+  line-height: $line-height-base * 1.5;
 }
 
 // Emphasis & misc
@@ -21,11 +21,9 @@ p {
 // -------------------------
 
 // Ex: 14px base font * 85% = about 12px
-.small, small   { font-size: 85%; }
-.large { font-size: 120%; }
-
+small   { font-size: 85%; }
 strong  { font-weight: bold; }
-em      { font-style: italic; color: $headingsColor; }
+em      { font-style: italic; color: $headings-color; }
 cite    { font-style: normal; }
 
 // Utility classes
@@ -33,9 +31,9 @@ cite    { font-style: normal; }
 a.muted:hover,
 a.muted:focus        { color: darken($gray-light, 10%); }
 
-.text-warning        { color: $warningText; }
+.text-warning        { color: $state-warning-text; }
 a.text-warning:hover,
-a.text-warning:focus { color: darken($warningText, 10%); }
+a.text-warning:focus { color: darken($state-warning-text, 10%); }
 
 .text-error          { color: $errorText; }
 a.text-error:hover,
@@ -54,40 +52,77 @@ a { cursor: pointer; }
 .text-right          { text-align: right; }
 .text-center         { text-align: center; }
 
-
+//
 // Headings
-// -------------------------
+//
 
-h1, h2, h3, h4, h5, h6 {
-  margin: ($baseLineHeight / 2) 0;
-  font-family: $headingsFontFamily;
-  font-weight: $headingsFontWeight;
-  line-height: $baseLineHeight;
-  color: $headingsColor;
-  text-rendering: optimizelegibility; // Fix the character spacing for headings
-  font-style: $headingsFontStyle;
-  small {
-    font-weight: normal;
-    line-height: 1;
-    color: $gray-light;
-  }
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: $headings-margin-bottom;
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
 }
 
-h1,
-h2,
-h3 { line-height: $baseLineHeight * 2; }
+h1, .h1 { font-size: $font-size-h1; }
+h2, .h2 { font-size: $font-size-h2; }
+h3, .h3 { font-size: $font-size-h3; }
+h4, .h4 { font-size: $font-size-h4; }
+h5, .h5 { font-size: $font-size-h5; }
+h6, .h6 { font-size: $font-size-h6; }
 
-h1 { font-size: $baseFontSize * 2.00; } // ~38px
-h2 { font-size: $baseFontSize * 1.75; } // ~32px
-h3 { font-size: $baseFontSize * 1.50; } // ~24px
-h4 { font-size: $baseFontSize * 1.25; } // ~18px
-h5 { font-size: $baseFontSize; }
-h6 { font-size: $baseFontSize * 0.85; } // ~12px
+.lead {
+  font-size: $lead-font-size;
+  font-weight: $lead-font-weight;
+}
 
-h1 small { font-size: $baseFontSize * 1.75; } // ~24px
-h2 small { font-size: $baseFontSize * 1.25; } // ~18px
-h3 small { font-size: $baseFontSize; }
-h4 small { font-size: $baseFontSize; }
+// Type display classes
+.display-1 {
+  font-size: $display1-size;
+  font-weight: $display1-weight;
+}
+.display-2 {
+  font-size: $display2-size;
+  font-weight: $display2-weight;
+}
+.display-3 {
+  font-size: $display3-size;
+  font-weight: $display3-weight;
+}
+.display-4 {
+  font-size: $display4-size;
+  font-weight: $display4-weight;
+}
+
+
+//
+// Horizontal rules
+//
+
+hr {
+  margin-top: $spacer-y;
+  margin-bottom: $spacer-y;
+  border: 0;
+  border-top: $hr-border-width solid $hr-border-color;
+}
+
+
+//
+// Emphasis
+//
+
+small,
+.small {
+  font-size: 80%;
+  font-weight: normal;
+}
+
+mark,
+.mark {
+  padding: .2em;
+  background-color: $state-warning-bg;
+}
 
 
 // Lists
@@ -96,7 +131,7 @@ h4 small { font-size: $baseFontSize; }
 // Unordered and Ordered lists
 ul, ol {
   padding: 0;
-  margin: 0 0 $baseLineHeight / 2 25px;
+  margin: 0 0 $line-height-base / 2 25px;
 }
 ul ul,
 ul ol,
@@ -105,7 +140,7 @@ ol ul {
   margin-bottom: 0;
 }
 li {
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
 }
 
 // Remove default list styles
@@ -129,17 +164,17 @@ ol.inline {
 
 // Description Lists
 dl {
-  margin-bottom: $baseLineHeight;
+  margin-bottom: $line-height-base;
 }
 dt,
 dd {
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
 }
 dt {
   font-weight: bold;
 }
 dd {
-  margin-left: $baseLineHeight / 2;
+  margin-left: $line-height-base / 2;
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
@@ -161,7 +196,7 @@ dd {
 
 // Horizontal rules
 hr {
-  margin: $baseLineHeight 0;
+  margin: $line-height-base 0;
   border: 0;
   border-top: 1px solid $hrBorder;
   border-bottom: 1px solid $white;
@@ -182,17 +217,17 @@ abbr.initialism {
 // Blockquotes
 blockquote {
   padding: 0 0 0 15px;
-  margin: 0 0 $baseLineHeight;
+  margin: 0 0 $line-height-base;
   border-left: 5px solid $gray-lighter;
   p {
     margin-bottom: 0;
-    font-size: $baseFontSize * 1.25;
+    font-size: $font-size-base * 1.25;
     font-weight: 300;
     line-height: 1.25;
   }
   small {
     display: block;
-    line-height: $baseLineHeight;
+    line-height: $line-height-base;
     color: $gray-light;
     &:before {
       content: '\2014 \00A0';
@@ -232,9 +267,9 @@ blockquote:after {
 // Addresses
 address {
   display: block;
-  margin-bottom: $baseLineHeight;
+  margin-bottom: $line-height-base;
   font-style: normal;
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
 }
 
 a.external-link {
@@ -249,7 +284,7 @@ a.external-link {
 }
 
 .link:hover {
-  color: $link-color-hover;
+  color: $link-hover-color;
 }
 
 .pointer {
diff --git a/public/sass/bootstrap/responsive-767px-max.scss b/public/sass/bootstrap/responsive-767px-max.scss
index 5c01855cbc2..37d9c11e700 100644
--- a/public/sass/bootstrap/responsive-767px-max.scss
+++ b/public/sass/bootstrap/responsive-767px-max.scss
@@ -96,7 +96,7 @@
   // Block level the page header small tag for readability
   .page-header h1 small {
     display: block;
-    line-height: $baseLineHeight;
+    line-height: $line-height-base;
   }
 
   // Update checkboxes for iOS
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss
index 914543d9852..9dca45f7c49 100644
--- a/public/sass/components/_alerts.scss
+++ b/public/sass/components/_alerts.scss
@@ -8,9 +8,9 @@
 
 .alert {
   padding: 8px 35px 13px 14px;
-  margin-bottom: $baseLineHeight;
+  margin-bottom: $line-height-base;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: $warningBackground;
+  background-color: $state-warning-bg;
   position: relative;
   color: $white;
   text-shadow: 0 1px 0 rgba(0,0,0,.5);
@@ -32,7 +32,7 @@
   background-color: $infoBackground;
 }
 .alert-warning {
-  background-color: $warningBackground;
+  background-color: $state-warning-bg;
 }
 
 .page-alert-list {
@@ -63,6 +63,6 @@
 }
 
 .alert-title {
-  font-weight: $fontWeightSemi;
+  font-weight: $font-weight-semi-bold;
   padding-bottom: 2px;
 }
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 4435e641eba..47d74b8dc89 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -10,8 +10,8 @@
   display: inline-block;
 	padding: 8px 12px;
 	margin-right: 10px;
-  font-size: $baseFontSize;
-  line-height: $baseLineHeight;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -57,14 +57,14 @@
 
 .btn-small {
 	padding: 2px 10px;
-  font-size: $fontSizeSmall;
+  font-size: $font-size-sm;
 }
 
 .btn-mini {
 	padding: 2px 6px;
 	margin-right: 0;
 	margin-right: 0;
-  font-size: $fontSizeMini;
+  font-size: $font-size-xs;
 }
 
 // Set the backgrounds
diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss
index e50ed83a464..c7232dcb26e 100644
--- a/public/sass/components/_dashboard.scss
+++ b/public/sass/components/_dashboard.scss
@@ -143,7 +143,7 @@ div.flot-text {
 
 .panel-title {
   border: 0px;
-  font-weight: $fontWeightSemi;
+  font-weight: $font-weight-semi-bold;
   position: relative;
   cursor: pointer;
   width: 100%;
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 3f3d7290d1e..7f1d0bedff3 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -61,7 +61,7 @@
 
   .divider {
     height: 1px;
-    margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
+    margin: (($line-height-base / 2) - 1) 1px; // 8px 1px
     overflow: hidden;
     background-color: $dropdownDividerTop;
     border-bottom: 1px solid $dropdownDividerBottom;
@@ -73,7 +73,7 @@
     padding: 3px 20px 3px 15px;
     clear: both;
     font-weight: normal;
-    line-height: $baseLineHeight;
+    line-height: $line-height-base;
     color: $dropdownLinkColor;
     white-space: nowrap;
 
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index ec67c6011c1..a52fed03057 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -43,7 +43,7 @@ $gf-form-margin: 4px;
   background-color: $labelBackground;
   display: block;
   padding: 8px 7px;
-  font-size: $fontSizeSmall;
+  font-size: $font-size-sm;
   margin-right: $gf-form-margin;
 }
 
diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss
index 0b524fcf76f..435e46f9634 100644
--- a/public/sass/components/_modals.scss
+++ b/public/sass/components/_modals.scss
@@ -126,7 +126,7 @@
   .share-snapshot-info-text {
     margin: 10px 105px;
     strong {
-      color: $headingsColor;
+      color: $headings-color;
       font-weight: 500;
     }
   }
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 9c0a548749e..9b0f8df4a0a 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -104,6 +104,7 @@
   img {
     width: 30px;
     position: relative;
+    top: -2px;
   }
   .top-nav-logo-background {
     display: inline-block;
@@ -111,8 +112,8 @@
     padding: 4px;
     border-radius: 50%;
     background: $iconContainerBackground;
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
   }
   .icon-gf-grafana_wordmark {
     font-size: 21px;
@@ -129,7 +130,7 @@
     overflow: hidden;
     white-space: nowrap;
     display: block;
-    padding: 16px 17px 16px 13px;
+    padding: 11px 17px 12px 13px;
   }
 
   .fa-th-large {
diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss
index 14861537633..2087feef823 100644
--- a/public/sass/components/_navs.scss
+++ b/public/sass/components/_navs.scss
@@ -8,7 +8,7 @@
 
 .nav {
   margin-left: 0;
-  margin-bottom: $baseLineHeight;
+  margin-bottom: $line-height-base;
   list-style: none;
 }
 
@@ -33,7 +33,7 @@
   padding: 3px 15px;
   font-size: 11px;
   font-weight: bold;
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
   color: $gray-light;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
@@ -109,7 +109,7 @@
 .nav-tabs > li > a {
   padding-top: 8px;
   padding-bottom: 8px;
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
   border: 1px solid transparent;
   @include border-radius(4px 4px 0 0);
   &:hover,
@@ -139,8 +139,8 @@
 }
 .nav .dropdown-toggle:hover .caret,
 .nav .dropdown-toggle:focus .caret {
-  border-top-color: $link-color-hover;
-  border-bottom-color: $link-color-hover;
+  border-top-color: $link-hover-color;
+  border-bottom-color: $link-hover-color;
 }
 /* move down carets for tabs */
 .nav-tabs .dropdown-toggle .caret {
diff --git a/public/sass/components/_pagination.scss b/public/sass/components/_pagination.scss
index 505c84ce7df..0b87172551b 100644
--- a/public/sass/components/_pagination.scss
+++ b/public/sass/components/_pagination.scss
@@ -15,7 +15,7 @@
 .pagination ul > li > span {
   float: left; // Collapse white-space
   padding: 4px 12px;
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
   text-decoration: none;
   background-color: $paginationBackground;
   border: 1px solid $paginationBorder;
@@ -100,7 +100,7 @@
   ul > li > a,
   ul > li > span {
     padding: $paddingSmall;
-    font-size: $fontSizeSmall;
+    font-size: $font-size-sm;
   }
 }
 // Mini
@@ -108,6 +108,6 @@
   ul > li > a,
   ul > li > span {
     padding: $paddingMini;
-    font-size: $fontSizeMini;
+    font-size: $font-size-xs;
   }
 }
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index 17f4bceea0f..2a85d9195ab 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -224,7 +224,7 @@
 
   .graph-tooltip-time {
     text-align: center;
-    font-weight: $fontWeightSemi;
+    font-weight: $font-weight-semi-bold;
     position: relative;
     top: -3px;
   }
@@ -287,7 +287,7 @@
 
 .axisLabel {
   color: $text-color;
-  font-size: $fontSizeSmall;
+  font-size: $font-size-sm;
   position: absolute;
   text-align: center;
   font-size: 12px;
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index a8dd1f02d2f..3198a3190f4 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -60,7 +60,6 @@ $sideMenuWidth:  220px;
 }
 
 .sidemenu {
-  font-weight: $baseFontWeight;
   list-style: none;
   margin: 0;
   padding: 0;
diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss
index ed00de860f7..a3d9ac5e886 100644
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@@ -54,7 +54,7 @@
   background-color: $dropdownBackground;
   box-shadow: 0 0 25px 0 rgba(0,0,0,0.4);
   z-index: 1000;
-  font-size: $baseFontSize;
+  font-size: $font-size-base;
   border-radius: 3px 3px 0 0;
   border: 1px solid $tight-form-func-bg;
 
diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss
index 80be64a9b05..7932a20a6bb 100644
--- a/public/sass/components/_tags.scss
+++ b/public/sass/components/_tags.scss
@@ -3,7 +3,7 @@
 .badge {
   display: inline-block;
   padding: 2px 4px;
-  font-size: $baseFontSize * .846;
+  font-size: $font-size-base * .846;
   font-weight: bold;
   line-height: 14px; // ensure proper line-height if floated
   color: $white;
diff --git a/public/sass/mixins/_hover.scss b/public/sass/mixins/_hover.scss
new file mode 100644
index 00000000000..3a11254e847
--- /dev/null
+++ b/public/sass/mixins/_hover.scss
@@ -0,0 +1,59 @@
+@mixin hover {
+  @if $enable-hover-media-query {
+    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+    @media (hover: hover) {
+      &:hover { @content }
+    }
+  }
+  @else {
+    &:hover { @content }
+  }
+}
+
+@mixin hover-focus {
+  @if $enable-hover-media-query {
+    &:focus { @content }
+    @include hover { @content }
+  }
+  @else {
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin plain-hover-focus {
+  @if $enable-hover-media-query {
+    &,
+    &:focus {
+      @content
+    }
+    @include hover { @content }
+  }
+  @else {
+    &,
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin hover-focus-active {
+  @if $enable-hover-media-query {
+    &:focus,
+    &:active {
+      @content
+    }
+    @include hover { @content }
+  }
+  @else {
+    &:focus,
+    &:active,
+    &:hover {
+      @content
+    }
+  }
+}
diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss
index ded17c0288a..34135fd1d07 100644
--- a/public/sass/mixins/_mixins.scss
+++ b/public/sass/mixins/_mixins.scss
@@ -89,23 +89,23 @@
   font-family: $font-family-monospace;
 }
 
-@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+@mixin font-shorthand($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
   font-size: $size;
   font-weight: $weight;
   line-height: $lineHeight;
 }
 
-@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+@mixin font-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
   @include font-family-serif();
   @include font-shorthand($size, $weight, $lineHeight);
 }
 
-@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+@mixin font-sans-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
   @include font-family-sans-serif();
   @include font-shorthand($size, $weight, $lineHeight);
 }
 
-@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+@mixin monospace($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
   @include font-family-monospace;
   @include font-shorthand($size, $weight, $lineHeight);
 }
diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss
index 9d74bf12741..70c39ecbb34 100644
--- a/public/sass/utils/_utils.scss
+++ b/public/sass/utils/_utils.scss
@@ -12,7 +12,7 @@
   float: right;
   font-size: 20px;
   font-weight: bold;
-  line-height: $baseLineHeight;
+  line-height: $line-height-base;
   color: $black;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   @include opacity(20);