resources/themes/stylesheets/ext4/default/widgets/_button.scss

   1 /**
   2   * @class Ext.Button
   3   * Used to create the base structure of an Ext.Button
   4   */
   5 @mixin extjs-button {
   6     .#{$prefix}btn {
   7         display: inline-block;
   8         zoom: 1;
   9         *display: inline;
  10         position: relative;
  11
  12         cursor: pointer;
  13         cursor: hand;
  14
  15         white-space: nowrap;
  16
  17         vertical-align: middle;
  18
  19         * {
  20             cursor: pointer;
  21             cursor: hand;
  22         }
  23
  24         background-repeat: no-repeat;
  25
  26         em {
  27             background-repeat: no-repeat;
  28
  29             // Styles for an anchor button.
  30             a {
  31                 text-decoration: none;
  32                 display: inline-block;
  33                 color: inherit;
  34             }
  35         }
  36
  37         button {
  38             margin: 0;
  39             padding: 0;
  40             border: 0;
  41             width: auto;
  42             background: none;
  43             outline: 0 none;
  44             overflow: hidden;
  45             vertical-align: bottom;
  46             -webkit-appearance: none;
  47
  48             &::-moz-focus-inner {
  49                 border: 0;
  50                 padding: 0;
  51             }
  52         }
  53
  54         .#{$prefix}btn-inner {
  55             display: block;
  56             white-space: nowrap;
  57             text-align: center;
  58             background-color: transparent;
  59             background-repeat: no-repeat;
  60             background-position: left center;
  61         }
  62     }
  63
  64     .#{$prefix}btn-disabled {
  65         @include opacity(1);
  66     }
  67
  68     .#{$prefix}btn-disabled span {
  69         @include opacity(.5);
  70     }
  71
  72     //remove the opacity rule of IE6.
  73     .#{$prefix}ie6 .#{$prefix}btn-disabled,
  74     .#{$prefix}ie6 .#{$prefix}btn-disabled span {
  75         filter:none;
  76     }
  77
  78     @if $include-ie {
  79         * html .#{$prefix}ie {
  80             .#{$prefix}btn button {
  81                 width: 1px;
  82             }
  83         }
  84
  85         .#{$prefix}ie .#{$prefix}btn button {
  86             overflow-x: visible; /*prevents extra horiz space in IE*/
  87             vertical-align: baseline; /*IE doesn't like bottom*/
  88         }
  89
  90         .#{$prefix}strict .#{$prefix}ie6,
  91         .#{$prefix}strict .#{$prefix}ie7 {
  92             .#{$prefix}btn .#{$prefix}frame-mc {
  93                 height: 100%;
  94             }
  95         }
  96     }
  97
  98     @if not $supports-border-radius or $compile-all {
  99         .#{$prefix}nbr {
 100             .#{$prefix}btn {
 101                 .#{$prefix}frame-mc {
 102                     vertical-align: middle;
 103                     white-space: nowrap;
 104                     text-align: center;
 105                     cursor: pointer;
 106                 }
 107             }
 108         }
 109     }
 110
 111     .#{$prefix}btn-icon-text-right .#{$prefix}btn-inner {
 112         background-position: right center;
 113     }
 114
 115     .#{$prefix}btn-icon-text-top .#{$prefix}btn-inner {
 116         background-position: center top;
 117     }
 118
 119     .#{$prefix}btn-icon-text-bottom .#{$prefix}btn-inner {
 120         background-position: center bottom;
 121     }
 122
 123     .#{$prefix}btn-arrow-right {
 124         background: transparent no-repeat right center;
 125         padding-right: $button-arrow-size;
 126
 127         .#{$prefix}btn-inner {
 128             padding-right: 0 !important;
 129         }
 130     }
 131
 132     .#{$prefix}toolbar .#{$prefix}btn-arrow-right {
 133         padding-right: $button-toolbar-arrow-size;
 134     }
 135
 136     .#{$prefix}btn-arrow-bottom {
 137         background: transparent no-repeat center bottom;
 138         padding-bottom: $button-arrow-size;
 139     }
 140
 141     .#{$prefix}btn-arrow {
 142         background-image: theme-image($theme-name, 'button/arrow.gif');
 143         display: block;
 144     }
 145
 146
 147     //split buttons
 148     .#{$prefix}btn-split-right,
 149     .#{$prefix}btn-over .#{$prefix}btn-split-right {
 150         background: transparent theme-image($theme-name, 'button/s-arrow.gif') no-repeat right center;
 151         padding-right: $button-split-size !important;
 152     }
 153
 154     .#{$prefix}btn-split-bottom,
 155     .#{$prefix}btn-over .#{$prefix}btn-split-bottom {
 156         background: transparent theme-image($theme-name, 'button/s-arrow-b.gif') no-repeat center bottom;
 157         padding-bottom: $button-split-size;
 158     }
 159
 160     .#{$prefix}toolbar .#{$prefix}btn-split-right {
 161         background-image: theme-image($theme-name, 'button/s-arrow-noline.gif');
 162         padding-right: $button-toolbar-split-size !important;
 163     }
 164
 165     .#{$prefix}toolbar .#{$prefix}btn-split-bottom {
 166         background-image: theme-image($theme-name, 'button/s-arrow-b-noline.gif');
 167     }
 168
 169     .#{$prefix}btn-split {
 170         display: block;
 171     }
 172
 173     .#{$prefix}item-disabled,
 174     .#{$prefix}item-disabled * {
 175         cursor: default;
 176     }
 177
 178     .#{$prefix}cycle-fixed-width .#{$prefix}btn-inner {
 179         text-align: inherit;
 180     }
 181
 182     .#{$prefix}btn-over .#{$prefix}btn-split-right { background-image: theme-image($theme-name, 'button/s-arrow-o.gif'); }
 183     .#{$prefix}btn-over .#{$prefix}btn-split-bottom { background-image: theme-image($theme-name, 'button/s-arrow-bo.gif'); }
 184
 185     @include x-btn(
 186         /* UI + Scale */
 187         'default-small',
 188
 189         $button-small-border-radius,
 190         $button-small-border-width,
 191
 192         $button-default-border-color,
 193         $button-default-border-color-over,
 194         $button-default-border-color-focus,
 195         $button-default-border-color-pressed,
 196         $button-default-border-color-disabled,
 197
 198         $button-small-padding,
 199         $button-small-text-padding,
 200
 201         $button-default-background-color,
 202         $button-default-background-color-over,
 203         $button-default-background-color-focus,
 204         $button-default-background-color-pressed,
 205         $button-default-background-color-disabled,
 206
 207         $button-default-background-gradient,
 208         $button-default-background-gradient-over,
 209         $button-default-background-gradient-focus,
 210         $button-default-background-gradient-pressed,
 211         $button-default-background-gradient-disabled,
 212
 213         $button-default-color,
 214         $button-default-color-over,
 215         $button-default-color-focus,
 216         $button-default-color-pressed,
 217         $button-default-color-disabled,
 218
 219         $button-small-font-size,
 220         $button-small-font-size-over,
 221         $button-small-font-size-focus,
 222         $button-small-font-size-pressed,
 223         $button-small-font-size-disabled,
 224
 225         $button-small-font-weight,
 226         $button-small-font-weight-over,
 227         $button-small-font-weight-focus,
 228         $button-small-font-weight-pressed,
 229         $button-small-font-weight-disabled,
 230
 231         $button-small-font-family,
 232         $button-small-font-family-over,
 233         $button-small-font-family-focus,
 234         $button-small-font-family-pressed,
 235         $button-small-font-family-disabled,
 236
 237         $button-small-icon-size
 238     );
 239
 240     @include x-btn(
 241         'default-medium',
 242
 243         $button-medium-border-radius,
 244         $button-medium-border-width,
 245
 246         $button-default-border-color,
 247         $button-default-border-color-over,
 248         $button-default-border-color-focus,
 249         $button-default-border-color-pressed,
 250         $button-default-border-color-disabled,
 251
 252         $button-medium-padding,
 253         $button-medium-text-padding,
 254
 255         $button-default-background-color,
 256         $button-default-background-color-over,
 257         $button-default-background-color-focus,
 258         $button-default-background-color-pressed,
 259         $button-default-background-color-disabled,
 260
 261         $button-default-background-gradient,
 262         $button-default-background-gradient-over,
 263         $button-default-background-gradient-focus,
 264         $button-default-background-gradient-pressed,
 265         $button-default-background-gradient-disabled,
 266
 267         $button-default-color,
 268         $button-default-color-over,
 269         $button-default-color-focus,
 270         $button-default-color-pressed,
 271         $button-default-color-disabled,
 272
 273         $button-medium-font-size,
 274         $button-medium-font-size-over,
 275         $button-medium-font-size-focus,
 276         $button-medium-font-size-pressed,
 277         $button-medium-font-size-disabled,
 278
 279         $button-medium-font-weight,
 280         $button-medium-font-weight-over,
 281         $button-medium-font-weight-focus,
 282         $button-medium-font-weight-pressed,
 283         $button-medium-font-weight-disabled,
 284
 285         $button-medium-font-family,
 286         $button-medium-font-family-over,
 287         $button-medium-font-family-focus,
 288         $button-medium-font-family-pressed,
 289         $button-medium-font-family-disabled,
 290
 291         $button-medium-icon-size
 292     );
 293
 294     @include x-btn(
 295         'default-large',
 296
 297         $button-large-border-radius,
 298         $button-large-border-width,
 299
 300         $button-default-border-color,
 301         $button-default-border-color-over,
 302         $button-default-border-color-focus,
 303         $button-default-border-color-pressed,
 304         $button-default-border-color-disabled,
 305
 306         $button-large-padding,
 307         $button-large-text-padding,
 308
 309         $button-default-background-color,
 310         $button-default-background-color-over,
 311         $button-default-background-color-focus,
 312         $button-default-background-color-pressed,
 313         $button-default-background-color-disabled,
 314
 315         $button-default-background-gradient,
 316         $button-default-background-gradient-over,
 317         $button-default-background-gradient-focus,
 318         $button-default-background-gradient-pressed,
 319         $button-default-background-gradient-disabled,
 320
 321         $button-default-color,
 322         $button-default-color-over,
 323         $button-default-color-focus,
 324         $button-default-color-pressed,
 325         $button-default-color-disabled,
 326
 327         $button-large-font-size,
 328         $button-large-font-size-over,
 329         $button-large-font-size-focus,
 330         $button-large-font-size-pressed,
 331         $button-large-font-size-disabled,
 332
 333         $button-large-font-weight,
 334         $button-large-font-weight-over,
 335         $button-large-font-weight-focus,
 336         $button-large-font-weight-pressed,
 337         $button-large-font-weight-disabled,
 338
 339         $button-large-font-family,
 340         $button-large-font-family-over,
 341         $button-large-font-family-focus,
 342         $button-large-font-family-pressed,
 343         $button-large-font-family-disabled,
 344
 345         $button-large-icon-size
 346     );
 347
 348     @include x-btn(
 349         'default-toolbar-small',
 350
 351         $button-small-border-radius,
 352         $button-small-border-width,
 353
 354         $button-toolbar-border-color,
 355         $button-toolbar-border-color-over,
 356         $button-toolbar-border-color-focus,
 357         $button-toolbar-border-color-pressed,
 358         $button-toolbar-border-color-disabled,
 359
 360         $button-small-padding,
 361         $button-small-text-padding,
 362
 363         $button-toolbar-background-color,
 364         $button-toolbar-background-color-over,
 365         $button-toolbar-background-color-focus,
 366         $button-toolbar-background-color-pressed,
 367         $button-toolbar-background-color-disabled,
 368
 369         $button-toolbar-background-gradient,
 370         $button-toolbar-background-gradient-over,
 371         $button-toolbar-background-gradient-focus,
 372         $button-toolbar-background-gradient-pressed,
 373         $button-toolbar-background-gradient-disabled,
 374
 375         $button-toolbar-color,
 376         $button-toolbar-color-over,
 377         $button-toolbar-color-focus,
 378         $button-toolbar-color-pressed,
 379         $button-toolbar-color-disabled,
 380
 381         $button-small-font-size,
 382         $button-small-font-size-over,
 383         $button-small-font-size-focus,
 384         $button-small-font-size-pressed,
 385         $button-small-font-size-disabled,
 386
 387         $button-small-font-weight,
 388         $button-small-font-weight-over,
 389         $button-small-font-weight-focus,
 390         $button-small-font-weight-pressed,
 391         $button-small-font-weight-disabled,
 392
 393         $button-small-font-family,
 394         $button-small-font-family-over,
 395         $button-small-font-family-focus,
 396         $button-small-font-family-pressed,
 397         $button-small-font-family-disabled,
 398
 399         $button-small-icon-size
 400     );
 401
 402     @include x-btn(
 403         'default-toolbar-medium',
 404
 405         $button-medium-border-radius,
 406         $button-medium-border-width,
 407
 408         $button-toolbar-border-color,
 409         $button-toolbar-border-color-over,
 410         $button-toolbar-border-color-focus,
 411         $button-toolbar-border-color-pressed,
 412         $button-toolbar-border-color-disabled,
 413
 414         $button-medium-padding,
 415         $button-medium-text-padding,
 416
 417         $button-toolbar-background-color,
 418         $button-toolbar-background-color-over,
 419         $button-toolbar-background-color-focus,
 420         $button-toolbar-background-color-pressed,
 421         $button-toolbar-background-color-disabled,
 422
 423         $button-toolbar-background-gradient,
 424         $button-toolbar-background-gradient-over,
 425         $button-toolbar-background-gradient-focus,
 426         $button-toolbar-background-gradient-pressed,
 427         $button-toolbar-background-gradient-disabled,
 428
 429         $button-toolbar-color,
 430         $button-toolbar-color-over,
 431         $button-toolbar-color-focus,
 432         $button-toolbar-color-pressed,
 433         $button-toolbar-color-disabled,
 434
 435         $button-medium-font-size,
 436         $button-medium-font-size-over,
 437         $button-medium-font-size-focus,
 438         $button-medium-font-size-pressed,
 439         $button-medium-font-size-disabled,
 440
 441         $button-medium-font-weight,
 442         $button-medium-font-weight-over,
 443         $button-medium-font-weight-focus,
 444         $button-medium-font-weight-pressed,
 445         $button-medium-font-weight-disabled,
 446
 447         $button-medium-font-family,
 448         $button-medium-font-family-over,
 449         $button-medium-font-family-focus,
 450         $button-medium-font-family-pressed,
 451         $button-medium-font-family-disabled,
 452
 453         $button-medium-icon-size
 454     );
 455
 456     @include x-btn(
 457         'default-toolbar-large',
 458
 459         $button-large-border-radius,
 460         $button-large-border-width,
 461
 462         $button-toolbar-border-color,
 463         $button-toolbar-border-color-over,
 464         $button-toolbar-border-color-focus,
 465         $button-toolbar-border-color-pressed,
 466         $button-toolbar-border-color-disabled,
 467
 468         $button-large-padding,
 469         $button-large-text-padding,
 470
 471         $button-toolbar-background-color,
 472         $button-toolbar-background-color-over,
 473         $button-toolbar-background-color-focus,
 474         $button-toolbar-background-color-pressed,
 475         $button-toolbar-background-color-disabled,
 476
 477         $button-toolbar-background-gradient,
 478         $button-toolbar-background-gradient-over,
 479         $button-toolbar-background-gradient-focus,
 480         $button-toolbar-background-gradient-pressed,
 481         $button-toolbar-background-gradient-disabled,
 482
 483         $button-toolbar-color,
 484         $button-toolbar-color-over,
 485         $button-toolbar-color-focus,
 486         $button-toolbar-color-pressed,
 487         $button-toolbar-color-disabled,
 488
 489         $button-large-font-size,
 490         $button-large-font-size-over,
 491         $button-large-font-size-focus,
 492         $button-large-font-size-pressed,
 493         $button-large-font-size-disabled,
 494
 495         $button-large-font-weight,
 496         $button-large-font-weight-over,
 497         $button-large-font-weight-focus,
 498         $button-large-font-weight-pressed,
 499         $button-large-font-weight-disabled,
 500
 501         $button-large-font-family,
 502         $button-large-font-family-over,
 503         $button-large-font-family-focus,
 504         $button-large-font-family-pressed,
 505         $button-large-font-family-disabled,
 506
 507         $button-large-icon-size
 508     );
 509
 510     .#{$prefix}btn-default-toolbar-small-disabled,
 511     .#{$prefix}btn-default-toolbar-medium-disabled,
 512     .#{$prefix}btn-default-toolbar-large-disabled {
 513         border-color: transparent;
 514
 515         background-image: none;
 516         background: transparent;
 517     }
 518
 519 }