fixes #5127: add @inputHeight to replace static instances of '30px' throughout forms

This commit is contained in:
Mark Otto 2012-09-20 11:45:59 -07:00
parent 532ee08213
commit c92a75999f
4 changed files with 10 additions and 9 deletions

View File

@ -1148,14 +1148,14 @@ textarea::-webkit-input-placeholder {
.radio, .radio,
.checkbox { .checkbox {
min-height: 18px; min-height: 20px;
padding-left: 18px; padding-left: 20px;
} }
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: -18px; margin-left: -20px;
} }
.controls > .radio:first-child, .controls > .radio:first-child,

View File

@ -154,9 +154,9 @@ input[type="checkbox"] {
// Set the height of select and file controls to match text inputs // Set the height of select and file controls to match text inputs
select, select,
input[type="file"] { input[type="file"] {
height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: 30px; line-height: @inputHeight;
} }
// Make select elements obey height by applying a border // Make select elements obey height by applying a border
@ -223,13 +223,13 @@ textarea {
// Indent the labels to position radios/checkboxes as hanging // Indent the labels to position radios/checkboxes as hanging
.radio, .radio,
.checkbox { .checkbox {
min-height: 18px; // clear the floating input if there is no label text min-height: @baseLineHeight; // clear the floating input if there is no label text
padding-left: 18px; padding-left: 20px;
} }
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: -18px; margin-left: -20px;
} }
// Move the options list down to align with labels // Move the options list down to align with labels

View File

@ -154,7 +154,7 @@
.input-block-level { .input-block-level {
display: block; display: block;
width: 100%; width: 100%;
min-height: 30px; // Make inputs at least the height of their button counterpart 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 .box-sizing(border-box); // Makes inputs behave like true block-level elements
} }

View File

@ -114,6 +114,7 @@
@inputBorderRadius: @baseBorderRadius; @inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5; @formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns // Dropdowns