1//
2// Button groups
3// --------------------------------------------------
4
5
6// Make the div behave like a button
7.btn-group {
8  position: relative;
9  display: inline-block;
10  .ie7-inline-block();
11  font-size: 0; // remove as part 1 of font-size inline-block hack
12  vertical-align: middle; // match .btn alignment given font-size hack above
13  white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
14  .ie7-restore-left-whitespace();
15}
16
17// Space out series of button groups
18.btn-group + .btn-group {
19  margin-left: 5px;
20}
21
22// Optional: Group multiple button groups together for a toolbar
23.btn-toolbar {
24  font-size: 0; // Hack to remove whitespace that results from using inline-block
25  margin-top: @baseLineHeight / 2;
26  margin-bottom: @baseLineHeight / 2;
27  > .btn + .btn,
28  > .btn-group + .btn,
29  > .btn + .btn-group {
30    margin-left: 5px;
31  }
32}
33
34// Float them, remove border radius, then re-add to first and last elements
35.btn-group > .btn {
36  position: relative;
37  .border-radius(0);
38}
39.btn-group > .btn + .btn {
40  margin-left: -1px;
41}
42.btn-group > .btn,
43.btn-group > .dropdown-menu,
44.btn-group > .popover {
45  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
46}
47
48// Reset fonts for other sizes
49.btn-group > .btn-mini {
50  font-size: @fontSizeMini;
51}
52.btn-group > .btn-small {
53  font-size: @fontSizeSmall;
54}
55.btn-group > .btn-large {
56  font-size: @fontSizeLarge;
57}
58
59// 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
60.btn-group > .btn:first-child {
61  margin-left: 0;
62  .border-top-left-radius(@baseBorderRadius);
63  .border-bottom-left-radius(@baseBorderRadius);
64}
65// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
66.btn-group > .btn:last-child,
67.btn-group > .dropdown-toggle {
68  .border-top-right-radius(@baseBorderRadius);
69  .border-bottom-right-radius(@baseBorderRadius);
70}
71// Reset corners for large buttons
72.btn-group > .btn.large:first-child {
73  margin-left: 0;
74  .border-top-left-radius(@borderRadiusLarge);
75  .border-bottom-left-radius(@borderRadiusLarge);
76}
77.btn-group > .btn.large:last-child,
78.btn-group > .large.dropdown-toggle {
79  .border-top-right-radius(@borderRadiusLarge);
80  .border-bottom-right-radius(@borderRadiusLarge);
81}
82
83// On hover/focus/active, bring the proper btn to front
84.btn-group > .btn:hover,
85.btn-group > .btn:focus,
86.btn-group > .btn:active,
87.btn-group > .btn.active {
88  z-index: 2;
89}
90
91// On active and open, don't show outline
92.btn-group .dropdown-toggle:active,
93.btn-group.open .dropdown-toggle {
94  outline: 0;
95}
96
97
98
99// Split button dropdowns
100// ----------------------
101
102// Give the line between buttons some depth
103.btn-group > .btn + .dropdown-toggle {
104  padding-left: 8px;
105  padding-right: 8px;
106  .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
107  *padding-top: 5px;
108  *padding-bottom: 5px;
109}
110.btn-group > .btn-mini + .dropdown-toggle {
111  padding-left: 5px;
112  padding-right: 5px;
113  *padding-top: 2px;
114  *padding-bottom: 2px;
115}
116.btn-group > .btn-small + .dropdown-toggle {
117  *padding-top: 5px;
118  *padding-bottom: 4px;
119}
120.btn-group > .btn-large + .dropdown-toggle {
121  padding-left: 12px;
122  padding-right: 12px;
123  *padding-top: 7px;
124  *padding-bottom: 7px;
125}
126
127.btn-group.open {
128
129  // The clickable button for toggling the menu
130  // Remove the gradient and set the same inset shadow as the :active state
131  .dropdown-toggle {
132    background-image: none;
133    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
134  }
135
136  // Keep the hover's background when dropdown is open
137  .btn.dropdown-toggle {
138    background-color: @btnBackgroundHighlight;
139  }
140  .btn-primary.dropdown-toggle {
141    background-color: @btnPrimaryBackgroundHighlight;
142  }
143  .btn-warning.dropdown-toggle {
144    background-color: @btnWarningBackgroundHighlight;
145  }
146  .btn-danger.dropdown-toggle {
147    background-color: @btnDangerBackgroundHighlight;
148  }
149  .btn-success.dropdown-toggle {
150    background-color: @btnSuccessBackgroundHighlight;
151  }
152  .btn-info.dropdown-toggle {
153    background-color: @btnInfoBackgroundHighlight;
154  }
155  .btn-inverse.dropdown-toggle {
156    background-color: @btnInverseBackgroundHighlight;
157  }
158}
159
160
161// Reposition the caret
162.btn .caret {
163  margin-top: 8px;
164  margin-left: 0;
165}
166// Carets in other button sizes
167.btn-large .caret {
168  margin-top: 6px;
169}
170.btn-large .caret {
171  border-left-width:  5px;
172  border-right-width: 5px;
173  border-top-width:   5px;
174}
175.btn-mini .caret,
176.btn-small .caret {
177  margin-top: 8px;
178}
179// Upside down carets for .dropup
180.dropup .btn-large .caret {
181  border-bottom-width: 5px;
182}
183
184
185
186// Account for other colors
187.btn-primary,
188.btn-warning,
189.btn-danger,
190.btn-info,
191.btn-success,
192.btn-inverse {
193  .caret {
194    border-top-color: @white;
195    border-bottom-color: @white;
196  }
197}
198
199
200
201// Vertical button groups
202// ----------------------
203
204.btn-group-vertical {
205  display: inline-block; // makes buttons only take up the width they need
206  .ie7-inline-block();
207}
208.btn-group-vertical > .btn {
209  display: block;
210  float: none;
211  max-width: 100%;
212  .border-radius(0);
213}
214.btn-group-vertical > .btn + .btn {
215  margin-left: 0;
216  margin-top: -1px;
217}
218.btn-group-vertical > .btn:first-child {
219  .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
220}
221.btn-group-vertical > .btn:last-child {
222  .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
223}
224.btn-group-vertical > .btn-large:first-child {
225  .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
226}
227.btn-group-vertical > .btn-large:last-child {
228  .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
229}
230