summaryrefslogtreecommitdiff
path: root/bower_components/bootstrap/less/forms.less
diff options
context:
space:
mode:
Diffstat (limited to 'bower_components/bootstrap/less/forms.less')
-rw-r--r--bower_components/bootstrap/less/forms.less186
1 files changed, 144 insertions, 42 deletions
diff --git a/bower_components/bootstrap/less/forms.less b/bower_components/bootstrap/less/forms.less
index f607b850..2c5e9bfa 100644
--- a/bower_components/bootstrap/less/forms.less
+++ b/bower_components/bootstrap/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;
}
@@ -51,7 +52,7 @@ input[type="search"] {
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
- margin-top: 1px \9; /* IE8-9 */
+ margin-top: 1px \9; // IE8-9
line-height: normal;
}
@@ -164,13 +165,28 @@ 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
-// given height of the input.
-
-input[type="date"] {
+// 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="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";
+
+ &.input-sm {
+ line-height: @input-height-small;
+ }
+ &.input-lg {
+ line-height: @input-height-large;
+ }
}
@@ -190,13 +206,15 @@ 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;
- padding-left: 20px;
+
label {
- display: inline;
+ padding-left: 20px;
+ margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
@@ -205,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
@@ -230,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
@@ -271,18 +327,28 @@ input[type="checkbox"],
.form-control {
padding-right: (@input-height-base * 1.25);
}
-
- // Feedback icon (requires .glyphicon classes)
- .form-control-feedback {
- position: absolute;
- top: (@line-height-computed + 5); // Height of the `label` and its margin
- right: 0;
- display: block;
- width: @input-height-base;
- height: @input-height-base;
- line-height: @input-height-base;
- text-align: center;
- }
+}
+// Feedback icon (requires .glyphicon classes)
+.form-control-feedback {
+ position: absolute;
+ top: (@line-height-computed + 5); // Height of the `label` and its margin
+ right: 0;
+ z-index: 2; // Ensure icon is above input groups
+ display: block;
+ width: @input-height-base;
+ height: @input-height-base;
+ line-height: @input-height-base;
+ text-align: center;
+}
+.input-lg + .form-control-feedback {
+ width: @input-height-large;
+ height: @input-height-large;
+ line-height: @input-height-large;
+}
+.input-sm + .form-control-feedback {
+ width: @input-height-small;
+ height: @input-height-small;
+ line-height: @input-height-small;
}
// Feedback states
@@ -297,13 +363,9 @@ 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 {
- margin-bottom: 0; // Remove default margin from `p`
+// Reposition feedback icon if label is hidden with "screenreader only" state
+.has-feedback label.sr-only ~ .form-control-feedback {
+ top: 0;
}
@@ -349,6 +411,18 @@ input[type="checkbox"],
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
+
+ .input-group {
+ display: inline-table;
+ vertical-align: middle;
+
+ .input-group-addon,
+ .input-group-btn,
+ .form-control {
+ width: auto;
+ }
+ }
+
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
@@ -367,12 +441,15 @@ 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;
}
@@ -394,8 +471,9 @@ input[type="checkbox"],
.form-horizontal {
- // Consistent vertical alignment of labels, radios, and checkboxes
- .control-label,
+ // Consistent vertical alignment of radios and checkboxes
+ //
+ // Labels also get some reset styles, but that is scoped to a media query below.
.radio,
.checkbox,
.radio-inline,
@@ -416,14 +494,13 @@ input[type="checkbox"],
.make-row();
}
- .form-control-static {
- padding-top: (@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) {
.control-label {
text-align: right;
+ margin-bottom: 0;
+ padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
}
@@ -435,4 +512,29 @@ input[type="checkbox"],
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-control {
+ &:extend(.input-lg);
+ }
+ }
+ .form-group-sm {
+ @media (min-width: @screen-sm-min) {
+ .control-label {
+ padding-top: (@padding-small-vertical + 1);
+ }
+ }
+ .form-control {
+ &:extend(.input-sm);
+ }
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-20 12:03:09 +0000