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