Mercurial > wikked

comparison static/bootstrap/less/button-groups.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
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-mini .caret,
168 .btn-small .caret,
169 .btn-large .caret {
170 margin-top: 6px;
171 }
172 .btn-large .caret {
173 border-left-width: 5px;
174 border-right-width: 5px;
175 border-top-width: 5px;
176 }
177 // Upside down carets for .dropup
178 .dropup .btn-large .caret {
179 border-bottom-width: 5px;
180 }
181
182
183
184 // Account for other colors
185 .btn-primary,
186 .btn-warning,
187 .btn-danger,
188 .btn-info,
189 .btn-success,
190 .btn-inverse {
191 .caret {
192 border-top-color: @white;
193 border-bottom-color: @white;
194 }
195 }
196
197
198
199 // Vertical button groups
200 // ----------------------
201
202 .btn-group-vertical {
203 display: inline-block; // makes buttons only take up the width they need
204 .ie7-inline-block();
205 }
206 .btn-group-vertical > .btn {
207 display: block;
208 float: none;
209 max-width: 100%;
210 .border-radius(0);
211 }
212 .btn-group-vertical > .btn + .btn {
213 margin-left: 0;
214 margin-top: -1px;
215 }
216 .btn-group-vertical > .btn:first-child {
217 .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
218 }
219 .btn-group-vertical > .btn:last-child {
220 .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
221 }
222 .btn-group-vertical > .btn-large:first-child {
223 .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
224 }
225 .btn-group-vertical > .btn-large:last-child {
226 .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
227 }