• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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