Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _button.scss
1 /**
2   * @class Ext.Button
3   * Used to create the base structure of an Ext.Button
4   */
5 @mixin extjs-button {
6     .#{$prefix}btn {
7         display: inline-block;
8         zoom: 1;
9         *display: inline;
10         position: relative;
11         
12         cursor: pointer;
13         cursor: hand;
14         
15         white-space: nowrap;
16         
17         vertical-align: middle;
18         
19         * {
20             cursor: pointer;
21             cursor: hand;
22         }
23         
24         background-repeat: no-repeat;
25         
26         em {
27             background-repeat: no-repeat;
28
29             // Styles for an anchor button.
30             a {
31                 text-decoration: none;
32                 display: inline-block;
33                 color: inherit;
34             }
35         }
36         
37         button {
38             margin: 0;
39             padding: 0;      
40             border: 0;  
41             width: auto;    
42             background: none;
43             outline: 0 none;
44             overflow: hidden;
45             vertical-align: bottom;
46             -webkit-appearance: none;
47
48             &::-moz-focus-inner {
49                 border: 0;
50                 padding: 0;
51             }
52         }
53
54         .#{$prefix}btn-inner {
55             display: block;
56             white-space: nowrap;
57             text-align: center;
58             background-color: transparent;
59             background-repeat: no-repeat;
60             background-position: left center;
61         }
62     }
63     
64     .#{$prefix}btn-disabled {
65         @include opacity(1);
66     }
67     
68     .#{$prefix}btn-disabled span {
69         @include opacity(.5);
70     }
71     
72     //remove the opacity rule of IE6.
73     .#{$prefix}ie6 .#{$prefix}btn-disabled,
74     .#{$prefix}ie6 .#{$prefix}btn-disabled span,
75     .#{$prefix}ie7 .#{$prefix}btn-disabled span {
76         filter:none;
77     }
78     
79     @if $include-ie {
80         * html .#{$prefix}ie {
81             .#{$prefix}btn button {
82                 width: 1px;
83             }
84         }
85
86         .#{$prefix}ie .#{$prefix}btn button {
87             overflow-x: visible; /*prevents extra horiz space in IE*/
88             vertical-align: baseline; /*IE doesn't like bottom*/
89         }
90
91         .#{$prefix}strict .#{$prefix}ie6,
92         .#{$prefix}strict .#{$prefix}ie7 {
93             .#{$prefix}btn .#{$prefix}frame-mc {
94                 height: 100%;
95             }
96         }  
97     }
98   
99     @if not $supports-border-radius or $compile-all {
100         .#{$prefix}nbr {
101             .#{$prefix}btn {
102                 .#{$prefix}frame-mc {
103                     vertical-align: middle;
104                     white-space: nowrap;
105                     text-align: center;
106                     cursor: pointer;
107                 }
108             }
109         }    
110     }
111
112     .#{$prefix}btn-icon-text-right .#{$prefix}btn-inner {
113         background-position: right center;
114     }
115
116     .#{$prefix}btn-icon-text-top .#{$prefix}btn-inner {
117         background-position: center top;
118     }
119
120     .#{$prefix}btn-icon-text-bottom .#{$prefix}btn-inner {
121         background-position: center bottom;
122     }
123   
124     .#{$prefix}btn-arrow-right {
125         background: transparent no-repeat right center;
126         padding-right: $button-arrow-size;
127         
128         .#{$prefix}btn-inner {
129             padding-right: 0 !important;
130         }
131     }
132
133     .#{$prefix}toolbar .#{$prefix}btn-arrow-right {
134         padding-right: $button-toolbar-arrow-size;
135     }
136
137     .#{$prefix}btn-arrow-bottom {
138         background: transparent no-repeat center bottom;
139         padding-bottom: $button-arrow-size;
140     }
141
142     .#{$prefix}btn-arrow {
143         background-image: theme-image($theme-name, 'button/arrow.gif');    
144         display: block;
145     }
146
147
148     //split buttons
149     .#{$prefix}btn-split-right,
150     .#{$prefix}btn-over .#{$prefix}btn-split-right {
151         background: transparent theme-image($theme-name, 'button/s-arrow.gif') no-repeat right center;
152         padding-right: $button-split-size !important;
153     }
154   
155     .#{$prefix}btn-split-bottom,
156     .#{$prefix}btn-over .#{$prefix}btn-split-bottom {
157         background: transparent theme-image($theme-name, 'button/s-arrow-b.gif') no-repeat center bottom;
158         padding-bottom: $button-split-size;
159     }
160     
161     .#{$prefix}toolbar .#{$prefix}btn-split-right {
162         background-image: theme-image($theme-name, 'button/s-arrow-noline.gif');
163         padding-right: $button-toolbar-split-size !important;
164     }
165     
166     .#{$prefix}toolbar .#{$prefix}btn-split-bottom {
167         background-image: theme-image($theme-name, 'button/s-arrow-b-noline.gif');
168     }
169   
170     .#{$prefix}btn-split {
171         display: block;
172     }
173            
174     .#{$prefix}item-disabled,
175     .#{$prefix}item-disabled * {
176         cursor: default;
177     }
178
179     .#{$prefix}cycle-fixed-width .#{$prefix}btn-inner {
180         text-align: inherit;
181     }
182
183     .#{$prefix}btn-over .#{$prefix}btn-split-right { background-image: theme-image($theme-name, 'button/s-arrow-o.gif'); }
184     .#{$prefix}btn-over .#{$prefix}btn-split-bottom { background-image: theme-image($theme-name, 'button/s-arrow-bo.gif'); }
185     
186     @include extjs-button-ui(
187         /* UI + Scale */
188         'default-small',
189         
190         $button-small-border-radius,
191         $button-small-border-width,    
192         
193         $button-default-border-color,
194         $button-default-border-color-over,
195         $button-default-border-color-focus,
196         $button-default-border-color-pressed,
197         $button-default-border-color-disabled,
198         
199         $button-small-padding,
200         $button-small-text-padding,
201
202         $button-default-background-color,
203         $button-default-background-color-over,
204         $button-default-background-color-focus,
205         $button-default-background-color-pressed,
206         $button-default-background-color-disabled,
207         
208         $button-default-background-gradient,
209         $button-default-background-gradient-over,
210         $button-default-background-gradient-focus,
211         $button-default-background-gradient-pressed,
212         $button-default-background-gradient-disabled,
213
214         $button-default-color,
215         $button-default-color-over,
216         $button-default-color-focus,
217         $button-default-color-pressed,
218         $button-default-color-disabled,
219                 
220         $button-small-font-size,
221         $button-small-font-size-over,
222         $button-small-font-size-focus,
223         $button-small-font-size-pressed,
224         $button-small-font-size-disabled,
225         
226         $button-small-font-weight,
227         $button-small-font-weight-over,
228         $button-small-font-weight-focus,
229         $button-small-font-weight-pressed,
230         $button-small-font-weight-disabled,
231         
232         $button-small-font-family,
233         $button-small-font-family-over,
234         $button-small-font-family-focus,
235         $button-small-font-family-pressed,
236         $button-small-font-family-disabled,
237         
238         $button-small-icon-size
239     );
240         
241     @include extjs-button-ui(
242         'default-medium',
243         
244         $button-medium-border-radius,
245         $button-medium-border-width,    
246         
247         $button-default-border-color,
248         $button-default-border-color-over,
249         $button-default-border-color-focus,
250         $button-default-border-color-pressed,
251         $button-default-border-color-disabled,
252         
253         $button-medium-padding,
254         $button-medium-text-padding,
255
256         $button-default-background-color,
257         $button-default-background-color-over,
258         $button-default-background-color-focus,
259         $button-default-background-color-pressed,
260         $button-default-background-color-disabled,
261         
262         $button-default-background-gradient,
263         $button-default-background-gradient-over,
264         $button-default-background-gradient-focus,
265         $button-default-background-gradient-pressed,
266         $button-default-background-gradient-disabled,
267
268         $button-default-color,
269         $button-default-color-over,
270         $button-default-color-focus,
271         $button-default-color-pressed,
272         $button-default-color-disabled,
273                 
274         $button-medium-font-size,
275         $button-medium-font-size-over,
276         $button-medium-font-size-focus,
277         $button-medium-font-size-pressed,
278         $button-medium-font-size-disabled,
279         
280         $button-medium-font-weight,
281         $button-medium-font-weight-over,
282         $button-medium-font-weight-focus,
283         $button-medium-font-weight-pressed,
284         $button-medium-font-weight-disabled,
285         
286         $button-medium-font-family,
287         $button-medium-font-family-over,
288         $button-medium-font-family-focus,
289         $button-medium-font-family-pressed,
290         $button-medium-font-family-disabled,
291         
292         $button-medium-icon-size
293     );
294     
295     @include extjs-button-ui(
296         'default-large',
297         
298         $button-large-border-radius,
299         $button-large-border-width,    
300         
301         $button-default-border-color,
302         $button-default-border-color-over,
303         $button-default-border-color-focus,
304         $button-default-border-color-pressed,
305         $button-default-border-color-disabled,
306         
307         $button-large-padding,
308         $button-large-text-padding,
309
310         $button-default-background-color,
311         $button-default-background-color-over,
312         $button-default-background-color-focus,
313         $button-default-background-color-pressed,
314         $button-default-background-color-disabled,
315         
316         $button-default-background-gradient,
317         $button-default-background-gradient-over,
318         $button-default-background-gradient-focus,
319         $button-default-background-gradient-pressed,
320         $button-default-background-gradient-disabled,
321
322         $button-default-color,
323         $button-default-color-over,
324         $button-default-color-focus,
325         $button-default-color-pressed,
326         $button-default-color-disabled,
327                 
328         $button-large-font-size,
329         $button-large-font-size-over,
330         $button-large-font-size-focus,
331         $button-large-font-size-pressed,
332         $button-large-font-size-disabled,
333         
334         $button-large-font-weight,
335         $button-large-font-weight-over,
336         $button-large-font-weight-focus,
337         $button-large-font-weight-pressed,
338         $button-large-font-weight-disabled,
339         
340         $button-large-font-family,
341         $button-large-font-family-over,
342         $button-large-font-family-focus,
343         $button-large-font-family-pressed,
344         $button-large-font-family-disabled,
345         
346         $button-large-icon-size
347     );
348     
349     @include extjs-button-ui(
350         'default-toolbar-small',
351         
352         $button-small-border-radius,
353         $button-small-border-width,    
354         
355         $button-toolbar-border-color,
356         $button-toolbar-border-color-over,
357         $button-toolbar-border-color-focus,
358         $button-toolbar-border-color-pressed,
359         $button-toolbar-border-color-disabled,
360         
361         $button-small-padding,
362         $button-small-text-padding,
363
364         $button-toolbar-background-color,
365         $button-toolbar-background-color-over,
366         $button-toolbar-background-color-focus,
367         $button-toolbar-background-color-pressed,
368         $button-toolbar-background-color-disabled,
369         
370         $button-toolbar-background-gradient,
371         $button-toolbar-background-gradient-over,
372         $button-toolbar-background-gradient-focus,
373         $button-toolbar-background-gradient-pressed,
374         $button-toolbar-background-gradient-disabled,
375
376         $button-toolbar-color,
377         $button-toolbar-color-over,
378         $button-toolbar-color-focus,
379         $button-toolbar-color-pressed,
380         $button-toolbar-color-disabled,
381                 
382         $button-small-font-size,
383         $button-small-font-size-over,
384         $button-small-font-size-focus,
385         $button-small-font-size-pressed,
386         $button-small-font-size-disabled,
387         
388         $button-small-font-weight,
389         $button-small-font-weight-over,
390         $button-small-font-weight-focus,
391         $button-small-font-weight-pressed,
392         $button-small-font-weight-disabled,
393         
394         $button-small-font-family,
395         $button-small-font-family-over,
396         $button-small-font-family-focus,
397         $button-small-font-family-pressed,
398         $button-small-font-family-disabled,
399         
400         $button-small-icon-size
401     );
402     
403     @include extjs-button-ui(
404         'default-toolbar-medium',
405         
406         $button-medium-border-radius,
407         $button-medium-border-width,    
408         
409         $button-toolbar-border-color,
410         $button-toolbar-border-color-over,
411         $button-toolbar-border-color-focus,
412         $button-toolbar-border-color-pressed,
413         $button-toolbar-border-color-disabled,
414         
415         $button-medium-padding,
416         $button-medium-text-padding,
417
418         $button-toolbar-background-color,
419         $button-toolbar-background-color-over,
420         $button-toolbar-background-color-focus,
421         $button-toolbar-background-color-pressed,
422         $button-toolbar-background-color-disabled,
423         
424         $button-toolbar-background-gradient,
425         $button-toolbar-background-gradient-over,
426         $button-toolbar-background-gradient-focus,
427         $button-toolbar-background-gradient-pressed,
428         $button-toolbar-background-gradient-disabled,
429
430         $button-toolbar-color,
431         $button-toolbar-color-over,
432         $button-toolbar-color-focus,
433         $button-toolbar-color-pressed,
434         $button-toolbar-color-disabled,
435                 
436         $button-medium-font-size,
437         $button-medium-font-size-over,
438         $button-medium-font-size-focus,
439         $button-medium-font-size-pressed,
440         $button-medium-font-size-disabled,
441         
442         $button-medium-font-weight,
443         $button-medium-font-weight-over,
444         $button-medium-font-weight-focus,
445         $button-medium-font-weight-pressed,
446         $button-medium-font-weight-disabled,
447         
448         $button-medium-font-family,
449         $button-medium-font-family-over,
450         $button-medium-font-family-focus,
451         $button-medium-font-family-pressed,
452         $button-medium-font-family-disabled,
453         
454         $button-medium-icon-size
455     );
456     
457     @include extjs-button-ui(
458         'default-toolbar-large',
459         
460         $button-large-border-radius,
461         $button-large-border-width,    
462         
463         $button-toolbar-border-color,
464         $button-toolbar-border-color-over,
465         $button-toolbar-border-color-focus,
466         $button-toolbar-border-color-pressed,
467         $button-toolbar-border-color-disabled,
468         
469         $button-large-padding,
470         $button-large-text-padding,
471
472         $button-toolbar-background-color,
473         $button-toolbar-background-color-over,
474         $button-toolbar-background-color-focus,
475         $button-toolbar-background-color-pressed,
476         $button-toolbar-background-color-disabled,
477         
478         $button-toolbar-background-gradient,
479         $button-toolbar-background-gradient-over,
480         $button-toolbar-background-gradient-focus,
481         $button-toolbar-background-gradient-pressed,
482         $button-toolbar-background-gradient-disabled,
483
484         $button-toolbar-color,
485         $button-toolbar-color-over,
486         $button-toolbar-color-focus,
487         $button-toolbar-color-pressed,
488         $button-toolbar-color-disabled,
489                 
490         $button-large-font-size,
491         $button-large-font-size-over,
492         $button-large-font-size-focus,
493         $button-large-font-size-pressed,
494         $button-large-font-size-disabled,
495         
496         $button-large-font-weight,
497         $button-large-font-weight-over,
498         $button-large-font-weight-focus,
499         $button-large-font-weight-pressed,
500         $button-large-font-weight-disabled,
501         
502         $button-large-font-family,
503         $button-large-font-family-over,
504         $button-large-font-family-focus,
505         $button-large-font-family-pressed,
506         $button-large-font-family-disabled,
507         
508         $button-large-icon-size
509     );
510     
511     .#{$prefix}btn-default-toolbar-small-disabled,
512     .#{$prefix}btn-default-toolbar-medium-disabled,
513     .#{$prefix}btn-default-toolbar-large-disabled {
514         border-color: transparent;
515         
516         background-image: none;
517         background: transparent;
518     }
519 }
520
521 @mixin extjs-button-ui(
522     $ui,  
523     
524     $border-radius: 0px,
525     
526     $border-width: 0px,
527             
528     $border-color: null,
529     $border-color-over: null,
530     $border-color-focus: null,
531     $border-color-pressed: null,
532     $border-color-disabled: null,
533     
534     $padding: null,
535     $text-padding: null,
536     
537     $background-color: null,
538     $background-color-over: null,
539     $background-color-focus: null,
540     $background-color-pressed: null,
541     $background-color-disabled: null,
542     
543     $background-gradient: null,
544     $background-gradient-over: null,
545     $background-gradient-focus: null,
546     $background-gradient-pressed: null,
547     $background-gradient-disabled: null,
548     
549     $color: null,
550     $color-over: null,
551     $color-focus: null,
552     $color-pressed: null,
553     $color-disabled: null,
554     
555     $font-size: null,
556     $font-size-over: null,
557     $font-size-focus: null,
558     $font-size-pressed: null,
559     $font-size-disabled: null,
560     
561     $font-weight: null,
562     $font-weight-over: null,
563     $font-weight-focus: null,
564     $font-weight-pressed: null,
565     $font-weight-disabled: null,
566     
567     $font-family: null,
568     $font-family-over: null,
569     $font-family-focus: null,
570     $font-family-pressed: null,
571     $font-family-disabled: null,
572     
573     $icon-size: null
574 ) {
575     .#{$prefix}btn-#{$ui} {
576         border-color: $border-color;
577     }
578     
579     @include x-frame('btn', $ui, $border-radius, $border-width, $padding, $background-color, $background-gradient, true);
580     
581     .#{$prefix}btn-#{$ui} .#{$prefix}btn-inner {
582         font-size: $font-size;
583         font-weight: $font-weight;
584         font-family: $font-family;
585         color: $color;
586         background-repeat: no-repeat;
587         padding: 0 $text-padding;
588     }
589     
590     .#{$prefix}btn-#{$ui}-icon,
591     .#{$prefix}btn-#{$ui}-noicon {
592         button,
593         .#{$prefix}btn-inner {
594             height: $icon-size;
595             line-height: $icon-size;
596         }
597     }
598
599     //icons
600     .#{$prefix}btn-#{$ui}-icon {
601         .#{$prefix}btn-inner {
602             padding: 0;
603             width: $icon-size !important;
604         }
605     }
606     
607     .#{$prefix}btn-#{$ui}-icon-text-left {
608         button {
609             height: $icon-size;
610         }
611         .#{$prefix}btn-inner {
612             height: $icon-size;
613             line-height: $icon-size;
614             padding-left: $icon-size + 4px;
615         }
616     }
617
618     .#{$prefix}btn-#{$ui}-icon-text-right {
619         button {
620             height: $icon-size;
621         }
622         .#{$prefix}btn-inner {
623             height: $icon-size;
624             line-height: $icon-size;
625             padding-right: $icon-size + 4px !important;
626         }
627     }
628     
629     .#{$prefix}btn-#{$ui}-icon-text-top {
630         .#{$prefix}btn-inner {
631             padding-top: $icon-size + 4px;
632         }
633     }
634     
635     .#{$prefix}btn-#{$ui}-icon-text-bottom {
636         .#{$prefix}btn-inner {
637             padding-bottom: $icon-size + 4px;
638         }
639     }
640     
641     .#{$prefix}btn-#{$ui}-over {
642         @if $border-color-over != $border-color {
643             border-color: $border-color-over;
644         }
645         @if $background-color-over != null {
646             @if $background-gradient-over != $background-gradient {
647                 @include background-gradient($background-color-over, $background-gradient-over);
648             }
649             @else if $background-color-over != $background-color {
650                 background-color: $background-color-over;
651             }
652         }
653
654         .#{$prefix}btn-inner {
655             @if $color-over != $color {
656                 color: $color-over;
657             }
658             @if $font-weight-over != $font-weight {
659                 font-weight: $font-weight-over;
660             }
661             @if $font-size-over != $font-size {
662                 font-size: $font-size-over;
663             }
664             @if $font-family-over != $font-family {
665                 font-family: $font-family-over;
666             } 
667         }
668     }
669     
670     .#{$prefix}btn-#{$ui}-focus {
671         @if $border-color-focus != $border-color {
672             border-color: $border-color-focus;
673         }
674         @if $background-color-focus != null {
675             @if $background-gradient-focus != $background-gradient {
676                 @include background-gradient($background-color-focus, $background-gradient-focus);
677             }
678             @else if $background-color-focus != $background-color {
679                 background-color: $background-color-focus;
680             }
681         }
682
683         .#{$prefix}btn-inner {
684             @if $color-focus != $color {
685                 color: $color-focus;
686             }
687             @if $font-weight-focus != $font-weight {
688                 font-weight: $font-weight-focus;
689             }
690             @if $font-size-focus != $font-size {
691                 font-size: $font-size-focus;
692             }
693             @if $font-family-focus != $font-family {
694                 font-family: $font-family-focus;
695             } 
696         }
697     }
698
699     .#{$prefix}btn-#{$ui}-menu-active,
700     .#{$prefix}btn-#{$ui}-pressed {
701         @if $border-color-pressed != $border-color {
702             border-color: $border-color-pressed;
703         }
704         @if $background-color-pressed != null {
705             @if $background-gradient-pressed != $background-gradient {
706                 @include background-gradient($background-color-pressed, $background-gradient-pressed);
707             }
708             @else if $background-color-pressed != $background-color {
709                 background-color: $background-color-pressed;
710             }
711         }
712
713         .#{$prefix}btn-inner {
714             @if $color-pressed != $color {
715                 color: $color-pressed;
716             }
717             @if $font-weight-pressed != $font-weight {
718                 font-weight: $font-weight-pressed;
719             }
720             @if $font-size-pressed != $font-size {
721                 font-size: $font-size-pressed;
722             }
723             @if $font-family-pressed != $font-family {
724                 font-family: $font-family-pressed;
725             } 
726         }
727     }
728     
729     .#{$prefix}btn-#{$ui}-disabled {
730         @if $border-color-disabled != $border-color {
731             border-color: $border-color-disabled;
732         }
733         @if $background-color-disabled != null {
734             @if $background-gradient-disabled != $background-gradient {
735                 @include background-gradient($background-color-disabled, $background-gradient-disabled);
736             }
737             @else if $background-color-disabled != $background-color {
738                 background-color: $background-color-disabled;
739             }
740         }
741
742         .#{$prefix}btn-inner {
743             @if $color-disabled != $color {
744                 color: $color !important;
745             }
746             @if $font-weight-disabled != $font-weight {
747                 font-weight: $font-weight-disabled;
748             }
749             @if $font-size-disabled != $font-size {
750                 font-size: $font-size-disabled;
751             }
752             @if $font-family-disabled != $font-family {
753                 font-family: $font-family-disabled;
754             } 
755         }
756     }
757     
758     .#{$prefix}ie .#{$prefix}btn-#{$ui}-disabled {
759         .#{$prefix}btn-inner {
760             @if $color-disabled != $color {
761                 color: darken($color-disabled, 20) !important;
762             }
763         }
764     }
765     
766     .#{$prefix}ie6 .#{$prefix}btn-#{$ui}-disabled {
767         .#{$prefix}btn-inner {
768             @if $color-disabled != $color {
769                 color: $color-disabled !important;
770             }
771         }
772     }
773     
774     @if not $supports-border-radius or $compile-all {    
775         .#{$prefix}nbr { 
776             .#{$prefix}btn-#{$ui}-over {
777                 .#{$prefix}frame-tl,
778                 .#{$prefix}frame-bl,
779                 .#{$prefix}frame-tr,
780                 .#{$prefix}frame-br,
781                 .#{$prefix}frame-tc,
782                 .#{$prefix}frame-bc {
783                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-corners.gif');
784                 }
785                 .#{$prefix}frame-ml,
786                 .#{$prefix}frame-mr {
787                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-sides.gif');
788                 }
789                 .#{$prefix}frame-mc {
790                     background-color: $background-color-over;
791                     @if $background-gradient-over {
792                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
793                     }
794                 }
795             }
796             
797             .#{$prefix}btn-#{$ui}-focus {
798                 .#{$prefix}frame-tl,
799                 .#{$prefix}frame-bl,
800                 .#{$prefix}frame-tr,
801                 .#{$prefix}frame-br,
802                 .#{$prefix}frame-tc,
803                 .#{$prefix}frame-bc {
804                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-corners.gif');
805                 }
806                 .#{$prefix}frame-ml,
807                 .#{$prefix}frame-mr {
808                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-sides.gif');
809                 }
810                 .#{$prefix}frame-mc {
811                     background-color: $background-color-focus;
812                     @if $background-gradient-focus {
813                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
814                     }
815                 }
816             }
817             
818             .#{$prefix}btn-#{$ui}-menu-active,
819             .#{$prefix}btn-#{$ui}-pressed {
820                 .#{$prefix}frame-tl,
821                 .#{$prefix}frame-bl,
822                 .#{$prefix}frame-tr,
823                 .#{$prefix}frame-br,
824                 .#{$prefix}frame-tc,
825                 .#{$prefix}frame-bc {
826                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-corners.gif');
827                 }
828                 .#{$prefix}frame-ml,
829                 .#{$prefix}frame-mr {
830                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-sides.gif');
831                 }
832                 .#{$prefix}frame-mc {
833                     background-color: $background-color-pressed;
834                     @if $background-gradient-pressed {
835                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
836                     }
837                 }
838             }
839             
840             .#{$prefix}btn-#{$ui}-disabled {
841                 .#{$prefix}frame-tl,
842                 .#{$prefix}frame-bl,
843                 .#{$prefix}frame-tr,
844                 .#{$prefix}frame-br,
845                 .#{$prefix}frame-tc,
846                 .#{$prefix}frame-bc {
847                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-corners.gif');
848                 }
849                 .#{$prefix}frame-ml,
850                 .#{$prefix}frame-mr {
851                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-sides.gif');
852                 }
853                 .#{$prefix}frame-mc {
854                     background-color: $background-color-disabled;
855                     @if $background-gradient-disabled {
856                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
857                     }
858                 }  
859             }
860         }
861     }
862     
863     @if not $supports-gradients or $compile-all {
864         @if $background-gradient != null {
865             .#{$prefix}nlg { 
866                 .#{$prefix}btn-#{$ui} {
867                     background-repeat: repeat-x;
868                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-bg.gif');
869                 }
870             }
871         }
872         
873         @if $background-gradient-over != null {
874             .#{$prefix}nlg { 
875                 .#{$prefix}btn-#{$ui}-over {
876                     background-repeat: repeat-x;
877                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
878                 }
879             }
880         }
881         
882         @if $background-gradient-focus != null {
883             .#{$prefix}nlg { 
884                 .#{$prefix}btn-#{$ui}-focus {
885                     background-repeat: repeat-x;
886                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
887                 }
888             }
889         }
890
891         @if $background-gradient-pressed != null {
892             .#{$prefix}nlg { 
893                 .#{$prefix}btn-#{$ui}-menu-active,
894                 .#{$prefix}btn-#{$ui}-pressed {
895                     background-repeat: repeat-x;
896                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
897                 }
898             }
899         }
900         
901         @if $background-gradient-disabled != null {
902             .#{$prefix}nlg {
903                 .#{$prefix}btn-#{$ui}-disabled {
904                     background-repeat: repeat-x;
905                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
906                 }
907             }
908         }
909     }
910 };