Home | History | Annotate | Download | only in bootstrap 
      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       margin-left: -1px;
    164     }
    165   }
    166 }
    167