Update line-height and padding for input sizes

diff --git a/less/forms.less b/less/forms.less
index 0415f217e5b632db42b90a7207cd9a6e6d3461e9..8693fa35ded0ec0da62f0238fbf24e4863df0015 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -57,7 +57,7 @@ input[type="color"],
 .uneditable-input {
   display: inline-block;
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
-  min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
   // margin-bottom: @line-height-base / 2;
   font-size: @font-size-base;
@@ -134,8 +134,8 @@ input[type="checkbox"] {
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: @input-height; /* 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: @input-height;
+  height: @input-height-base; /* 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: @input-height-base;
 }
 
 // Make select elements obey height by applying a border
@@ -270,21 +270,22 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   &.input-large {
-    padding: @padding-large;
-    padding-left: 14px;
-    padding-right: 14px; // TODO: Resolve this override
+    padding: @padding-large-input;
     font-size: @font-size-large;
     border-radius: @border-radius-large;
+       min-height: @input-height-large;
   }
   &.input-small {
     padding: @padding-small;
     font-size: @font-size-small;
     border-radius: @border-radius-small;
+       min-height: @input-height-small;
   }
   &.input-mini {
     padding: @padding-mini;
     font-size: @font-size-mini;
     border-radius: @border-radius-small;
+       min-height: @input-height-small;
   }
 }
 
@@ -315,7 +316,7 @@ input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
 .uneditable-input[class*="span"] {
-  height: @input-height;
+  height: @input-height-base;
 }
 
 
@@ -474,6 +475,14 @@ select:focus:invalid {
 .input-group .uneditable-input:first-child,
 .input-group-addon:first-child {
   .border-left-radius(@border-radius-base);
+  &.input-small {
+    .border-left-radius(@border-radius-small);
+    .border-right-radius(0);
+  }
+  &.input-large {
+    .border-left-radius(@border-radius-large);
+    .border-right-radius(0);
+  }
 }
 .input-group-addon:first-child {
   border-right: 0;
@@ -482,6 +491,14 @@ select:focus:invalid {
 .input-group .uneditable-input:last-child,
 .input-group-addon:last-child {
   .border-right-radius(@border-radius-base);
+  &.input-small {
+    .border-right-radius(@border-radius-small);
+    .border-left-radius(0);
+  }
+  &.input-large {
+    .border-right-radius(@border-radius-large);
+    .border-left-radius(0);
+  }
 }
 .input-group-addon:last-child {
   border-left: 0;
@@ -512,6 +529,12 @@ select:focus:invalid {
   &:first-child > .btn,
   &.btn-group:first-child > .btn {
     border-radius: @border-radius-base 0 0 @border-radius-base;
+    &.btn-large {
+      border-radius:@border-radius-large 0 0 @border-radius-large;
+    }
+    &.btn-small {
+      border-radius:@border-radius-small 0 0 @border-radius-small;
+    }
   }
 }
 // Append
@@ -523,6 +546,12 @@ select:focus:invalid {
   &:last-child > .btn,
   &.btn-group:last-child > .btn {
     border-radius: 0 @border-radius-base @border-radius-base 0;
+    &.btn-large {
+      border-radius: 0 @border-radius-large @border-radius-large 0;
+    }
+    &.btn-small {
+      border-radius: 0 @border-radius-small @border-radius-small 0;
+    }
   }
 }
 

diff --git a/less/variables.less b/less/variables.less
index 538e2bd8b7b1f965c34e69c5dde98f44cb64cfd7..256959d64581a18d71c3ade10b569b9ef3de20e0 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -53,10 +53,14 @@
 // -------------------------
 // Based on 14px font-size and 1.5 line-height
 
-@padding-large:           11px 19px; // 44px
+@padding-large:           11px 14px; // 44px
 @padding-small:           2px 10px;  // 26px
 @padding-mini:            0 6px;   // 22px
 
+@padding-large-input:     10px 14px; // 44px
+// firefox hack since it doesn't accept custom line-height for inputs and automatically sets line-height as font-size + 4 px.
+// input-large at 18 + 4 = 22, so I tried to compensate on padding.
+
 @border-radius-base:      4px;
 @border-radius-large:     6px;
 @border-radius-small:     3px;
@@ -107,7 +111,12 @@
 
 @input-color-placeholder:        @grayLight;
 
-@input-height:                   @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
+@input-height-base:              @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
+@input-height-large:             @line-height-base + 24px; // base line-height + 22px vertical padding + 2px top/bottom border
+@input-height-small:             @line-height-base + 6px;  // base line-height + 4px vertical padding + 2px top/bottom border
+
+// adjust min-height on input sizes
+
 
 @form-actions-background:        #f5f5f5;