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