}
}
+// Adjust output element
+output {
+ display: block;
+ padding-top: (@padding-base-vertical + 1);
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ color: @input-color;
+ vertical-align: middle;
+}
// Placeholder
//
color: @input-color;
vertical-align: middle;
background-color: @input-bg;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
- padding-top: @padding-base-vertical;
}
.form-inline {
// Kick in the inline
- @media (min-width: @screen-tablet) {
+ @media (min-width: @screen-sm) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
-.form-horizontal .control-label,
-.form-horizontal .radio-inline,
-.form-horizontal .checkbox-inline {
- padding-top: @padding-base-vertical;
-}
-
.form-horizontal {
+
+ // Consistent vertical alignment of labels, radios, and checkboxes
+ .control-label,
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+ }
+
+ // Make form groups behave like rows
.form-group {
.make-row();
}
-}
-// Only right align form labels here when the columns stop stacking
-@media (min-width: @screen-tablet) {
- .form-horizontal .control-label {
- text-align: right;
+ .form-control-static {
+ padding-top: (@padding-base-vertical + 1);
+ }
+
+ // Only right align form labels here when the columns stop stacking
+ @media (min-width: @screen-sm-min) {
+ .control-label {
+ text-align: right;
+ }
}
}