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