]>
Commit | Line | Data |
---|---|---|
7b869721 S |
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 | } |