Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 372 lines (344 sloc) 7.45 kB
5c6583c @chriscoyier Spinner API
authored
1 @import "functions.less";
2
3 .btn {
4383bb2 @chriscoyier scrolling menus and light accordions
authored
4 padding: 0.5em 1em;
5c6583c @chriscoyier Spinner API
authored
5 .border-radius(4px);
6 text-shadow: 0 1px 0 #FFFFFF;
7 outline: none;
8 cursor: pointer;
4383bb2 @chriscoyier scrolling menus and light accordions
authored
9 font-size: 1.0em;
5c6583c @chriscoyier Spinner API
authored
10 font-weight: bold;
4383bb2 @chriscoyier scrolling menus and light accordions
authored
11 line-height: 1.5;
5c6583c @chriscoyier Spinner API
authored
12 white-space: nowrap;
13 text-decoration: none;
14 color: #333;
15 display: inline-block;
16 border: solid 1px #BBB;
17 .gradient(#f0f0ea, #d5d7ce);
4383bb2 @chriscoyier scrolling menus and light accordions
authored
18
19 /* Hope this doesn't cause problems, it's useful for button menus */
20 position: relative;
5c6583c @chriscoyier Spinner API
authored
21 }
22 .btn:hover {
4383bb2 @chriscoyier scrolling menus and light accordions
authored
23 z-index: 1;
5c6583c @chriscoyier Spinner API
authored
24 border: solid 1px #999;
25 text-decoration: none;
26 .gradient(#F5F5EE, #DCDED5);
27 }
122121d @chriscoyier adding sliders
authored
28 .btn:active, .btn.open { // .open specific to button menus
5c6583c @chriscoyier Spinner API
authored
29 border: solid 1px #999;
30 .gradient(#DCDED5, #F5F5EE);
31 }
32 .ie7 .btn {
33 display: inline;
34 zoom: 1;
35 }
36 input.btn {
37 font-family: Sans-Serif;
38 padding: 4px 7px;
39 border: none;
40 }
41
42
43
44
45 /* Button Menu (?) */
46 .btn-menu {
47 letter-spacing: -0.31em; /* webkit: collapse white-space between units */
48 *letter-spacing: normal; /* reset IE < 8 */
49 word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
50 }
51 .btn-menu .btn {
52 letter-spacing: normal;
53 word-spacing: normal;
54 vertical-align: top;
55 }
56 .btn-menu .btn-menu-right {
4383bb2 @chriscoyier scrolling menus and light accordions
authored
57 margin-left: -1px;
fac6fcb @chriscoyier LESSify
authored
58 /* Not a great function for this yet, since we we're
59 resetting some but leaving other corners alone */
5c6583c @chriscoyier Spinner API
authored
60 -webkit-top-left-border-radius: 0;
61 -webkit-bottom-left-border-radius: 0;
62 -moz-top-left-border-radius: 0;
63 -moz-bottom-left-border-radius: 0;
64 border-top-left-radius: 0;
65 border-bottom-left-radius: 0;
66 }
67 .btn-menu .btn-menu-left {
fac6fcb @chriscoyier LESSify
authored
68 /* Not a great function for this yet, since we we're
69 resetting some but leaving other corners alone */
5c6583c @chriscoyier Spinner API
authored
70 -webkit-top-right-border-radius: 0;
71 -webkit-bottom-right-border-radius: 0;
72 -moz-top-right-border-radius: 0;
73 -moz-bottom-right-border-radius: 0;
74 border-top-right-radius: 0;
75 border-bottom-right-radius: 0;
76 }
77 .btn-menu .btn-menu-middle {
fac6fcb @chriscoyier LESSify
authored
78 .border-radius(0);
5c6583c @chriscoyier Spinner API
authored
79 margin-left: -1px;
80 }
81
82
83 /* NEED TO TEST THIS STUFF */
84 .ie7 .btn-menu-arrow-left > span {
85 height: 10px;
86 }
87 .ie7 .btn-menu-right {
88 margin-left: 3px;
89 }
90 .ie7 .btn-menu-right:hover {
91 margin-left: 2px;
92 }
93
94
95
96
97 /* Arrows */
98 .btn-arrow > span {
99 background: url("../images/sm_sprite_arrows.png") no-repeat scroll 0 -497px transparent;
100 display: inline-block;
101 height: 12px;
102 width: 6px;
103 zoom: 1;
104 *display: inline;
105 }
106 .btn-arrow-right {
107 padding-right: 6px;
108 }
109 .btn-arrow-right > span {
110 margin-left: 6px;
111 }
112 .btn-arrow-left {
113 padding-left: 10px;
114 }
115 .btn-arrow-left > span {
116 margin-right: 6px;
117 }
118 .btn-small.btn-arrow-left {
119 padding-left: 8px;
120 }
121 .btn-large.btn-arrow-right {
122 padding-right: 9px;
123 padding-left: 11px;
124 }
125 .btn-large.btn-arrow-left {
126 padding-right: 11px;
127 padding-left: 9px;
128 }
129
130
131 /* Small Arrows */
132 .btn-arrow-small-horiz > span {
133 height: 7px;
134 width: 5px;
135 }
136 .btn-arrow-small-vert > span {
137 height: 5px;
138 width: 7px;
139 }
140 .ie7 .btn-arrow-small-horiz > span {
141 height: 10px;
142 }
143 .ie7 .btn-arrow-small-vert > span {
144 height: 10px;
145 }
146 .btn-arrow-small-right-light > span {
147 background-position: 0 -180px;
148 }
149 .btn-arrow-small-left-light > span {
150 background-position: 0 -200px;
151 }
152 .btn-arrow-small-up-light > span {
153 background-position: 0 -220px;
154 }
155 .btn-arrow-small-down-light > span {
156 background-position: 0 -160px;
157 }
158 .btn-arrow-small-right-medium > span {
159 background-position: 0 -100px;
160 }
161 .btn-arrow-small-left-medium > span {
162 background-position: 0 -120px;
163 }
164 .btn-arrow-small-up-medium > span {
165 background-position: 0 -140px;
166 }
167 .btn-arrow-small-down-medium > span {
168 background-position: 0 -80px;
169 }
170 .btn-arrow-small-right-dark > span {
171 background-position: 0 -20px;
172 }
173 .btn-arrow-small-left-dark > span {
174 background-position: 0 -40px;
175 }
176 .btn-arrow-small-up-dark > span {
177 background-position: 0 -60px;
178 }
179 .btn-arrow-small-down-dark > span {
180 background-position: 0 0;
181 }
182
183
184 /* Standard Size Arrows */
185 .btn-arrow-standard-horiz > span {
186 height: 8px;
187 width: 6px;
188 }
189 .ie7 .btn-arrow-standard-horiz > span {
190 height: 11px;
191 }
192 .btn-arrow-standard-vert > span {
193 height: 6px;
194 width: 12px;
195 }
196 .ie7 .btn-arrow-standard-vert > span {
197 height: 10px;
198 width: 10px;
199 }
200 .btn-arrow-standard-right-light > span {
201 background-position: 0 -420px;
202 }
203 .btn-arrow-standard-left-light > span {
204 background-position: 0 -440px;
205 }
206 .btn-arrow-standard-up-light > span {
207 background-position: 0 -460px;
208 }
209 .btn-arrow-standard-down-light > span {
210 background-position: 0 -400px;
211 }
212 .btn-arrow-standard-right-medium > span {
213 background-position: 0 -340px;
214 }
215 .btn-arrow-standard-left-medium > span {
216 background-position: 0 -360px;
217 }
218 .btn-arrow-standard-up-medium > span {
219 background-position: 0 -380px;
220 }
221 .btn-arrow-standard-down-medium > span {
222 background-position: 0 -320px;
223 }
224 .btn-arrow-standard-right-dark > span {
225 background-position: 0 -260px;
226 }
227 .btn-arrow-standard-left-dark > span {
228 background-position: 0 -280px;
229 }
230 .btn-arrow-standard-up-dark > span {
231 background-position: 0 -300px;
232 }
233 .btn-arrow-standard-down-dark > span {
234 background-position: 0 -240px;
235 }
236
237
238 /* Large Arrows */
239 .btn-arrow-large-horiz > span {
240 height: 9px;
241 width: 6px;
242 }
243 .btn-arrow-large-vert > span {
244 height: 7px;
245 width: 12px;
246 }
247 .ie7 .btn-arrow-large-horiz > span {
248 height: 12px;
249 }
250
251 .ie7 .btn-arrow-large-vert > span {
252 height: 10px;
253 }
254 .btn-arrow-large-right-light > span {
255 background-position: 0 -420px;
256 }
257 .btn-arrow-large-left-light > span {
258 background-position: 0 -440px;
259 }
260 .btn-arrow-large-up-light > span {
261 background-position: 0 -460px;
262 }
263 .btn-arrow-large-down-light > span {
264 background-position: 0 -400px;
265 }
266 .btn-arrow-large-right-medium > span {
267 background-position: 0 -580px;
268 }
269 .btn-arrow-large-left-medium > span {
270 background-position: 0 -600px;
271 }
272 .btn-arrow-large-up-medium > span {
273 background-position: 0 -620px;
274 }
275 .btn-arrow-large-down-medium > span {
276 background-position: 0 -560px;
277 }
278 .btn-arrow-large-right-dark > span {
279 background-position: 0 -500px;
280 }
281 .btn-arrow-large-left-dark > span {
282 background-position: 0 -520px;
283 }
284 .btn-arrow-large-up-dark > span {
285 background-position: 0 -540px;
286 }
287 .btn-arrow-large-down-dark > span {
288 background-position: 0 -480px;
289 }
290
291 .btn-only-arrow {
292 padding-left: 8px;
293 padding-right: 6px;
294 }
295
296
297
298 /* Colors */
299 .teal {
300 color: white;
301 border: 0;
302 text-shadow: 0 -1px 0 #444444;
303 .gradient(#35C0C0, #049795);
304 }
305 .teal:hover {
306 border: 0;
307 .gradient(#42CBCC, #14A4A3);
308 }
4383bb2 @chriscoyier scrolling menus and light accordions
authored
309 .teal:active, .teal.open {
5c6583c @chriscoyier Spinner API
authored
310 .gradient(#14A4A3, #42CBCC);
311 }
312
313 .dark-grey {
314 color: white;
315 border: 0;
316 text-shadow: 0 -1px 0 #444444;
317 .gradient(#989898, #666);
318 }
319 .dark-grey:hover {
320 border: 0;
321 .gradient(#A4A4A4, #787878);
322 }
4383bb2 @chriscoyier scrolling menus and light accordions
authored
323 .dark-grey:active, .dark-grey.open {
5c6583c @chriscoyier Spinner API
authored
324 .gradient(#787878, #A4A4A4);
325 }
326
327 .yellow {
328 border: solid 1px #DFC235;
329 text-shadow: 0 1px 0 #FCFC85;
330 .gradient(#F8F777, #DFC235);
331 }
332 .yellow:hover {
333 border: solid 1px #999;
334 .gradient(#FCFC85, #EDCE38);
335 }
4383bb2 @chriscoyier scrolling menus and light accordions
authored
336 .yellow:active, .yellow.open {
5c6583c @chriscoyier Spinner API
authored
337 .gradient(#F7E258, #FAF476);
338 }
339
340 .green {
341 color: white;
342 border: 0;
343 text-shadow: 0 -1px 0 #677E2C;
344 .gradient(#ADC93F, #799334);
345 }
346 .green:hover {
347 border: 0;
348 .gradient(#B4D141, #819D37);
349 }
4383bb2 @chriscoyier scrolling menus and light accordions
authored
350 .green:active, .green.open {
5c6583c @chriscoyier Spinner API
authored
351 .gradient(#819D37, #B4D141);
352 }
353
354
355 /* Variations */
356 .btn-small {
357 font-size: 11px;
358 padding: 3px 9px;
359 }
360 .btn-large {
361 font-size: 14px;
362 padding: 9px 18px;
363 }
364 .no-emphasize {
365 font-weight: normal;
366 }
367 .no-border, .no-border:hover {
368 border: 0;
369 }
370 .shadow {
4383bb2 @chriscoyier scrolling menus and light accordions
authored
371 .drop-shadow(0, 2px, 2px, 0, 0.25);
5c6583c @chriscoyier Spinner API
authored
372 }
Something went wrong with that request. Please try again.