3 // --------------------------------------------------
6 // Make the div behave like a button
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();
17 // Space out series of button groups
18 .btn-group + .btn-group {
22 // Optional: Group multiple button groups together for a 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;
34 // Float them, remove border radius, then re-add to first and last elements
39 .btn-group > .btn + .btn {
43 .btn-group > .dropdown-menu,
44 .btn-group > .popover {
45 font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
48 // Reset fonts for other sizes
49 .btn-group > .btn-mini {
50 font-size: @fontSizeMini;
52 .btn-group > .btn-small {
53 font-size: @fontSizeSmall;
55 .btn-group > .btn-large {
56 font-size: @fontSizeLarge;
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 {
62 .border-top-left-radius(@baseBorderRadius);
63 .border-bottom-left-radius(@baseBorderRadius);
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);
71 // Reset corners for large buttons
72 .btn-group > .btn.large:first-child {
74 .border-top-left-radius(@borderRadiusLarge);
75 .border-bottom-left-radius(@borderRadiusLarge);
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);
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 {
91 // On active and open, don't show outline
92 .btn-group .dropdown-toggle:active,
93 .btn-group.open .dropdown-toggle {
99 // Split button dropdowns
100 // ----------------------
102 // Give the line between buttons some depth
103 .btn-group > .btn + .dropdown-toggle {
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)");
108 *padding-bottom: 5px;
110 .btn-group > .btn-mini + .dropdown-toggle {
114 *padding-bottom: 2px;
116 .btn-group > .btn-small + .dropdown-toggle {
118 *padding-bottom: 4px;
120 .btn-group > .btn-large + .dropdown-toggle {
124 *padding-bottom: 7px;
129 // The clickable button for toggling the menu
130 // Remove the gradient and set the same inset shadow as the :active state
132 background-image: none;
133 .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
136 // Keep the hover's background when dropdown is open
137 .btn.dropdown-toggle {
138 background-color: @btnBackgroundHighlight;
140 .btn-primary.dropdown-toggle {
141 background-color: @btnPrimaryBackgroundHighlight;
143 .btn-warning.dropdown-toggle {
144 background-color: @btnWarningBackgroundHighlight;
146 .btn-danger.dropdown-toggle {
147 background-color: @btnDangerBackgroundHighlight;
149 .btn-success.dropdown-toggle {
150 background-color: @btnSuccessBackgroundHighlight;
152 .btn-info.dropdown-toggle {
153 background-color: @btnInfoBackgroundHighlight;
155 .btn-inverse.dropdown-toggle {
156 background-color: @btnInverseBackgroundHighlight;
161 // Reposition the caret
166 // Carets in other button sizes
171 border-left-width: 5px;
172 border-right-width: 5px;
173 border-top-width: 5px;
179 // Upside down carets for .dropup
180 .dropup .btn-large .caret {
181 border-bottom-width: 5px;
186 // Account for other colors
194 border-top-color: @white;
195 border-bottom-color: @white;
201 // Vertical button groups
202 // ----------------------
204 .btn-group-vertical {
205 display: inline-block; // makes buttons only take up the width they need
208 .btn-group-vertical > .btn {
214 .btn-group-vertical > .btn + .btn {
218 .btn-group-vertical > .btn:first-child {
219 .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
221 .btn-group-vertical > .btn:last-child {
222 .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
224 .btn-group-vertical > .btn-large:first-child {
225 .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
227 .btn-group-vertical > .btn-large:last-child {
228 .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);