Overhaul form control and button sizing, and some type styles

* New padding approach with separate horizontal and vertical padding
variables
* Improved sizing in large and small buttons and form controls
* Dropped the `.btn-mini` (since we have no `.input-mini` to match, and
holy fuck those were small buttons)
* Dropped the `.pagination-mini` as well because once again, to hell
with such small components
* Changed `@line-height-headings` to `@headings-line-height`
* Removed the `@headings-font-family` because it was honestly kind of
useless

5 files changed, 39 insertions, 52 deletions

diff --git a/less/buttons.less b/less/buttons.less
index 128971a4c..6280d3448 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -9,7 +9,7 @@
 // Core styles
 .btn {
   display: inline-block;
-  padding: 6px 12px;
+  padding: @padding-base-vertical @padding-base-horizontal;
   margin-bottom: 0; // For input.btn
   font-size: @font-size-base;
   font-weight: 500;
@@ -123,18 +123,14 @@ fieldset[disabled] .btn-link {
 // --------------------------------------------------
 
 .btn-large {
-  padding: @padding-large;
+  padding: @padding-large-vertical @padding-large-horizontal;
   font-size: @font-size-large;
   border-radius: @border-radius-large;
 }
 .btn-small {
-  padding: @padding-small;
+  padding: @padding-small-vertical @padding-small-horizontal;
   font-size: @font-size-small;
-  border-radius: @border-radius-small;
-}
-.btn-mini {
-  padding: @padding-mini;
-  font-size: @font-size-mini;
+  line-height: 1.5; // ensure proper height of button next to small input
   border-radius: @border-radius-small;
 }
 
diff --git a/less/forms.less b/less/forms.less
index dacc4bb50..c7b376cda 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -22,7 +22,7 @@ legend {
   padding: 0;
   margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
-  line-height: @line-height-headings;
+  line-height: inherit;
   color: @gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
@@ -56,7 +56,7 @@ input[type="tel"],
 input[type="color"] {
   display: block;
   min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  padding: 6px 9px;
+  padding: @padding-base-vertical @padding-base-horizontal;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @gray;
@@ -241,13 +241,13 @@ input[type="search"],
 input[type="tel"],
 input[type="color"] {
   &.input-large {
-    padding: @padding-large;
+    padding: @padding-large-vertical @padding-large-horizontal;
     font-size: @font-size-large;
     border-radius: @border-radius-large;
   }
   &.input-small {
     min-height: @input-height-small;
-    padding: @padding-small;
+    padding: @padding-small-vertical @padding-small-horizontal;
     font-size: @font-size-small;
     border-radius: @border-radius-small;
   }
@@ -397,11 +397,12 @@ select:focus:invalid {
   border-radius: @border-radius-base;
 
   &.input-small {
-    padding: @padding-small;
+    padding: @padding-small-vertical @padding-small-horizontal;
     font-size: @font-size-small;
-    border-radius: @border-radius-small;  }
+    border-radius: @border-radius-small;
+  }
   &.input-large {
-    padding: @padding-large;
+    padding: @padding-large-vertical @padding-large-horizontal;
     font-size: @font-size-large;
     border-radius: @border-radius-large;
   }
diff --git a/less/pagination.less b/less/pagination.less
index ec1eef27f..73c063be0 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -56,7 +56,7 @@
 .pagination-large {
   > li > a,
   > li > span {
-    padding: @padding-large;
+    padding: @padding-large-vertical @padding-large-horizontal;
     font-size: @font-size-large;
   }
   > li:first-child > a,
@@ -69,9 +69,13 @@
   }
 }
 
-// Small and mini
-.pagination-mini,
+// Small
 .pagination-small {
+  > li > a,
+  > li > span {
+    padding: @padding-small-vertical @padding-small-horizontal;
+    font-size: @font-size-small;
+  }
   > li:first-child > a,
   > li:first-child > span {
     .border-left-radius(@border-radius-small);
@@ -81,20 +85,3 @@
     .border-right-radius(@border-radius-small);
   }
 }
-
-// Small
-.pagination-small {
-  > li > a,
-  > li > span {
-    padding: @padding-small;
-    font-size: @font-size-small;
-  }
-}
-// Mini
-.pagination-mini {
-  > li > a,
-  > li > span {
-    padding: @padding-mini;
-    font-size: @font-size-mini;
-  }
-}
diff --git a/less/type.less b/less/type.less
index e562bb2c2..a95e5bff7 100644
--- a/less/type.less
+++ b/less/type.less
@@ -54,9 +54,8 @@ a.text-success:focus { color: darken(@state-success-text, 10%); }
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
-  font-family: @headings-font-family;
   font-weight: @headings-font-weight;
-  line-height: @line-height-headings;
+  line-height: @headings-line-height;
   small {
     font-weight: normal;
     line-height: 1;
diff --git a/less/variables.less b/less/variables.less
index 4feb9879a..9cd8f830b 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -50,25 +50,29 @@
 @font-size-small:         ceil(@font-size-base * 0.85); // ~12px
 @font-size-mini:          ceil(@font-size-base * 0.75); // ~11px
 
-@line-height-base:        1.428; // 20/14
-@line-height-computed:    ceil(@font-size-base * @line-height-base); // ~20px
-@line-height-headings:    1.1;
+@line-height-base:        1.428571429; // 20/14
+@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
 
-@headings-font-family:    inherit; // empty to use BS default, @font-family-base
 @headings-font-weight:    500;
+@headings-line-height:    1.1;
 
 
 // Components
 // -------------------------
-// Based on 14px font-size and 1.5 line-height
+// Based on 14px font-size and 1.428 line-height (~20px to start)
 
-@padding-large:           11px 14px; // 44px
-@padding-small:           2px 10px;  // 26px
-@padding-mini:            0 6px;   // 22px
+@padding-base-vertical:          8px;
+@padding-base-horizontal:        12px;
 
-@border-radius-base:      4px;
-@border-radius-large:     6px;
-@border-radius-small:     3px;
+@padding-large-vertical:         14px;
+@padding-large-horizontal:       16px;
+
+@padding-small-vertical:         5px;
+@padding-small-horizontal:       10px;
+
+@border-radius-base:             4px;
+@border-radius-large:            6px;
+@border-radius-small:            3px;
 
 @component-active-bg:            @brand-primary;
 
@@ -123,11 +127,11 @@
 
 @input-color-placeholder:        @gray-light;
 
-@input-height-base:              (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
-@input-height-large:             (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
-@input-height-small:             (@line-height-computed + 6px);  // base line-height + 4px vertical padding + 2px top/bottom border
+@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2));
+@input-height-large:             (@line-height-computed + (@padding-large-vertical * 2));
+@input-height-small:             (@line-height-computed + (@padding-small-vertical * 2));
 
-@form-actions-bg:                 #f5f5f5;
+@form-actions-bg:                #f5f5f5;
 
 
 // Dropdowns