//
//## Gray and brand colors for use across Bootstrap.
-@gray-darker: lighten(#000, 13.5%); // #222
-@gray-dark: lighten(#000, 20%); // #333
-@gray: lighten(#000, 33.5%); // #555
-@gray-light: lighten(#000, 60%); // #999
-@gray-lighter: lighten(#000, 93.5%); // #eee
-
-@brand-primary: #428bca;
+@gray-base: #000;
+@gray-darker: lighten(@gray-base, 13.5%); // #222
+@gray-dark: lighten(@gray-base, 20%); // #333
+@gray: lighten(@gray-base, 33.5%); // #555
+@gray-light: lighten(@gray-base, 46.7%); // #777
+@gray-lighter: lighten(@gray-base, 93.5%); // #eee
+
+@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
//== Scaffolding
//
-// ## Settings for some of the most global styles.
+//## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #fff;
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
+//** Link hover decoration.
+@link-hover-decoration: underline;
//== Typography
@headings-color: inherit;
-//-- Iconography
+//== Iconography
//
-//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+//** Load fonts from this directory.
@icon-font-path: "../fonts/";
+//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular";
-@icon-font-svg-id: "glyphicons_halflingsregular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id: "glyphicons_halflingsregular";
+
//== Components
//
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
-@line-height-large: 1.33;
+@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 4px;
@btn-link-disabled-color: @gray-light;
+// Allows for customizing button radius independently from global border radius
+@btn-border-radius-base: @border-radius-base;
+@btn-border-radius-large: @border-radius-large;
+@btn-border-radius-small: @border-radius-small;
+
//== Forms
//
@input-color: @gray;
//** `<input>` border color
@input-border: #ccc;
-//** `<input>` border radius
+
+// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius: @border-radius-base;
+//** Large `.form-control` border radius
+@input-border-radius-large: @border-radius-large;
+//** Small `.form-control` border radius
+@input-border-radius-small: @border-radius-small;
+
//** Border color for inputs on focus
@input-border-focus: #66afe9;
//** Placeholder text color
-@input-color-placeholder: @gray-light;
+@input-color-placeholder: #999;
//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Small `.form-control` height
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+//** `.form-group` margin
+@form-group-margin-bottom: 15px;
+
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
+//** Disabled cursor for form controls and buttons.
+@cursor-disabled: not-allowed;
+
//== Dropdowns
//
//** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light;
-// Note: Deprecated @dropdown-caret-color as of v3.1
+//** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000;
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
-@zindex-popover: 1010;
-@zindex-tooltip: 1030;
+@zindex-popover: 1060;
+@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
-// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
+//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
+//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
+//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
-// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
+//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
+//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
-// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
+//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
+//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
-// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
+//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
+//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+@container-tablet: (720px + @grid-gutter-width);
+//** For `@screen-sm-min` and up.
+@container-sm: @container-tablet;
+
+// Medium screen / desktop
+@container-desktop: (940px + @grid-gutter-width);
+//** For `@screen-md-min` and up.
+@container-md: @container-desktop;
+
+// Large screen / wide desktop
+@container-large-desktop: (1140px + @grid-gutter-width);
+//** For `@screen-lg-min` and up.
+@container-lg: @container-large-desktop;
+
+
//== Navbar
//
//##
@navbar-default-toggle-border-color: #ddd;
-// Inverted navbar
+//=== Inverted navbar
// Reset inverted navbar basics
-@navbar-inverse-color: @gray-light;
+@navbar-inverse-color: lighten(@gray-light, 15%);
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
-@navbar-inverse-link-color: @gray-light;
+@navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
-@nav-open-link-hover-color: #fff;
-
//== Tabs
@nav-tabs-border-color: #ddd;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
+@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
//== Form states and alerts
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
-@popover-arrow-color: #fff;
+@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
-@popover-arrow-outer-color: rgba(0,0,0,.25);
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color: #999;
+@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//##
//** Padding applied to the modal body
-@modal-inner-padding: 20px;
+@modal-inner-padding: 15px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
@progress-bg: #f5f5f5;
//** Progress bar text color
@progress-bar-color: #fff;
+//** Variable for setting rounded corners on progress bar.
+@progress-border-radius: @border-radius-base;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** List group border radius
@list-group-border-radius: @border-radius-base;
-//** Background color of single list elements on hover
+//** Background color of single list items on hover
@list-group-hover-bg: #f5f5f5;
-//** Text color of active list elements
+//** Text color of active list items
@list-group-active-color: @component-active-color;
-//** Background color of active list elements
+//** Background color of active list items
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
+//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
+//** Text color of disabled list items
+@list-group-disabled-color: @gray-light;
+//** Background color of disabled list items
+@list-group-disabled-bg: @gray-lighter;
+//** Text color for content within disabled list items
+@list-group-disabled-text-color: @list-group-disabled-color;
+
@list-group-link-color: #555;
+@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333;
@panel-bg: #fff;
@panel-body-padding: 15px;
+@panel-heading-padding: 10px 15px;
+@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base;
//** Border color for elements within panels
//
//##
+//** Horizontal offset for forms and lists.
+@component-offset-horizontal: 180px;
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@headings-small-color: @gray-light;
//** Blockquote small color
@blockquote-small-color: @gray-light;
+//** Blockquote font size
+@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @gray-lighter;
//** Page header border color
@page-header-border-color: @gray-lighter;
-
-
-//== Miscellaneous
-//
-//##
-
+//** Width of horizontal description list titles
+@dl-horizontal-offset: @component-offset-horizontal;
//** Horizontal line color.
@hr-border: @gray-lighter;
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet: ((720px + @grid-gutter-width));
-//** For `@screen-sm-min` and up.
-@container-sm: @container-tablet;
-
-// Medium screen / desktop
-@container-desktop: ((940px + @grid-gutter-width));
-//** For `@screen-md-min` and up.
-@container-md: @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop: ((1140px + @grid-gutter-width));
-//** For `@screen-lg-min` and up.
-@container-lg: @container-large-desktop;