Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

12 files changed, 176 insertions, 134 deletions

diff --git a/less/alerts.less b/less/alerts.less
index 66aa6cf24..75e142d8f 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -7,7 +7,7 @@
 // -------------------------
 
 .alert {
-  padding: 10px 35px 10px 15px;
+  padding: 15px 35px 15px 15px;
   margin-bottom: @line-height-computed;
   color: @alert-text;
   background-color: @alert-bg;
@@ -26,7 +26,7 @@
   }
   // Provide class for links that match alerts
   .alert-link {
-    font-weight: 500;
+    font-weight: bold;
     color: darken(@alert-text, 10%);
   }
 
@@ -37,33 +37,26 @@
     right: -21px;
     color: inherit;
   }
+
+  // Improve alignment and spacing of inner content
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+  > p + p {
+    margin-top: 5px;
+  }
 }
 
 // Alternate styles
 // -------------------------
 
 .alert-success {
-  .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text);
+  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
 }
 .alert-danger {
-  .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
+  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
 }
 .alert-info {
-  .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text);
-}
-
-// Block alerts
-// -------------------------
-
-.alert-block {
-  padding-top: 15px;
-  padding-bottom: 15px;
-
-  > p,
-  > ul {
-    margin-bottom: 0;
-  }
-  p + p {
-    margin-top: 5px;
-  }
+  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
 }
diff --git a/less/badges.less b/less/badges.less
index 216d6014b..06f402925 100644
--- a/less/badges.less
+++ b/less/badges.less
@@ -12,7 +12,7 @@
   font-weight: bold;
   color: @badge-color;
   line-height: 1;
-  vertical-align: middle;
+  vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
   background-color: @badge-bg;
diff --git a/less/buttons.less b/less/buttons.less
index 24ff6549e..c206179df 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -54,26 +54,26 @@
 // --------------------------------------------------
 
 .btn-default {
-  .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
+  .btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border);
 }
 .btn-primary {
-  .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
+  .btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
 }
 // Warning appears as orange
 .btn-warning {
-  .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
+  .btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
 }
 // Danger and error appear as red
 .btn-danger {
-  .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
+  .btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
 // Success appears as green
 .btn-success {
-  .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
+  .btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border);
 }
 // Info appears as blue-green
 .btn-info {
-  .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
+  .btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border);
 }
 
 
@@ -123,6 +123,7 @@
 .btn-large {
   padding: @padding-large-vertical @padding-large-horizontal;
   font-size: @font-size-large;
+  line-height: 1.33; // ensure even-numbered height of butotn next to large input
   border-radius: @border-radius-large;
 }
 .btn-small,
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 938e682f5..1cd76a070 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -17,6 +17,12 @@
   content: "";
 }
 
