reset input and button heights with updated padding

5 files changed, 33 insertions, 40 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8bbbf4657..925aae141 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -713,20 +713,24 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   display: inline-block;
-  height: 20px;
-  padding: 4px 6px;
-  margin-bottom: 9px;
+  min-height: 34px;
+  padding: 6px 9px;
+  margin-bottom: 10px;
   font-size: 14px;
   line-height: 20px;
   color: #555555;
   vertical-align: middle;
+  background-color: #ffffff;
   border-radius: 4px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
 input,
 textarea,
 .uneditable-input {
-  width: 206px;
+  width: 220px;
 }
 
 textarea {
@@ -749,7 +753,6 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  background-color: #ffffff;
   border: 1px solid #cccccc;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -806,15 +809,14 @@ input[type="checkbox"] {
 
 select,
 input[type="file"] {
-  height: 30px;
+  height: 34px;
   /* 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: 30px;
+  line-height: 34px;
 }
 
 select {
   width: 220px;
-  background-color: #ffffff;
   border: 1px solid #cccccc;
 }
 
@@ -1466,7 +1468,7 @@ select:focus:required:invalid:focus {
   width: auto;
   height: 20px;
   min-width: 16px;
-  padding: 4px 5px;
+  padding: 6px;
   font-size: 14px;
   font-weight: normal;
   line-height: 20px;
@@ -1559,7 +1561,7 @@ input.search-query {
   /* IE8 doesn't have border radius, so don't indent the padding */
 
   margin-bottom: 0;
-  border-radius: 15px;
+  border-radius: 20px;
 }
 
 /* Allow for input prepend/append in search forms */
@@ -1570,19 +1572,19 @@ input.search-query {
 }
 
 .form-search .input-append .search-query {
-  border-radius: 14px 0 0 14px;
+  border-radius: 20px 0 0 20px;
 }
 
 .form-search .input-append .btn {
-  border-radius: 0 14px 14px 0;
+  border-radius: 0 20px 20px 0;
 }
 
 .form-search .input-prepend .search-query {
-  border-radius: 0 14px 14px 0;
+  border-radius: 0 20px 20px 0;
 }
 
 .form-search .input-prepend .btn {
-  border-radius: 14px 0 0 14px;
+  border-radius: 20px 0 0 20px;
 }
 
 .form-search input,
@@ -2731,7 +2733,7 @@ button.close {
 
 .btn {
   display: inline-block;
-  padding: 4px 12px;
+  padding: 6px 12px;
   margin-bottom: 0;
   font-size: 14px;
   line-height: 20px;
@@ -5257,10 +5259,6 @@ a.badge:hover {
 .control-block-level {
   display: block;
   width: 100%;
-  min-height: 30px;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
 }
 
 .hidden {
@@ -5720,10 +5718,6 @@ a.badge:hover {
   .uneditable-input {
     display: block;
     width: 100%;
-    min-height: 30px;
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-            box-sizing: border-box;
   }
   .input-prepend input,
   .input-append input,
diff --git a/less/buttons.less b/less/buttons.less
index 15e69337f..9974d8402 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -9,7 +9,7 @@
 // Core
 .btn {
   display: inline-block;
-  padding: 4px 12px;
+  padding: 6px 12px;
   margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
diff --git a/less/forms.less b/less/forms.less
index 84d93842c..c2a083c4d 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -79,14 +79,16 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   display: inline-block;
-  height: @baseLineHeight;
-  padding: 4px 6px;
-  margin-bottom: 9px;
+  .box-sizing(border-box); // Makes inputs behave like true block-level elements
+  min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: 6px 9px;
+  margin-bottom: @baseLineHeight / 2;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @gray;
-  border-radius: @inputBorderRadius;
   vertical-align: middle;
+  background-color: @inputBackground;
+  border-radius: @inputBorderRadius;
 }
 
 // Reset appearance properties for textual inputs and textarea
@@ -94,7 +96,7 @@ input[type="color"],
 input,
 textarea,
 .uneditable-input {
-  width: 206px; // plus 12px padding and 2px border
+  width: 220px;
 }
 // Reset height since textareas have rows
 textarea {
@@ -117,7 +119,6 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  background-color: @inputBackground;
   border: 1px solid @inputBorder;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   .transition(~"border linear .2s, box-shadow linear .2s");
@@ -162,7 +163,6 @@ input[type="file"] {
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
   border: 1px solid @inputBorder;
-  background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
 }
 
 // Make multiple select elements height not fixed
@@ -475,7 +475,7 @@ select:focus:required:invalid {
     width: auto;
     height: @baseLineHeight;
     min-width: 16px;
-    padding: 4px 5px;
+    padding: 6px;
     font-size: @baseFontSize;
     font-weight: normal;
     line-height: @baseLineHeight;
@@ -564,7 +564,7 @@ input.search-query {
   padding-left: 14px;
   padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
   margin-bottom: 0; // Remove the default margin on all inputs
-  border-radius: 15px;
+  border-radius: @inputSearchBorderRadius;
 }
 
 /* Allow for input prepend/append in search forms */
@@ -573,16 +573,16 @@ input.search-query {
   border-radius: 0; // Override due to specificity
 }
 .form-search .input-append .search-query {
-  border-radius: 14px 0 0 14px;
+  border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
 }
 .form-search .input-append .btn {
-  border-radius: 0 14px 14px 0;
+  border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
 }
 .form-search .input-prepend .search-query {
-  border-radius: 0 14px 14px 0;
+  border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
 }
 .form-search .input-prepend .btn {
-  border-radius: 14px 0 0 14px;
+  border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
 }
 
 
diff --git a/less/mixins.less b/less/mixins.less
index 8cd741d2d..13f3acbdc 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -128,8 +128,6 @@
 .input-block-level() {
   display: block;
   width: 100%;
-  min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  .box-sizing(border-box); // Makes inputs behave like true block-level elements
 }
 
 
diff --git a/less/variables.less b/less/variables.less
index fd7478cb6..5dd90206c 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -111,9 +111,10 @@
 @inputBackground:               @white;
 @inputBorder:                   #ccc;
 @inputBorderRadius:             @baseBorderRadius;
+@inputSearchBorderRadius:       20px;
 @inputDisabledBackground:       @grayLighter;
 @formActionsBackground:         #f5f5f5;
-@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+@inputHeight:                   @baseLineHeight + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
 
 
 // Dropdowns