aboutsummaryrefslogtreecommitdiff
path: root/less/forms.less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-08-17 17:31:58 -0700
committerMark Otto <[email protected]>2013-08-17 17:31:58 -0700
commitba20e512ce53e7cc771ba06d492a01d48db6cc97 (patch)
tree30cebcbb796725c7dc06c9125714d83adbf585c3 /less/forms.less
parent2af9cf10ce2e93fe0ac07651d405abc484e4c608 (diff)
parente29c23afab2577e05cfaa41f64a20f1ca87222fc (diff)
downloadbootstrap-ba20e512ce53e7cc771ba06d492a01d48db6cc97.tar.xz
bootstrap-ba20e512ce53e7cc771ba06d492a01d48db6cc97.zip
Merge branch '3.0.0-wip' into bs3_theme
Conflicts: dist/css/bootstrap.min.css
Diffstat (limited to 'less/forms.less')
-rw-r--r--less/forms.less116
1 files changed, 59 insertions, 57 deletions
diff --git a/less/forms.less b/less/forms.less
index d0211eb14..c59cdd4d7 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -20,7 +20,7 @@ legend {
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: inherit;
- color: @gray-dark;
+ color: @legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
}
@@ -121,7 +121,7 @@ input[type="number"] {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
- color: @gray;
+ color: @input-color;
vertical-align: middle;
background-color: @input-bg;
border: 1px solid @input-border;
@@ -133,9 +133,9 @@ input[type="number"] {
.form-control-focus();
// Disabled and read-only inputs
- // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
- // disabled if the fieldset is disabled. Due to implementation difficulty,
- // we don't honor that edge case; we style them as disabled anyway.
+ // Note: HTML5 says that controls under a fieldset > legend:first-child won't
+ // be disabled if the fieldset is disabled. Due to implementation difficulty,
+ // we don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
@@ -207,44 +207,28 @@ input[type="number"] {
margin-left: 10px; // space out consecutive inline controls
}
-
-
-// Form control sizing
+// Apply same disabled cursor tweak as for inputs
//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-
-.input-lg {
- height: @input-height-large;
- padding: @padding-large-vertical @padding-large-horizontal;
- font-size: @font-size-large;
- line-height: @line-height-large;
- border-radius: @border-radius-large;
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"],
+.radio,
+.radio-inline,
+.checkbox,
+.checkbox-inline {
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ }
}
+
+// Form control sizing
.input-sm {
- height: @input-height-small;
- padding: @padding-small-vertical @padding-small-horizontal;
- font-size: @font-size-small;
- line-height: @line-height-small;
- border-radius: @border-radius-small;
+ .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
-select {
- &.input-lg {
- height: @input-height-large;
- line-height: @input-height-large;
- }
- &.input-sm {
- height: @input-height-small;
- line-height: @input-height-small;
- }
-}
-textarea {
- &.input-lg,
- &.input-sm {
- height: auto;
- }
+.input-lg {
+ .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
@@ -293,28 +277,46 @@ textarea {
// Inline forms
//
-// Make forms appear inline(-block).
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
- .form-control,
- .radio,
- .checkbox {
- display: inline-block;
- }
- // Remove default margin on radios/checkboxes that were used for stacking, and
- // then undo the floating of radios and checkboxes to match (which also avoids
- // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
- .radio,
- .checkbox {
- margin-top: 0;
- margin-bottom: 0;
- padding-left: 0;
- }
- .radio input[type="radio"],
- .checkbox input[type="checkbox"] {
- float: none;
- margin-left: 0;
+ // Kick in the inline
+ @media (min-width: @screen-tablet) {
+ // Inline-block all the things for "inline"
+ .form-group {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+
+ // In navbar-form, allow folks to *not* use `.form-group`
+ .form-control {
+ display: inline-block;
+ }
+
+ // Remove default margin on radios/checkboxes that were used for stacking, and
+ // then undo the floating of radios and checkboxes to match (which also avoids
+ // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
+ .radio,
+ .checkbox {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 0;
+ }
+ .radio input[type="radio"],
+ .checkbox input[type="checkbox"] {
+ float: none;
+ margin-left: 0;
+ }
}
}