rbowen / centos / centos.org

Forked from centos/centos.org 3 years ago
Clone

Blame content/assets/css/bootstrap/_forms.scss

e8ec7a
//
e8ec7a
// Forms
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
e8ec7a
// Normalize non-controls
e8ec7a
//
e8ec7a
// Restyle and baseline non-control form elements.
e8ec7a
e8ec7a
fieldset {
e8ec7a
  padding: 0;
e8ec7a
  margin: 0;
e8ec7a
  border: 0;
e8ec7a
}
e8ec7a
e8ec7a
legend {
e8ec7a
  display: block;
e8ec7a
  width: 100%;
e8ec7a
  padding: 0;
e8ec7a
  margin-bottom: $line-height-computed;
e8ec7a
  font-size: ($font-size-base * 1.5);
e8ec7a
  line-height: inherit;
e8ec7a
  color: $legend-color;
e8ec7a
  border: 0;
e8ec7a
  border-bottom: 1px solid $legend-border-color;
e8ec7a
}
e8ec7a
e8ec7a
label {
e8ec7a
  display: inline-block;
e8ec7a
  margin-bottom: 5px;
e8ec7a
  font-weight: bold;
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Normalize form controls
e8ec7a
e8ec7a
// Override content-box in Normalize (* isn't specific enough)
e8ec7a
input[type="search"] {
e8ec7a
  @include box-sizing(border-box);
e8ec7a
}
e8ec7a
e8ec7a
// Position radios and checkboxes better
e8ec7a
input[type="radio"],
e8ec7a
input[type="checkbox"] {
e8ec7a
  margin: 4px 0 0;
e8ec7a
  margin-top: 1px \9; /* IE8-9 */
e8ec7a
  line-height: normal;
e8ec7a
}
e8ec7a
e8ec7a
// Set the height of select and file controls to match text inputs
e8ec7a
input[type="file"] {
e8ec7a
  display: block;
e8ec7a
}
e8ec7a
e8ec7a
// Make multiple select elements height not fixed
e8ec7a
select[multiple],
e8ec7a
select[size] {
e8ec7a
  height: auto;
e8ec7a
}
e8ec7a
e8ec7a
// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
e8ec7a
select optgroup {
e8ec7a
  font-size: inherit;
e8ec7a
  font-style: inherit;
e8ec7a
  font-family: inherit;
e8ec7a
}
e8ec7a
e8ec7a
// Focus for select, file, radio, and checkbox
e8ec7a
input[type="file"]:focus,
e8ec7a
input[type="radio"]:focus,
e8ec7a
input[type="checkbox"]:focus {
e8ec7a
  @include tab-focus();
e8ec7a
}
e8ec7a
e8ec7a
// Fix for Chrome number input
e8ec7a
// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
e8ec7a
// See https://github.com/twbs/bootstrap/issues/8350 for more.
e8ec7a
input[type="number"] {
e8ec7a
  &::-webkit-outer-spin-button,
e8ec7a
  &::-webkit-inner-spin-button {
e8ec7a
    height: auto;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Placeholder
e8ec7a
//
e8ec7a
// Placeholder text gets special styles because when browsers invalidate entire
e8ec7a
// lines if it doesn't understand a selector/
e8ec7a
.form-control {
e8ec7a
  @include placeholder();
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Common form controls
e8ec7a
//
e8ec7a
// Shared size and type resets for form controls. Apply `.form-control` to any
e8ec7a
// of the following form controls:
e8ec7a
//
e8ec7a
// select
e8ec7a
// textarea
e8ec7a
// input[type="text"]
e8ec7a
// input[type="password"]
e8ec7a
// input[type="datetime"]
e8ec7a
// input[type="datetime-local"]
e8ec7a
// input[type="date"]
e8ec7a
// input[type="month"]
e8ec7a
// input[type="time"]
e8ec7a
// input[type="week"]
e8ec7a
// input[type="number"]
e8ec7a
// input[type="email"]
e8ec7a
// input[type="url"]
e8ec7a
// input[type="search"]
e8ec7a
// input[type="tel"]
e8ec7a
// input[type="color"]
e8ec7a
e8ec7a
.form-control {
e8ec7a
  display: block;
e8ec7a
  width: 100%;
e8ec7a
  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
e8ec7a
  padding: $padding-base-vertical $padding-base-horizontal;
e8ec7a
  font-size: $font-size-base;
e8ec7a
  line-height: $line-height-base;
e8ec7a
  color: $input-color;
e8ec7a
  vertical-align: middle;
e8ec7a
  background-color: $input-bg;
e8ec7a
  border: 1px solid $input-border;
e8ec7a
  border-radius: $input-border-radius;
e8ec7a
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
e8ec7a
  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
e8ec7a
e8ec7a
  // Customize the `:focus` state to imitate native WebKit styles.
e8ec7a
  @include form-control-focus();
e8ec7a
e8ec7a
  // Disabled and read-only inputs
e8ec7a
  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
e8ec7a
  // be disabled if the fieldset is disabled. Due to implementation difficulty,
e8ec7a
  // we don't honor that edge case; we style them as disabled anyway.
e8ec7a
  &[disabled],
e8ec7a
  &[readonly],
e8ec7a
  fieldset[disabled] & {
e8ec7a
    cursor: not-allowed;
e8ec7a
    background-color: $input-bg-disabled;
e8ec7a
  }
e8ec7a
e8ec7a
  // [converter] extracted textarea& to textarea.form-control
e8ec7a
}
e8ec7a
e8ec7a
// Reset height for `textarea`s
e8ec7a
textarea.form-control {
e8ec7a
  height: auto;
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Form groups
e8ec7a
//
e8ec7a
// Designed to help with the organization and spacing of vertical forms. For
e8ec7a
// horizontal forms, use the predefined grid classes.
e8ec7a
e8ec7a
.form-group {
e8ec7a
  margin-bottom: 15px;
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Checkboxes and radios
e8ec7a
//
e8ec7a
// Indent the labels to position radios/checkboxes as hanging controls.
e8ec7a
e8ec7a
.radio,
e8ec7a
.checkbox {
e8ec7a
  display: block;
e8ec7a
  min-height: $line-height-computed; // clear the floating input if there is no label text
e8ec7a
  margin-top: 10px;
e8ec7a
  margin-bottom: 10px;
e8ec7a
  padding-left: 20px;
e8ec7a
  vertical-align: middle;
e8ec7a
  label {
e8ec7a
    display: inline;
e8ec7a
    margin-bottom: 0;
e8ec7a
    font-weight: normal;
e8ec7a
    cursor: pointer;
e8ec7a
  }
e8ec7a
}
e8ec7a
.radio input[type="radio"],
e8ec7a
.radio-inline input[type="radio"],
e8ec7a
.checkbox input[type="checkbox"],
e8ec7a
.checkbox-inline input[type="checkbox"] {
e8ec7a
  float: left;
e8ec7a
  margin-left: -20px;
e8ec7a
}
e8ec7a
.radio + .radio,
e8ec7a
.checkbox + .checkbox {
e8ec7a
  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
e8ec7a
}
e8ec7a
e8ec7a
// Radios and checkboxes on same line
e8ec7a
.radio-inline,
e8ec7a
.checkbox-inline {
e8ec7a
  display: inline-block;
e8ec7a
  padding-left: 20px;
e8ec7a
  margin-bottom: 0;
e8ec7a
  vertical-align: middle;
e8ec7a
  font-weight: normal;
e8ec7a
  cursor: pointer;
e8ec7a
}
e8ec7a
.radio-inline + .radio-inline,
e8ec7a
.checkbox-inline + .checkbox-inline {
e8ec7a
  margin-top: 0;
e8ec7a
  margin-left: 10px; // space out consecutive inline controls
e8ec7a
}
e8ec7a
e8ec7a
// Apply same disabled cursor tweak as for inputs
e8ec7a
//
e8ec7a
// Note: Neither radios nor checkboxes can be readonly.
e8ec7a
input[type="radio"],
e8ec7a
input[type="checkbox"],
e8ec7a
.radio,
e8ec7a
.radio-inline,
e8ec7a
.checkbox,
e8ec7a
.checkbox-inline {
e8ec7a
  &[disabled],
e8ec7a
  fieldset[disabled] & {
e8ec7a
    cursor: not-allowed;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Form control sizing
e8ec7a
e8ec7a
@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
e8ec7a
e8ec7a
@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
e8ec7a
e8ec7a
e8ec7a
// Form control feedback states
e8ec7a
//
e8ec7a
// Apply contextual and semantic states to individual form controls.
e8ec7a
e8ec7a
// Warning
e8ec7a
.has-warning {
e8ec7a
  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
e8ec7a
}
e8ec7a
// Error
e8ec7a
.has-error {
e8ec7a
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
e8ec7a
}
e8ec7a
// Success
e8ec7a
.has-success {
e8ec7a
  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Static form control text
e8ec7a
//
e8ec7a
// Apply class to a `p` element to make any string of text align with labels in
e8ec7a
// a horizontal form layout.
e8ec7a
e8ec7a
.form-control-static {
e8ec7a
  margin-bottom: 0; // Remove default margin from `p`
e8ec7a
  padding-top: ($padding-base-vertical + 1);
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Help text
e8ec7a
//
e8ec7a
// Apply to any element you wish to create light text for placement immediately
e8ec7a
// below a form control. Use for general help, formatting, or instructional text.
e8ec7a
e8ec7a
.help-block {
e8ec7a
  display: block; // account for any element using help-block
e8ec7a
  margin-top: 5px;
e8ec7a
  margin-bottom: 10px;
e8ec7a
  color: lighten($text-color, 25%); // lighten the text some for contrast
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
e8ec7a
// Inline forms
e8ec7a
//
e8ec7a
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
e8ec7a
// forms begin stacked on extra small (mobile) devices and then go inline when
e8ec7a
// viewports reach <768px.
e8ec7a
//
e8ec7a
// Requires wrapping inputs and labels with `.form-group` for proper display of
e8ec7a
// default HTML form controls and our custom form controls (e.g., input groups).
e8ec7a
//
e8ec7a
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
e8ec7a
e8ec7a
.form-inline {
e8ec7a
e8ec7a
  // Kick in the inline
e8ec7a
  @media (min-width: $screen-tablet) {
e8ec7a
    // Inline-block all the things for "inline"
e8ec7a
    .form-group  {
e8ec7a
      display: inline-block;
e8ec7a
      margin-bottom: 0;
e8ec7a
      vertical-align: middle;
e8ec7a
    }
e8ec7a
e8ec7a
    // In navbar-form, allow folks to *not* use `.form-group`
e8ec7a
    .form-control {
e8ec7a
      display: inline-block;
e8ec7a
    }
e8ec7a
e8ec7a
    // Remove default margin on radios/checkboxes that were used for stacking, and
e8ec7a
    // then undo the floating of radios and checkboxes to match (which also avoids
e8ec7a
    // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
e8ec7a
    .radio,
e8ec7a
    .checkbox {
e8ec7a
      display: inline-block;
e8ec7a
      margin-top: 0;
e8ec7a
      margin-bottom: 0;
e8ec7a
      padding-left: 0;
e8ec7a
    }
e8ec7a
    .radio input[type="radio"],
e8ec7a
    .checkbox input[type="checkbox"] {
e8ec7a
      float: none;
e8ec7a
      margin-left: 0;
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Horizontal forms
e8ec7a
//
e8ec7a
// Horizontal forms are built on grid classes and allow you to create forms with
e8ec7a
// labels on the left and inputs on the right.
e8ec7a
e8ec7a
.form-horizontal {
e8ec7a
e8ec7a
  // Consistent vertical alignment of labels, radios, and checkboxes
e8ec7a
  .control-label,
e8ec7a
  .radio,
e8ec7a
  .checkbox,
e8ec7a
  .radio-inline,
e8ec7a
  .checkbox-inline {
e8ec7a
    margin-top: 0;
e8ec7a
    margin-bottom: 0;
e8ec7a
    padding-top: ($padding-base-vertical + 1); // Default padding plus a border
e8ec7a
  }
e8ec7a
e8ec7a
  // Make form groups behave like rows
e8ec7a
  .form-group {
e8ec7a
    @include make-row();
e8ec7a
  }
e8ec7a
e8ec7a
  // Only right align form labels here when the columns stop stacking
e8ec7a
  @media (min-width: $screen-tablet) {
e8ec7a
    .control-label {
e8ec7a
      text-align: right;
e8ec7a
    }
e8ec7a
  }
e8ec7a
}