1//
2// Button groups
3// --------------------------------------------------
4
5// Button carets
6//
7// Match the button text color to the arrow/caret for indicating dropdown-ness.
8
9.caret {
10  .btn-default & {
11    border-top-color: @btn-default-color;
12  }
13  .btn-primary &,
14  .btn-success &,
15  .btn-warning &,
16  .btn-danger &,
17  .btn-info & {
18    border-top-color: #fff;
19  }
20}
21.dropup {
22  .btn-default .caret {
23    border-bottom-color: @btn-default-color;
24  }
25  .btn-primary,
26  .btn-success,
27  .btn-warning,
28  .btn-danger,
29  .btn-info {
30   .caret {
31      border-bottom-color: #fff;
32    }
33  }
34}
35
36// Make the div behave like a button
37.btn-group,
38.btn-group-vertical {
39  position: relative;
40  display: inline-block;
41  vertical-align: middle; // match .btn alignment given font-size hack above
42  > .btn {
43    position: relative;
44    float: left;
45    // Bring the "active" button to the front
46    &:hover,
47    &:focus,
48    &:active,
49    &.active {
50      z-index: 2;
51    }
52    &:focus {
53      // Remove focus outline when dropdown JS adds it after closing the menu
54      outline: none;
55    }
56  }
57}
58
59// Prevent double borders when buttons are next to each other
60.btn-group {
61  .btn + .btn,
62  .btn + .btn-group,
63  .btn-group + .btn,
64  .btn-group + .btn-group {
65    margin-left: -1px;
66  }
67}
68
69// Optional: Group multiple button groups together for a toolbar
70.btn-toolbar {
71  .clearfix();
72
73  .btn-group {
74    float: left;
75  }
76  // Space out series of button groups
77  > .btn,
78  > .btn-group {
79    + .btn,
80    + .btn-group {
81      margin-left: 5px;
82    }
83  }
84}
85
86.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
87  border-radius: 0;
88}
89
90// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
91.btn-group > .btn:first-child {
92  margin-left: 0;
93  &:not(:last-child):not(.dropdown-toggle) {
94    .border-right-radius(0);
95  }
96}
97// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
98.btn-group > .btn:last-child:not(:first-child),
99.btn-group > .dropdown-toggle:not(:first-child) {
100  .border-left-radius(0);
101}
102
103// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
104.btn-group > .btn-group {
105  float: left;
106}
107.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
108  border-radius: 0;
109}
110.btn-group > .btn-group:first-child {
111  > .btn:last-child,
112  > .dropdown-toggle {
113    .border-right-radius(0);
114  }
115}
116.btn-group > .btn-group:last-child > .btn:first-child {
117  .border-left-radius(0);
118}
119
120// On active and open, don't show outline
121.btn-group .dropdown-toggle:active,
122.btn-group.open .dropdown-toggle {
123  outline: 0;
124}
125
126
127// Sizing
128//
129// Remix the default button sizing classes into new ones for easier manipulation.
130
131.btn-group-xs > .btn { .btn-xs(); }
132.btn-group-sm > .btn { .btn-sm(); }
133.btn-group-lg > .btn { .btn-lg(); }
134
135
136// Split button dropdowns
137// ----------------------
138
139// Give the line between buttons some depth
140.btn-group > .btn + .dropdown-toggle {
141  padding-left: 8px;
142  padding-right: 8px;
143}
144.btn-group > .btn-lg + .dropdown-toggle {
145  padding-left: 12px;
146  padding-right: 12px;
147}
148
149// The clickable button for toggling the menu
150// Remove the gradient and set the same inset shadow as the :active state
151.btn-group.open .dropdown-toggle {
152  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
153
154  // Show no shadow for `.btn-link` since it has no other button styles.
155  &.btn-link {
156    .box-shadow(none);
157  }
158}
159
160
161// Reposition the caret
162.btn .caret {
163  margin-left: 0;
164}
165// Carets in other button sizes
166.btn-lg .caret {
167  border-width: @caret-width-large @caret-width-large 0;
168  border-bottom-width: 0;
169}
170// Upside down carets for .dropup
171.dropup .btn-lg .caret {
172  border-width: 0 @caret-width-large @caret-width-large;
173}
174
175
176// Vertical button groups
177// ----------------------
178
179.btn-group-vertical {
180  > .btn,
181  > .btn-group {
182    display: block;
183    float: none;
184    width: 100%;
185    max-width: 100%;
186  }
187
188  // Clear floats so dropdown menus can be properly placed
189  > .btn-group {
190    .clearfix();
191    > .btn {
192      float: none;
193    }
194  }
195
196  > .btn + .btn,
197  > .btn + .btn-group,
198  > .btn-group + .btn,
199  > .btn-group + .btn-group {
200    margin-top: -1px;
201    margin-left: 0;
202  }
203}
204
205.btn-group-vertical > .btn {
206  &:not(:first-child):not(:last-child) {
207    border-radius: 0;
208  }
209  &:first-child:not(:last-child) {
210    border-top-right-radius: @border-radius-base;
211    .border-bottom-radius(0);
212  }
213  &:last-child:not(:first-child) {
214    border-bottom-left-radius: @border-radius-base;
215    .border-top-radius(0);
216  }
217}
218.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
219  border-radius: 0;
220}
221.btn-group-vertical > .btn-group:first-child {
222  > .btn:last-child,
223  > .dropdown-toggle {
224    .border-bottom-radius(0);
225  }
226}
227.btn-group-vertical > .btn-group:last-child > .btn:first-child {
228  .border-top-radius(0);
229}
230
231
232
233// Justified button groups
234// ----------------------
235
236.btn-group-justified {
237  display: table;
238  width: 100%;
239  table-layout: fixed;
240  border-collapse: separate;
241  .btn {
242    float: none;
243    display: table-cell;
244    width: 1%;
245  }
246}
247
248
249// Checkbox and radio options
250[data-toggle="buttons"] > .btn > input[type="radio"],
251[data-toggle="buttons"] > .btn > input[type="checkbox"] {
252  display: none;
253}
254