Fixes #12843: Scope label styles for horizontal forms to a media query so their narrow viewport display looks just like a normal form

This commit is contained in:
Mark Otto 2014-03-09 17:22:52 -07:00
parent 2f955907f9
commit 1a5fb4ef24
9 changed files with 17 additions and 11 deletions

View File

@ -3368,7 +3368,6 @@ select[multiple].input-lg {
}
}
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
@ -3395,6 +3394,8 @@ select[multiple].input-lg {
@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: left;
}
}

File diff suppressed because one or more lines are too long

View File

@ -2615,7 +2615,6 @@ select[multiple].input-lg {
top: 0;
}
}
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
@ -2638,6 +2637,8 @@ select[multiple].input-lg {
}
@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -413,8 +413,9 @@ input[type="checkbox"],
.form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes
.control-label,
// Consistent vertical alignment of radios and checkboxes
//
// Labels also get some reset styles, but that is scope to a media query below.
.radio,
.checkbox,
.radio-inline,
@ -440,10 +441,13 @@ input[type="checkbox"],
padding-bottom: (@padding-base-vertical + 1);
}
// Only right align form labels here when the columns stop stacking
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
}