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.less120
1 files changed, 82 insertions, 38 deletions
diff --git a/bower_components/bootstrap/less/forms.less b/bower_components/bootstrap/less/forms.less
index dc425ecc..d0189d0c 100644
--- a/bower_components/bootstrap/less/forms.less
+++ b/bower_components/bootstrap/less/forms.less
@@ -11,6 +11,10 @@ fieldset {
padding: 0;
margin: 0;
border: 0;
+ // Chrome and Firefox set a `min-width: -webkit-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;
}
legend {
@@ -33,6 +37,10 @@ label {
// Normalize form controls
+//
+// While most of our form styles require extra classes, some basic normalization
+// is required to ensure optimum display with or without those classes to better
+// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
@@ -47,41 +55,30 @@ input[type="checkbox"] {
line-height: normal;
}
-// Set the height of select and file controls to match text inputs
+// Set the height of file controls to match text inputs
input[type="file"] {
display: block;
}
+// Make range inputs behave like textual form controls
+input[type="range"] {
+ display: block;
+ width: 100%;
+}
+
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
-// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
-select optgroup {
- font-size: inherit;
- font-style: inherit;
- font-family: inherit;
-}
-
-// Focus for select, file, radio, and checkbox
+// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
-// Fix for Chrome number input
-// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
-// See https://github.com/twbs/bootstrap/issues/8350 for more.
-input[type="number"] {
- &::-webkit-outer-spin-button,
- &::-webkit-inner-spin-button {
- height: auto;
- }
-}
-
// Adjust output element
output {
display: block;
@@ -89,7 +86,6 @@ output {
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
- vertical-align: middle;
}
@@ -123,7 +119,6 @@ output {
font-size: @font-size-base;
line-height: @line-height-base;
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;
@@ -135,9 +130,6 @@ output {
.form-control-focus();
// Placeholder
- //
- // Placeholder text gets special styles because when browsers invalidate entire
- // lines if it doesn't understand a selector/
.placeholder();
// Disabled and read-only inputs
@@ -149,6 +141,7 @@ output {
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
+ opacity: 1; // iOS fix for unreadable disabled content
}
// Reset height for `textarea`s
@@ -157,6 +150,14 @@ output {
}
}
+// Special styles for iOS date input
+//
+// In Mobile Safari, date inputs require a pixel line-height that matches the
+// given height of the input.
+input[type="date"] {
+ line-height: @input-height-base;
+}
+
// Form groups
//
@@ -179,10 +180,8 @@ output {
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
- vertical-align: middle;
label {
display: inline;
- margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
@@ -230,7 +229,12 @@ input[type="checkbox"],
}
}
+
// 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-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
@@ -244,18 +248,38 @@ input[type="checkbox"],
//
// Apply contextual and semantic states to individual form controls.
-// Warning
+.has-feedback {
+ // Enable absolute positioning
+ position: relative;
+
+ // Ensure icons don't overlap text
+ .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 states
+.has-success {
+ .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
-// Error
.has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
-// Success
-.has-success {
- .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
-}
// Static form control text
@@ -296,9 +320,9 @@ input[type="checkbox"],
.form-inline {
// Kick in the inline
- @media (min-width: @screen-sm) {
+ @media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
- .form-group {
+ .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
@@ -307,11 +331,13 @@ input[type="checkbox"],
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
+ width: auto; // Prevent labels from stacking above inputs in `.form-group`
+ vertical-align: middle;
}
- // Override `width: 100%;` when not within a `.form-group`
- select.form-control {
- width: auto;
+ .control-label {
+ margin-bottom: 0;
+ vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
@@ -323,12 +349,21 @@ input[type="checkbox"],
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
+ vertical-align: middle;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
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.
+ .has-feedback .form-control-feedback {
+ top: 0;
+ }
}
}
@@ -354,7 +389,7 @@ input[type="checkbox"],
// and other content below items
.radio,
.checkbox {
- min-height: @line-height-computed + (@padding-base-vertical + 1);
+ min-height: (@line-height-computed + (@padding-base-vertical + 1));
}
// Make form groups behave like rows
@@ -372,4 +407,13 @@ input[type="checkbox"],
text-align: right;
}
}
+
+ // 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.
+ .has-feedback .form-control-feedback {
+ top: 0;
+ right: (@grid-gutter-width / 2);
+ }
}