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:
parent
2f955907f9
commit
1a5fb4ef24
|
@ -3368,7 +3368,6 @@ select[multiple].input-lg {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-horizontal .control-label,
|
|
||||||
.form-horizontal .radio,
|
.form-horizontal .radio,
|
||||||
.form-horizontal .checkbox,
|
.form-horizontal .checkbox,
|
||||||
.form-horizontal .radio-inline,
|
.form-horizontal .radio-inline,
|
||||||
|
@ -3395,6 +3394,8 @@ select[multiple].input-lg {
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.form-horizontal .control-label {
|
.form-horizontal .control-label {
|
||||||
|
padding-top: 7px;
|
||||||
|
margin-bottom: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2615,7 +2615,6 @@ select[multiple].input-lg {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.form-horizontal .control-label,
|
|
||||||
.form-horizontal .radio,
|
.form-horizontal .radio,
|
||||||
.form-horizontal .checkbox,
|
.form-horizontal .checkbox,
|
||||||
.form-horizontal .radio-inline,
|
.form-horizontal .radio-inline,
|
||||||
|
@ -2638,6 +2637,8 @@ select[multiple].input-lg {
|
||||||
}
|
}
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.form-horizontal .control-label {
|
.form-horizontal .control-label {
|
||||||
|
padding-top: 7px;
|
||||||
|
margin-bottom: 0;
|
||||||
text-align: right;
|
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
|
@ -413,8 +413,9 @@ input[type="checkbox"],
|
||||||
|
|
||||||
.form-horizontal {
|
.form-horizontal {
|
||||||
|
|
||||||
// Consistent vertical alignment of labels, radios, and checkboxes
|
// Consistent vertical alignment of radios and checkboxes
|
||||||
.control-label,
|
//
|
||||||
|
// Labels also get some reset styles, but that is scope to a media query below.
|
||||||
.radio,
|
.radio,
|
||||||
.checkbox,
|
.checkbox,
|
||||||
.radio-inline,
|
.radio-inline,
|
||||||
|
@ -440,10 +441,13 @@ input[type="checkbox"],
|
||||||
padding-bottom: (@padding-base-vertical + 1);
|
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) {
|
@media (min-width: @screen-sm-min) {
|
||||||
.control-label {
|
.control-label {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue