Simplify input and input group sizing

* Remove .input-mini because who really needs inputs that small
* Remove unnecessary border-radius resets from large and small input groups
This commit is contained in:
Mark Otto
2013-02-02 17:31:26 -08:00
parent 04aae2f56c
commit 6993fadf7e
5 changed files with 84 additions and 53 deletions

View File

@@ -270,22 +270,15 @@ input[type="tel"],
input[type="color"],
.uneditable-input {
&.input-large {
padding: @padding-large-input;
padding: @padding-large;
font-size: @font-size-large;
border-radius: @border-radius-large;
min-height: @input-height-large;
}
&.input-small {
min-height: @input-height-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;
}
}
@@ -480,7 +473,7 @@ select:focus:invalid {
font-size: @font-size-small;
}
&.input-large {
padding: @padding-large-input;
padding: @padding-large;
font-size: @font-size-large;
}
}
@@ -492,11 +485,9 @@ select:focus:invalid {
.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 {
@@ -508,11 +499,9 @@ select:focus:invalid {
.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 {

View File

@@ -64,9 +64,10 @@
@padding-small: 2px 10px; // 26px
@padding-mini: 0 6px; // 22px
@padding-large-input: 10px 14px; // 44px
/*@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;