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