resources/css/structure/button.css

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 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 .x-btn-bl{\r
 218         width:3px;\r
 219         height:3px;\r
 220         background:no-repeat 0 -3px;\r
 221 }\r
 222 \r
 223 .x-btn-br{\r
 224         width:3px;\r
 225         height:3px;\r
 226         background:no-repeat -3px -3px;\r
 227 }\r
 228 \r
 229 .x-btn-bc{\r
 230         height:3px;\r
 231         background:repeat-x 0 -15px;\r
 232 }\r
 233 \r
 234 .x-btn-over .x-btn-tl{\r
 235         background-position: -6px 0;\r
 236 }\r
 237 \r
 238 .x-btn-over .x-btn-tr{\r
 239         background-position: -9px 0;\r
 240 }\r
 241 \r
 242 .x-btn-over .x-btn-tc{\r
 243         background-position: 0 -9px;\r
 244 }\r
 245 \r
 246 .x-btn-over .x-btn-ml{\r
 247         background-position: -6px -24px;\r
 248 }\r
 249 \r
 250 .x-btn-over .x-btn-mr{\r
 251         background-position: -9px -24px;\r
 252 }\r
 253 \r
 254 .x-btn-over .x-btn-mc{\r
 255         background-position: 0 -2168px;\r
 256 }\r
 257 \r
 258 .x-btn-over .x-btn-bl{\r
 259         background-position: -6px -3px;\r
 260 }\r
 261 \r
 262 .x-btn-over .x-btn-br{\r
 263         background-position: -9px -3px;\r
 264 }\r
 265 \r
 266 .x-btn-over .x-btn-bc{\r
 267         background-position: 0 -18px;\r
 268 }\r
 269 \r
 270 .x-btn-click .x-btn-tl, .x-btn-menu-active .x-btn-tl, .x-btn-pressed .x-btn-tl{\r
 271         background-position: -12px 0;\r
 272 }\r
 273 \r
 274 .x-btn-click .x-btn-tr, .x-btn-menu-active .x-btn-tr, .x-btn-pressed .x-btn-tr{\r
 275         background-position: -15px 0;\r
 276 }\r
 277 \r
 278 .x-btn-click .x-btn-tc, .x-btn-menu-active .x-btn-tc, .x-btn-pressed .x-btn-tc{\r
 279         background-position: 0 -12px;\r
 280 }\r
 281 \r
 282 .x-btn-click .x-btn-ml, .x-btn-menu-active .x-btn-ml, .x-btn-pressed .x-btn-ml{\r
 283         background-position: -12px -24px;\r
 284 }\r
 285 \r
 286 .x-btn-click .x-btn-mr, .x-btn-menu-active .x-btn-mr, .x-btn-pressed .x-btn-mr{\r
 287         background-position: -15px -24px;\r
 288 }\r
 289 \r
 290 .x-btn-click .x-btn-mc, .x-btn-menu-active .x-btn-mc, .x-btn-pressed .x-btn-mc{\r
 291         background-position: 0 -3240px;\r
 292 }\r
 293 \r
 294 .x-btn-click .x-btn-bl, .x-btn-menu-active .x-btn-bl, .x-btn-pressed .x-btn-bl{\r
 295         background-position: -12px -3px;\r
 296 }\r
 297 \r
 298 .x-btn-click .x-btn-br, .x-btn-menu-active .x-btn-br, .x-btn-pressed .x-btn-br{\r
 299         background-position: -15px -3px;\r
 300 }\r
 301 \r
 302 .x-btn-click .x-btn-bc, .x-btn-menu-active .x-btn-bc, .x-btn-pressed .x-btn-bc{\r
 303         background-position: 0 -21px;\r
 304 }\r
 305 \r
 306 .x-btn-disabled *{\r
 307         cursor:default !important;\r
 308 }\r
 309 \r
 310 \r
 311 /* With a menu arrow */\r
 312 /* right */\r
 313 .x-btn-mc em.x-btn-arrow {\r
 314     display:block;\r
 315     background:transparent no-repeat right center;\r
 316         padding-right:10px;\r
 317 }\r
 318 \r
 319 .x-btn-mc em.x-btn-split {\r
 320     display:block;\r
 321     background:transparent no-repeat right center;\r
 322         padding-right:14px;\r
 323 }\r
 324 \r
 325 /* bottom */\r
 326 .x-btn-mc em.x-btn-arrow-bottom {\r
 327     display:block;\r
 328     background:transparent no-repeat center bottom;\r
 329         padding-bottom:14px;\r
 330 }\r
 331 \r
 332 .x-btn-mc em.x-btn-split-bottom {\r
 333     display:block;\r
 334     background:transparent no-repeat center bottom;\r
 335         padding-bottom:14px;\r
 336 }\r
 337 \r
 338 /* height adjustment class */\r
 339 .x-btn-as-arrow .x-btn-mc em {\r
 340     display:block;\r
 341     background:transparent;\r
 342         padding-bottom:14px;\r
 343 }\r
 344 \r
 345 /* groups */\r
 346 .x-btn-group {\r
 347     padding:1px;\r
 348 }\r
 349 \r
 350 .x-btn-group-header {\r
 351     padding:2px;\r
 352     text-align:center;\r
 353 }\r
 354 \r
 355 .x-btn-group-tc {\r
 356         background: transparent repeat-x 0 0;\r
 357         overflow:hidden;\r
 358 }\r
 359 \r
 360 .x-btn-group-tl {\r
 361         background: transparent no-repeat 0 0;\r
 362         padding-left:3px;\r
 363     zoom:1;\r
 364 }\r
 365 \r
 366 .x-btn-group-tr {\r
 367         background: transparent no-repeat right 0;\r
 368         zoom:1;\r
 369     padding-right:3px;\r
 370 }\r
 371 \r
 372 .x-btn-group-bc {\r
 373         background: transparent repeat-x 0 bottom;\r
 374     zoom:1;\r
 375 }\r
 376 \r
 377 .x-btn-group-bc .x-panel-footer {\r
 378     zoom:1;\r
 379 }\r
 380 \r
 381 .x-btn-group-bl {\r
 382         background: transparent no-repeat 0 bottom;\r
 383         padding-left:3px;\r
 384     zoom:1;\r
 385 }\r
 386 \r
 387 .x-btn-group-br {\r
 388         background: transparent no-repeat right bottom;\r
 389         padding-right:3px;\r
 390     zoom:1;\r
 391 }\r
 392 \r
 393 .x-btn-group-mc {\r
 394     border:0 none;\r
 395     padding:1px 0 0 0;\r
 396     margin:0;\r
 397 }\r
 398 \r
 399 .x-btn-group-mc .x-btn-group-body {\r
 400     background:transparent;\r
 401     border: 0 none;\r
 402 }\r
 403 \r
 404 .x-btn-group-ml {\r
 405         background: transparent repeat-y 0 0;\r
 406         padding-left:3px;\r
 407     zoom:1;\r
 408 }\r
 409 \r
 410 .x-btn-group-mr {\r
 411         background: transparent repeat-y right 0;\r
 412         padding-right:3px;\r
 413     zoom:1;\r
 414 }\r
 415 \r
 416 .x-btn-group-bc .x-btn-group-footer {\r
 417     padding-bottom:6px;\r
 418 }\r
 419 \r
 420 .x-panel-nofooter .x-btn-group-bc {\r
 421         height:3px;\r
 422     font-size:0;\r
 423     line-height:0;\r
 424 }\r
 425 \r
 426 .x-btn-group-bwrap {\r
 427     overflow:hidden;\r
 428     zoom:1;\r
 429 }\r
 430 \r
 431 .x-btn-group-body {\r
 432     overflow:hidden;\r
 433     zoom:1;\r
 434 }\r
 435 \r
 436 .x-btn-group-notitle .x-btn-group-tc {\r
 437         background: transparent repeat-x 0 0;\r
 438         overflow:hidden;\r
 439     height:2px;\r
 440 }