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