less/bootstrap/input-groups.less

   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   .input-lg();
  44 }
  45 .input-group-sm > .form-control,
  46 .input-group-sm > .input-group-addon,
  47 .input-group-sm > .input-group-btn > .btn {
  48   .input-sm();
  49 }
  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 // Addon and addon wrapper for buttons
  64 .input-group-addon,
  65 .input-group-btn {
  66   width: 1%;
  67   white-space: nowrap;
  68   vertical-align: middle; // Match the inputs
  69 }
  70
  71 // Text input groups
  72 // -------------------------
  73 .input-group-addon {
  74   padding: @padding-base-vertical @padding-base-horizontal;
  75   font-size: @font-size-base;
  76   font-weight: normal;
  77   line-height: 1;
  78   color: @input-color;
  79   text-align: center;
  80   background-color: @input-group-addon-bg;
  81   border: 1px solid @input-group-addon-border-color;
  82   border-radius: @border-radius-base;
  83
  84   // Sizing
  85   &.input-sm {
  86     padding: @padding-small-vertical @padding-small-horizontal;
  87     font-size: @font-size-small;
  88     border-radius: @border-radius-small;
  89   }
  90   &.input-lg {
  91     padding: @padding-large-vertical @padding-large-horizontal;
  92     font-size: @font-size-large;
  93     border-radius: @border-radius-large;
  94   }
  95
  96   // Nuke default margins from checkboxes and radios to vertically center within.
  97   input[type="radio"],
  98   input[type="checkbox"] {
  99     margin-top: 0;
 100   }
 101 }
 102
 103 // Reset rounded corners
 104 .input-group .form-control:first-child,
 105 .input-group-addon:first-child,
 106 .input-group-btn:first-child > .btn,
 107 .input-group-btn:first-child > .btn-group > .btn,
 108 .input-group-btn:first-child > .dropdown-toggle,
 109 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 110 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
 111   .border-right-radius(0);
 112 }
 113 .input-group-addon:first-child {
 114   border-right: 0;
 115 }
 116 .input-group .form-control:last-child,
 117 .input-group-addon:last-child,
 118 .input-group-btn:last-child > .btn,
 119 .input-group-btn:last-child > .btn-group > .btn,
 120 .input-group-btn:last-child > .dropdown-toggle,
 121 .input-group-btn:first-child > .btn:not(:first-child),
 122 .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
 123   .border-left-radius(0);
 124 }
 125 .input-group-addon:last-child {
 126   border-left: 0;
 127 }
 128
 129 // Button input groups
 130 // -------------------------
 131 .input-group-btn {
 132   position: relative;
 133   // Jankily prevent input button groups from wrapping with `white-space` and
 134   // `font-size` in combination with `inline-block` on buttons.
 135   font-size: 0;
 136   white-space: nowrap;
 137
 138   // Negative margin for spacing, position for bringing hovered/focused/actived
 139   // element above the siblings.
 140   > .btn {
 141     position: relative;
 142     + .btn {
 143       margin-left: -1px;
 144     }
 145     // Bring the "active" button to the front
 146     &:hover,
 147     &:focus,
 148     &:active {
 149       z-index: 2;
 150     }
 151   }
 152
 153   // Negative margin to only have a 1px border between the two
 154   &:first-child {
 155     > .btn,
 156     > .btn-group {
 157       margin-right: -1px;
 158     }
 159   }
 160   &:last-child {
 161     > .btn,
 162     > .btn-group {
 163       z-index: 2;
 164       margin-left: -1px;
 165     }
 166   }
 167 }