resources/css/structure/panel.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-panel {
   8     border-style: solid;
   9     border-width:0;
  10 }
  11
  12 .x-panel-header {
  13     overflow:hidden;
  14     zoom:1;
  15     padding:5px 3px 4px 5px;
  16     border:1px solid;
  17     line-height: 15px;
  18     background: transparent repeat-x 0 -1px;
  19 }
  20
  21 .x-panel-body {
  22     border:1px solid;
  23     border-top:0 none;
  24     overflow:hidden;
  25     position: relative; /* added for item scroll positioning */
  26 }
  27
  28 .x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar {
  29     border:1px solid;
  30     border-top:0 none;
  31     overflow:hidden;
  32     padding:2px;
  33 }
  34
  35 .x-panel-tbar-noheader .x-toolbar, .x-panel-mc .x-panel-tbar .x-toolbar {
  36     border-top:1px solid;
  37     border-bottom: 0 none;
  38 }
  39
  40 .x-panel-body-noheader, .x-panel-mc .x-panel-body {
  41     border-top:1px solid;
  42 }
  43
  44 .x-panel-header {
  45     overflow:hidden;
  46     zoom:1;
  47 }
  48
  49 .x-panel-tl .x-panel-header {
  50     padding:5px 0 4px 0;
  51     border:0 none;
  52     background:transparent no-repeat;
  53 }
  54
  55 .x-panel-tl .x-panel-icon, .x-window-tl .x-panel-icon {
  56     padding-left:20px !important;
  57     background-repeat:no-repeat;
  58     background-position:0 4px;
  59     zoom:1;
  60 }
  61
  62 .x-panel-inline-icon {
  63     width:16px;
  64         height:16px;
  65     background-repeat:no-repeat;
  66     background-position:0 0;
  67         vertical-align:middle;
  68         margin-right:4px;
  69         margin-top:-1px;
  70         margin-bottom:-1px;
  71 }
  72
  73 .x-panel-tc {
  74         background: transparent repeat-x 0 0;
  75         overflow:hidden;
  76 }
  77
  78 /* fix ie7 strict mode bug */
  79 .ext-strict .ext-ie7 .x-panel-tc {
  80     overflow: visible;
  81 }
  82
  83 .x-panel-tl {
  84         background: transparent no-repeat 0 0;
  85         padding-left:6px;
  86     zoom:1;
  87     border-bottom:1px solid;
  88 }
  89
  90 .x-panel-tr {
  91         background: transparent no-repeat right 0;
  92         zoom:1;
  93     padding-right:6px;
  94 }
  95
  96 .x-panel-bc {
  97         background: transparent repeat-x 0 bottom;
  98     zoom:1;
  99 }
 100
 101 .x-panel-bc .x-panel-footer {
 102     zoom:1;
 103 }
 104
 105 .x-panel-bl {
 106         background: transparent no-repeat 0 bottom;
 107         padding-left:6px;
 108     zoom:1;
 109 }
 110
 111 .x-panel-br {
 112         background: transparent no-repeat right bottom;
 113         padding-right:6px;
 114     zoom:1;
 115 }
 116
 117 .x-panel-mc {
 118     border:0 none;
 119     padding:0;
 120     margin:0;
 121     padding-top:6px;
 122 }
 123
 124 .x-panel-mc .x-panel-body {
 125     background-color:transparent;
 126     border: 0 none;
 127 }
 128
 129 .x-panel-ml {
 130         background: repeat-y 0 0;
 131         padding-left:6px;
 132     zoom:1;
 133 }
 134
 135 .x-panel-mr {
 136         background: transparent repeat-y right 0;
 137         padding-right:6px;
 138     zoom:1;
 139 }
 140
 141 .x-panel-bc .x-panel-footer {
 142     padding-bottom:6px;
 143 }
 144
 145 .x-panel-nofooter .x-panel-bc, .x-panel-nofooter .x-window-bc {
 146         height:6px;
 147     font-size:0;
 148     line-height:0;
 149 }
 150
 151 .x-panel-bwrap {
 152     overflow:hidden;
 153     zoom:1;
 154     left:0;
 155     top:0;
 156 }
 157 .x-panel-body {
 158     overflow:hidden;
 159     zoom:1;
 160 }
 161
 162 .x-panel-collapsed .x-resizable-handle{
 163     display:none;
 164 }
 165
 166 .ext-gecko .x-panel-animated div {
 167     overflow:hidden !important;
 168 }
 169
 170 /* Plain */
 171 .x-plain-body {
 172     overflow:hidden;
 173 }
 174
 175 .x-plain-bbar .x-toolbar {
 176     overflow:hidden;
 177     padding:2px;
 178 }
 179
 180 .x-plain-tbar .x-toolbar {
 181     overflow:hidden;
 182     padding:2px;
 183 }
 184
 185 .x-plain-bwrap {
 186     overflow:hidden;
 187     zoom:1;
 188 }
 189
 190 .x-plain {
 191     overflow:hidden;
 192 }
 193
 194 /* Tools */
 195 .x-tool {
 196     overflow:hidden;
 197     width:15px;
 198     height:15px;
 199     float:right;
 200     cursor:pointer;
 201     background:transparent no-repeat;
 202     margin-left:2px;
 203 }
 204
 205 /* expand / collapse tools */
 206 .x-tool-toggle {
 207     background-position:0 -60px;
 208 }
 209
 210 .x-tool-toggle-over {
 211     background-position:-15px -60px;
 212 }
 213
 214 .x-panel-collapsed .x-tool-toggle {
 215     background-position:0 -75px;
 216 }
 217
 218 .x-panel-collapsed .x-tool-toggle-over {
 219     background-position:-15px -75px;
 220 }
 221
 222
 223 .x-tool-close {
 224     background-position:0 -0;
 225 }
 226
 227 .x-tool-close-over {
 228     background-position:-15px 0;
 229 }
 230
 231 .x-tool-minimize {
 232     background-position:0 -15px;
 233 }
 234
 235 .x-tool-minimize-over {
 236     background-position:-15px -15px;
 237 }
 238
 239 .x-tool-maximize {
 240     background-position:0 -30px;
 241 }
 242
 243 .x-tool-maximize-over {
 244     background-position:-15px -30px;
 245 }
 246
 247 .x-tool-restore {
 248     background-position:0 -45px;
 249 }
 250
 251 .x-tool-restore-over {
 252     background-position:-15px -45px;
 253 }
 254
 255 .x-tool-gear {
 256     background-position:0 -90px;
 257 }
 258
 259 .x-tool-gear-over {
 260     background-position:-15px -90px;
 261 }
 262
 263 .x-tool-prev {
 264     background-position:0 -105px;
 265 }
 266
 267 .x-tool-prev-over {
 268     background-position:-15px -105px;
 269 }
 270
 271 .x-tool-next {
 272     background-position:0 -120px;
 273 }
 274
 275 .x-tool-next-over {
 276     background-position:-15px -120px;
 277 }
 278
 279 .x-tool-pin {
 280     background-position:0 -135px;
 281 }
 282
 283 .x-tool-pin-over {
 284     background-position:-15px -135px;
 285 }
 286
 287 .x-tool-unpin {
 288     background-position:0 -150px;
 289 }
 290
 291 .x-tool-unpin-over {
 292     background-position:-15px -150px;
 293 }
 294
 295 .x-tool-right {
 296     background-position:0 -165px;
 297 }
 298
 299 .x-tool-right-over {
 300     background-position:-15px -165px;
 301 }
 302
 303 .x-tool-left {
 304     background-position:0 -180px;
 305 }
 306
 307 .x-tool-left-over {
 308     background-position:-15px -180px;
 309 }
 310
 311 .x-tool-down {
 312     background-position:0 -195px;
 313 }
 314
 315 .x-tool-down-over {
 316     background-position:-15px -195px;
 317 }
 318
 319 .x-tool-up {
 320     background-position:0 -210px;
 321 }
 322
 323 .x-tool-up-over {
 324     background-position:-15px -210px;
 325 }
 326
 327 .x-tool-refresh {
 328     background-position:0 -225px;
 329 }
 330
 331 .x-tool-refresh-over {
 332     background-position:-15px -225px;
 333 }
 334
 335 .x-tool-plus {
 336     background-position:0 -240px;
 337 }
 338
 339 .x-tool-plus-over {
 340     background-position:-15px -240px;
 341 }
 342
 343 .x-tool-minus {
 344     background-position:0 -255px;
 345 }
 346
 347 .x-tool-minus-over {
 348     background-position:-15px -255px;
 349 }
 350
 351 .x-tool-search {
 352     background-position:0 -270px;
 353 }
 354
 355 .x-tool-search-over {
 356     background-position:-15px -270px;
 357 }
 358
 359 .x-tool-save {
 360     background-position:0 -285px;
 361 }
 362
 363 .x-tool-save-over {
 364     background-position:-15px -285px;
 365 }
 366
 367 .x-tool-help {
 368     background-position:0 -300px;
 369 }
 370
 371 .x-tool-help-over {
 372     background-position:-15px -300px;
 373 }
 374
 375 .x-tool-print {
 376     background-position:0 -315px;
 377 }
 378
 379 .x-tool-print-over {
 380     background-position:-15px -315px;
 381 }
 382
 383 .x-tool-expand {
 384     background-position:0 -330px;
 385 }
 386
 387 .x-tool-expand-over {
 388     background-position:-15px -330px;
 389 }
 390
 391 .x-tool-collapse {
 392     background-position:0 -345px;
 393 }
 394
 395 .x-tool-collapse-over {
 396     background-position:-15px -345px;
 397 }
 398
 399 .x-tool-resize {
 400     background-position:0 -360px;
 401 }
 402
 403 .x-tool-resize-over {
 404     background-position:-15px -360px;
 405 }
 406
 407 .x-tool-move {
 408     background-position:0 -375px;
 409 }
 410
 411 .x-tool-move-over {
 412     background-position:-15px -375px;
 413 }
 414
 415 /* Ghosting */
 416 .x-panel-ghost {
 417     z-index:12000;
 418     overflow:hidden;
 419     position:absolute;
 420     left:0;top:0;
 421     opacity:.65;
 422     -moz-opacity:.65;
 423     filter:alpha(opacity=65);
 424 }
 425
 426 .x-panel-ghost ul {
 427     margin:0;
 428     padding:0;
 429     overflow:hidden;
 430     font-size:0;
 431     line-height:0;
 432     border:1px solid;
 433     border-top:0 none;
 434     display:block;
 435 }
 436
 437 .x-panel-ghost * {
 438     cursor:move !important;
 439 }
 440
 441 .x-panel-dd-spacer {
 442     border:2px dashed;
 443 }
 444
 445 /* Buttons */
 446 .x-panel-btns {
 447     padding:5px;
 448     overflow:hidden;
 449 }
 450
 451 .x-panel-btns td.x-toolbar-cell{
 452         padding:3px;
 453 }
 454
 455 .x-panel-btns .x-btn-focus .x-btn-left{
 456         background-position:0 -147px;
 457 }
 458
 459 .x-panel-btns .x-btn-focus .x-btn-right{
 460         background-position:0 -168px;
 461 }
 462
 463 .x-panel-btns .x-btn-focus .x-btn-center{
 464         background-position:0 -189px;
 465 }
 466
 467 .x-panel-btns .x-btn-over .x-btn-left{
 468         background-position:0 -63px;
 469 }
 470
 471 .x-panel-btns .x-btn-over .x-btn-right{
 472         background-position:0 -84px;
 473 }
 474
 475 .x-panel-btns .x-btn-over .x-btn-center{
 476         background-position:0 -105px;
 477 }
 478
 479 .x-panel-btns .x-btn-click .x-btn-center{
 480         background-position:0 -126px;
 481 }
 482
 483 .x-panel-btns .x-btn-click  .x-btn-right{
 484         background-position:0 -84px;
 485 }
 486
 487 .x-panel-btns .x-btn-click .x-btn-left{
 488         background-position:0 -63px;
 489 }
 490
 491 .x-panel-fbar td,.x-panel-fbar span,.x-panel-fbar input,.x-panel-fbar div,.x-panel-fbar select,.x-panel-fbar label{
 492         white-space: nowrap;
 493 }