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.less423
1 files changed, 423 insertions, 0 deletions
diff --git a/bower_components/bootstrap/less/forms.less b/bower_components/bootstrap/less/forms.less
new file mode 100644
index 00000000..60e45767
--- /dev/null
+++ b/bower_components/bootstrap/less/forms.less
@@ -0,0 +1,423 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
+
+fieldset {
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+legend {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: @line-height-computed;
+ font-size: (@font-size-base * 1.5);
+ line-height: inherit;
+ color: @gray-dark;
+ border: 0;
+ border-bottom: 1px solid @legend-border-color;
+}
+
+label {
+ display: inline-block;
+ margin-bottom: 5px;
+ font-weight: bold;
+}
+
+
+// Normalize form controls
+
+// Override content-box in Normalize (* isn't specific enough)
+input[type="search"] {
+ .box-sizing(border-box);
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+ margin: 4px 0 0;
+ margin-top: 1px \9; /* IE8-9 */
+ line-height: normal;
+}
+
+// Set the height of select and file controls to match text inputs
+input[type="file"] {
+ display: block;
+}
+
+// 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
+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;
+ }
+}
+
+
+// Placeholder
+//
+// Placeholder text gets special styles because when browsers invalidate entire
+// lines if it doesn't understand a selector/
+.form-control {
+ .placeholder();
+}
+
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+ display: block;
+ width: 100%;
+ height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ padding: @padding-base-vertical @padding-base-horizontal;
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ color: @gray;
+ vertical-align: middle;
+ background-color: @input-bg;
+ border: 1px solid @input-border;
+ border-radius: @input-border-radius;
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+ .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+
+ &:focus {
+ border-color: rgba(82,168,236,.8);
+ outline: 0;
+ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+ }
+
+ // 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.
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ background-color: @input-bg-disabled;
+ }
+
+ // Reset height for `textarea`s
+ textarea& {
+ height: auto;
+ }
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+ margin-bottom: 15px;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.radio,
+.checkbox {
+ 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;
+ vertical-align: middle;
+ label {
+ display: inline;
+ margin-bottom: 0;
+ font-weight: normal;
+ cursor: pointer;
+ }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+ float: left;
+ margin-left: -20px;
+}
+.radio + .radio,
+.checkbox + .checkbox {
+ margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+ display: inline-block;
+ padding-left: 20px;
+ margin-bottom: 0;
+ vertical-align: middle;
+ font-weight: normal;
+ cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+ margin-top: 0;
+ margin-left: 10px; // space out consecutive inline controls
+}
+
+
+
+// Form control sizing
+//
+// 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!
+
+.form-control {
+ &.input-large {
+ height: @input-height-large;
+ padding: @padding-large-vertical @padding-large-horizontal;
+ font-size: @font-size-large;
+ border-radius: @border-radius-large;
+ }
+ &.input-small {
+ height: @input-height-small;
+ padding: @padding-small-vertical @padding-small-horizontal;
+ font-size: @font-size-small;
+ border-radius: @border-radius-small;
+ }
+}
+select {
+ &.input-large {
+ height: @input-height-large;
+ line-height: @input-height-large;
+ }
+ &.input-small {
+ height: @input-height-small;
+ line-height: @input-height-small;
+ }
+}
+
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+// Warning
+.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);
+}
+
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.help-block {
+ display: block; // account for any element using help-block
+ margin-top: 5px;
+ margin-bottom: 10px;
+ color: lighten(@text-color, 25%); // lighten the text some for contrast
+}
+
+
+
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+ display: table;
+ border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+ // Undo padding and float of grid classes
+ &.col {
+ float: none;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .form-control {
+ width: 100%;
+ margin-bottom: 0;
+ }
+}
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+ display: table-cell;
+
+ &:not(:first-child):not(:last-child) {
+ border-radius: 0;
+ }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+ width: 1%;
+ white-space: nowrap;
+ vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+ .box-sizing(border-box);
+ padding: @padding-base-vertical @padding-base-horizontal;
+ font-size: @font-size-base;
+ font-weight: normal;
+ line-height: @line-height-base;
+ text-align: center;
+ background-color: @gray-lighter;
+ border: 1px solid @input-group-addon-border-color;
+ border-radius: @border-radius-base;
+
+ &.input-small {
+ padding: @padding-small-vertical @padding-small-horizontal;
+ font-size: @font-size-small;
+ border-radius: @border-radius-small;
+ }
+ &.input-large {
+ padding: @padding-large-vertical @padding-large-horizontal;
+ font-size: @font-size-large;
+ border-radius: @border-radius-large;
+ }
+}
+
+// Reset rounded corners
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+ .border-right-radius(0);
+}
+.input-group-addon:first-child {
+ border-right: 0;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+ .border-left-radius(0);
+}
+.input-group-addon:last-child {
+ border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+ position: relative;
+ white-space: nowrap;
+}
+.input-group-btn > .btn {
+ position: relative;
+ // Jankily prevent input button groups from wrapping
+ + .btn {
+ margin-left: -4px;
+ }
+ // Bring the "active" button to the front
+ &:hover,
+ &:active {
+ z-index: 2;
+ }
+}
+
+
+// Inline forms
+// --------------------------------------------------
+
+.form-inline {
+ .form-control,
+ .radio,
+ .checkbox {
+ display: inline-block;
+ }
+ .radio,
+ .checkbox {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+
+// Horizontal forms
+// --------------------------------------------------
+// Horizontal forms are built on grid classes.
+
+.form-horizontal .control-label {
+ padding-top: 6px;
+}
+
+.form-horizontal {
+ .form-group {
+ .make-row();
+ }
+}
+
+// Only right align form labels here when the columns stop stacking
+@media (min-width: @screen-tablet) {
+ .form-horizontal .control-label {
+ text-align: right;
+ }
+}