extjs/classic/theme-neutral/sass/var/button/Button.scss

   1 /** @class Ext.button.Button */
   2 //
   3
   4 /**
   5  * @var {number}
   6  * The default width for a button's {@link #cfg-menu} arrow
   7  */
   8 $button-arrow-width: dynamic(8px);
   9
  10 /**
  11  * @var {number}
  12  * The default height for a button's {@link #cfg-menu} arrow
  13  */
  14 $button-arrow-height: dynamic(8px);
  15
  16 /**
  17  * @var {number}
  18  * The default width for a {@link Ext.button.Split Split Button}'s arrow
  19  */
  20 $button-split-width: dynamic(14px);
  21
  22 /**
  23  * @var {number}
  24  * The default height for a {@link Ext.button.Split Split Button}'s arrow
  25  */
  26 $button-split-height: dynamic(14px);
  27
  28 /**
  29  * @var {number}
  30  * The default width for a {@link Ext.button.Split Split Button}'s line.
  31  * Themes that include the line in the arrow background image should set this to 0
  32  */
  33 $button-split-line-width: dynamic(0);
  34
  35 /**
  36  * @var {number}
  37  * The default space between a button's icon and text
  38  */
  39 $button-icon-spacing: dynamic(4px);
  40
  41 /**
  42  * @var {number}
  43  * The default border-radius for a small {@link #scale} button
  44  */
  45 $button-small-border-radius: dynamic(3px);
  46
  47 /**
  48  * @var {number}
  49  * The default border-width for a small {@link #scale} button
  50  */
  51 $button-small-border-width: dynamic(1px);
  52
  53 /**
  54  * @var {number}
  55  * The default padding for a small {@link #scale} button
  56  */
  57 $button-small-padding: dynamic(2px);
  58
  59 /**
  60  * @var {number}
  61  * The default horizontal padding to add to the left and right of the text element for
  62  * a small {@link #scale} button
  63  */
  64 $button-small-text-padding: dynamic(4px);
  65
  66 /**
  67  * @var {number}
  68  * The default font-size for a small {@link #scale} button
  69  */
  70 $button-small-font-size: dynamic(ceil($font-size * .9));  //11px
  71
  72 /**
  73  * @var {number}
  74  * The default font-size for a small {@link #scale} button when the cursor is over the button
  75  */
  76 $button-small-font-size-over: dynamic($button-small-font-size);
  77
  78 /**
  79  * @var {number}
  80  * The default font-size for a small {@link #scale} button when the button is focused
  81  */
  82 $button-small-font-size-focus: dynamic($button-small-font-size-over);
  83
  84 /**
  85  * @var {number}
  86  * The default font-size for a small {@link #scale} button when the button is pressed
  87  */
  88 $button-small-font-size-pressed: dynamic($button-small-font-size);
  89
  90 /**
  91  * @var {number}
  92  * The default font-size for a small {@link #scale} button when the button is focused and
  93  * the cursor is over the button
  94  */
  95 $button-small-font-size-focus-over: dynamic($button-small-font-size-over);
  96
  97 /**
  98  * @var {number}
  99  * The default font-size for a small {@link #scale} button when the button is focused and pressed
 100  */
 101 $button-small-font-size-focus-pressed: dynamic($button-small-font-size-pressed);
 102
 103 /**
 104  * @var {number}
 105  * The default font-size for a small {@link #scale} button when the button is disabled
 106  */
 107 $button-small-font-size-disabled: dynamic($button-small-font-size);
 108
 109 /**
 110  * @var {string}
 111  * The default font-weight for a small {@link #scale} button
 112  */
 113 $button-small-font-weight: dynamic($font-weight);
 114
 115 /**
 116  * @var {string}
 117  * The default font-weight for a small {@link #scale} button when the cursor is over the button
 118  */
 119 $button-small-font-weight-over: dynamic($button-small-font-weight);
 120
 121 /**
 122  * @var {string}
 123  * The default font-weight for a small {@link #scale} button when the button is focused
 124  */
 125 $button-small-font-weight-focus: dynamic($button-small-font-weight-over);
 126
 127 /**
 128  * @var {string}
 129  * The default font-weight for a small {@link #scale} button when the button is pressed
 130  */
 131 $button-small-font-weight-pressed: dynamic($button-small-font-weight);
 132
 133 /**
 134  * @var {string}
 135  * The default font-weight for a small {@link #scale} button when the button is focused
 136  * and the cursor is over the button
 137  */
 138 $button-small-font-weight-focus-over: dynamic($button-small-font-weight-over);
 139
 140 /**
 141  * @var {string}
 142  * The default font-weight for a small {@link #scale} button when the button is focused
 143  * and pressed
 144  */
 145 $button-small-font-weight-focus-pressed: dynamic($button-small-font-weight-pressed);
 146
 147 /**
 148  * @var {string}
 149  * The default font-weight for a small {@link #scale} button when the button is disabled
 150  */
 151 $button-small-font-weight-disabled: dynamic($button-small-font-weight);
 152
 153 /**
 154  * @var {string}
 155  * The default font-family for a small {@link #scale} button
 156  */
 157 $button-small-font-family: dynamic($font-family);
 158
 159 /**
 160  * @var {string}
 161  * The default font-family for a small {@link #scale} button when the cursor is over the button
 162  */
 163 $button-small-font-family-over: dynamic($button-small-font-family);
 164
 165 /**
 166  * @var {string}
 167  * The default font-family for a small {@link #scale} button when the button is focused
 168  */
 169 $button-small-font-family-focus: dynamic($button-small-font-family-over);
 170
 171 /**
 172  * @var {string}
 173  * The default font-family for a small {@link #scale} button when the button is pressed
 174  */
 175 $button-small-font-family-pressed: dynamic($button-small-font-family);
 176
 177 /**
 178  * @var {string}
 179  * The default font-family for a small {@link #scale} button when the button is focused
 180  * and the cursor is over the button
 181  */
 182 $button-small-font-family-focus-over: dynamic($button-small-font-family-over);
 183
 184 /**
 185  * @var {string}
 186  * The default font-family for a small {@link #scale} button when the button is focused
 187  * and pressed
 188  */
 189 $button-small-font-family-focus-pressed: dynamic($button-small-font-family-pressed);
 190
 191 /**
 192  * @var {string}
 193  * The default font-family for a small {@link #scale} button when the button is disabled
 194  */
 195 $button-small-font-family-disabled: dynamic($button-small-font-family);
 196
 197 /**
 198  * @var {number}
 199  * The line-height for the text in a small {@link #scale} button
 200  */
 201 $button-small-line-height: dynamic(16px);
 202
 203 /**
 204  * @var {number}
 205  * The default icon size for a small {@link #scale} button
 206  */
 207 $button-small-icon-size: dynamic(16px);
 208
 209 /**
 210  * @var {number}
 211  * The the font-size for small {@link #scale} button glyphs
 212  */
 213 $button-small-glyph-font-size: dynamic($button-small-icon-size);
 214
 215 /**
 216  * @var {number}
 217  * The space between a small {@link #scale} button's icon and text
 218  */
 219 $button-small-icon-spacing: dynamic($button-icon-spacing);
 220
 221 /**
 222  * @var {number}
 223  * The default width of a small {@link #scale} button's {@link #cfg-menu} arrow
 224  */
 225 $button-small-arrow-width: dynamic($button-arrow-width);
 226
 227 /**
 228  * @var {number}
 229  * The default height of a small {@link #scale} button's {@link #cfg-menu} arrow
 230  */
 231 $button-small-arrow-height: dynamic($button-arrow-height);
 232
 233 /**
 234  * @var {string/list}
 235  * Glyph for a small button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 236  */
 237 $button-small-arrow-glyph: dynamic($fa-var-caret-down 16px $font-icon-font-family);
 238
 239 /**
 240  * @var {number}
 241  * The default width of a small {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 242  */
 243 $button-small-split-width: dynamic($button-split-width);
 244
 245 /**
 246  * @var {number}
 247  * The default height of a small {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 248  */
 249 $button-small-split-height: dynamic($button-split-height);
 250
 251 /**
 252  * @var {number}
 253  * The width of a small {@link #scale} {@link Ext.button.Split Split Button}'s line.
 254  * Themes that include the line in the arrow background image should set this to 0
 255  */
 256 $button-small-split-line-width: dynamic($button-split-line-width);
 257
 258 /**
 259  * @var {number}
 260  * The default border-radius for a medium {@link #scale} button
 261  */
 262 $button-medium-border-radius: dynamic(3px);
 263
 264 /**
 265  * @var {number}
 266  * The default border-width for a medium {@link #scale} button
 267  */
 268 $button-medium-border-width: dynamic(1px);
 269
 270 /**
 271  * @var {number}
 272  * The default padding for a medium {@link #scale} button
 273  */
 274 $button-medium-padding: dynamic(3px);
 275
 276 /**
 277  * @var {number}
 278  * The default horizontal padding to add to the left and right of the text element for
 279  * a medium {@link #scale} button
 280  */
 281 $button-medium-text-padding: dynamic(4px);
 282
 283 /**
 284  * @var {number}
 285  * The default font-size for a medium {@link #scale} button
 286  */
 287 $button-medium-font-size: dynamic($font-size);  //11px
 288
 289 /**
 290  * @var {number}
 291  * The default font-size for a medium {@link #scale} button when the cursor is over the button
 292  */
 293 $button-medium-font-size-over: dynamic($button-medium-font-size);
 294
 295 /**
 296  * @var {number}
 297  * The default font-size for a medium {@link #scale} button when the button is focused
 298  */
 299 $button-medium-font-size-focus: dynamic($button-medium-font-size-over);
 300
 301 /**
 302  * @var {number}
 303  * The default font-size for a medium {@link #scale} button when the button is pressed
 304  */
 305 $button-medium-font-size-pressed: dynamic($button-medium-font-size);
 306
 307 /**
 308  * @var {number}
 309  * The default font-size for a medium {@link #scale} button when the button is focused
 310  * and the cursor is over the button
 311  */
 312 $button-medium-font-size-focus-over: dynamic($button-medium-font-size-over);
 313
 314 /**
 315  * @var {number}
 316  * The default font-size for a medium {@link #scale} button when the button is focused
 317  * and pressed
 318  */
 319 $button-medium-font-size-focus-pressed: dynamic($button-medium-font-size-pressed);
 320
 321 /**
 322  * @var {number}
 323  * The default font-size for a medium {@link #scale} button when the button is disabled
 324  */
 325 $button-medium-font-size-disabled: dynamic($button-medium-font-size);
 326
 327 /**
 328  * @var {string}
 329  * The default font-weight for a medium {@link #scale} button
 330  */
 331 $button-medium-font-weight: dynamic($font-weight);
 332
 333 /**
 334  * @var {string}
 335  * The default font-weight for a medium {@link #scale} button when the cursor is over the button
 336  */
 337 $button-medium-font-weight-over: dynamic($button-medium-font-weight);
 338
 339 /**
 340  * @var {string}
 341  * The default font-weight for a medium {@link #scale} button when the button is focused
 342  */
 343 $button-medium-font-weight-focus: dynamic($button-medium-font-weight-over);
 344
 345 /**
 346  * @var {string}
 347  * The default font-weight for a medium {@link #scale} button when the button is pressed
 348  */
 349 $button-medium-font-weight-pressed: dynamic($button-medium-font-weight);
 350
 351 /**
 352  * @var {string}
 353  * The default font-weight for a medium {@link #scale} button when the button is focused
 354  * and the cursor is over the button
 355  */
 356 $button-medium-font-weight-focus-over: dynamic($button-medium-font-weight-over);
 357
 358 /**
 359  * @var {string}
 360  * The default font-weight for a medium {@link #scale} button when the button is focused
 361  * and pressed
 362  */
 363 $button-medium-font-weight-focus-pressed: dynamic($button-medium-font-weight-pressed);
 364
 365 /**
 366  * @var {string}
 367  * The default font-weight for a medium {@link #scale} button when the button is disabled
 368  */
 369 $button-medium-font-weight-disabled: dynamic($button-medium-font-weight);
 370
 371 /**
 372  * @var {string}
 373  * The default font-family for a medium {@link #scale} button
 374  */
 375 $button-medium-font-family: dynamic($font-family);
 376
 377 /**
 378  * @var {string}
 379  * The default font-family for a medium {@link #scale} button when the cursor is over the button
 380  */
 381 $button-medium-font-family-over: dynamic($button-medium-font-family);
 382
 383 /**
 384  * @var {string}
 385  * The default font-family for a medium {@link #scale} button when the button is focused
 386  */
 387 $button-medium-font-family-focus: dynamic($button-medium-font-family-over);
 388
 389 /**
 390  * @var {string}
 391  * The default font-family for a medium {@link #scale} button when the button is pressed
 392  */
 393 $button-medium-font-family-pressed: dynamic($button-medium-font-family);
 394
 395 /**
 396  * @var {string}
 397  * The default font-family for a medium {@link #scale} button when the button is focused
 398  * and the cursor is over the button
 399  */
 400 $button-medium-font-family-focus-over: dynamic($button-medium-font-family-over);
 401
 402 /**
 403  * @var {string}
 404  * The default font-family for a medium {@link #scale} button when the button is focused
 405  * and pressed
 406  */
 407 $button-medium-font-family-focus-pressed: dynamic($button-medium-font-family-pressed);
 408
 409 /**
 410  * @var {string}
 411  * The default font-family for a medium {@link #scale} button when the button is disabled
 412  */
 413 $button-medium-font-family-disabled: dynamic($button-medium-font-family);
 414
 415 /**
 416  * @var {number}
 417  * The line-height for the text in a medium {@link #scale} button
 418  */
 419 $button-medium-line-height: dynamic(16px);
 420
 421 /**
 422  * @var {number}
 423  * The default icon size for a medium {@link #scale} button
 424  */
 425 $button-medium-icon-size: dynamic(24px);
 426
 427 /**
 428  * @var {number}
 429  * The the font-size for medium {@link #scale} button glyphs
 430  */
 431 $button-medium-glyph-font-size: dynamic($button-medium-icon-size);
 432
 433 /**
 434  * @var {number}
 435  * The space between a medium {@link #scale} button's icon and text
 436  */
 437 $button-medium-icon-spacing: dynamic($button-icon-spacing);
 438
 439 /**
 440  * @var {number}
 441  * The default width of a medium {@link #scale} button's {@link #cfg-menu} arrow
 442  */
 443 $button-medium-arrow-width: dynamic($button-arrow-width);
 444
 445 /**
 446  * @var {number}
 447  * The default height of a medium {@link #scale} button's {@link #cfg-menu} arrow
 448  */
 449 $button-medium-arrow-height: dynamic($button-arrow-height);
 450
 451 /**
 452  * @var {string/list}
 453  * Glyph for a medium button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 454  */
 455 $button-medium-arrow-glyph: dynamic($fa-var-caret-down 20px $font-icon-font-family);
 456
 457 /**
 458  * @var {number}
 459  * The default width of a medium {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 460  */
 461 $button-medium-split-width: dynamic($button-split-width);
 462
 463 /**
 464  * @var {number}
 465  * The default height of a medium {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 466  */
 467 $button-medium-split-height: dynamic($button-split-height);
 468
 469 /**
 470  * @var {number}
 471  * The width of a medium {@link #scale} {@link Ext.button.Split Split Button}'s line.
 472  * Themes that include the line in the arrow background image should set this to 0
 473  */
 474 $button-medium-split-line-width: dynamic($button-split-line-width);
 475
 476 /**
 477  * @var {number}
 478  * The default border-radius for a large {@link #scale} button
 479  */
 480 $button-large-border-radius: dynamic(3px);
 481
 482 /**
 483  * @var {number}
 484  * The default border-width for a large {@link #scale} button
 485  */
 486 $button-large-border-width: dynamic(1px);
 487
 488 /**
 489  * @var {number}
 490  * The default padding for a large {@link #scale} button
 491  */
 492 $button-large-padding: dynamic(3px);
 493
 494 /**
 495  * @var {number}
 496  * The default horizontal padding to add to the left and right of the text element for
 497  * a large {@link #scale} button
 498  */
 499 $button-large-text-padding: dynamic(4px);
 500
 501 /**
 502  * @var {number}
 503  * The default font-size for a large {@link #scale} button
 504  */
 505 $button-large-font-size: dynamic($font-size);  //11px
 506
 507 /**
 508  * @var {number}
 509  * The default font-size for a large {@link #scale} button when the cursor is over the button
 510  */
 511 $button-large-font-size-over: dynamic($button-large-font-size);
 512
 513 /**
 514  * @var {number}
 515  * The default font-size for a large {@link #scale} button when the button is focused
 516  */
 517 $button-large-font-size-focus: dynamic($button-large-font-size-over);
 518
 519 /**
 520  * @var {number}
 521  * The default font-size for a large {@link #scale} button when the button is pressed
 522  */
 523 $button-large-font-size-pressed: dynamic($button-large-font-size);
 524
 525 /**
 526  * @var {number}
 527  * The default font-size for a large {@link #scale} button when the button is focused
 528  * and the cursor is over the button
 529  */
 530 $button-large-font-size-focus-over: dynamic($button-large-font-size-over);
 531
 532 /**
 533  * @var {number}
 534  * The default font-size for a large {@link #scale} button when the button is focused
 535  * and pressed
 536  */
 537 $button-large-font-size-focus-pressed: dynamic($button-large-font-size-pressed);
 538
 539 /**
 540  * @var {number}
 541  * The default font-size for a large {@link #scale} button when the button is disabled
 542  */
 543 $button-large-font-size-disabled: dynamic($button-large-font-size);
 544
 545 /**
 546  * @var {string}
 547  * The default font-weight for a large {@link #scale} button
 548  */
 549 $button-large-font-weight: dynamic($font-weight);
 550
 551 /**
 552  * @var {string}
 553  * The default font-weight for a large {@link #scale} button when the cursor is over the button
 554  */
 555 $button-large-font-weight-over: dynamic($button-large-font-weight);
 556
 557 /**
 558  * @var {string}
 559  * The default font-weight for a large {@link #scale} button when the button is focused
 560  */
 561 $button-large-font-weight-focus: dynamic($button-large-font-weight-over);
 562
 563 /**
 564  * @var {string}
 565  * The default font-weight for a large {@link #scale} button when the button is pressed
 566  */
 567 $button-large-font-weight-pressed: dynamic($button-large-font-weight);
 568
 569 /**
 570  * @var {string}
 571  * The default font-weight for a large {@link #scale} button when the button is focused
 572  * and the cursor is over the button
 573  */
 574 $button-large-font-weight-focus-over: dynamic($button-large-font-weight-over);
 575
 576 /**
 577  * @var {string}
 578  * The default font-weight for a large {@link #scale} button when the button is focused
 579  * and pressed
 580  */
 581 $button-large-font-weight-focus-pressed: dynamic($button-large-font-weight-pressed);
 582
 583 /**
 584  * @var {string}
 585  * The default font-weight for a large {@link #scale} button when the button is disabled
 586  */
 587 $button-large-font-weight-disabled: dynamic($button-large-font-weight);
 588
 589 /**
 590  * @var {string}
 591  * The default font-family for a large {@link #scale} button
 592  */
 593 $button-large-font-family: dynamic($font-family);
 594
 595 /**
 596  * @var {string}
 597  * The default font-family for a large {@link #scale} button when the cursor is over the button
 598  */
 599 $button-large-font-family-over: dynamic($button-large-font-family);
 600
 601 /**
 602  * @var {string}
 603  * The default font-family for a large {@link #scale} button when the button is focused
 604  */
 605 $button-large-font-family-focus: dynamic($button-large-font-family-over);
 606
 607 /**
 608  * @var {string}
 609  * The default font-family for a large {@link #scale} button when the button is pressed
 610  */
 611 $button-large-font-family-pressed: dynamic($button-large-font-family);
 612
 613 /**
 614  * @var {string}
 615  * The default font-family for a large {@link #scale} button when the button is focused
 616  * and the cursor is over the button
 617  */
 618 $button-large-font-family-focus-over: dynamic($button-large-font-family-over);
 619
 620 /**
 621  * @var {string}
 622  * The default font-family for a large {@link #scale} button when the button is focused
 623  * and pressed
 624  */
 625 $button-large-font-family-focus-pressed: dynamic($button-large-font-family-pressed);
 626
 627 /**
 628  * @var {string}
 629  * The default font-family for a large {@link #scale} button when the button is disabled
 630  */
 631 $button-large-font-family-disabled: dynamic($button-large-font-family);
 632
 633 /**
 634  * @var {number}
 635  * The line-height for the text in a large {@link #scale} button
 636  */
 637 $button-large-line-height: dynamic(16px);
 638
 639 /**
 640  * @var {number}
 641  * The default icon size for a large {@link #scale} button
 642  */
 643 $button-large-icon-size: dynamic(32px);
 644
 645 /**
 646  * @var {number}
 647  * The the font-size for large {@link #scale} button glyphs
 648  */
 649 $button-large-glyph-font-size: dynamic($button-large-icon-size);
 650
 651 /**
 652  * @var {number}
 653  * The space between a large {@link #scale} button's icon and text
 654  */
 655 $button-large-icon-spacing: dynamic($button-icon-spacing);
 656
 657 /**
 658  * @var {number}
 659  * The default width of a large {@link #scale} button's {@link #cfg-menu} arrow
 660  */
 661 $button-large-arrow-width: dynamic($button-arrow-width);
 662
 663 /**
 664  * @var {number}
 665  * The default height of a large {@link #scale} button's {@link #cfg-menu} arrow
 666  */
 667 $button-large-arrow-height: dynamic($button-arrow-height);
 668
 669 /**
 670  * @var {string/list}
 671  * Glyph for a large button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 672  */
 673 $button-large-arrow-glyph: dynamic($fa-var-caret-down 24px $font-icon-font-family);
 674
 675 /**
 676  * @var {number}
 677  * The default width of a large {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 678  */
 679 $button-large-split-width: dynamic($button-split-width);
 680
 681 /**
 682  * @var {number}
 683  * The default height of a large {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 684  */
 685 $button-large-split-height: dynamic($button-split-height);
 686
 687 /**
 688  * @var {number}
 689  * The width of a large {@link #scale} {@link Ext.button.Split Split Button}'s line.
 690  * Themes that include the line in the arrow background image should set this to 0
 691  */
 692 $button-large-split-line-width: dynamic($button-split-line-width);
 693
 694 /**
 695  * @var {color}
 696  * The base color for the `default` button UI
 697  */
 698 $button-default-base-color: dynamic($base-color);
 699
 700 /**
 701  * @var {color}
 702  * The base color for the `default` button UI when the cursor is over the button
 703  */
 704 $button-default-base-color-over: dynamic(button-default-background-color-over($button-default-base-color));
 705
 706 /**
 707  * @var {color}
 708  * The base color for the `default` button UI when the button is focused
 709  */
 710 $button-default-base-color-focus: dynamic(button-default-background-color-focus($button-default-base-color));
 711
 712 /**
 713  * @var {color}
 714  * The base color for the `default` button UI when the button is pressed
 715  */
 716 $button-default-base-color-pressed: dynamic(button-default-background-color-pressed($button-default-base-color));
 717
 718 /**
 719  * @var {color}
 720  * The base color for the `default` button UI when the button is focused and the cursor
 721  * is over the button
 722  */
 723 $button-default-base-color-focus-over: dynamic($button-default-base-color-over);
 724
 725 /**
 726  * @var {color}
 727  * The base color for the `default` button UI when the button is focused and pressed
 728  */
 729 $button-default-base-color-focus-pressed: dynamic($button-default-base-color-pressed);
 730
 731 /**
 732  * @var {color}
 733  * The base color for the `default` button UI when the button is disabled
 734  */
 735 $button-default-base-color-disabled: dynamic(button-default-background-color-disabled($button-default-base-color));
 736
 737 /**
 738  * @var {color}
 739  * The border-color for the `default` button UI
 740  */
 741 $button-default-border-color: dynamic($button-default-base-color);
 742
 743 /**
 744  * @var {color}
 745  * The border-color for the `default` button UI when the cursor is over the button
 746  */
 747 $button-default-border-color-over: dynamic(button-default-border-color-over($button-default-border-color));
 748
 749 /**
 750  * @var {color}
 751  * The border-color for the `default` button UI when the button is focused
 752  */
 753 $button-default-border-color-focus: dynamic(button-default-border-color-focus($button-default-border-color));
 754
 755 /**
 756  * @var {color}
 757  * The border-color for the `default` button UI when the button is pressed
 758  */
 759 $button-default-border-color-pressed: dynamic(button-default-border-color-pressed($button-default-border-color));
 760
 761 /**
 762  * @var {color}
 763  * The border-color for the `default` button UI when the button is focused and the cursor
 764  * is over the button
 765  */
 766 $button-default-border-color-focus-over: dynamic($button-default-border-color-over);
 767
 768 /**
 769  * @var {color}
 770  * The border-color for the `default` button UI when the button is focused and pressed
 771  */
 772 $button-default-border-color-focus-pressed: dynamic($button-default-border-color-pressed);
 773
 774 /**
 775  * @var {color}
 776  * The border-color for the `default` button UI when the button is disabled
 777  */
 778 $button-default-border-color-disabled: dynamic(button-default-border-color-disabled($button-default-border-color));
 779
 780 /**
 781  * @var {color}
 782  * The background-color for the `default` button UI
 783  */
 784 $button-default-background-color: dynamic($button-default-base-color);
 785
 786 /**
 787  * @var {color}
 788  * The background-color for the `default` button UI when the cursor is over the button
 789  */
 790 $button-default-background-color-over: dynamic($button-default-base-color-over);
 791
 792 /**
 793  * @var {color}
 794  * The background-color for the `default` button UI when the button is focused
 795  */
 796 $button-default-background-color-focus: dynamic($button-default-base-color-focus);
 797
 798 /**
 799  * @var {color}
 800  * The background-color for the `default` button UI when the button is pressed
 801  */
 802 $button-default-background-color-pressed: dynamic($button-default-base-color-pressed);
 803
 804 /**
 805  * @var {color}
 806  * The background-color for the `default` button UI when the button is focused and the
 807  * cursor is over the button
 808  */
 809 $button-default-background-color-focus-over: dynamic($button-default-background-color-over);
 810
 811 /**
 812  * @var {color}
 813  * The background-color for the `default` button UI when the button is focused and pressed
 814  */
 815 $button-default-background-color-focus-pressed: dynamic($button-default-background-color-pressed);
 816
 817 /**
 818  * @var {color}
 819  * The background-color for the `default` button UI when the button is disabled
 820  */
 821 $button-default-background-color-disabled: dynamic($button-default-base-color-disabled);
 822
 823 /**
 824  * @var {string/list}
 825  * The background-gradient for the `default` button UI.  Can be either the name of a
 826  * predefined gradient or a list of color stops. Used as the `$type` parameter for
 827  * {@link Global_CSS#background-gradient}.
 828  */
 829 $button-default-background-gradient: dynamic('glossy-button');
 830
 831 /**
 832  * @var {string/list}
 833  * The background-gradient for the `default` button UI when the cursor is over the button.
 834  * Can be either the name of a predefined gradient or a list of color stops. Used as the
 835  * `$type` parameter for {@link Global_CSS#background-gradient}.
 836  */
 837 $button-default-background-gradient-over: dynamic('glossy-button-over');
 838
 839 /**
 840  * @var {string/list}
 841  * The background-gradient for the `default` button UI when the button is focused.  Can be
 842  * either the name of a predefined gradient or a list of color stops. Used as the `$type`
 843  * parameter for {@link Global_CSS#background-gradient}.
 844  */
 845 $button-default-background-gradient-focus: dynamic($button-default-background-gradient-over);
 846
 847 /**
 848  * @var {string/list}
 849  * The background-gradient for the `default` button UI when the button is pressed.  Can be
 850  * either the name of a predefined gradient or a list of color stops. Used as the `$type`
 851  * parameter for {@link Global_CSS#background-gradient}.
 852  */
 853 $button-default-background-gradient-pressed: dynamic('glossy-button-pressed');
 854
 855 /**
 856  * @var {string/list}
 857  * The background-gradient for the `default` button UI when the button is focused and the
 858  * cursor is over the button. Can be either the name of a predefined gradient or a list
 859  * of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
 860  */
 861 $button-default-background-gradient-focus-over: dynamic($button-default-background-gradient-over);
 862
 863 /**
 864  * @var {string/list}
 865  * The background-gradient for the `default` button UI when the button is focused and
 866  * pressed.  Can be either the name of a predefined gradient or a list of color stops.
 867  * Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
 868  */
 869 $button-default-background-gradient-focus-pressed: dynamic($button-default-background-gradient-pressed);
 870
 871 /**
 872  * @var {string/list}
 873  * The background-gradient for the `default` button UI when the button is disabled.  Can be
 874  * either the name of a predefined gradient or a list of color stops. Used as the `$type`
 875  * parameter for {@link Global_CSS#background-gradient}.
 876  */
 877 $button-default-background-gradient-disabled: dynamic('glossy-button-disabled');
 878
 879 /**
 880  * @var {color}
 881  * The text color for the `default` button UI
 882  */
 883 $button-default-color: dynamic(#000);
 884
 885 /**
 886  * @var {color}
 887  * The text color for the `default` button UI when the cursor is over the button
 888  */
 889 $button-default-color-over: dynamic(button-default-color-over($button-default-color));
 890
 891 /**
 892  * @var {color}
 893  * The text color for the `default` button UI when the button is focused
 894  */
 895 $button-default-color-focus: dynamic(button-default-color-focus($button-default-color));
 896
 897 /**
 898  * @var {color}
 899  * The text color for the `default` button UI when the button is pressed
 900  */
 901 $button-default-color-pressed: dynamic(button-default-color-pressed($button-default-color));
 902
 903 /**
 904  * @var {color}
 905  * The text color for the `default` button UI when the button is focused and the cursor
 906  * is over the button
 907  */
 908 $button-default-color-focus-over: dynamic($button-default-color-over);
 909
 910 /**
 911  * @var {color}
 912  * The text color for the `default` button UI when the button is focused and pressed
 913  */
 914 $button-default-color-focus-pressed: dynamic($button-default-color-pressed);
 915
 916 /**
 917  * @var {color}
 918  * The text color for the `default` button UI when the button is disabled
 919  */
 920 $button-default-color-disabled: dynamic(button-default-color-disabled($button-default-color));
 921
 922 /**
 923  * @var {number/list}
 924  * The inner border-width for the `default` button UI
 925  */
 926 $button-default-inner-border-width: dynamic('none');
 927
 928 /**
 929  * @var {number/list}
 930  * The inner border-width for the `default` button UI when the cursor is over the button
 931  */
 932 $button-default-inner-border-width-over: dynamic($button-default-inner-border-width);
 933
 934 /**
 935  * @var {number/list}
 936  * The inner border-width for the `default` button UI when the button is focused
 937  */
 938 $button-default-inner-border-width-focus: dynamic($button-default-inner-border-width);
 939
 940 /**
 941  * @var {number/list}
 942  * The inner border-width for the `default` button UI when the button is pressed
 943  */
 944 $button-default-inner-border-width-pressed: dynamic($button-default-inner-border-width);
 945
 946 /**
 947  * @var {number/list}
 948  * The inner border-width for the `default` button UI when the button is focused and the
 949  * cursor is over the button
 950  */
 951 $button-default-inner-border-width-focus-over: dynamic($button-default-inner-border-width-focus);
 952
 953 /**
 954  * @var {number/list}
 955  * The inner border-width for the `default` button UI when the button is focused and pressed
 956  */
 957 $button-default-inner-border-width-focus-pressed: dynamic($button-default-inner-border-width-focus);
 958
 959 /**
 960  * @var {number/lipressed}
 961  * The inner border-width for the `default` button UI when the button is disabled
 962  */
 963 $button-default-inner-border-width-disabled: dynamic($button-default-inner-border-width);
 964
 965 /**
 966  * @var {color}
 967  * The inner border-color for the `default` button UI
 968  */
 969 $button-default-inner-border-color: dynamic(button-default-inner-border-color($button-default-background-color, $button-default-color));
 970
 971 /**
 972  * @var {color}
 973  * The inner border-color for the `default` button UI when the cursor is over the button
 974  */
 975 $button-default-inner-border-color-over: dynamic(button-default-inner-border-color-over($button-default-background-color-over, $button-default-color-over));
 976
 977 /**
 978  * @var {color}
 979  * The inner border-color for the `default` button UI when the button is focused
 980  */
 981 $button-default-inner-border-color-focus: dynamic(button-default-inner-border-color-focus($button-default-background-color-focus, $button-default-color-focus));
 982
 983 /**
 984  * @var {color}
 985  * The inner border-color for the `default` button UI when the button is pressed
 986  */
 987 $button-default-inner-border-color-pressed: dynamic(button-default-inner-border-color-pressed($button-default-background-color-pressed, $button-default-color-pressed));
 988
 989 /**
 990  * @var {color}
 991  * The inner border-color for the `default` button UI when the button is focused and the
 992  * cursor is over the button
 993  */
 994 $button-default-inner-border-color-focus-over: dynamic(button-default-inner-border-color-focus-over($button-default-background-color-focus-over, $button-default-color-focus-over));
 995
 996 /**
 997  * @var {color}
 998  * The inner border-color for the `default` button UI when the button is focused and pressed
 999  */
1000 $button-default-inner-border-color-focus-pressed: dynamic(button-default-inner-border-color-focus-pressed($button-default-background-color-focus-pressed, $button-default-color-focus-pressed));
1001
1002 /**
1003  * @var {color}
1004  * The inner border-color for the `default` button UI when the button is disabled
1005  */
1006 $button-default-inner-border-color-disabled: dynamic(button-default-inner-border-color-disabled($button-default-background-color-disabled, $button-default-color-disabled));
1007
1008 /**
1009  * @var {number}
1010  * The body outline width for the `default` button UI when the button is focused
1011  */
1012 $button-default-body-outline-width-focus: dynamic(0);
1013
1014 /**
1015  * @var {string}
1016  * The body outline-style for the `default` button UI when the button is focused
1017  */
1018 $button-default-body-outline-style-focus: dynamic(dotted);
1019
1020 /**
1021  * @var {color}
1022  * The body outline color for the `default` button UI when the button is focused
1023  */
1024 $button-default-body-outline-color-focus: dynamic($button-default-color);
1025
1026 /**
1027  * @var {color}
1028  * The color of the {@link #glyph} icon for the `default` button UI
1029  */
1030 $button-default-glyph-color: dynamic($button-default-color);
1031
1032 /**
1033  * @var {string/list}
1034  * Glyph color for the button arrow of the `default` button UI when
1035  * {@link Global_CSS#$enable-font-icons} is `true`.
1036  */
1037 $button-default-arrow-glyph-color: dynamic($button-default-color);
1038
1039 /**
1040  * @var {color}
1041  * The color for a {@link Ext.button.Split Split Button}'s line in the `default` button UI.
1042  * Only applicable when {@link #$button-split-width} is greater than 0.
1043  */
1044 $button-default-split-line-color: dynamic($button-default-arrow-glyph-color);
1045
1046 /**
1047  * @var {color}
1048  * The opacity of the {@link #glyph} icon for the `default` button UI
1049  */
1050 $button-default-glyph-opacity: dynamic(0.5);
1051
1052 /**
1053  * @var {color}
1054  * The border-color for the `default-toolbar` button UI
1055  */
1056 $button-toolbar-border-color: dynamic($base-color);
1057
1058 /**
1059  * @var {color}
1060  * The border-color for the `default-toolbar` button UI when the cursor is over the button
1061  */
1062 $button-toolbar-border-color-over: dynamic(button-toolbar-border-color-over($button-toolbar-border-color));
1063
1064 /**
1065  * @var {color}
1066  * The border-color for the `default-toolbar` button UI when the button is focused
1067  */
1068 $button-toolbar-border-color-focus: dynamic(button-toolbar-border-color-focus($button-toolbar-border-color));
1069
1070 /**
1071  * @var {color}
1072  * The border-color for the `default-toolbar` button UI when the button is pressed
1073  */
1074 $button-toolbar-border-color-pressed: dynamic(button-toolbar-border-color-pressed($button-toolbar-border-color));
1075
1076 /**
1077  * @var {color}
1078  * The border-color for the `default-toolbar` button UI when the button is focused and the
1079  * cursor is over the button
1080  */
1081 $button-toolbar-border-color-focus-over: dynamic($button-toolbar-border-color-over);
1082
1083 /**
1084  * @var {color}
1085  * The border-color for the `default-toolbar` button UI when the button is focused and
1086  * pressed
1087  */
1088 $button-toolbar-border-color-focus-pressed: dynamic($button-toolbar-border-color-pressed);
1089
1090 /**
1091  * @var {color}
1092  * The border-color for the `default-toolbar` button UI when the button is disabled
1093  */
1094 $button-toolbar-border-color-disabled: dynamic(button-toolbar-border-color-disabled($button-toolbar-border-color));
1095
1096 /**
1097  * @var {color}
1098  * The background-color for the `default-toolbar` button UI
1099  */
1100 $button-toolbar-background-color: dynamic($base-color);
1101
1102 /**
1103  * @var {color}
1104  * The background-color for the `default-toolbar` button UI when the cursor is over the button
1105  */
1106 $button-toolbar-background-color-over: dynamic(button-toolbar-background-color-over($button-toolbar-background-color));
1107
1108 /**
1109  * @var {color}
1110  * The background-color for the `default-toolbar` button UI when the button is focused
1111  */
1112 $button-toolbar-background-color-focus: dynamic(button-toolbar-background-color-focus($button-toolbar-background-color));
1113
1114 /**
1115  * @var {color}
1116  * The background-color for the `default-toolbar` button UI when the button is pressed
1117  */
1118 $button-toolbar-background-color-pressed: dynamic(button-toolbar-background-color-pressed($button-toolbar-background-color));
1119
1120 /**
1121  * @var {color}
1122  * The background-color for the `default-toolbar` button UI when the button is focused
1123  * and the cursor is over the button
1124  */
1125 $button-toolbar-background-color-focus-over: dynamic($button-toolbar-background-color-over);
1126
1127 /**
1128  * @var {color}
1129  * The background-color for the `default-toolbar` button UI when the button is focused
1130  * and pressed
1131  */
1132 $button-toolbar-background-color-focus-pressed: dynamic($button-toolbar-background-color-pressed);
1133
1134 /**
1135  * @var {color}
1136  * The background-color for the `default-toolbar` button UI when the button is disabled
1137  */
1138 $button-toolbar-background-color-disabled: dynamic(button-toolbar-background-color-disabled($button-toolbar-background-color));
1139
1140 /**
1141  * @var {string/list}
1142  * The background-gradient for the `default-toolbar` button UI.  Can be either the name of
1143  * a predefined gradient or a list of color stops. Used as the `$type` parameter for
1144  * {@link Global_CSS#background-gradient}.
1145  */
1146 $button-toolbar-background-gradient: dynamic('glossy-button');
1147
1148 /**
1149  * @var {string/list}
1150  * The background-gradient for the `default-toolbar` button UI when the cursor is over the
1151  * button. Can be either the name of a predefined gradient or a list of color stops. Used
1152  * as the `$type` parameter for {@link Global_CSS#background-gradient}.
1153  */
1154 $button-toolbar-background-gradient-over: dynamic('glossy-button-over');
1155
1156 /**
1157  * @var {string/list}
1158  * The background-gradient for the `default-toolbar` button UI when the button is focused.
1159  * Can be either the name of a predefined gradient or a list of color stops. Used as the
1160  * `$type` parameter for {@link Global_CSS#background-gradient}.
1161  */
1162 $button-toolbar-background-gradient-focus: dynamic($button-toolbar-background-gradient-over);
1163
1164 /**
1165  * @var {string/list}
1166  * The background-gradient for the `default-toolbar` button UI when the button is pressed.
1167  * Can be either the name of a predefined gradient or a list of color stops. Used as the
1168  * `$type` parameter for {@link Global_CSS#background-gradient}.
1169  */
1170 $button-toolbar-background-gradient-pressed: dynamic('glossy-button-pressed');
1171
1172 /**
1173  * @var {string/list}
1174  * The background-gradient for the `default-toolbar` button UI when the button is focused
1175  * and the cursor is over the button. Can be either the name of a predefined gradient or a
1176  * list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
1177  */
1178 $button-toolbar-background-gradient-focus-over: dynamic($button-toolbar-background-gradient-over);
1179
1180 /**
1181  * @var {string/list}
1182  * The background-gradient for the `default-toolbar` button UI when the button is focused
1183  * and pressed. Can be either the name of a predefined gradient or a list of color stops.
1184  * Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
1185  */
1186 $button-toolbar-background-gradient-focus-pressed: dynamic($button-toolbar-background-gradient-pressed);
1187
1188 /**
1189  * @var {string/list}
1190  * The background-gradient for the `default-toolbar` button UI when the button is disabled.
1191  * Can be either the name of a predefined gradient or a list of color stops. Used as the
1192  * `$type` parameter for {@link Global_CSS#background-gradient}.
1193  */
1194 $button-toolbar-background-gradient-disabled: dynamic('glossy-button-disabled');
1195
1196 /**
1197  * @var {color}
1198  * The text color for the `default-toolbar` button UI
1199  */
1200 $button-toolbar-color: dynamic(#000);
1201
1202 /**
1203  * @var {color}
1204  * The text color for the `default-toolbar` button UI when the cursor is over the button
1205  */
1206 $button-toolbar-color-over: dynamic(button-toolbar-color-over($button-toolbar-color));
1207
1208 /**
1209  * @var {color}
1210  * The text color for the `default-toolbar` button UI when the button is focused
1211  */
1212 $button-toolbar-color-focus: dynamic(button-toolbar-color-focus($button-toolbar-color));
1213
1214 /**
1215  * @var {color}
1216  * The text color for the `default-toolbar` button UI when the button is pressed
1217  */
1218 $button-toolbar-color-pressed: dynamic(button-toolbar-color-pressed($button-toolbar-color));
1219
1220 /**
1221  * @var {color}
1222  * The text color for the `default-toolbar` button UI when the button is focused and the
1223  * cursor is over the button
1224  */
1225 $button-toolbar-color-focus-over: dynamic($button-toolbar-color-over);
1226
1227 /**
1228  * @var {color}
1229  * The text color for the `default-toolbar` button UI when the button is focused and pressed
1230  */
1231 $button-toolbar-color-focus-pressed: dynamic($button-toolbar-color-pressed);
1232
1233 /**
1234  * @var {color}
1235  * The text color for the `default-toolbar` button UI when the button is disabled
1236  */
1237 $button-toolbar-color-disabled: dynamic(button-toolbar-color-disabled($button-toolbar-color));
1238
1239 /**
1240  * @var {number/list}
1241  * The inner border-width for the `default-toolbar` button UI
1242  */
1243 $button-toolbar-inner-border-width: dynamic('none');
1244
1245 /**
1246  * @var {number/list}
1247  * The inner border-width for the `default-toolbar` button UI when the cursor is over the button
1248  */
1249 $button-toolbar-inner-border-width-over: dynamic($button-toolbar-inner-border-width);
1250
1251 /**
1252  * @var {number/list}
1253  * The inner border-width for the `default-toolbar` button UI when the button is focused
1254  */
1255 $button-toolbar-inner-border-width-focus: dynamic($button-toolbar-inner-border-width);
1256
1257 /**
1258  * @var {number/list}
1259  * The inner border-width for the `default-toolbar` button UI when the button is pressed
1260  */
1261 $button-toolbar-inner-border-width-pressed: dynamic($button-toolbar-inner-border-width);
1262
1263 /**
1264  * @var {number/list}
1265  * The inner border-width for the `default-toolbar` button UI when the button is focused
1266  * and the cursor is over the button
1267  */
1268 $button-toolbar-inner-border-width-focus-over: dynamic($button-toolbar-inner-border-width-focus);
1269
1270 /**
1271  * @var {number/list}
1272  * The inner border-width for the `default-toolbar` button UI when the button is focused
1273  * and pressed
1274  */
1275 $button-toolbar-inner-border-width-focus-pressed: dynamic($button-toolbar-inner-border-width-focus);
1276
1277 /**
1278  * @var {number/list}
1279  * The inner border-width for the `default-toolbar` button UI when the button is disabled
1280  */
1281 $button-toolbar-inner-border-width-disabled: dynamic($button-toolbar-inner-border-width);
1282
1283 /**
1284  * @var {color}
1285  * The inner border-color for the `default-toolbar` button UI
1286  */
1287 $button-toolbar-inner-border-color: dynamic(button-toolbar-inner-border-color($button-toolbar-background-color, $button-toolbar-color));
1288
1289 /**
1290  * @var {color}
1291  * The inner border-color for the `default-toolbar` button UI when the cursor is over the button
1292  */
1293 $button-toolbar-inner-border-color-over: dynamic(button-toolbar-inner-border-color-over($button-toolbar-background-color-over, $button-toolbar-color-over));
1294
1295 /**
1296  * @var {color}
1297  * The inner border-color for the `default-toolbar` button UI when the button is focused
1298  */
1299 $button-toolbar-inner-border-color-focus: dynamic(button-toolbar-inner-border-color-focus($button-toolbar-background-color-focus, $button-toolbar-color-focus));
1300
1301 /**
1302  * @var {color}
1303  * The inner border-color for the `default-toolbar` button UI when the button is pressed
1304  */
1305 $button-toolbar-inner-border-color-pressed: dynamic(button-toolbar-inner-border-color-pressed($button-toolbar-background-color-pressed, $button-toolbar-color-pressed));
1306
1307 /**
1308  * @var {color}
1309  * The inner border-color for the `default-toolbar` button UI when the button is focused
1310  * and the cursor is over the button
1311  */
1312 $button-toolbar-inner-border-color-focus-over: dynamic(button-toolbar-inner-border-color-focus-over($button-toolbar-background-color-focus-over, $button-toolbar-color-focus-over));
1313
1314 /**
1315  * @var {color}
1316  * The inner border-color for the `default-toolbar` button UI when the button is focused
1317  * and pressed
1318  */
1319 $button-toolbar-inner-border-color-focus-pressed: dynamic(button-toolbar-inner-border-color-focus-pressed($button-toolbar-background-color-focus-pressed, $button-toolbar-color-focus-pressed));
1320
1321 /**
1322  * @var {color}
1323  * The inner border-color for the `default-toolbar` button UI when the button is disabled
1324  */
1325 $button-toolbar-inner-border-color-disabled: dynamic(button-toolbar-inner-border-color-disabled($button-toolbar-background-color-disabled, $button-toolbar-color-disabled));
1326
1327 /**
1328  * @var {number}
1329  * The body outline width for the `default-toolbar` button UI when the button is focused
1330  */
1331 $button-toolbar-body-outline-width-focus: dynamic($button-default-body-outline-width-focus);
1332
1333 /**
1334  * @var {string}
1335  * The body outline-style for the `default-toolbar` button UI when the button is focused
1336  */
1337 $button-toolbar-body-outline-style-focus: dynamic($button-default-body-outline-style-focus);
1338
1339 /**
1340  * @var {color}
1341  * The body outline color for the `default-toolbar` button UI when the button is focused
1342  */
1343 $button-toolbar-body-outline-color-focus: dynamic($button-default-body-outline-color-focus);
1344
1345 /**
1346  * @var {color}
1347  * The color of the {@link #glyph} icon for the `default-toolbar` button UI
1348  */
1349 $button-toolbar-glyph-color: dynamic($button-toolbar-color);
1350
1351 /**
1352  * @var {string/list}
1353  * Glyph color for the button arrow of the `default-toolbar` button UI when when
1354  * {@link Global_CSS#$enable-font-icons} is `true`.
1355  */
1356 $button-toolbar-arrow-glyph-color: dynamic($button-toolbar-color);
1357
1358 /**
1359  * @var {color}
1360  * The color for a {@link Ext.button.Split Split Button}'s line in the `toolbar` button UI.
1361  * Only applicable when {@link #$button-split-width} is greater than 0.
1362  */
1363 $button-toolbar-split-line-color: dynamic($button-toolbar-arrow-glyph-color);
1364
1365 /**
1366  * @var {color}
1367  * The opacity of the {@link #glyph} icon for the `default-toolbar` button UI
1368  */
1369 $button-toolbar-glyph-opacity: dynamic(.5);
1370
1371 /**
1372  * @var {boolean} $button-include-ui-menu-arrows
1373  * True to use a different image url for the menu button arrows for each button UI
1374  */
1375 $button-include-ui-menu-arrows: dynamic(false);
1376
1377 /**
1378  * @var {boolean} $button-include-ui-split-arrows
1379  * True to use a different image url for the split button arrows for each button UI
1380  */
1381 $button-include-ui-split-arrows: dynamic(false);
1382
1383 /**
1384  * @var {boolean} $button-include-split-over-arrows
1385  * True to include different split arrows for buttons' hover state.
1386  */
1387 $button-include-split-over-arrows: dynamic(false);
1388
1389 /**
1390  * @var {boolean} $button-include-split-noline-arrows
1391  * True to include "noline" split arrows for buttons in their default state.
1392  */
1393 $button-include-split-noline-arrows: dynamic(false);
1394
1395 /**
1396  * @var {boolean} $button-toolbar-include-split-noline-arrows
1397  * True to include "noline" split arrows for toolbar buttons in their default state.
1398  */
1399 $button-toolbar-include-split-noline-arrows: dynamic(false);
1400
1401 /**
1402  * @var {number} $button-opacity-disabled
1403  * opacity to apply to the button's main element when the buton is disabled
1404  */
1405 $button-opacity-disabled: dynamic(0.5);
1406
1407 /**
1408  * @var {number} $button-inner-opacity-disabled
1409  * opacity to apply to the button's inner elements (icon and text) when the buton is disabled
1410  */
1411 $button-inner-opacity-disabled: dynamic(1);
1412
1413 /**
1414  * @var {number} $button-toolbar-opacity-disabled
1415  * opacity to apply to the toolbar button's main element when the button is disabled
1416  */
1417 $button-toolbar-opacity-disabled: dynamic(0.5);
1418
1419 /**
1420  * @var {number} $button-toolbar-inner-opacity-disabled
1421  * opacity to apply to the toolbar button's inner elements (icon and text) when the buton is disabled
1422  */
1423 $button-toolbar-inner-opacity-disabled: dynamic(1);
1424
1425 /**
1426  * @var {boolean}
1427  * True to include the "default" button UI
1428  */
1429 $include-button-default-ui: dynamic($include-default-uis);
1430
1431 /**
1432  * @var {boolean}
1433  * True to include the "default" button UI for "small" scale buttons
1434  */
1435 $include-button-default-small-ui: dynamic($include-button-default-ui);
1436
1437 /**
1438  * @var {boolean}
1439  * True to include the "default" button UI for "medium" scale buttons
1440  */
1441 $include-button-default-medium-ui: dynamic($include-button-default-ui);
1442
1443 /**
1444  * @var {boolean}
1445  * True to include the "default" button UI for "large" scale buttons
1446  */
1447 $include-button-default-large-ui: dynamic($include-button-default-ui);
1448
1449 /**
1450  * @var {boolean}
1451  * True to include the "default" button UI for buttons rendered inside a grid cell (Slightly smaller height than default)
1452  */
1453 $include-button-grid-cell-ui: dynamic($include-button-default-ui);
1454
1455 /**
1456  * @var {boolean}
1457  * True to include the "default-toolbar" button UI
1458  */
1459 $include-button-default-toolbar-ui: dynamic($include-default-uis);
1460
1461 /**
1462  * @var {boolean}
1463  * True to include the "default-toolbar" button UI for "small" scale buttons
1464  */
1465 $include-button-default-toolbar-small-ui: dynamic($include-button-default-toolbar-ui);
1466
1467 /**
1468  * @var {boolean}
1469  * True to include the "default-toolbar" button UI for "medium" scale buttons
1470  */
1471 $include-button-default-toolbar-medium-ui: dynamic($include-button-default-toolbar-ui);
1472
1473 /**
1474  * @var {boolean}
1475  * True to include the "default-toolbar" button UI for "large" scale buttons
1476  */
1477 $include-button-default-toolbar-large-ui: dynamic($include-button-default-toolbar-ui);
1478
1479 /**
1480  * @var {number}
1481  * The default width for a grid cell button's {@link #cfg-menu} arrow
1482  */
1483 $button-grid-cell-arrow-width: dynamic($button-arrow-width);
1484
1485 /**
1486  * @var {number}
1487  * The default height for a grid cell button's {@link #cfg-menu} arrow
1488  */
1489 $button-grid-cell-arrow-height: dynamic($button-arrow-height);
1490
1491 /**
1492  * @var {string/list}
1493  * Glyph for a grid cell button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
1494  */
1495 $button-grid-cell-arrow-glyph: dynamic($button-small-arrow-glyph);
1496
1497 /**
1498  * @var {number}
1499  * The default width a grid cell {@link Ext.button.Split Split Button}'s arrow
1500  */
1501 $button-grid-cell-split-width: dynamic($button-split-width);
1502
1503 /**
1504  * @var {number}
1505  * The default height a grid cell {@link Ext.button.Split Split Button}'s arrow
1506  */
1507 $button-grid-cell-split-height: dynamic($button-split-height);
1508
1509 /**
1510  * @var {number}
1511  * The default space between a grid cell button's icon and text
1512  */
1513 $button-grid-cell-icon-spacing: dynamic($button-icon-spacing);
1514
1515 /**
1516  * @var {number}
1517  * The default border-radius for a grid cell button
1518  */
1519 $button-grid-cell-border-radius: dynamic($button-small-border-radius);
1520
1521 /**
1522  * @var {number}
1523  * The default border-width for a grid cell button
1524  */
1525 $button-grid-cell-border-width: dynamic($button-small-border-width);
1526
1527 /**
1528  * @var {number}
1529  * The default padding for a grid cell button
1530  */
1531 $button-grid-cell-padding: dynamic($button-small-padding);
1532
1533 /**
1534  * @var {number}
1535  * The default horizontal padding to add to the left and right of the text element for
1536  * a grid cell button
1537  */
1538 $button-grid-cell-text-padding: dynamic($button-small-text-padding);
1539
1540 /**
1541  * @var {number}
1542  * The default font-size for a grid cell button
1543  */
1544 $button-grid-cell-font-size: dynamic($button-small-font-size);  //11px
1545
1546 /**
1547  * @var {number}
1548  * The default font-size for a grid cell button when the cursor is over the button
1549  */
1550 $button-grid-cell-font-size-over: dynamic($button-grid-cell-font-size);
1551
1552 /**
1553  * @var {number}
1554  * The default font-size for a grid cell button when the button is focused
1555  */
1556 $button-grid-cell-font-size-focus: dynamic($button-grid-cell-font-size-over);
1557
1558 /**
1559  * @var {number}
1560  * The default font-size for a grid cell button when the button is pressed
1561  */
1562 $button-grid-cell-font-size-pressed: dynamic($button-grid-cell-font-size);
1563
1564 /**
1565  * @var {number}
1566  * The default font-size for a grid cell button when the button is focused and the cursor
1567  * is over the button
1568  */
1569 $button-grid-cell-font-size-focus-over: dynamic($button-grid-cell-font-size-over);
1570
1571 /**
1572  * @var {number}
1573  * The default font-size for a grid cell button when the button is focused and pressed
1574  */
1575 $button-grid-cell-font-size-focus-pressed: dynamic($button-grid-cell-font-size-pressed);
1576
1577 /**
1578  * @var {number}
1579  * The default font-size for a grid cell button when the button is disabled
1580  */
1581 $button-grid-cell-font-size-disabled: dynamic($button-grid-cell-font-size);
1582
1583 /**
1584  * @var {string}
1585  * The default font-weight for a grid cell button
1586  */
1587 $button-grid-cell-font-weight: dynamic($button-small-font-weight);
1588
1589 /**
1590  * @var {string}
1591  * The default font-weight for a grid cell button when the cursor is over the button
1592  */
1593 $button-grid-cell-font-weight-over: dynamic($button-grid-cell-font-weight);
1594
1595 /**
1596  * @var {string}
1597  * The default font-weight for a grid cell button when the button is focused
1598  */
1599 $button-grid-cell-font-weight-focus: dynamic($button-grid-cell-font-weight-over);
1600
1601 /**
1602  * @var {string}
1603  * The default font-weight for a grid cell button when the button is pressed
1604  */
1605 $button-grid-cell-font-weight-pressed: dynamic($button-grid-cell-font-weight);
1606
1607 /**
1608  * @var {string}
1609  * The default font-weight for a grid cell button when the button is focused and the
1610  * cursor is over the button
1611  */
1612 $button-grid-cell-font-weight-focus-over: dynamic($button-grid-cell-font-weight-over);
1613
1614 /**
1615  * @var {string}
1616  * The default font-weight for a grid cell button when the button is focused and pressed
1617  */
1618 $button-grid-cell-font-weight-focus-pressed: dynamic($button-grid-cell-font-weight-pressed);
1619
1620 /**
1621  * @var {string}
1622  * The default font-weight for a grid cell button when the button is disabled
1623  */
1624 $button-grid-cell-font-weight-disabled: dynamic($button-grid-cell-font-weight);
1625
1626 /**
1627  * @var {string}
1628  * The default font-family for a grid cell button
1629  */
1630 $button-grid-cell-font-family: dynamic($button-small-font-family);
1631
1632 /**
1633  * @var {string}
1634  * The default font-family for a grid cell button when the cursor is over the button
1635  */
1636 $button-grid-cell-font-family-over: dynamic($button-grid-cell-font-family);
1637
1638 /**
1639  * @var {string}
1640  * The default font-family for a grid cell button when the button is focused
1641  */
1642 $button-grid-cell-font-family-focus: dynamic($button-grid-cell-font-family-over);
1643
1644 /**
1645  * @var {string}
1646  * The default font-family for a grid cell button when the button is pressed
1647  */
1648 $button-grid-cell-font-family-pressed: dynamic($button-grid-cell-font-family);
1649
1650 /**
1651  * @var {string}
1652  * The default font-family for a grid cell button when the button is focused and the
1653  * cursor is over the button
1654  */
1655 $button-grid-cell-font-family-focus-over: dynamic($button-grid-cell-font-family-over);
1656
1657 /**
1658  * @var {string}
1659  * The default font-family for a grid cell button when the button is focused and pressed
1660  */
1661 $button-grid-cell-font-family-focus-pressed: dynamic($button-grid-cell-font-family-pressed);
1662
1663 /**
1664  * @var {string}
1665  * The default font-family for a grid cell button when the button is disabled
1666  */
1667 $button-grid-cell-font-family-disabled: dynamic($button-grid-cell-font-family);
1668
1669 /**
1670  * @var {number}
1671  * The line-height for the text in a grid cell button
1672  */
1673 $button-grid-cell-line-height: dynamic($button-small-line-height);
1674
1675 /**
1676  * @var {number}
1677  * The default icon size for a grid cell button
1678  */
1679 $button-grid-cell-icon-size: dynamic($button-small-icon-size);
1680
1681 /**
1682  * @var {number}
1683  * The the font-size for grid cell button glyphs
1684  */
1685 $button-grid-cell-glyph-font-size: dynamic($button-grid-cell-icon-size);
1686
1687 /**
1688  * @var {color}
1689  * The border-color for the `cell` button UI
1690  */
1691 $button-grid-cell-border-color: dynamic($button-default-border-color);
1692
1693 /**
1694  * @var {color}
1695  * The border-color for the `cell` button UI when the cursor is over the button
1696  */
1697 $button-grid-cell-border-color-over: dynamic(button-default-border-color-over($button-grid-cell-border-color));
1698
1699 /**
1700  * @var {color}
1701  * The border-color for the `cell` button UI when the button is focused
1702  */
1703 $button-grid-cell-border-color-focus: dynamic(button-default-border-color-focus($button-grid-cell-border-color));
1704
1705 /**
1706  * @var {color}
1707  * The border-color for the `cell` button UI when the button is pressed
1708  */
1709 $button-grid-cell-border-color-pressed: dynamic(button-default-border-color-pressed($button-grid-cell-border-color));
1710
1711 /**
1712  * @var {color}
1713  * The border-color for the `cell` button UI when the button is focused and the cursor
1714  * is over the button
1715  */
1716 $button-grid-cell-border-color-focus-over: dynamic($button-grid-cell-border-color-over);
1717
1718 /**
1719  * @var {color}
1720  * The border-color for the `cell` button UI when the button is focused and pressed
1721  */
1722 $button-grid-cell-border-color-focus-pressed: dynamic($button-grid-cell-border-color-pressed);
1723
1724 /**
1725  * @var {color}
1726  * The border-color for the `cell` button UI when the button is disabled
1727  */
1728 $button-grid-cell-border-color-disabled: dynamic(button-default-border-color-disabled($button-grid-cell-border-color));
1729
1730 /**
1731  * @var {color}
1732  * The background-color for the `cell` button UI
1733  */
1734 $button-grid-cell-background-color: dynamic($button-default-background-color);
1735
1736 /**
1737  * @var {color}
1738  * The background-color for the `cell` button UI when the cursor is over the button
1739  */
1740 $button-grid-cell-background-color-over: dynamic(button-default-background-color-over($button-grid-cell-background-color));
1741
1742 /**
1743  * @var {color}
1744  * The background-color for the `cell` button UI when the button is focused
1745  */
1746 $button-grid-cell-background-color-focus: dynamic(button-default-background-color-focus($button-grid-cell-background-color));
1747
1748 /**
1749  * @var {color}
1750  * The background-color for the `cell` button UI when the button is pressed
1751  */
1752 $button-grid-cell-background-color-pressed: dynamic(button-default-background-color-pressed($button-grid-cell-background-color));
1753
1754 /**
1755  * @var {color}
1756  * The background-color for the `cell` button UI when the button is focused and the cursor
1757  * is over the button
1758  */
1759 $button-grid-cell-background-color-focus-over: dynamic($button-grid-cell-background-color-over);
1760
1761 /**
1762  * @var {color}
1763  * The background-color for the `cell` button UI when the button is focused and pressed
1764  */
1765 $button-grid-cell-background-color-focus-pressed: dynamic($button-grid-cell-background-color-pressed);
1766
1767 /**
1768  * @var {color}
1769  * The background-color for the `cell` button UI when the button is disabled
1770  */
1771 $button-grid-cell-background-color-disabled: dynamic(button-default-background-color-disabled($button-grid-cell-background-color));
1772
1773 /**
1774  * @var {string/list}
1775  * The background-gradient for the `cell` button UI.  Can be either the name of a
1776  * predefined gradient or a list of color stops. Used as the `$type` parameter for
1777  * {@link Global_CSS#background-gradient}.
1778  */
1779 $button-grid-cell-background-gradient: dynamic($button-default-background-gradient);
1780
1781 /**
1782  * @var {string/list}
1783  * The background-gradient for the `cell` button UI when the cursor is over the button.
1784  * Can be either the name of a predefined gradient or a list of color stops. Used as the
1785  * `$type` parameter for {@link Global_CSS#background-gradient}.
1786  */
1787 $button-grid-cell-background-gradient-over: dynamic($button-default-background-gradient-over);
1788
1789 /**
1790  * @var {string/list}
1791  * The background-gradient for the `cell` button UI when the button is focused.  Can be
1792  * either the name of a predefined gradient or a list of color stops. Used as the `$type`
1793  * parameter for {@link Global_CSS#background-gradient}.
1794  */
1795 $button-grid-cell-background-gradient-focus: dynamic($button-grid-cell-background-gradient-over);
1796
1797 /**
1798  * @var {string/list}
1799  * The background-gradient for the `cell` button UI when the button is pressed.  Can be
1800  * either the name of a predefined gradient or a list of color stops. Used as the `$type`
1801  * parameter for {@link Global_CSS#background-gradient}.
1802  */
1803 $button-grid-cell-background-gradient-pressed: dynamic($button-default-background-gradient-pressed);
1804
1805 /**
1806  * @var {string/list}
1807  * The background-gradient for the `cell` button UI when the button is focused and the
1808  * cursor is over the button.  Can be either the name of a predefined gradient or a list
1809  * of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
1810  */
1811 $button-grid-cell-background-gradient-focus-over: dynamic($button-grid-cell-background-gradient-over);
1812
1813 /**
1814  * @var {string/list}
1815  * The background-gradient for the `cell` button UI when the button is focused and pressed.
1816  * Can be either the name of a predefined gradient or a list of color stops. Used as the
1817  * `$type` parameter for {@link Global_CSS#background-gradient}.
1818  */
1819 $button-grid-cell-background-gradient-focus-pressed: dynamic($button-grid-cell-background-gradient-pressed);
1820
1821 /**
1822  * @var {string/list}
1823  * The background-gradient for the `cell` button UI when the button is disabled.  Can be
1824  * either the name of a predefined gradient or a list of color stops. Used as the `$type`
1825  * parameter for {@link Global_CSS#background-gradient}.
1826  */
1827 $button-grid-cell-background-gradient-disabled: dynamic($button-default-background-gradient-disabled);
1828
1829 /**
1830  * @var {color}
1831  * The text color for the `cell` button UI
1832  */
1833 $button-grid-cell-color: dynamic($button-default-color);
1834
1835 /**
1836  * @var {color}
1837  * The text color for the `cell` button UI when the cursor is over the button
1838  */
1839 $button-grid-cell-color-over: dynamic(button-default-color-over($button-grid-cell-color));
1840
1841 /**
1842  * @var {color}
1843  * The text color for the `cell` button UI when the button is focused
1844  */
1845 $button-grid-cell-color-focus: dynamic(button-default-color-focus($button-grid-cell-color));
1846
1847 /**
1848  * @var {color}
1849  * The text color for the `cell` button UI when the button is pressed
1850  */
1851 $button-grid-cell-color-pressed: dynamic(button-default-color-pressed($button-grid-cell-color));
1852
1853 /**
1854  * @var {color}
1855  * The text color for the `cell` button UI when the button is focused and the cursor is
1856  * over the button
1857  */
1858 $button-grid-cell-color-focus-over: dynamic($button-grid-cell-color-over);
1859
1860 /**
1861  * @var {color}
1862  * The text color for the `cell` button UI when the button is focused and pressed
1863  */
1864 $button-grid-cell-color-focus-pressed: dynamic($button-grid-cell-color-pressed);
1865
1866 /**
1867  * @var {color}
1868  * The text color for the `cell` button UI when the button is disabled
1869  */
1870 $button-grid-cell-color-disabled: dynamic(button-default-color-disabled($button-grid-cell-color));
1871
1872 /**
1873  * @var {number/list}
1874  * The inner border-width for the `cell` button UI
1875  */
1876 $button-grid-cell-inner-border-width: dynamic('none');
1877
1878 /**
1879  * @var {number/list}
1880  * The inner border-width for the `cell` button UI when the cursor is over the button
1881  */
1882 $button-grid-cell-inner-border-width-over: dynamic($button-grid-cell-inner-border-width);
1883
1884 /**
1885  * @var {number/list}
1886  * The inner border-width for the `cell` button UI when the button is focused
1887  */
1888 $button-grid-cell-inner-border-width-focus: dynamic($button-grid-cell-inner-border-width);
1889
1890 /**
1891  * @var {number/list}
1892  * The inner border-width for the `cell` button UI when the button is pressed
1893  */
1894 $button-grid-cell-inner-border-width-pressed: dynamic($button-grid-cell-inner-border-width);
1895
1896 /**
1897  * @var {number/list}
1898  * The inner border-width for the `cell` button UI when the button is focused and the
1899  * cursor is over the button
1900  */
1901 $button-grid-cell-inner-border-width-focus-over: dynamic($button-grid-cell-inner-border-width-focus);
1902
1903 /**
1904  * @var {number/list}
1905  * The inner border-width for the `cell` button UI when the button is focused and pressed
1906  */
1907 $button-grid-cell-inner-border-width-focus-pressed: dynamic($button-grid-cell-inner-border-width-focus);
1908
1909 /**
1910  * @var {number/list}
1911  * The inner border-width for the `cell` button UI when the button is disabled
1912  */
1913 $button-grid-cell-inner-border-width-disabled: dynamic($button-grid-cell-inner-border-width);
1914
1915 /**
1916  * @var {color}
1917  * The inner border-color for the `cell` button UI
1918  */
1919 $button-grid-cell-inner-border-color: dynamic(button-default-inner-border-color($button-grid-cell-background-color, $button-grid-cell-color));
1920
1921 /**
1922  * @var {color}
1923  * The inner border-color for the `cell` button UI when the cursor is over the button
1924  */
1925 $button-grid-cell-inner-border-color-over: dynamic(button-default-inner-border-color-over($button-grid-cell-background-color-over, $button-grid-cell-color-over));
1926
1927 /**
1928  * @var {color}
1929  * The inner border-color for the `cell` button UI when the button is focused
1930  */
1931 $button-grid-cell-inner-border-color-focus: dynamic(button-default-inner-border-color-focus($button-grid-cell-background-color-focus, $button-grid-cell-color-focus));
1932
1933 /**
1934  * @var {color}
1935  * The inner border-color for the `cell` button UI when the button is pressed
1936  */
1937 $button-grid-cell-inner-border-color-pressed: dynamic(button-default-inner-border-color-pressed($button-grid-cell-background-color-pressed, $button-grid-cell-color-pressed));
1938
1939 /**
1940  * @var {color}
1941  * The inner border-color for the `cell` button UI when the button is focused and the
1942  * cursor is over the button
1943  */
1944 $button-grid-cell-inner-border-color-focus-over: dynamic(button-default-inner-border-color-focus-over($button-grid-cell-background-color-focus-over, $button-grid-cell-color-focus-over));
1945
1946 /**
1947  * @var {color}
1948  * The inner border-color for the `cell` button UI when the button is focused and pressed
1949  */
1950 $button-grid-cell-inner-border-color-focus-pressed: dynamic(button-default-inner-border-color-focus-pressed($button-grid-cell-background-color-focus-pressed, $button-grid-cell-color-focus-pressed));
1951
1952 /**
1953  * @var {color}
1954  * The inner border-color for the `cell` button UI when the button is disabled
1955  */
1956 $button-grid-cell-inner-border-color-disabled: dynamic(button-default-inner-border-color-disabled($button-grid-cell-background-color-disabled, $button-grid-cell-color-disabled));
1957
1958 /**
1959  * @var {number}
1960  * The body outline width for the `cell` button UI when the button is focused
1961  */
1962 $button-grid-cell-body-outline-width-focus: dynamic($button-default-body-outline-width-focus);
1963
1964 /**
1965  * @var {string}
1966  * The body outline-style for the `cell` button UI when the button is focused
1967  */
1968 $button-grid-cell-body-outline-style-focus: dynamic($button-default-body-outline-style-focus);
1969
1970 /**
1971  * @var {color}
1972  * The body outline color for the `cell` button UI when the button is focused
1973  */
1974 $button-grid-cell-body-outline-color-focus: dynamic($button-default-body-outline-color-focus);
1975
1976 /**
1977  * @var {color}
1978  * The color of the {@link #glyph} icon for the `cell` button UI
1979  */
1980 $button-grid-cell-glyph-color: dynamic($button-grid-cell-color);
1981
1982 /**
1983  * @var {string/list}
1984  * Glyph color for the button arrow of the `cell` button UI when when
1985  * {@link Global_CSS#$enable-font-icons} is `true`.
1986  */
1987 $button-grid-cell-arrow-glyph-color: dynamic($button-grid-cell-color);
1988
1989 /**
1990  * @var {color}
1991  * The width for a {@link Ext.button.Split Split Button}'s line in the `cell` button UI.
1992  */
1993 $button-grid-cell-split-line-width: dynamic($button-small-split-line-width);
1994
1995 /**
1996  * @var {color}
1997  * The color for a {@link Ext.button.Split Split Button}'s line in the `cell` button UI.
1998  * Only applicable when {@link #$button-grid-cell-split-line-width} is greater than 0.
1999  */
2000 $button-grid-cell-split-line-color: dynamic($button-grid-cell-arrow-glyph-color);
2001
2002 /**
2003  * @var {color}
2004  * The opacity of the {@link #glyph} icon for the `cell` button UI
2005  */
2006 $button-grid-cell-glyph-opacity: dynamic($button-default-glyph-opacity);
2007
2008 /**
2009  * @var {number} $button-grid-cell-opacity-disabled
2010  * opacity to apply to the button's main element when the button is disabled
2011  */
2012 $button-grid-cell-opacity-disabled: dynamic($button-opacity-disabled);
2013
2014 /**
2015  * @var {number} $button-grid-cell-inner-opacity-disabled
2016  * opacity to apply to the button's inner elements (icon and text) when the buton is disabled
2017  */
2018 $button-grid-cell-inner-opacity-disabled: dynamic($button-inner-opacity-disabled);