resources/css/structure/button.css

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