+// The dropdown wrapper (div)
+// --------------------------
+.dropdown {
+  position: relative;
+}
+
 // The dropdown menu (ul)
 // ----------------------
 .dropdown-menu {
diff --git a/less/forms.less b/less/forms.less
index f4e8c996d..494d328c0 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -222,12 +222,14 @@ input[type="number"] {
   height: @input-height-large;
   padding: @padding-large-vertical @padding-large-horizontal;
   font-size: @font-size-large;
+  line-height: @line-height-large;
   border-radius: @border-radius-large;
 }
 .input-small {
   height: @input-height-small;
   padding: @padding-small-vertical @padding-small-horizontal;
   font-size: @font-size-small;
+  line-height: @line-height-small;
   border-radius: @border-radius-small;
 }
 
@@ -255,15 +257,15 @@ textarea {
 
 // Warning
 .has-warning {
-  .form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
+  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
 // Error
 .has-error {
-  .form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
+  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
 // Success
 .has-success {
-  .form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
+  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
 }
 
 
diff --git a/less/grid.less b/less/grid.less
index 12803f39a..dfaf4f970 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -125,29 +125,42 @@
   .col-sm-12 { width: 100%; }
 
   // Push and pull columns for source order changes
-  .col-push-1  { left: percentage((1 / @grid-columns)); }
-  .col-push-2  { left: percentage((2 / @grid-columns)); }
-  .col-push-3  { left: percentage((3 / @grid-columns)); }
-  .col-push-4  { left: percentage((4 / @grid-columns)); }
-  .col-push-5  { left: percentage((5 / @grid-columns)); }
-  .col-push-6  { left: percentage((6 / @grid-columns)); }
-  .col-push-7  { left: percentage((7 / @grid-columns)); }
-  .col-push-8  { left: percentage((8 / @grid-columns)); }
-  .col-push-9  { left: percentage((9 / @grid-columns)); }
-  .col-push-10 { left: percentage((10/ @grid-columns)); }
-  .col-push-11 { left: percentage((11/ @grid-columns)); }
-
-  .col-pull-1  { right: percentage((1 / @grid-columns)); }
-  .col-pull-2  { right: percentage((2 / @grid-columns)); }
-  .col-pull-3  { right: percentage((3 / @grid-columns)); }
-  .col-pull-4  { right: percentage((4 / @grid-columns)); }
-  .col-pull-5  { right: percentage((5 / @grid-columns)); }
-  .col-pull-6  { right: percentage((6 / @grid-columns)); }
-  .col-pull-7  { right: percentage((7 / @grid-columns)); }
-  .col-pull-8  { right: percentage((8 / @grid-columns)); }
-  .col-pull-9  { right: percentage((9 / @grid-columns)); }
-  .col-pull-10 { right: percentage((10/ @grid-columns)); }
-  .col-pull-11 { right: percentage((11/ @grid-columns)); }
+  .col-sm-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-sm-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-sm-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-sm-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-sm-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-sm-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-sm-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-sm-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-sm-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-sm-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-sm-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-sm-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-sm-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-sm-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-sm-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-sm-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-sm-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-sm-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-sm-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-sm-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-sm-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-sm-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-sm-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-sm-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-sm-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-sm-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-sm-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 }
 
 // Medium and large device columns (desktop and up)
@@ -182,18 +195,43 @@
   .col-lg-11 { width: percentage((11/ @grid-columns)); }
   .col-lg-12 { width: 100%; }
 
+  // Push and pull columns for source order changes
+  .col-lg-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-lg-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-lg-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-lg-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-lg-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-lg-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-lg-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-lg-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-lg-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-lg-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-lg-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-lg-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-lg-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-lg-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-lg-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-lg-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-lg-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-lg-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
+
   // Offsets
-  .col-offset-1  { margin-left: percentage((1 / @grid-columns)); }
-  .col-offset-2  { margin-left: percentage((2 / @grid-columns)); }
-  .col-offset-3  { margin-left: percentage((3 / @grid-columns)); }
-  .col-offset-4  { margin-left: percentage((4 / @grid-columns)); }
-  .col-offset-5  { margin-left: percentage((5 / @grid-columns)); }
-  .col-offset-6  { margin-left: percentage((6 / @grid-columns)); }
-  .col-offset-7  { margin-left: percentage((7 / @grid-columns)); }
-  .col-offset-8  { margin-left: percentage((8 / @grid-columns)); }
-  .col-offset-9  { margin-left: percentage((9 / @grid-columns)); }
-  .col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
-  .col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+  .col-lg-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-lg-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-lg-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-lg-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-lg-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-lg-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-lg-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-lg-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-lg-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 }
 
 // Large desktops and up
diff --git a/less/input-groups.less b/less/input-groups.less
index fed7d5645..3586beef7 100644
--- a/less/input-groups.less
+++ b/less/input-groups.less
@@ -5,6 +5,7 @@
 // Base styles
 // -------------------------
 .input-group {
+  position: relative; // For dropdowns
   display: table;
   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
 
@@ -135,7 +136,9 @@
 // --------------------------------------------------
 // Horizontal forms are built on grid classes.
 
-.form-horizontal .control-label {
+.form-horizontal .control-label, 
+.form-horizontal .radio-inline, 
+.form-horizontal .checkbox-inline {
   padding-top: 9px;
 }
 
diff --git a/less/labels.less b/less/labels.less
index 7ee7ee68a..7e7ea169f 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -11,7 +11,7 @@
   color: @label-color;
   text-align: center;
   white-space: nowrap;
-  vertical-align: middle;
+  vertical-align: baseline;
   background-color: @gray-light;
   border-radius: .25em;
 
diff --git a/less/mixins.less b/less/mixins.less
index 2fb9a8ff4..77ed5d512 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -44,12 +44,12 @@
 }
 
 // Sizing shortcuts
-.size(@width, @height) {
+.size(@width; @height) {
   width: @width;
   height: @height;
 }
 .square(@size) {
-  .size(@size, @size);
+  .size(@size; @size);
 }
 
 // Placeholder text
@@ -138,17 +138,17 @@
       -ms-transform: scale(@ratio);
           transform: scale(@ratio);
 }
-.translate(@x, @y) {
+.translate(@x; @y) {
   -webkit-transform: translate(@x, @y);
       -ms-transform: translate(@x, @y);
           transform: translate(@x, @y);
 }
-.skew(@x, @y) {
+.skew(@x; @y) {
   -webkit-transform: skew(@x, @y);
       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
           transform: skew(@x, @y);
 }
-.translate3d(@x, @y, @z) {
+.translate3d(@x; @y; @z) {
   -webkit-transform: translate3d(@x, @y, @z);
           transform: translate3d(@x, @y, @z);
 }
@@ -158,9 +158,9 @@
 // Default value is `visible`, but can be changed to `hidden`
 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
 .backface-visibility(@visibility){
-	-webkit-backface-visibility: @visibility;
-	   -moz-backface-visibility: @visibility;
-	        backface-visibility: @visibility;
+  -webkit-backface-visibility: @visibility;
+     -moz-backface-visibility: @visibility;
+          backface-visibility: @visibility;
 }
 
 // Background clipping
@@ -197,7 +197,7 @@
 }
 
 // CSS3 Content Columns
-.content-columns(@column-count, @column-gap: @grid-gutter-width) {
+.content-columns(@column-count; @column-gap: @grid-gutter-width) {
   -webkit-column-count: @column-count;
      -moz-column-count: @column-count;
           column-count: @column-count;
@@ -259,14 +259,14 @@
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
   }
 
-  .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
+  .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
     background-color: @end-color;
     background-repeat: repeat-x;
     background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
     background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
     background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
   }
-  .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
+  .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
     background-color: mix(@mid-color, @end-color, 80%);
     background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
     background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
@@ -276,7 +276,7 @@
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
   }
 
-  .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
     background-color: mix(@mid-color, @end-color, 80%);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
     background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
@@ -285,7 +285,7 @@
     background-repeat: no-repeat;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
   }
-  .radial(@inner-color: #555, @outer-color: #333) {
+  .radial(@inner-color: #555; @outer-color: #333) {
     background-color: @outer-color;
     background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
     background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
@@ -293,7 +293,7 @@
     background-image: radial-gradient(circle, @inner-color, @outer-color);
     background-repeat: no-repeat;
   }
-  .striped(@color: #555, @angle: 45deg) {
+  .striped(@color: #555; @angle: 45deg) {
     background-color: @color;
     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
     background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@@ -316,7 +316,7 @@
 // --------------------------------------------------
 
 // Short retina mixin for setting background-image and -size
-.img-retina(@file-1x, @file-2x, @width-1x, @height-1x) {
+.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");
 
   @media
@@ -347,7 +347,7 @@
 
 // Alerts
 // -------------------------
-.alert-variant(@background, @border, @text-color) {
+.alert-variant(@background; @border; @text-color) {
   background-color: @background;
   border-color: @border;
   color: @text-color;
@@ -363,7 +363,7 @@
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-.btn-pseudo-states(@color, @background, @border) {
+.btn-pseudo-states(@color; @background; @border) {
   color: @color;
   background-color: @background;
   border-color: @border;
@@ -405,7 +405,7 @@
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 .navbar-vertical-align(@element-height) {
   margin-top: ((@navbar-height - @element-height) / 2);
   margin-bottom: ((@navbar-height - @element-height) / 2);
@@ -520,7 +520,7 @@
 // Used in forms.less to generate the form validation CSS for warnings, errors,
 // and successes.
 
-.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
   // Color the label and help text
   .help-block,
   .control-label {
diff --git a/less/navs.less b/less/navs.less
index 4051dbb75..437052fc2 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -69,10 +69,6 @@
 }
 
 
-
-// Nav variations
-// --------------------------------------------------
-
 // Tabs
 // -------------------------
 
@@ -154,6 +150,10 @@
   }
 }
 
+
+// Nav variations
+// --------------------------------------------------
+
 // Justified nav links
 // -------------------------
 
@@ -181,11 +181,9 @@
   > .active > a {
     border-bottom-color: @nav-tabs-justified-active-link-border-color;
   }
-
 }
 
 
-
 // Tabbable tabs
 // -------------------------
 
diff --git a/less/pagination.less b/less/pagination.less
index 83b72e47e..6720c6898 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -6,7 +6,7 @@
   padding-left: 0;
   margin: @line-height-computed 0;
   border-radius: @border-radius-base;
-  
+
   > li {
     display: inline; // Remove list-style and block-level defaults
     > a,
@@ -33,7 +33,7 @@
       }
     }
   }
-  
+
   > li > a:hover,
   > li > a:focus,
   > .active > a,
@@ -45,7 +45,7 @@
     color: @pagination-active-color;
     cursor: default;
   }
-  
+
   > .disabled {
     > span,
     > a,
diff --git a/less/variables.less b/less/variables.less
index 878725f6c..a869ce960 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -60,15 +60,18 @@
 // -------------------------
 // Based on 14px font-size and 1.428 line-height (~20px to start)
 
-@padding-base-vertical:          8px;
+@padding-base-vertical:          6px;
 @padding-base-horizontal:        12px;
 
-@padding-large-vertical:         14px;
+@padding-large-vertical:         10px;
 @padding-large-horizontal:       16px;
 
 @padding-small-vertical:         5px;
 @padding-small-horizontal:       10px;
 
+@line-height-large:              1.33;
+@line-height-small:              1.5;
+
 @border-radius-base:             4px;
 @border-radius-large:            6px;
 @border-radius-small:            3px;
@@ -132,8 +135,8 @@
 @input-color-placeholder:        @gray-light;
 
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-@input-height-large:             (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
-@input-height-small:             (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
+@input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
 
 @legend-border-color:            #e5e5e5;
 
@@ -174,6 +177,39 @@
 @zindex-modal-background:  1040;
 @zindex-modal:             1050;
 
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Tiny screen / phone
+@screen-tiny:                480px;
+@screen-phone:               @screen-tiny;
+
+// Small screen / tablet
+@screen-small:               768px;
+@screen-tablet:              @screen-small;
+
+// Medium screen / desktop
+@screen-medium:              992px;
+@screen-desktop:             @screen-medium;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          @screen-small-max;
+
+// Large screen / wide desktop
+@screen-large:               1200px;
+@screen-large-desktop:       @screen-large;
+
+// Grid system
+// --------------------------------------------------
+
+// Number of columns in the grid system
+@grid-columns:              12;
+// Padding, to be divided by two and applied to the left and right of all columns
+@grid-gutter-width:         30px;
+// Point at which the navbar stops collapsing
+@grid-float-breakpoint:     @screen-tablet;
+
 
 // Navbar
 // -------------------------
@@ -520,30 +556,6 @@
 @component-offset-horizontal: 180px;
 
 
-// Media queries breakpoints
-// --------------------------------------------------
-
-// Tiny screen / phone
-@screen-tiny:                480px;
-@screen-phone:               @screen-tiny;
-
-// Small screen / tablet
-@screen-small:               768px;
-@screen-tablet:              @screen-small;
-
-// Medium screen / desktop
-@screen-medium:              992px;
-@screen-desktop:             @screen-medium;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-small-max:           (@screen-medium - 1);
-@screen-tablet-max:          @screen-small-max;
-
-// Large screen / wide desktop
-@screen-large:               1200px;
-@screen-large-desktop:       @screen-large;
-
-
 // Container sizes
 // --------------------------------------------------
 
@@ -555,14 +567,3 @@
 
 // Large screen / wide desktop
 @container-large-desktop:   1170px;
-
-
-// Grid system
-// --------------------------------------------------
-
-// Number of columns in the grid system
-@grid-columns:              12;
-// Padding, to be divided by two and applied to the left and right of all columns
-@grid-gutter-width:         30px;
-// Point at which the navbar stops collapsing
-@grid-float-breakpoint:     @screen-tablet;