diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index 2e60f3dc7e..aa5fca7e66 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -1,5 +1,5 @@
// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3):
-
+// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass
//
// Variables
// --------------------------------------------------
@@ -25,68 +25,17 @@ $brand-danger: $gl-danger;
//== Scaffolding
//
-//## Settings for some of the most global styles.
-
-//** Background color for `
`.
-// $body-bg: #fff
-//** Global text color on ``.
$text-color: $gl-text-color;
-
-//** Global textual link color.
$link-color: $gl-link-color;
-//** Link hover color set via `darken()` function.
-// $link-hover-color: darken($link-color, 15%)
-//** Link hover decoration.
-// $link-hover-decoration: underline
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
-// $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif
-// $font-family-serif: Georgia, "Times New Roman", Times, serif
-//** Default monospace fonts for ``, ``, and `
`.
-// $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace
-// $font-family-base: $font-family-sans-serif
-
-$font-size-base: $gl-font-size;
-// $font-size-large: ceil(($font-size-base * 1.25)) // ~18px
-// $font-size-small: ceil(($font-size-base * 0.85)) // ~12px
-
-// $font-size-h1: floor(($font-size-base * 2.6)) // ~36px
-// $font-size-h2: floor(($font-size-base * 2.15)) // ~30px
-// $font-size-h3: ceil(($font-size-base * 1.7)) // ~24px
-// $font-size-h4: ceil(($font-size-base * 1.25)) // ~18px
-// $font-size-h5: $font-size-base
-// $font-size-h6: ceil(($font-size-base * 0.85)) // ~12px
-
-//** Unit-less `line-height` for use in components like buttons.
-// $line-height-base: 1.428571429 // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-// $line-height-computed: floor(($font-size-base * $line-height-base)) // ~20px
-
-//** By default, this inherits from the ``.
-// $headings-font-family: inherit
-// $headings-font-weight: 500
-// $headings-line-height: 1.1
-// $headings-color: inherit
-
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
-
-//** Load fonts from this directory.
-
-// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
-// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
-// $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/")
-
-//** File name for all font files.
-// $icon-font-name: "glyphicons-halflings-regular"
-//** Element ID within SVG icon file.
-// $icon-font-svg-id: "glyphicons_halflingsregular"
+$font-family-sans-serif: $regular_font;
+$font-family-monospace: $monospace_font;
+$font-size-base: $gl-font-size;
//== Components
@@ -96,348 +45,15 @@ $font-size-base: $gl-font-size;
$padding-base-vertical: 6px;
$padding-base-horizontal: 14px;
-// $padding-large-vertical: 10px
-// $padding-large-horizontal: 16px
-
-// $padding-small-vertical: 5px
-// $padding-small-horizontal: 10px
-
-// $padding-xs-vertical: 1px
-// $padding-xs-horizontal: 5px
-
-// $line-height-large: 1.3333333 // extra decimals for Win 8.1 Chrome
-// $line-height-small: 1.5
-
-// $border-radius-base: 4px
-// $border-radius-large: 6px
-// $border-radius-small: 3px
-
-//** Global color for active items (e.g., navs or dropdowns).
-// $component-active-color: #fff
-//** Global background color for active items (e.g., navs or dropdowns).
-// $component-active-bg: $brand-primary
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-// $caret-width-base: 4px
-//** Carets increase slightly in size for larger components.
-// $caret-width-large: 5px
-
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `
`s and `
`s.
-// $table-cell-padding: 8px
-//** Padding for cells in `.table-condensed`.
-// $table-condensed-cell-padding: 5px
-
-//** Default background color used for all tables.
-// $table-bg: transparent
-//** Background color used for `.table-striped`.
-// $table-bg-accent: #f9f9f9
-//** Background color used for `.table-hover`.
-// $table-bg-hover: #f5f5f5
-// $table-bg-active: $table-bg-hover
-
-//** Border color for table and cell borders.
-// $table-border-color: #ddd
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-// $btn-font-weight: normal
-
-// $btn-default-color: #333
-// $btn-default-bg: #fff
-// $btn-default-border: #ccc
-
-// $btn-primary-color: #fff
-// $btn-primary-bg: $brand-primary
-// $btn-primary-border: darken($btn-primary-bg, 5%)
-
-// $btn-success-color: #fff
-// $btn-success-bg: $brand-success
-// $btn-success-border: darken($btn-success-bg, 5%)
-
-// $btn-info-color: #fff
-// $btn-info-bg: $brand-info
-// $btn-info-border: darken($btn-info-bg, 5%)
-
-// $btn-warning-color: #fff
-// $btn-warning-bg: $brand-warning
-// $btn-warning-border: darken($btn-warning-bg, 5%)
-
-// $btn-danger-color: #fff
-// $btn-danger-bg: $brand-danger
-// $btn-danger-border: darken($btn-danger-bg, 5%)
-
-// $btn-link-disabled-color: $gray-light
-
//== Forms
//
//##
-//** `` background color
-// $input-bg: #fff
-//** `` background color
-// $input-bg-disabled: $gray-lighter
-
-//** Text color for ``s
$input-color: $text-color;
-//** `` border color
$input-border: #dce4ec;
-
-// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
-//** Default `.form-control` border radius
-// This has no effect on `