Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / resources / css / structure / button.css
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 .x-btn{
8         cursor:pointer;
9         white-space: nowrap;
10 }
11
12 .x-btn button{
13     border:0 none;
14     background-color:transparent;
15     padding-left:3px;
16     padding-right:3px;
17     cursor:pointer;
18     margin:0;
19     overflow:visible;
20     width:auto;
21     -moz-outline:0 none;
22     outline:0 none;
23 }
24
25 * html .ext-ie .x-btn button {
26     width:1px;
27 }
28
29 .ext-gecko .x-btn button, .ext-webkit .x-btn button {
30     padding-left:0;
31     padding-right:0;
32 }
33
34 .ext-gecko .x-btn button::-moz-focus-inner {
35     padding:0;
36 }
37
38 .ext-ie .x-btn button {
39     padding-top:2px;
40 }
41
42 .x-btn td {
43     padding:0 !important;
44 }
45
46 .x-btn-text {
47     cursor:pointer;
48         white-space: nowrap;
49     padding:0;
50 }
51
52 /* icon placement and sizing styles */
53
54 /* Only text */
55 .x-btn-noicon .x-btn-small .x-btn-text{
56         height: 16px;
57 }
58
59 .x-btn-noicon .x-btn-medium .x-btn-text{
60     height: 24px;
61 }
62
63 .x-btn-noicon .x-btn-large .x-btn-text{
64     height: 32px;
65 }
66
67 /* Only icons */
68 .x-btn-icon .x-btn-text{
69     background-position: center;
70         background-repeat: no-repeat;
71 }
72
73 .x-btn-icon .x-btn-small .x-btn-text{
74         height: 16px;
75         width: 16px;
76 }
77
78 .x-btn-icon .x-btn-medium .x-btn-text{
79     height: 24px;
80         width: 24px;
81 }
82
83 .x-btn-icon .x-btn-large .x-btn-text{
84     height: 32px;
85         width: 32px;
86 }
87
88 /* Icons and text */
89 /* left */
90 .x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
91     background-position: 0 center;
92         background-repeat: no-repeat;
93     padding-left:18px;
94     height:16px;
95 }
96
97 .x-btn-text-icon .x-btn-icon-medium-left .x-btn-text{
98     background-position: 0 center;
99         background-repeat: no-repeat;
100     padding-left:26px;
101     height:24px;
102 }
103
104 .x-btn-text-icon .x-btn-icon-large-left .x-btn-text{
105     background-position: 0 center;
106         background-repeat: no-repeat;
107     padding-left:34px;
108     height:32px;
109 }
110
111 /* top */
112 .x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
113     background-position: center 0;
114         background-repeat: no-repeat;
115     padding-top:18px;
116 }
117
118 .x-btn-text-icon .x-btn-icon-medium-top .x-btn-text{
119     background-position: center 0;
120         background-repeat: no-repeat;
121     padding-top:26px;
122 }
123
124 .x-btn-text-icon .x-btn-icon-large-top .x-btn-text{
125     background-position: center 0;
126         background-repeat: no-repeat;
127     padding-top:34px;
128 }
129
130 /* right */
131 .x-btn-text-icon .x-btn-icon-small-right .x-btn-text{
132     background-position: right center;
133         background-repeat: no-repeat;
134     padding-right:18px;
135     height:16px;
136 }
137
138 .x-btn-text-icon .x-btn-icon-medium-right .x-btn-text{
139     background-position: right center;
140         background-repeat: no-repeat;
141     padding-right:26px;
142     height:24px;
143 }
144
145 .x-btn-text-icon .x-btn-icon-large-right .x-btn-text{
146     background-position: right center;
147         background-repeat: no-repeat;
148     padding-right:34px;
149     height:32px;
150 }
151
152 /* bottom */
153 .x-btn-text-icon .x-btn-icon-small-bottom .x-btn-text{
154     background-position: center bottom;
155         background-repeat: no-repeat;
156     padding-bottom:18px;
157 }
158
159 .x-btn-text-icon .x-btn-icon-medium-bottom .x-btn-text{
160     background-position: center bottom;
161         background-repeat: no-repeat;
162     padding-bottom:26px;
163 }
164
165 .x-btn-text-icon .x-btn-icon-large-bottom .x-btn-text{
166     background-position: center bottom;
167         background-repeat: no-repeat;
168     padding-bottom:34px;
169 }
170
171 /* background positioning */
172 .x-btn-tr i, .x-btn-tl i, .x-btn-mr i, .x-btn-ml i, .x-btn-br i, .x-btn-bl i{
173         font-size:1px;
174     line-height:1px;
175     width:3px;
176     display:block;
177     overflow:hidden;
178 }
179
180 .x-btn-tr i, .x-btn-tl i, .x-btn-br i, .x-btn-bl i{
181         height:3px;
182 }
183
184 .x-btn-tl{
185         width:3px;
186         height:3px;
187         background:no-repeat 0 0;
188 }
189 .x-btn-tr{
190         width:3px;
191         height:3px;
192         background:no-repeat -3px 0;
193 }
194 .x-btn-tc{
195         height:3px;
196         background:repeat-x 0 -6px;
197 }
198
199 .x-btn-ml{
200         width:3px;
201         background:no-repeat 0 -24px;
202 }
203 .x-btn-mr{
204         width:3px;
205         background:no-repeat -3px -24px;
206 }
207
208 .x-btn-mc{
209         background:repeat-x 0 -1096px;
210     vertical-align: middle;
211         text-align:center;
212         padding:0 5px;
213         cursor:pointer;
214         white-space:nowrap;
215 }
216
217 /* Fixes an issue with the button height */
218 .ext-strict .ext-ie6 .x-btn-mc, .ext-strict .ext-ie7 .x-btn-mc {
219     height: 100%;
220 }
221
222 .x-btn-bl{
223         width:3px;
224         height:3px;
225         background:no-repeat 0 -3px;
226 }
227
228 .x-btn-br{
229         width:3px;
230         height:3px;
231         background:no-repeat -3px -3px;
232 }
233
234 .x-btn-bc{
235         height:3px;
236         background:repeat-x 0 -15px;
237 }
238
239 .x-btn-over .x-btn-tl{
240         background-position: -6px 0;
241 }
242
243 .x-btn-over .x-btn-tr{
244         background-position: -9px 0;
245 }
246
247 .x-btn-over .x-btn-tc{
248         background-position: 0 -9px;
249 }
250
251 .x-btn-over .x-btn-ml{
252         background-position: -6px -24px;
253 }
254
255 .x-btn-over .x-btn-mr{
256         background-position: -9px -24px;
257 }
258
259 .x-btn-over .x-btn-mc{
260         background-position: 0 -2168px;
261 }
262
263 .x-btn-over .x-btn-bl{
264         background-position: -6px -3px;
265 }
266
267 .x-btn-over .x-btn-br{
268         background-position: -9px -3px;
269 }
270
271 .x-btn-over .x-btn-bc{
272         background-position: 0 -18px;
273 }
274
275 .x-btn-click .x-btn-tl, .x-btn-menu-active .x-btn-tl, .x-btn-pressed .x-btn-tl{
276         background-position: -12px 0;
277 }
278
279 .x-btn-click .x-btn-tr, .x-btn-menu-active .x-btn-tr, .x-btn-pressed .x-btn-tr{
280         background-position: -15px 0;
281 }
282
283 .x-btn-click .x-btn-tc, .x-btn-menu-active .x-btn-tc, .x-btn-pressed .x-btn-tc{
284         background-position: 0 -12px;
285 }
286
287 .x-btn-click .x-btn-ml, .x-btn-menu-active .x-btn-ml, .x-btn-pressed .x-btn-ml{
288         background-position: -12px -24px;
289 }
290
291 .x-btn-click .x-btn-mr, .x-btn-menu-active .x-btn-mr, .x-btn-pressed .x-btn-mr{
292         background-position: -15px -24px;
293 }
294
295 .x-btn-click .x-btn-mc, .x-btn-menu-active .x-btn-mc, .x-btn-pressed .x-btn-mc{
296         background-position: 0 -3240px;
297 }
298
299 .x-btn-click .x-btn-bl, .x-btn-menu-active .x-btn-bl, .x-btn-pressed .x-btn-bl{
300         background-position: -12px -3px;
301 }
302
303 .x-btn-click .x-btn-br, .x-btn-menu-active .x-btn-br, .x-btn-pressed .x-btn-br{
304         background-position: -15px -3px;
305 }
306
307 .x-btn-click .x-btn-bc, .x-btn-menu-active .x-btn-bc, .x-btn-pressed .x-btn-bc{
308         background-position: 0 -21px;
309 }
310
311 .x-btn-disabled *{
312         cursor:default !important;
313 }
314
315
316 /* With a menu arrow */
317 /* right */
318 .x-btn-mc em.x-btn-arrow {
319     display:block;
320     background:transparent no-repeat right center;
321         padding-right:10px;
322 }
323
324 .x-btn-mc em.x-btn-split {
325     display:block;
326     background:transparent no-repeat right center;
327         padding-right:14px;
328 }
329
330 /* bottom */
331 .x-btn-mc em.x-btn-arrow-bottom {
332     display:block;
333     background:transparent no-repeat center bottom;
334         padding-bottom:14px;
335 }
336
337 .x-btn-mc em.x-btn-split-bottom {
338     display:block;
339     background:transparent no-repeat center bottom;
340         padding-bottom:14px;
341 }
342
343 /* height adjustment class */
344 .x-btn-as-arrow .x-btn-mc em {
345     display:block;
346     background-color:transparent;
347         padding-bottom:14px;
348 }
349
350 /* groups */
351 .x-btn-group {
352     padding:1px;
353 }
354
355 .x-btn-group-header {
356     padding:2px;
357     text-align:center;
358 }
359
360 .x-btn-group-tc {
361         background: transparent repeat-x 0 0;
362         overflow:hidden;
363 }
364
365 .x-btn-group-tl {
366         background: transparent no-repeat 0 0;
367         padding-left:3px;
368     zoom:1;
369 }
370
371 .x-btn-group-tr {
372         background: transparent no-repeat right 0;
373         zoom:1;
374     padding-right:3px;
375 }
376
377 .x-btn-group-bc {
378         background: transparent repeat-x 0 bottom;
379     zoom:1;
380 }
381
382 .x-btn-group-bc .x-panel-footer {
383     zoom:1;
384 }
385
386 .x-btn-group-bl {
387         background: transparent no-repeat 0 bottom;
388         padding-left:3px;
389     zoom:1;
390 }
391
392 .x-btn-group-br {
393         background: transparent no-repeat right bottom;
394         padding-right:3px;
395     zoom:1;
396 }
397
398 .x-btn-group-mc {
399     border:0 none;
400     padding:1px 0 0 0;
401     margin:0;
402 }
403
404 .x-btn-group-mc .x-btn-group-body {
405     background-color:transparent;
406     border: 0 none;
407 }
408
409 .x-btn-group-ml {
410         background: transparent repeat-y 0 0;
411         padding-left:3px;
412     zoom:1;
413 }
414
415 .x-btn-group-mr {
416         background: transparent repeat-y right 0;
417         padding-right:3px;
418     zoom:1;
419 }
420
421 .x-btn-group-bc .x-btn-group-footer {
422     padding-bottom:6px;
423 }
424
425 .x-panel-nofooter .x-btn-group-bc {
426         height:3px;
427     font-size:0;
428     line-height:0;
429 }
430
431 .x-btn-group-bwrap {
432     overflow:hidden;
433     zoom:1;
434 }
435
436 .x-btn-group-body {
437     overflow:hidden;
438     zoom:1;
439 }
440
441 .x-btn-group-notitle .x-btn-group-tc {
442         background: transparent repeat-x 0 0;
443         overflow:hidden;
444     height:2px;
445 }