aboutsummaryrefslogtreecommitdiff
path: root/less/forms.less
diff options
context:
space:
mode:
authorJames Friend <[email protected]>2014-08-28 09:32:08 +0800
committerJames Friend <[email protected]>2014-08-28 09:32:08 +0800
commit9aeaf19b1dca68ee71e916ae415a0c270a47d301 (patch)
treebc8385acb8ec7a46bba03ff2ef7e4283cd9f1146 /less/forms.less
parente7991a9a1e2f474c8f1d8a2e0ed113816f1c5e82 (diff)
parent35f09315ed543a0479719afa2143240952c215db (diff)
downloadbootstrap-9aeaf19b1dca68ee71e916ae415a0c270a47d301.tar.xz
bootstrap-9aeaf19b1dca68ee71e916ae415a0c270a47d301.zip
Merge remote-tracking branch 'upstream/master' into node-requirable
Conflicts: Gruntfile.js
Diffstat (limited to 'less/forms.less')
-rw-r--r--less/forms.less107
1 files changed, 78 insertions, 29 deletions
diff --git a/less/forms.less b/less/forms.less
index 2f629b0a1..6077ae7a3 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -183,9 +183,26 @@ input[type="month"] {
&.input-sm {
line-height: @input-height-small;
+ line-height: @line-height-small ~"\0";
}
&.input-lg {
line-height: @input-height-large;
+ line-height: @line-height-large ~"\0";
+ }
+}
+
+// IE 11 hack to reverse the iOS temporal input hack.
+_:-ms-fullscreen, :root input[type="date"],
+_:-ms-fullscreen, :root input[type="time"],
+_:-ms-fullscreen, :root input[type="datetime-local"],
+_:-ms-fullscreen, :root input[type="month"] {
+ line-height: @line-height-base;
+
+ &.input-sm {
+ line-height: @line-height-small;
+ }
+ &.input-lg {
+ line-height: @line-height-large;
}
}
@@ -208,11 +225,11 @@ input[type="month"] {
.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;
@@ -281,16 +298,38 @@ input[type="checkbox"] {
}
+// 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
//
// 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);
}
@@ -311,7 +350,7 @@ 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;
@@ -319,6 +358,7 @@ input[type="checkbox"] {
height: @input-height-base;
line-height: @input-height-base;
text-align: center;
+ pointer-events: none;
}
.input-lg + .form-control-feedback {
width: @input-height-large;
@@ -342,20 +382,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 {
-// Reposition feedback icon if label is hidden with "screenreader only" state
-.has-feedback label.sr-only ~ .form-control-feedback {
- top: 0;
-}
-
-
-// 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;
+ }
}
@@ -372,7 +407,6 @@ input[type="checkbox"] {
}
-
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@@ -402,6 +436,11 @@ input[type="checkbox"] {
vertical-align: middle;
}
+ // Make static controls behave like regular ones
+ .form-control-static {
+ display: inline-block;
+ }
+
.input-group {
display: inline-table;
vertical-align: middle;
@@ -439,14 +478,11 @@ input[type="checkbox"] {
}
.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;
}
@@ -484,11 +520,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) {
@@ -504,7 +535,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);
+ }
+ }
+ }
}