3 // --------------------------------------------------
6 // Make the div behave like a button
9 font-size: 0; // remove as part 1 of font-size inline-block hack
10 vertical-align: middle; // match .btn alignment given font-size hack above
11 white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
12 .ie7-restore-left-whitespace();
15 // Space out series of button groups
16 .btn-group + .btn-group {
20 // Optional: Group multiple button groups together for a toolbar
22 font-size: 0; // Hack to remove whitespace that results from using inline-block
23 margin-top: @baseLineHeight / 2;
24 margin-bottom: @baseLineHeight / 2;
26 display: inline-block;
36 // Float them, remove border radius, then re-add to first and last elements
41 .btn-group > .btn + .btn {
45 .btn-group > .dropdown-menu {
46 font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
49 // Reset fonts for other sizes
50 .btn-group > .btn-mini {
53 .btn-group > .btn-small {
56 .btn-group > .btn-large {
60 // 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
61 .btn-group > .btn:first-child {
63 -webkit-border-top-left-radius: 4px;
64 -moz-border-radius-topleft: 4px;
65 border-top-left-radius: 4px;
66 -webkit-border-bottom-left-radius: 4px;
67 -moz-border-radius-bottomleft: 4px;
68 border-bottom-left-radius: 4px;
70 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
71 .btn-group > .btn:last-child,
72 .btn-group > .dropdown-toggle {
73 -webkit-border-top-right-radius: 4px;
74 -moz-border-radius-topright: 4px;
75 border-top-right-radius: 4px;
76 -webkit-border-bottom-right-radius: 4px;
77 -moz-border-radius-bottomright: 4px;
78 border-bottom-right-radius: 4px;
80 // Reset corners for large buttons
81 .btn-group > .btn.large:first-child {
83 -webkit-border-top-left-radius: 6px;
84 -moz-border-radius-topleft: 6px;
85 border-top-left-radius: 6px;
86 -webkit-border-bottom-left-radius: 6px;
87 -moz-border-radius-bottomleft: 6px;
88 border-bottom-left-radius: 6px;
90 .btn-group > .btn.large:last-child,
91 .btn-group > .large.dropdown-toggle {
92 -webkit-border-top-right-radius: 6px;
93 -moz-border-radius-topright: 6px;
94 border-top-right-radius: 6px;
95 -webkit-border-bottom-right-radius: 6px;
96 -moz-border-radius-bottomright: 6px;
97 border-bottom-right-radius: 6px;
100 // On hover/focus/active, bring the proper btn to front
101 .btn-group > .btn:hover,
102 .btn-group > .btn:focus,
103 .btn-group > .btn:active,
104 .btn-group > .btn.active {
108 // On active and open, don't show outline
109 .btn-group .dropdown-toggle:active,
110 .btn-group.open .dropdown-toggle {
116 // Split button dropdowns
117 // ----------------------
119 // Give the line between buttons some depth
120 .btn-group > .btn + .dropdown-toggle {
123 .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));
125 *padding-bottom: 5px;
127 .btn-group > .btn-mini + .dropdown-toggle {
131 *padding-bottom: 2px;
133 .btn-group > .btn-small + .dropdown-toggle {
135 *padding-bottom: 4px;
137 .btn-group > .btn-large + .dropdown-toggle {
141 *padding-bottom: 7px;
146 // The clickable button for toggling the menu
147 // Remove the gradient and set the same inset shadow as the :active state
149 background-image: none;
150 .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
153 // Keep the hover's background when dropdown is open
154 .btn.dropdown-toggle {
155 background-color: @btnBackgroundHighlight;
157 .btn-primary.dropdown-toggle {
158 background-color: @btnPrimaryBackgroundHighlight;
160 .btn-warning.dropdown-toggle {
161 background-color: @btnWarningBackgroundHighlight;
163 .btn-danger.dropdown-toggle {
164 background-color: @btnDangerBackgroundHighlight;
166 .btn-success.dropdown-toggle {
167 background-color: @btnSuccessBackgroundHighlight;
169 .btn-info.dropdown-toggle {
170 background-color: @btnInfoBackgroundHighlight;
172 .btn-inverse.dropdown-toggle {
173 background-color: @btnInverseBackgroundHighlight;
178 // Reposition the caret
183 // Carets in other button sizes
190 border-left-width: 5px;
191 border-right-width: 5px;
192 border-top-width: 5px;
194 // Upside down carets for .dropup
195 .dropup .btn-large .caret {
196 border-bottom: 5px solid @black;
202 // Account for other colors
210 border-top-color: @white;
211 border-bottom-color: @white;
217 // Vertical button groups
218 // ----------------------
220 .btn-group-vertical {
221 display: inline-block; // makes buttons only take up the width they need
224 .btn-group-vertical .btn {
230 .btn-group-vertical .btn + .btn {
234 .btn-group-vertical .btn:first-child {
235 .border-radius(4px 4px 0 0);
237 .btn-group-vertical .btn:last-child {
238 .border-radius(0 0 4px 4px);
240 .btn-group-vertical .btn-large:first-child {
241 .border-radius(6px 6px 0 0);
243 .btn-group-vertical .btn-large:last-child {
244 .border-radius(0 0 6px 6px);