rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Update line-height and padding for input sizes

Browse Source
This commit is contained in:
Gil Barbara 2013-01-31 19:00:22 -02:00
parent d44acb7f88
commit e69912c163
2 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
less/forms.less
View File

@ -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;
}
}
}

13
less/variables.less
View File

@ -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;