Blame content/assets/css/bootstrap/_input-groups.scss

e8ec7a
//
e8ec7a
// Input groups
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
// Base styles
e8ec7a
// -------------------------
e8ec7a
.input-group {
e8ec7a
  position: relative; // For dropdowns
e8ec7a
  display: table;
e8ec7a
  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
e8ec7a
e8ec7a
  // Undo padding and float of grid classes
e8ec7a
  &.col {
e8ec7a
    float: none;
e8ec7a
    padding-left: 0;
e8ec7a
    padding-right: 0;
e8ec7a
  }
e8ec7a
e8ec7a
  .form-control {
e8ec7a
    width: 100%;
e8ec7a
    margin-bottom: 0;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Sizing options
e8ec7a
//
e8ec7a
// Remix the default form control sizing classes into new ones for easier
e8ec7a
// manipulation.
e8ec7a
e8ec7a
.input-group-lg > .form-control,
e8ec7a
.input-group-lg > .input-group-addon,
e8ec7a
.input-group-lg > .input-group-btn > .btn { @extend .input-lg; }
e8ec7a
.input-group-sm > .form-control,
e8ec7a
.input-group-sm > .input-group-addon,
e8ec7a
.input-group-sm > .input-group-btn > .btn { @extend .input-sm; }
e8ec7a
e8ec7a
e8ec7a
// Display as table-cell
e8ec7a
// -------------------------
e8ec7a
.input-group-addon,
e8ec7a
.input-group-btn,
e8ec7a
.input-group .form-control {
e8ec7a
  display: table-cell;
e8ec7a
e8ec7a
  &:not(:first-child):not(:last-child) {
e8ec7a
    border-radius: 0;
e8ec7a
  }
e8ec7a
}
e8ec7a
// Addon and addon wrapper for buttons
e8ec7a
.input-group-addon,
e8ec7a
.input-group-btn {
e8ec7a
  width: 1%;
e8ec7a
  white-space: nowrap;
e8ec7a
  vertical-align: middle; // Match the inputs
e8ec7a
}
e8ec7a
e8ec7a
// Text input groups
e8ec7a
// -------------------------
e8ec7a
.input-group-addon {
e8ec7a
  padding: $padding-base-vertical $padding-base-horizontal;
e8ec7a
  font-size: $font-size-base;
e8ec7a
  font-weight: normal;
e8ec7a
  line-height: 1;
e8ec7a
  text-align: center;
e8ec7a
  background-color: $input-group-addon-bg;
e8ec7a
  border: 1px solid $input-group-addon-border-color;
e8ec7a
  border-radius: $border-radius-base;
e8ec7a
e8ec7a
  // Sizing
e8ec7a
  &.input-sm {
e8ec7a
    padding: $padding-small-vertical $padding-small-horizontal;
e8ec7a
    font-size: $font-size-small;
e8ec7a
    border-radius: $border-radius-small;
e8ec7a
  }
e8ec7a
  &.input-lg {
e8ec7a
    padding: $padding-large-vertical $padding-large-horizontal;
e8ec7a
    font-size: $font-size-large;
e8ec7a
    border-radius: $border-radius-large;
e8ec7a
  }
e8ec7a
e8ec7a
  // Nuke default margins from checkboxes and radios to vertically center within.
e8ec7a
  input[type="radio"],
e8ec7a
  input[type="checkbox"] {
e8ec7a
    margin-top: 0;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Reset rounded corners
e8ec7a
.input-group .form-control:first-child,
e8ec7a
.input-group-addon:first-child,
e8ec7a
.input-group-btn:first-child > .btn,
e8ec7a
.input-group-btn:first-child > .dropdown-toggle,
e8ec7a
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
e8ec7a
  @include border-right-radius(0);
e8ec7a
}
e8ec7a
.input-group-addon:first-child {
e8ec7a
  border-right: 0;
e8ec7a
}
e8ec7a
.input-group .form-control:last-child,
e8ec7a
.input-group-addon:last-child,
e8ec7a
.input-group-btn:last-child > .btn,
e8ec7a
.input-group-btn:last-child > .dropdown-toggle,
e8ec7a
.input-group-btn:first-child > .btn:not(:first-child) {
e8ec7a
  @include border-left-radius(0);
e8ec7a
}
e8ec7a
.input-group-addon:last-child {
e8ec7a
  border-left: 0;
e8ec7a
}
e8ec7a
e8ec7a
// Button input groups
e8ec7a
// -------------------------
e8ec7a
.input-group-btn {
e8ec7a
  position: relative;
e8ec7a
  white-space: nowrap;
e8ec7a
}
e8ec7a
.input-group-btn > .btn {
e8ec7a
  position: relative;
e8ec7a
  // Jankily prevent input button groups from wrapping
e8ec7a
  + .btn {
e8ec7a
    margin-left: -4px;
e8ec7a
  }
e8ec7a
  // Bring the "active" button to the front
e8ec7a
  &:hover,
e8ec7a
  &:active {
e8ec7a
    z-index: 2;
e8ec7a
  }
e8ec7a
}