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         .#{$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 };