resources/scss/bootstrap/_input-groups.scss

   1 //
   2 // Input groups
   3 // --------------------------------------------------
   4
   5 // Base styles
   6 // -------------------------
   7 .input-group {
   8   position: relative; // For dropdowns
   9   display: table;
  10   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
  11
  12   // Undo padding and float of grid classes
  13   &[class*="col-"] {
  14         float: none;
  15         padding-left: 0;
  16         padding-right: 0;
  17   }
  18
  19   .form-control {
  20         // Ensure that the input is always above the *appended* addon button for
  21         // proper border colors.
  22         position: relative;
  23         z-index: 2;
  24
  25         // IE9 fubars the placeholder attribute in text inputs and the arrows on
  26         // select elements in input groups. To fix it, we float the input. Details:
  27         // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
  28         float: left;
  29
  30         width: 100%;
  31         margin-bottom: 0;
  32   }
  33 }
  34
  35 // Sizing options
  36 //
  37 // Remix the default form control sizing classes into new ones for easier
  38 // manipulation.
  39
  40 .input-group-lg > .form-control,
  41 .input-group-lg > .input-group-addon,
  42 .input-group-lg > .input-group-btn > .btn {
  43   @extend .input-lg;
  44 }
  45
  46 .input-group-sm > .form-control,
  47 .input-group-sm > .input-group-addon,
  48 .input-group-sm > .input-group-btn > .btn {
  49   @extend .input-sm;
  50 }
  51
  52 // Display as table-cell
  53 // -------------------------
  54 .input-group-addon,
  55 .input-group-btn,
  56 .input-group .form-control {
  57   display: table-cell;
  58
  59   &:not(:first-child):not(:last-child) {
  60         border-radius: 0;
  61   }
  62 }
  63
  64 // Addon and addon wrapper for buttons
  65 .input-group-addon,
  66 .input-group-btn {
  67   width: 1%;
  68   white-space: nowrap;
  69   vertical-align: middle; // Match the inputs
  70 }
  71
  72 // Text input groups
  73 // -------------------------
  74 .input-group-addon {
  75   padding: $padding-base-vertical $padding-base-horizontal;
  76   font-size: $font-size-base;
  77   font-weight: normal;
  78   line-height: 1;
  79   color: $input-color;
  80   text-align: center;
  81   background-color: $input-group-addon-bg;
  82   border: 1px solid $input-group-addon-border-color;
  83   border-radius: $border-radius-base;
  84
  85   // Sizing
  86   &.input-sm {
  87         padding: $padding-small-vertical $padding-small-horizontal;
  88         font-size: $font-size-small;
  89         border-radius: $border-radius-small;
  90   }
  91   &.input-lg {
  92         padding: $padding-large-vertical $padding-large-horizontal;
  93         font-size: $font-size-large;
  94         border-radius: $border-radius-large;
  95   }
  96
  97   // Nuke default margins from checkboxes and radios to vertically center within.
  98   input[type="radio"],
  99   input[type="checkbox"] {
 100         margin-top: 0;
 101   }
 102 }
 103
 104 // Reset rounded corners
 105 .input-group .form-control:first-child,
 106 .input-group-addon:first-child,
 107 .input-group-btn:first-child > .btn,
 108 .input-group-btn:first-child > .btn-group > .btn,
 109 .input-group-btn:first-child > .dropdown-toggle,
 110 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 111 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
 112   @include border-right-radius(0);
 113 }
 114
 115 .input-group-addon:first-child {
 116   border-right: 0;
 117 }
 118
 119 .input-group .form-control:last-child,
 120 .input-group-addon:last-child,
 121 .input-group-btn:last-child > .btn,
 122 .input-group-btn:last-child > .btn-group > .btn,
 123 .input-group-btn:last-child > .dropdown-toggle,
 124 .input-group-btn:first-child > .btn:not(:first-child),
 125 .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
 126   @include border-left-radius(0);
 127 }
 128
 129 .input-group-addon:last-child {
 130   border-left: 0;
 131 }
 132
 133 // Button input groups
 134 // -------------------------
 135 .input-group-btn {
 136   position: relative;
 137   // Jankily prevent input button groups from wrapping with `white-space` and
 138   // `font-size` in combination with `inline-block` on buttons.
 139   font-size: 0;
 140   white-space: nowrap;
 141
 142   // Negative margin for spacing, position for bringing hovered/focused/actived
 143   // element above the siblings.
 144   > .btn {
 145         position: relative;
 146         + .btn {
 147           margin-left: -1px;
 148         }
 149         // Bring the "active" button to the front
 150         &:hover,
 151         &:focus,
 152         &:active {
 153           z-index: 2;
 154         }
 155   }
 156
 157   // Negative margin to only have a 1px border between the two
 158   &:first-child {
 159         > .btn,
 160         > .btn-group {
 161           margin-right: -1px;
 162         }
 163   }
 164   &:last-child {
 165         > .btn,
 166         > .btn-group {
 167           z-index: 2;
 168           margin-left: -1px;
 169         }
 170   }
 171 }