Merge branch 'master' into deprecate-screen-device-vars

Conflicts:
	less/variables.less

8 files changed, 108 insertions, 64 deletions

diff --git a/less/mixins.less b/less/mixins.less
index c18e7c49b..416c6a222 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -69,7 +69,15 @@
 }
 
 // CSS image replacement
+//
+// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
+// that we cannot chain the mixins together in Less, so they are repeated.
+//
 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (will be removed in v4)
 .hide-text() {
   font: ~"0/0" a;
   color: transparent;
@@ -77,6 +85,14 @@
   background-color: transparent;
   border: 0;
 }
+// New mixin to use as of v3.0.1
+.text-hide() {
+  font: ~"0/0" a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
 
 
 
@@ -559,7 +575,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -567,17 +583,17 @@
 
 // Generate the small column offsets
 .make-sm-column-offset(@columns) {
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-push(@columns) {
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-pull(@columns) {
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -592,7 +608,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -600,7 +616,7 @@
 
 // Generate the large column offsets
 .make-md-column-offset(@columns) {
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
@@ -610,7 +626,7 @@
   }
 }
 .make-md-column-pull(@columns) {
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -625,7 +641,7 @@
   padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
@@ -633,17 +649,17 @@
 
 // Generate the large column offsets
 .make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
diff --git a/less/navs.less b/less/navs.less
index 6002a8cdd..868aeb817 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -162,7 +162,7 @@
     }
   }
 
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     > li {
       display: table-cell;
       width: 1%;
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 4976e2fcd..02bb39bfb 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -41,17 +41,17 @@
     .responsive-visibility();
   }
   &.visible-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
   &.visible-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }
   }
   &.visible-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-visibility();
     }
   }
@@ -63,16 +63,16 @@
       .responsive-visibility();
     }
   }
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
   &.visible-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }
   }
   &.visible-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-visibility();
     }
   }
@@ -85,15 +85,15 @@
     }
   }
   &.visible-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
   &.visible-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-visibility();
     }
   }
@@ -106,16 +106,16 @@
     }
   }
   &.visible-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
   &.visible-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }
   }
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     .responsive-visibility();
   }
 }
@@ -126,17 +126,17 @@
     .responsive-invisibility();
   }
   &.hidden-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-invisibility();
     }
   }
@@ -148,16 +148,16 @@
       .responsive-invisibility();
     }
   }
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
   &.hidden-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-invisibility();
     }
   }
@@ -170,15 +170,15 @@
     }
   }
   &.hidden-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
   &.hidden-lg {
-    @media (min-width: @screen-lg) {
+    @media (min-width: @screen-lg-min) {
       .responsive-invisibility();
     }
   }
@@ -191,16 +191,16 @@
     }
   }
   &.hidden-sm {
-    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }
   }
   &.hidden-md {
-    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }
   }
-  @media (min-width: @screen-lg) {
+  @media (min-width: @screen-lg-min) {
     .responsive-invisibility();
   }
 }
