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

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 354dd25fe43d4a97fe76450416ab6b84ca4fe0d5..046cc20a5bd50dfcd41b3dfe3a89b01a5f56b31e 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -283,7 +283,7 @@ html {
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  line-height: 1.428;
+  line-height: 1.428571429;
   color: #333333;
   background-color: #ffffff;
 }
@@ -415,7 +415,6 @@ h6,
 .h4,
 .h5,
 .h6 {
-  font-family: inherit;
   font-weight: 500;
   line-height: 1.1;
 }
@@ -518,7 +517,7 @@ ol ul {
 }
 
 li {
-  line-height: 1.428;
+  line-height: 1.428571429;
 }
 
 .list-unstyled {
@@ -543,7 +542,7 @@ dl {
 
 dt,
 dd {
-  line-height: 1.428;
+  line-height: 1.428571429;
 }
 
 dt {
@@ -625,7 +624,7 @@ blockquote p:last-child {
 
 blockquote small {
   display: block;
-  line-height: 1.428;
+  line-height: 1.428571429;
   color: #999999;
 }
 
@@ -665,7 +664,7 @@ address {
   display: block;
   margin-bottom: 20px;
   font-style: normal;
-  line-height: 1.428;
+  line-height: 1.428571429;
 }
 
 code,
@@ -690,7 +689,7 @@ pre {
   padding: 9.5px;
   margin: 0 0 10px;
   font-size: 13px;
-  line-height: 1.428;
+  line-height: 1.428571429;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
@@ -1018,7 +1017,7 @@ th {
 .table thead > tr > td,
 .table tbody > tr > td {
   padding: 8px;
-  line-height: 1.428;
+  line-height: 1.428571429;
   vertical-align: top;
   border-top: 1px solid #dddddd;
 }
@@ -1206,7 +1205,7 @@ legend {
   padding: 0;
   margin-bottom: 20px;
   font-size: 21px;
-  line-height: 1.1;
+  line-height: inherit;
   color: #333333;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
@@ -1235,10 +1234,10 @@ input[type="search"],
 input[type="tel"],
 input[type="color"] {
   display: block;
-  min-height: 34px;
-  padding: 6px 9px;
+  min-height: 36px;
+  padding: 8px 12px;
   font-size: 14px;
-  line-height: 1.428;
+  line-height: 1.428571429;
   color: #555555;
   vertical-align: middle;
   background-color: #ffffff;
@@ -1313,10 +1312,10 @@ input[type="checkbox"] {
 
 select,
 input[type="file"] {
-  height: 34px;
+  height: 36px;
   /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
 
-  line-height: 34px;
+  line-height: 36px;
 }
 
 select[multiple],
@@ -1424,7 +1423,7 @@ input[type="url"].input-large,
 input[type="search"].input-large,
 input[type="tel"].input-large,
 input[type="color"].input-large {
-  padding: 11px 14px;
+  padding: 14px 16px;
   font-size: 18px;
   border-radius: 6px;
 }
@@ -1445,8 +1444,8 @@ input[type="url"].input-small,
 input[type="search"].input-small,
 input[type="tel"].input-small,
 input[type="color"].input-small {
-  min-height: 26px;
-  padding: 2px 10px;
+  min-height: 30px;
+  padding: 5px 10px;
   font-size: 12px;
   border-radius: 3px;
 }
@@ -1612,7 +1611,7 @@ select:focus:invalid:focus {
   padding: 6px 8px;
   font-size: 14px;
   font-weight: normal;
-  line-height: 1.428;
+  line-height: 1.428571429;
   text-align: center;
   text-shadow: 0 1px 0 #fff;
   background-color: #eeeeee;
@@ -1624,13 +1623,13 @@ select:focus:invalid:focus {
 }
 
 .input-group-addon.input-small {
-  padding: 2px 10px;
+  padding: 5px 10px;
   font-size: 12px;
   border-radius: 3px;
 }
 
 .input-group-addon.input-large {
-  padding: 11px 14px;
+  padding: 14px 16px;
   font-size: 18px;
   border-radius: 6px;
 }
@@ -1710,11 +1709,11 @@ select:focus:invalid:focus {
 
 .btn {
   display: inline-block;
-  padding: 6px 12px;
+  padding: 8px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 500;
-  line-height: 1.428;
+  line-height: 1.428571429;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -1974,20 +1973,15 @@ fieldset[disabled] .btn-link:focus {
 }
 
 .btn-large {
-  padding: 11px 14px;
+  padding: 14px 16px;
   font-size: 18px;
   border-radius: 6px;
 }
 
 .btn-small {
-  padding: 2px 10px;
+  padding: 5px 10px;
   font-size: 12px;
-  border-radius: 3px;
-}
-
-.btn-mini {
-  padding: 0 6px;
-  font-size: 11px;
+  line-height: 1.5;
   border-radius: 3px;
 }
 
@@ -2750,7 +2744,7 @@ input[type="button"].btn-block {
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
-  line-height: 1.428;
+  line-height: 1.428571429;
   color: #333333;
   white-space: nowrap;
 }
@@ -3214,7 +3208,7 @@ button.close {
 
 .nav-tabs > li > a {
   margin-right: 2px;
-  line-height: 1.428;
+  line-height: 1.428571429;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
 }
@@ -3304,7 +3298,7 @@ button.close {
   padding: 3px 15px;
   font-size: 11px;
   font-weight: bold;
-  line-height: 1.428;
+  line-height: 1.428571429;
   color: #999999;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
@@ -3660,7 +3654,7 @@ button.close {
 }
 
 .navbar-btn {
-  margin-top: 8px;
+  margin-top: 7px;
 }
 
 .navbar-text {
@@ -3905,7 +3899,7 @@ button.close {
 .pagination > li > span {
   float: left;
   padding: 4px 12px;
-  line-height: 1.428;
+  line-height: 1.428571429;
   text-decoration: none;
   background-color: #ffffff;
   border: 1px solid #dddddd;
@@ -3949,7 +3943,7 @@ button.close {
 
 .pagination-large > li > a,
 .pagination-large > li > span {
-  padding: 11px 14px;
+  padding: 14px 16px;
   font-size: 18px;
 }
 
@@ -3965,34 +3959,24 @@ button.close {
   border-bottom-right-radius: 6px;
 }
 
-.pagination-mini > li:first-child > a,
+.pagination-small > li > a,
+.pagination-small > li > span {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+
 .pagination-small > li:first-child > a,
-.pagination-mini > li:first-child > span,
 .pagination-small > li:first-child > span {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
 
-.pagination-mini > li:last-child > a,
 .pagination-small > li:last-child > a,
-.pagination-mini > li:last-child > span,
 .pagination-small > li:last-child > span {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
-.pagination-small > li > a,
-.pagination-small > li > span {
-  padding: 2px 10px;
-  font-size: 12px;
-}
-
-.pagination-mini > li > a,
-.pagination-mini > li > span {
-  padding: 0 6px;
-  font-size: 11px;
-}
-
 .pager {
   margin: 20px 0;
   text-align: center;
@@ -4131,7 +4115,7 @@ button.close {
 }
 
 .modal-header {
-  min-height: 16.428px;
+  min-height: 16.428571429px;
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
 }
@@ -4142,7 +4126,7 @@ button.close {
 
 .modal-title {
   margin: 0;
-  line-height: 1.428;
+  line-height: 1.428571429;
 }
 
 .modal-body {
@@ -4523,7 +4507,7 @@ button.close {
 .thumbnail,
 .img-thumbnail {
   padding: 4px;
-  line-height: 1.428;
+  line-height: 1.428571429;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   border-radius: 4px;
@@ -5050,7 +5034,7 @@ a.list-group-item.active > .badge,
   margin-bottom: 30px;
   font-size: 21px;
   font-weight: 200;
-  line-height: 2.142;
+  line-height: 2.1428571435;
   color: inherit;
   background-color: #eeeeee;
 }

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 36f7cbd45cffb91a68bcf160665969b39aee1b63..7f2526f2113d54bd3ead6fd470fcacde6fbd22ea 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -294,6 +294,11 @@ body {
   margin: 0;
 }
 
+/* Forms */
+.bs-example-control-sizing input[type="text"] + input[type="text"] {
+  margin-top: 10px;
+}
+
 /* List groups */
 .bs-example > .list-group {
   max-width: 400px;

diff --git a/docs/components.html b/docs/components.html
index 01b76d812386e47c027497df9f0b3239d2413ef3..d192156dc94a119a46d9e7bb90a658165e6f5c1f 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -748,7 +748,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 {% endhighlight %}
 
     <h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
-    <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
+    <p>Button dropdowns work with buttons of all sizes.</p>
     <div class="bs-example">
       <div class="btn-toolbar" style="margin: 0;">
         <div class="btn-group">
@@ -775,18 +775,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
-        <div class="btn-group">
-          <button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
-            Mini button <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
-        </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
     </div><!-- /example -->
 {% highlight html %}
@@ -809,15 +797,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
     ...
   </ul>
 </div>
-
-<!-- Mini button group -->
-<div class="btn-group">
-  <button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
-    Mini button <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    ...
-  </ul>
 </div>
 {% endhighlight %}
 
@@ -1540,7 +1519,7 @@ body {
 
 
     <h3>Sizes</h3>
-    <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
+    <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code>  for additional sizes.</p>
     <div class="bs-example">
       <div>
         <ul class="pagination pagination-large">
@@ -1575,23 +1554,11 @@ body {
           <li><a href="#">&raquo;</a></li>
         </ul>
       </div>
-      <div>
-        <ul class="pagination pagination-mini">
-          <li><a href="#">&laquo;</a></li>
-          <li><a href="#">1</a></li>
-          <li><a href="#">2</a></li>
-          <li><a href="#">3</a></li>
-          <li><a href="#">4</a></li>
-          <li><a href="#">5</a></li>
-          <li><a href="#">&raquo;</a></li>
-        </ul>
-      </div>
     </div>
 {% highlight html %}
 <ul class="pagination pagination-large">...</ul>
 <ul class="pagination pagination">...</ul>
 <ul class="pagination pagination-small">...</ul>
-<ul class="pagination pagination-mini">...</ul>
 {% endhighlight %}
 
 

diff --git a/docs/css.html b/docs/css.html
index 520a252af621e4eeeccb3010741a041efa337666..2640e1688d24ae7f51ce4d4303e9fb4bf02a81f2 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -1625,7 +1625,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Relative sizing</h4>
     <p>Create larger or smaller form controls that match button sizes.</p>
-    <form class="bs-example" style="padding-bottom: 15px;">
+    <form class="bs-example bs-example-control-sizing">
       <div class="controls docs-input-sizes">
         <input class="input-large" type="text" placeholder=".input-large">
         <input type="text" placeholder="Default input">
@@ -1738,7 +1738,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h2 id="buttons-sizes">Button sizes</h2>
-    <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
+    <p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
     <div class="bs-example">
       <p>
         <button type="button" class="btn btn-primary btn-large">Large button</button>
@@ -1752,10 +1752,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <button type="button" class="btn btn-primary btn-small">Small button</button>
         <button type="button" class="btn btn-default btn-small">Small button</button>
       </p>
-      <p>
-        <button type="button" class="btn btn-primary btn-mini">Mini button</button>
-        <button type="button" class="btn btn-default btn-mini">Mini button</button>
-      </p>
     </div>
 {% highlight html %}
 <p>
@@ -1770,10 +1766,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <button type="button" class="btn btn-primary btn-small">Small button</button>
   <button type="button" class="btn btn-default btn-small">Small button</button>
 </p>
-<p>
-  <button type="button" class="btn btn-primary btn-mini">Mini button</button>
-  <button type="button" class="btn btn-default btn-mini">Mini button</button>
-</p>
 {% endhighlight %}
 
     <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>

diff --git a/less/buttons.less b/less/buttons.less
index 128971a4c2217d36a33f562cdc37e4ac04def870..6280d3448a2f86e9d90f61dbe8ab459775b89264 100644 (file)
--- 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 dacc4bb505832c523299931a988591cd416f4a93..c7b376cdaa29fc8dd78e0c502aad3c5fd6555b03 100644 (file)
--- 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 ec1eef27f92e1145cc873638c2b3104244e73e1c..73c063be04ccb60017d446008138180390c03ed6 100644 (file)
--- 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 e562bb2c2249f9ecb0fe1231fea8433106b40213..a95e5bff797979eda599cd38196636f40ed5c7cc 100644 (file)
--- 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 4feb9879a039e68758bfa872b72abfc4b5815dca..9cd8f830b3cb4a09cc0390db0b605ccaeee6f275 100644 (file)
--- 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