5 // Make the div behave like a button
8 .clearfix(); // clears the floated buttons
9 .ie7-restore-left-whitespace();
12 // Space out series of button groups
13 .btn-group + .btn-group {
17 // Optional: Group multiple button groups together for a toolbar
19 margin-top: @baseLineHeight / 2;
20 margin-bottom: @baseLineHeight / 2;
22 display: inline-block;
27 // Float them, remove border radius, then re-add to first and last elements
36 // 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
37 .btn-group .btn:first-child {
39 -webkit-border-top-left-radius: 3px;
40 -moz-border-radius-topleft: 3px;
41 border-top-left-radius: 3px;
42 -webkit-border-bottom-left-radius: 3px;
43 -moz-border-radius-bottomleft: 3px;
44 border-bottom-left-radius: 3px;
46 .btn-group .btn:last-child,
47 .btn-group .dropdown-toggle {
48 -webkit-border-top-right-radius: 3px;
49 -moz-border-radius-topright: 3px;
50 border-top-right-radius: 3px;
51 -webkit-border-bottom-right-radius: 3px;
52 -moz-border-radius-bottomright: 3px;
53 border-bottom-right-radius: 3px;
57 // Reset corners for large buttons
58 .btn-group .btn.large:first-child {
60 -webkit-border-top-left-radius: 6px;
61 -moz-border-radius-topleft: 6px;
62 border-top-left-radius: 6px;
63 -webkit-border-bottom-left-radius: 6px;
64 -moz-border-radius-bottomleft: 6px;
65 border-bottom-left-radius: 6px;
67 .btn-group .btn.large:last-child,
68 .btn-group .large.dropdown-toggle {
69 -webkit-border-top-right-radius: 6px;
70 -moz-border-radius-topright: 6px;
71 border-top-right-radius: 6px;
72 -webkit-border-bottom-right-radius: 6px;
73 -moz-border-radius-bottomright: 6px;
74 border-bottom-right-radius: 6px;
77 // On hover/focus/active, bring the proper btn to front
78 .btn-group .btn:hover,
79 .btn-group .btn:focus,
80 .btn-group .btn:active,
81 .btn-group .btn.active {
85 // On active and open, don't show outline
86 .btn-group .dropdown-toggle:active,
87 .btn-group.open .dropdown-toggle {
93 // Split button dropdowns
94 // ----------------------
96 // Give the line between buttons some depth
97 .btn-group .dropdown-toggle {
98 @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.1);
101 *padding-bottom: 5px;
105 // IE7's z-index only goes to the nearest positioned ancestor, which would
106 // make the menu appear below buttons that appeared later on the page
107 *z-index: @zindexDropdown;
109 // Reposition menu on open and round all corners
117 background-image: none;
118 @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.05);
119 .box-shadow(@shadow);
123 // Reposition the caret
129 .open.btn-group .caret {
134 // Account for other colors
141 border-top-color: @white;
146 // Small button dropdowns