resources/css/structure/button.css

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 .x-btn{
   8         cursor:pointer;
   9         white-space: nowrap;
  10 }
  11
  12 .x-btn button{
  13     border:0 none;
  14     background-color:transparent;
  15     padding-left:3px;
  16     padding-right:3px;
  17     cursor:pointer;
  18     margin:0;
  19     overflow:visible;
  20     width:auto;
  21     -moz-outline:0 none;
  22     outline:0 none;
  23 }
  24
  25 * html .ext-ie .x-btn button {
  26     width:1px;
  27 }
  28
  29 .ext-gecko .x-btn button, .ext-webkit .x-btn button {
  30     padding-left:0;
  31     padding-right:0;
  32 }
  33
  34 .ext-gecko .x-btn button::-moz-focus-inner {
  35     padding:0;
  36 }
  37
  38 .ext-ie .x-btn button {
  39     padding-top:2px;
  40 }
  41
  42 .x-btn td {
  43     padding:0 !important;
  44 }
  45
  46 .x-btn-text {
  47     cursor:pointer;
  48         white-space: nowrap;
  49     padding:0;
  50 }
  51
  52 /* icon placement and sizing styles */
  53
  54 /* Only text */
  55 .x-btn-noicon .x-btn-small .x-btn-text{
  56         height: 16px;
  57 }
  58
  59 .x-btn-noicon .x-btn-medium .x-btn-text{
  60     height: 24px;
  61 }
  62
  63 .x-btn-noicon .x-btn-large .x-btn-text{
  64     height: 32px;
  65 }
  66
  67 /* Only icons */
  68 .x-btn-icon .x-btn-text{
  69     background-position: center;
  70         background-repeat: no-repeat;
  71 }
  72
  73 .x-btn-icon .x-btn-small .x-btn-text{
  74         height: 16px;
  75         width: 16px;
  76 }
  77
  78 .x-btn-icon .x-btn-medium .x-btn-text{
  79     height: 24px;
  80         width: 24px;
  81 }
  82
  83 .x-btn-icon .x-btn-large .x-btn-text{
  84     height: 32px;
  85         width: 32px;
  86 }
  87
  88 /* Icons and text */
  89 /* left */
  90 .x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
  91     background-position: 0 center;
  92         background-repeat: no-repeat;
  93     padding-left:18px;
  94     height:16px;
  95 }
  96
  97 .x-btn-text-icon .x-btn-icon-medium-left .x-btn-text{
  98     background-position: 0 center;
  99         background-repeat: no-repeat;
 100     padding-left:26px;
 101     height:24px;
 102 }
 103
 104 .x-btn-text-icon .x-btn-icon-large-left .x-btn-text{
 105     background-position: 0 center;
 106         background-repeat: no-repeat;
 107     padding-left:34px;
 108     height:32px;
 109 }
 110
 111 /* top */
 112 .x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
 113     background-position: center 0;
 114         background-repeat: no-repeat;
 115     padding-top:18px;
 116 }
 117
 118 .x-btn-text-icon .x-btn-icon-medium-top .x-btn-text{
 119     background-position: center 0;
 120         background-repeat: no-repeat;
 121     padding-top:26px;
 122 }
 123
 124 .x-btn-text-icon .x-btn-icon-large-top .x-btn-text{
 125     background-position: center 0;
 126         background-repeat: no-repeat;
 127     padding-top:34px;
 128 }
 129
 130 /* right */
 131 .x-btn-text-icon .x-btn-icon-small-right .x-btn-text{
 132     background-position: right center;
 133         background-repeat: no-repeat;
 134     padding-right:18px;
 135     height:16px;
 136 }
 137
 138 .x-btn-text-icon .x-btn-icon-medium-right .x-btn-text{
 139     background-position: right center;
 140         background-repeat: no-repeat;
 141     padding-right:26px;
 142     height:24px;
 143 }
 144
 145 .x-btn-text-icon .x-btn-icon-large-right .x-btn-text{
 146     background-position: right center;
 147         background-repeat: no-repeat;
 148     padding-right:34px;
 149     height:32px;
 150 }
 151
 152 /* bottom */
 153 .x-btn-text-icon .x-btn-icon-small-bottom .x-btn-text{
 154     background-position: center bottom;
 155         background-repeat: no-repeat;
 156     padding-bottom:18px;
 157 }
 158
 159 .x-btn-text-icon .x-btn-icon-medium-bottom .x-btn-text{
 160     background-position: center bottom;
 161         background-repeat: no-repeat;
 162     padding-bottom:26px;
 163 }
 164
 165 .x-btn-text-icon .x-btn-icon-large-bottom .x-btn-text{
 166     background-position: center bottom;
 167         background-repeat: no-repeat;
 168     padding-bottom:34px;
 169 }
 170
 171 /* background positioning */
 172 .x-btn-tr i, .x-btn-tl i, .x-btn-mr i, .x-btn-ml i, .x-btn-br i, .x-btn-bl i{
 173         font-size:1px;
 174     line-height:1px;
 175     width:3px;
 176     display:block;
 177     overflow:hidden;
 178 }
 179
 180 .x-btn-tr i, .x-btn-tl i, .x-btn-br i, .x-btn-bl i{
 181         height:3px;
 182 }
 183
 184 .x-btn-tl{
 185         width:3px;
 186         height:3px;
 187         background:no-repeat 0 0;
 188 }
 189 .x-btn-tr{
 190         width:3px;
 191         height:3px;
 192         background:no-repeat -3px 0;
 193 }
 194 .x-btn-tc{
 195         height:3px;
 196         background:repeat-x 0 -6px;
 197 }
 198
 199 .x-btn-ml{
 200         width:3px;
 201         background:no-repeat 0 -24px;
 202 }
 203 .x-btn-mr{
 204         width:3px;
 205         background:no-repeat -3px -24px;
 206 }
 207
 208 .x-btn-mc{
 209         background:repeat-x 0 -1096px;
 210     vertical-align: middle;
 211         text-align:center;
 212         padding:0 5px;
 213         cursor:pointer;
 214         white-space:nowrap;
 215 }
 216
 217 /* Fixes an issue with the button height */
 218 .ext-strict .ext-ie6 .x-btn-mc, .ext-strict .ext-ie7 .x-btn-mc {
 219     height: 100%;
 220 }
 221
 222 .x-btn-bl{
 223         width:3px;
 224         height:3px;
 225         background:no-repeat 0 -3px;
 226 }
 227
 228 .x-btn-br{
 229         width:3px;
 230         height:3px;
 231         background:no-repeat -3px -3px;
 232 }
 233
 234 .x-btn-bc{
 235         height:3px;
 236         background:repeat-x 0 -15px;
 237 }
 238
 239 .x-btn-over .x-btn-tl{
 240         background-position: -6px 0;
 241 }
 242
 243 .x-btn-over .x-btn-tr{
 244         background-position: -9px 0;
 245 }
 246
 247 .x-btn-over .x-btn-tc{
 248         background-position: 0 -9px;
 249 }
 250
 251 .x-btn-over .x-btn-ml{
 252         background-position: -6px -24px;
 253 }
 254
 255 .x-btn-over .x-btn-mr{
 256         background-position: -9px -24px;
 257 }
 258
 259 .x-btn-over .x-btn-mc{
 260         background-position: 0 -2168px;
 261 }
 262
 263 .x-btn-over .x-btn-bl{
 264         background-position: -6px -3px;
 265 }
 266
 267 .x-btn-over .x-btn-br{
 268         background-position: -9px -3px;
 269 }
 270
 271 .x-btn-over .x-btn-bc{
 272         background-position: 0 -18px;
 273 }
 274
 275 .x-btn-click .x-btn-tl, .x-btn-menu-active .x-btn-tl, .x-btn-pressed .x-btn-tl{
 276         background-position: -12px 0;
 277 }
 278
 279 .x-btn-click .x-btn-tr, .x-btn-menu-active .x-btn-tr, .x-btn-pressed .x-btn-tr{
 280         background-position: -15px 0;
 281 }
 282
 283 .x-btn-click .x-btn-tc, .x-btn-menu-active .x-btn-tc, .x-btn-pressed .x-btn-tc{
 284         background-position: 0 -12px;
 285 }
 286
 287 .x-btn-click .x-btn-ml, .x-btn-menu-active .x-btn-ml, .x-btn-pressed .x-btn-ml{
 288         background-position: -12px -24px;
 289 }
 290
 291 .x-btn-click .x-btn-mr, .x-btn-menu-active .x-btn-mr, .x-btn-pressed .x-btn-mr{
 292         background-position: -15px -24px;
 293 }
 294
 295 .x-btn-click .x-btn-mc, .x-btn-menu-active .x-btn-mc, .x-btn-pressed .x-btn-mc{
 296         background-position: 0 -3240px;
 297 }
 298
 299 .x-btn-click .x-btn-bl, .x-btn-menu-active .x-btn-bl, .x-btn-pressed .x-btn-bl{
 300         background-position: -12px -3px;
 301 }
 302
 303 .x-btn-click .x-btn-br, .x-btn-menu-active .x-btn-br, .x-btn-pressed .x-btn-br{
 304         background-position: -15px -3px;
 305 }
 306
 307 .x-btn-click .x-btn-bc, .x-btn-menu-active .x-btn-bc, .x-btn-pressed .x-btn-bc{
 308         background-position: 0 -21px;
 309 }
 310
 311 .x-btn-disabled *{
 312         cursor:default !important;
 313 }
 314
 315
 316 /* With a menu arrow */
 317 /* right */
 318 .x-btn-mc em.x-btn-arrow {
 319     display:block;
 320     background:transparent no-repeat right center;
 321         padding-right:10px;
 322 }
 323
 324 .x-btn-mc em.x-btn-split {
 325     display:block;
 326     background:transparent no-repeat right center;
 327         padding-right:14px;
 328 }
 329
 330 /* bottom */
 331 .x-btn-mc em.x-btn-arrow-bottom {
 332     display:block;
 333     background:transparent no-repeat center bottom;
 334         padding-bottom:14px;
 335 }
 336
 337 .x-btn-mc em.x-btn-split-bottom {
 338     display:block;
 339     background:transparent no-repeat center bottom;
 340         padding-bottom:14px;
 341 }
 342
 343 /* height adjustment class */
 344 .x-btn-as-arrow .x-btn-mc em {
 345     display:block;
 346     background-color:transparent;
 347         padding-bottom:14px;
 348 }
 349
 350 /* groups */
 351 .x-btn-group {
 352     padding:1px;
 353 }
 354
 355 .x-btn-group-header {
 356     padding:2px;
 357     text-align:center;
 358 }
 359
 360 .x-btn-group-tc {
 361         background: transparent repeat-x 0 0;
 362         overflow:hidden;
 363 }
 364
 365 .x-btn-group-tl {
 366         background: transparent no-repeat 0 0;
 367         padding-left:3px;
 368     zoom:1;
 369 }
 370
 371 .x-btn-group-tr {
 372         background: transparent no-repeat right 0;
 373         zoom:1;
 374     padding-right:3px;
 375 }
 376
 377 .x-btn-group-bc {
 378         background: transparent repeat-x 0 bottom;
 379     zoom:1;
 380 }
 381
 382 .x-btn-group-bc .x-panel-footer {
 383     zoom:1;
 384 }
 385
 386 .x-btn-group-bl {
 387         background: transparent no-repeat 0 bottom;
 388         padding-left:3px;
 389     zoom:1;
 390 }
 391
 392 .x-btn-group-br {
 393         background: transparent no-repeat right bottom;
 394         padding-right:3px;
 395     zoom:1;
 396 }
 397
 398 .x-btn-group-mc {
 399     border:0 none;
 400     padding:1px 0 0 0;
 401     margin:0;
 402 }
 403
 404 .x-btn-group-mc .x-btn-group-body {
 405     background-color:transparent;
 406     border: 0 none;
 407 }
 408
 409 .x-btn-group-ml {
 410         background: transparent repeat-y 0 0;
 411         padding-left:3px;
 412     zoom:1;
 413 }
 414
 415 .x-btn-group-mr {
 416         background: transparent repeat-y right 0;
 417         padding-right:3px;
 418     zoom:1;
 419 }
 420
 421 .x-btn-group-bc .x-btn-group-footer {
 422     padding-bottom:6px;
 423 }
 424
 425 .x-panel-nofooter .x-btn-group-bc {
 426         height:3px;
 427     font-size:0;
 428     line-height:0;
 429 }
 430
 431 .x-btn-group-bwrap {
 432     overflow:hidden;
 433     zoom:1;
 434 }
 435
 436 .x-btn-group-body {
 437     overflow:hidden;
 438     zoom:1;
 439 }
 440
 441 .x-btn-group-notitle .x-btn-group-tc {
 442         background: transparent repeat-x 0 0;
 443         overflow:hidden;
 444     height:2px;
 445 }