aboutsummaryrefslogtreecommitdiff
path: root/less/forms.less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-07-07 22:10:22 -0700
committerMark Otto <[email protected]>2014-07-07 22:10:22 -0700
commit81b59d35368bc51d361d0352cc92fe99dc580fbf (patch)
tree2395d5e79edaaa8c0a7ad82e99931ec895421532 /less/forms.less
parentfed2b0f7eb78438eb1b768782b04651881d88740 (diff)
parentddee04038f946ac103eb4e70c8eb7adeb2cf563b (diff)
downloadbootstrap-81b59d35368bc51d361d0352cc92fe99dc580fbf.tar.xz
bootstrap-81b59d35368bc51d361d0352cc92fe99dc580fbf.zip
Merge branch 'master' into derp
Conflicts: docs/_layouts/default.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/docs.min.js docs/assets/js/src/application.js
Diffstat (limited to 'less/forms.less')
-rw-r--r--less/forms.less127
1 files changed, 94 insertions, 33 deletions
diff --git a/less/forms.less b/less/forms.less
index 8578e8ce6..baeea7ca6 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -11,7 +11,7 @@ fieldset {
padding: 0;
margin: 0;
border: 0;
- // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets,
+ // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0;
@@ -31,6 +31,7 @@ legend {
label {
display: inline-block;
+ max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
margin-bottom: 5px;
font-weight: bold;
}
@@ -164,13 +165,18 @@ input[type="search"] {
}
-// Special styles for iOS date input
+// Special styles for iOS temporal inputs
//
-// In Mobile Safari, date inputs require a pixel line-height that matches the
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned.
+// As a workaround, we set a pixel line-height that matches the
// given height of the input. Since this fucks up everything else, we have to
// appropriately reset it for Internet Explorer and the size variations.
-input[type="date"] {
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
line-height: @input-height-base;
// IE8+ misaligns the text within date inputs, so we reset
line-height: @line-height-base ~"\0";
@@ -200,12 +206,13 @@ input[type="date"] {
.radio,
.checkbox {
+ position: relative;
display: block;
- min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
label {
+ min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
@@ -216,9 +223,11 @@ input[type="date"] {
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
- float: left;
+ position: absolute;
margin-left: -20px;
+ margin-top: 4px \9;
}
+
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
@@ -241,19 +250,55 @@ input[type="date"] {
}
// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
-input[type="checkbox"],
-.radio,
+input[type="checkbox"] {
+ &[disabled],
+ &.disabled,
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ }
+}
+// These classes are used directly on <label>s
.radio-inline,
-.checkbox,
.checkbox-inline {
- &[disabled],
+ &.disabled,
fieldset[disabled] & {
cursor: not-allowed;
}
}
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+ &.disabled,
+ fieldset[disabled] & {
+ label {
+ cursor: not-allowed;
+ }
+ }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+ // Size it appropriately next to real form controls
+ padding-top: (@padding-base-vertical + 1);
+ padding-bottom: (@padding-base-vertical + 1);
+ // Remove default margin from `p`
+ margin-bottom: 0;
+
+ &.input-lg,
+ &.input-sm {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
// Form control sizing
@@ -261,11 +306,13 @@ input[type="checkbox"],
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
-.input-sm {
+.input-sm,
+.form-group-sm .form-control {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
-.input-lg {
+.input-lg,
+.form-group-lg .form-control {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
@@ -286,8 +333,9 @@ input[type="checkbox"],
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
- top: (@line-height-computed + 5); // Height of the `label` and its margin
+ top: 0;
right: 0;
+ z-index: 2; // Ensure icon is above input groups
display: block;
width: @input-height-base;
height: @input-height-base;
@@ -316,14 +364,15 @@ input[type="checkbox"],
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
+// Reposition feedback icon if input has visible label above
+.has-feedback label {
-// Static form control text
-//
-// Apply class to a `p` element to make any string of text align with labels in
-// a horizontal form layout.
-
-.form-control-static {
- margin-bottom: 0; // Remove default margin from `p`
+ & ~ .form-control-feedback {
+ top: (@line-height-computed + 5); // Height of the `label` and its margin
+ }
+ &.sr-only ~ .form-control-feedback {
+ top: 0;
+ }
}
@@ -340,7 +389,6 @@ input[type="checkbox"],
}
-
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@@ -399,19 +447,19 @@ input[type="checkbox"],
display: inline-block;
margin-top: 0;
margin-bottom: 0;
- padding-left: 0;
vertical-align: middle;
+
+ label {
+ padding-left: 0;
+ }
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
- float: none;
+ position: relative;
margin-left: 0;
}
- // Validation states
- //
- // Reposition the icon because it's now within a grid column and columns have
- // `position: relative;` on them. Also accounts for the grid gutter padding.
+ // Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
}
@@ -449,11 +497,6 @@ input[type="checkbox"],
.make-row();
}
- .form-control-static {
- padding-top: (@padding-base-vertical + 1);
- padding-bottom: (@padding-base-vertical + 1);
- }
-
// 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) {
@@ -469,7 +512,25 @@ input[type="checkbox"],
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
- top: 0;
right: (@grid-gutter-width / 2);
}
+
+ // Form group sizes
+ //
+ // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+ // inputs and labels within a `.form-group`.
+ .form-group-lg {
+ @media (min-width: @screen-sm-min) {
+ .control-label {
+ padding-top: ((@padding-large-vertical * @line-height-large) + 1);
+ }
+ }
+ }
+ .form-group-sm {
+ @media (min-width: @screen-sm-min) {
+ .control-label {
+ padding-top: (@padding-small-vertical + 1);
+ }
+ }
+ }
}