docs/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 };