diff --git a/less/tables.less b/less/tables.less
index 7543b165a..5b6ea44d9 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -180,7 +180,7 @@ table {
 // by enabling horizontal scrolling. Only applies <768px. Everything above that
 // will display normally.
 
-@media (max-width: @screen-sm) {
+@media (max-width: @screen-sm-min) {
   .table-responsive {
     width: 100%;
     margin-bottom: 15px;
diff --git a/less/theme.less b/less/theme.less
index 92469c429..32c806696 100644
--- a/less/theme.less
+++ b/less/theme.less
@@ -32,13 +32,20 @@
 
 // Mixin for generating new styles
 .btn-styles(@btn-color: #555;) {
-  #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
-  border-color: darken(@btn-color, 12%);
+  #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
+  background-repeat: repeat-x;
+  border-color: darken(@btn-color, 14%);
+
+  &:hover,
+  &:focus  {
+    background-color: darken(@btn-color, 12%);
+    background-position: 0 -15px;
+  }
 
   &:active,
   &.active {
-    background-color: darken(@btn-color, 10%);
-    border-color: darken(@btn-color, 12%);
+    background-color: darken(@btn-color, 12%);
+    border-color: darken(@btn-color, 14%);
   }
 }
 
@@ -91,15 +98,16 @@
 // Navbar
 // --------------------------------------------------
 
-// Basic navbar
-.navbar {
+// Default navbar
+.navbar-default {
   #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;);
   border-radius: @navbar-border-radius;
   @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
   .box-shadow(@shadow);
 
   .navbar-nav > .active > a {
-    background-color: @navbar-default-bg;
+    #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%););
+    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
   }
 }
 .navbar-brand,
@@ -112,7 +120,8 @@
   #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;);
 
   .navbar-nav > .active > a {
-    background-color: @navbar-inverse-bg;
+    #gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%););
+    .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
   }
 
   .navbar-brand,
diff --git a/less/type.less b/less/type.less
index c40a89106..b0423e982 100644
--- a/less/type.less
+++ b/less/type.less
@@ -52,6 +52,7 @@ h1, h2, h3, h4, h5, h6,
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
   line-height: @headings-line-height;
+
   small {
     font-weight: normal;
     line-height: 1;
@@ -64,25 +65,28 @@ h2,
 h3 {
   margin-top: @line-height-computed;
   margin-bottom: (@line-height-computed / 2);
+
+  small {
+    font-size: 65%;
+  }
 }
 h4,
 h5,
 h6 {
   margin-top: (@line-height-computed / 2);
   margin-bottom: (@line-height-computed / 2);
-}
 
-h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px
-h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px
-h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
-h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
-h5, .h5 { font-size:  @font-size-base; }
-h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
+  small {
+    font-size: 75%;
+  }
+}
 
-h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
-h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
-h3 small, .h3 small,
-h4 small, .h4 small { font-size: @font-size-base; }
+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; }
 
 
 // Page header
diff --git a/less/utilities.less b/less/utilities.less
index 3d310e651..a2807cc79 100644
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -30,7 +30,7 @@
   visibility: hidden;
 }
 .text-hide {
-  .hide-text();
+  .text-hide();
 }
 
 
diff --git a/less/variables.less b/less/variables.less
index b2547493a..7dff919c3 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -48,6 +48,13 @@
 @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.60); // ~36px
+@font-size-h2:            floor(@font-size-base * 2.15); // ~30px
+@font-size-h3:            ceil(@font-size-base * 1.70); // ~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
+
 @line-height-base:        1.428571429; // 20/14
 @line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
 
@@ -200,25 +207,33 @@
 // --------------------------------------------------
 
 // Extra small screen / phone
+// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
 @screen-xs:                  480px;
-@screen-phone:               @screen-xs;// NOTE: Deprecated in favor of @screen-xs
+@screen-xs-min:              @screen-xs;
+@screen-phone:               @screen-xs-min;
 
 // Small screen / tablet
+// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
 @screen-sm:                  768px;
-@screen-tablet:              @screen-sm;// NOTE: Deprecated in favor of @screen-sm
+@screen-sm-min:              @screen-sm;
+@screen-tablet:              @screen-sm-min;
 
 // Medium screen / desktop
+// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
 @screen-md:                  992px;
-@screen-desktop:             @screen-md;// NOTE: Deprecated in favor of @screen-md
+@screen-md-min:              @screen-md;
+@screen-desktop:             @screen-md-min;
 
 // Large screen / wide desktop
+// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
 @screen-lg:                  1200px;
-@screen-lg-desktop:          @screen-lg;// NOTE: Deprecated in favor of @screen-lg
+@screen-lg-min:              @screen-lg;
+@screen-lg-desktop:          @screen-lg-min;
 
 // So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm - 1);
-@screen-sm-max:              (@screen-md - 1);
-@screen-md-max:              (@screen-lg - 1);
+@screen-xs-max:              (@screen-sm-min - 1);
+@screen-sm-max:              (@screen-md-min - 1);
+@screen-md-max:              (@screen-lg-min - 1);
 
 
 // Grid system