resources/css/structure/grid.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 /* Grid3 styles */\r
   8 .x-grid3 {\r
   9         position:relative;\r
  10         overflow:hidden;\r
  11 }\r
  12 \r
  13 .x-grid-panel .x-panel-body {\r
  14     overflow:hidden !important;\r
  15 }\r
  16 \r
  17 .x-grid-panel .x-panel-mc .x-panel-body {\r
  18     border:1px solid;\r
  19 }\r
  20 \r
  21 .x-grid3 table {\r
  22     table-layout:fixed;\r
  23 }\r
  24 \r
  25 .x-grid3-viewport{\r
  26         overflow:hidden;\r
  27 }\r
  28 \r
  29 .x-grid3-hd-row td, .x-grid3-row td, .x-grid3-summary-row td{\r
  30     -moz-outline: none;\r
  31     outline: none;\r
  32         -moz-user-focus: normal;\r
  33 }\r
  34 \r
  35 .x-grid3-row td, .x-grid3-summary-row td {\r
  36     line-height:13px;\r
  37     vertical-align: top;\r
  38         padding-left:1px;\r
  39     padding-right:1px;\r
  40     -moz-user-select: none;\r
  41     -khtml-user-select:none;\r
  42     -webkit-user-select:ignore;\r
  43 }\r
  44 \r
  45 .x-grid3-cell{\r
  46     -moz-user-select: none;\r
  47     -khtml-user-select:none;\r
  48     -webkit-user-select:ignore;\r
  49 }\r
  50 \r
  51 .x-grid3-hd-row td {\r
  52     line-height:15px;\r
  53     vertical-align:middle;\r
  54     border-left:1px solid;\r
  55     border-right:1px solid;\r
  56 }\r
  57 \r
  58 .x-grid3-hd-row .x-grid3-marker-hd {\r
  59     padding:3px;\r
  60 }\r
  61 \r
  62 .x-grid3-row .x-grid3-marker {\r
  63     padding:3px;\r
  64 }\r
  65 \r
  66 .x-grid3-cell-inner, .x-grid3-hd-inner{\r
  67         overflow:hidden;\r
  68         -o-text-overflow: ellipsis;\r
  69         text-overflow: ellipsis;\r
  70     padding:3px 3px 3px 5px;\r
  71     white-space: nowrap;\r
  72 }\r
  73 \r
  74 .x-grid3-hd-inner {\r
  75     position:relative;\r
  76         cursor:inherit;\r
  77         padding:4px 3px 4px 5px;\r
  78 }\r
  79 \r
  80 .x-grid3-row-body {\r
  81     white-space:normal;\r
  82 }\r
  83 \r
  84 .x-grid3-body-cell {\r
  85     -moz-outline:0 none;\r
  86     outline:0 none;\r
  87 }\r
  88 \r
  89 /* IE Quirks to clip */\r
  90 .ext-ie .x-grid3-cell-inner, .ext-ie .x-grid3-hd-inner{\r
  91         width:100%;\r
  92 }\r
  93 \r
  94 /* reverse above in strict mode */\r
  95 .ext-strict .x-grid3-cell-inner, .ext-strict .x-grid3-hd-inner{\r
  96         width:auto;\r
  97 }\r
  98 \r
  99 .x-grid-row-loading {\r
 100     background: no-repeat center center;\r
 101 }\r
 102 \r
 103 .x-grid-page {\r
 104     overflow:hidden;\r
 105 }\r
 106 \r
 107 .x-grid3-row {\r
 108         cursor: default;\r
 109     border: 1px solid;\r
 110     width:100%;\r
 111 }\r
 112 \r
 113 .x-grid3-row-over {\r
 114         border:1px solid;\r
 115     background: repeat-x left top;\r
 116 }\r
 117 \r
 118 .x-grid3-resize-proxy {\r
 119         width:1px;\r
 120     left:0;\r
 121         cursor: e-resize;\r
 122         cursor: col-resize;\r
 123         position:absolute;\r
 124         top:0;\r
 125         height:100px;\r
 126         overflow:hidden;\r
 127         visibility:hidden;\r
 128         border:0 none;\r
 129         z-index:7;\r
 130 }\r
 131 \r
 132 .x-grid3-resize-marker {\r
 133         width:1px;\r
 134         left:0;\r
 135         position:absolute;\r
 136         top:0;\r
 137         height:100px;\r
 138         overflow:hidden;\r
 139         visibility:hidden;\r
 140         border:0 none;\r
 141         z-index:7;\r
 142 }\r
 143 \r
 144 .x-grid3-focus {\r
 145         position:absolute;\r
 146         left:0;\r
 147         top:0;\r
 148         width:1px;\r
 149         height:1px;\r
 150     line-height:1px;\r
 151     font-size:1px;\r
 152     -moz-outline:0 none;\r
 153     outline:0 none;\r
 154     -moz-user-select: text;\r
 155     -khtml-user-select: text;\r
 156     -webkit-user-select:ignore;\r
 157 }\r
 158 \r
 159 /* header styles */\r
 160 .x-grid3-header{\r
 161         background: repeat-x 0 bottom;\r
 162         cursor:default;\r
 163     zoom:1;\r
 164     padding:1px 0 0 0;\r
 165 }\r
 166 \r
 167 .x-grid3-header-pop {\r
 168     border-left:1px solid;\r
 169     float:right;\r
 170     clear:none;\r
 171 }\r
 172 \r
 173 .x-grid3-header-pop-inner {\r
 174     border-left:1px solid;\r
 175     width:14px;\r
 176     height:19px;\r
 177     background: transparent no-repeat center center;\r
 178 }\r
 179 \r
 180 .ext-ie .x-grid3-header-pop-inner {\r
 181     width:15px;\r
 182 }\r
 183 \r
 184 .ext-strict .x-grid3-header-pop-inner {\r
 185     width:14px; \r
 186 }\r
 187 \r
 188 .x-grid3-header-inner {\r
 189     overflow:hidden;\r
 190     zoom:1;\r
 191     float:left;\r
 192 }\r
 193 \r
 194 .x-grid3-header-offset {\r
 195     padding-left:1px;\r
 196     text-align: left;\r
 197 }\r
 198 \r
 199 td.x-grid3-hd-over, td.sort-desc, td.sort-asc, td.x-grid3-hd-menu-open {\r
 200     border-left:1px solid;\r
 201     border-right:1px solid;\r
 202 }\r
 203 \r
 204 td.x-grid3-hd-over .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner {\r
 205     background: repeat-x left bottom;\r
 206 \r
 207 }\r
 208 \r
 209 .x-grid3-sort-icon{\r
 210         background-repeat: no-repeat;\r
 211         display: none;\r
 212         height: 4px;\r
 213         width: 13px;\r
 214         margin-left:3px;\r
 215         vertical-align: middle;\r
 216 }\r
 217 \r
 218 .sort-asc .x-grid3-sort-icon, .sort-desc .x-grid3-sort-icon {\r
 219         display: inline;\r
 220 }\r
 221 \r
 222 /* Header position fixes for IE strict mode */\r
 223 .ext-strict .ext-ie .x-grid3-header-inner, .ext-strict .ext-ie6 .x-grid3-hd {\r
 224     position:relative;\r
 225 }\r
 226 \r
 227 .ext-strict .ext-ie6 .x-grid3-hd-inner{\r
 228     position:static;\r
 229 }\r
 230 \r
 231 /* Body Styles */\r
 232 .x-grid3-body {\r
 233         zoom:1;\r
 234 }\r
 235 \r
 236 .x-grid3-scroller {\r
 237         overflow:auto;\r
 238     zoom:1;\r
 239     position:relative;\r
 240 }\r
 241 \r
 242 .x-grid3-cell-text, .x-grid3-hd-text {\r
 243         display: block;\r
 244         padding: 3px 5px 3px 5px;\r
 245         -moz-user-select: none;\r
 246         -khtml-user-select: none;\r
 247     -webkit-user-select:ignore;\r
 248 }\r
 249 \r
 250 .x-grid3-split {\r
 251         background-position: center;\r
 252         background-repeat: no-repeat;\r
 253         cursor: e-resize;\r
 254         cursor: col-resize;\r
 255         display: block;\r
 256         font-size: 1px;\r
 257         height: 16px;\r
 258         overflow: hidden;\r
 259         position: absolute;\r
 260         top: 2px;\r
 261         width: 6px;\r
 262         z-index: 3;\r
 263 }\r
 264 \r
 265 /* Column Reorder DD */\r
 266 .x-dd-drag-proxy .x-grid3-hd-inner{\r
 267         background: repeat-x left bottom;\r
 268         width:120px;\r
 269         padding:3px;\r
 270         border:1px solid;\r
 271         overflow:hidden;\r
 272 }\r
 273 \r
 274 .col-move-top, .col-move-bottom{\r
 275         width:9px;\r
 276         height:9px;\r
 277         position:absolute;\r
 278         top:0;\r
 279         line-height:1px;\r
 280         font-size:1px;\r
 281         overflow:hidden;\r
 282         visibility:hidden;\r
 283         z-index:20000;\r
 284     background:transparent no-repeat left top;\r
 285 }\r
 286 \r
 287 /* Selection Styles */\r
 288 .x-grid3-row-selected {\r
 289         border:1px dotted;\r
 290 }\r
 291 \r
 292 .x-grid3-locked td.x-grid3-row-marker, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker{\r
 293     background: repeat-x 0 bottom !important;\r
 294     vertical-align:middle !important;\r
 295     padding:0;\r
 296     border-top:1px solid;\r
 297     border-bottom:none !important;\r
 298     border-right:1px solid !important;\r
 299     text-align:center;\r
 300 }\r
 301 \r
 302 .x-grid3-locked td.x-grid3-row-marker div, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker div{\r
 303     padding:0 4px;\r
 304     text-align:center;\r
 305 }\r
 306 \r
 307 /* dirty cells */\r
 308 .x-grid3-dirty-cell {\r
 309     background: transparent no-repeat 0 0;\r
 310 }\r
 311 \r
 312 /* Grid Toolbars */\r
 313 .x-grid3-topbar, .x-grid3-bottombar{\r
 314     overflow:hidden;\r
 315         display:none;\r
 316         zoom:1;\r
 317     position:relative;\r
 318 }\r
 319 \r
 320 .x-grid3-topbar .x-toolbar{\r
 321         border-right:0 none;\r
 322 }\r
 323 \r
 324 .x-grid3-bottombar .x-toolbar{\r
 325         border-right:0 none;\r
 326         border-bottom:0 none;\r
 327         border-top:1px solid;\r
 328 }\r
 329 \r
 330 /* Props Grid Styles */\r
 331 .x-props-grid .x-grid3-cell{\r
 332         padding:1px;\r
 333 }\r
 334 \r
 335 .x-props-grid .x-grid3-td-name .x-grid3-cell-inner{\r
 336         background:transparent repeat-y -16px !important;\r
 337     padding-left:12px;\r
 338 }\r
 339 \r
 340 .x-props-grid .x-grid3-body .x-grid3-td-name{\r
 341     padding:1px;\r
 342     padding-right:0;\r
 343     border:0 none;\r
 344     border-right:1px solid;\r
 345 }\r
 346 \r
 347 /* dd */\r
 348 .x-grid3-col-dd {\r
 349     border:0 none;\r
 350     padding:0;\r
 351     background:transparent;\r
 352 }\r
 353 \r
 354 .x-dd-drag-ghost .x-grid3-dd-wrap {\r
 355     padding:1px 3px 3px 1px;\r
 356 }\r
 357 \r
 358 .x-grid3-hd {\r
 359     -moz-user-select:none;\r
 360     -khtml-user-select:none;\r
 361     -webkit-user-select:ignore;\r
 362 }\r
 363 \r
 364 .x-grid3-hd-btn {\r
 365     display:none;\r
 366     position:absolute;\r
 367     width:14px;\r
 368     background:no-repeat left center;\r
 369     right:0;\r
 370     top:0;\r
 371     z-index:2;\r
 372         cursor:pointer;\r
 373 }\r
 374 \r
 375 .x-grid3-hd-over .x-grid3-hd-btn, .x-grid3-hd-menu-open .x-grid3-hd-btn {\r
 376     display:block;\r
 377 }\r
 378 \r
 379 a.x-grid3-hd-btn:hover {\r
 380     background-position:-14px center;\r
 381 }\r
 382 \r
 383 /* Expanders */\r
 384 .x-grid3-body .x-grid3-td-expander {\r
 385     background:transparent repeat-y right;\r
 386 }\r
 387 \r
 388 .x-grid3-body .x-grid3-td-expander .x-grid3-cell-inner {\r
 389     padding:0 !important;\r
 390     height:100%;\r
 391 }\r
 392 \r
 393 .x-grid3-row-expander {\r
 394     width:100%;\r
 395     height:18px;\r
 396     background-position:4px 2px;\r
 397     background-repeat:no-repeat;\r
 398     background-color:transparent;\r
 399 }\r
 400 \r
 401 .x-grid3-row-collapsed .x-grid3-row-expander {\r
 402     background-position:4px 2px;\r
 403 }\r
 404 \r
 405 .x-grid3-row-expanded .x-grid3-row-expander {\r
 406     background-position:-21px 2px;\r
 407 }\r
 408 \r
 409 .x-grid3-row-collapsed .x-grid3-row-body {\r
 410     display:none !important;\r
 411 }\r
 412 \r
 413 .x-grid3-row-expanded .x-grid3-row-body {\r
 414     display:block !important;\r
 415 }\r
 416 \r
 417 /* Checkers */\r
 418 .x-grid3-body .x-grid3-td-checker {\r
 419     background:transparent repeat-y right;\r
 420 }\r
 421 \r
 422 .x-grid3-body .x-grid3-td-checker .x-grid3-cell-inner, .x-grid3-header .x-grid3-td-checker .x-grid3-hd-inner {\r
 423     padding:0 !important;\r
 424     height:100%;\r
 425 }\r
 426 \r
 427 .x-grid3-row-checker, .x-grid3-hd-checker {\r
 428     width:100%;\r
 429     height:18px;\r
 430     background-position:2px 2px;\r
 431     background-repeat:no-repeat;\r
 432     background-color:transparent;\r
 433 }\r
 434 \r
 435 .x-grid3-row .x-grid3-row-checker {\r
 436     background-position:2px 2px;\r
 437 }\r
 438 \r
 439 .x-grid3-row-selected .x-grid3-row-checker, .x-grid3-hd-checker-on .x-grid3-hd-checker,.x-grid3-row-checked .x-grid3-row-checker {\r
 440     background-position:-23px 2px;\r
 441 }\r
 442 \r
 443 .x-grid3-hd-checker {\r
 444     background-position:2px 1px;\r
 445 }\r
 446 \r
 447 .ext-border-box .x-grid3-hd-checker {\r
 448     background-position:2px 3px;\r
 449 }\r
 450 \r
 451 .x-grid3-hd-checker-on .x-grid3-hd-checker {\r
 452     background-position:-23px 1px;\r
 453 }\r
 454 \r
 455 .ext-border-box .x-grid3-hd-checker-on .x-grid3-hd-checker {\r
 456     background-position:-23px 3px;\r
 457 }\r
 458 \r
 459 /* Numberer */\r
 460 .x-grid3-body .x-grid3-td-numberer {\r
 461     background:transparent repeat-y right;\r
 462 }\r
 463 \r
 464 .x-grid3-body .x-grid3-td-numberer .x-grid3-cell-inner {\r
 465     padding:3px 5px 0 0 !important;\r
 466     text-align:right;\r
 467 }\r
 468 \r
 469 /* Row Icon */\r
 470 \r
 471 .x-grid3-body .x-grid3-td-row-icon {\r
 472     background:transparent repeat-y right;\r
 473     vertical-align:top;\r
 474     text-align:center;\r
 475 }\r
 476 \r
 477 .x-grid3-body .x-grid3-td-row-icon .x-grid3-cell-inner {\r
 478     padding:0 !important;\r
 479     background-position:center center;\r
 480     background-repeat:no-repeat;\r
 481     width:16px;\r
 482     height:16px;\r
 483     margin-left:2px;\r
 484     margin-top:3px;\r
 485 }\r
 486 \r
 487 /* All specials */\r
 488 .x-grid3-body .x-grid3-row-selected .x-grid3-td-numberer,\r
 489 .x-grid3-body .x-grid3-row-selected .x-grid3-td-checker,\r
 490 .x-grid3-body .x-grid3-row-selected .x-grid3-td-expander {\r
 491         background:transparent repeat-y right;\r
 492 }\r
 493 \r
 494 .x-grid3-body .x-grid3-check-col-td .x-grid3-cell-inner {\r
 495     padding: 1px 0 0 0 !important;\r
 496 }\r
 497 \r
 498 .x-grid3-check-col {\r
 499     width:100%;\r
 500     height:16px;\r
 501     background-position:center center;\r
 502     background-repeat:no-repeat;\r
 503     background-color:transparent;\r
 504 }\r
 505 \r
 506 .x-grid3-check-col-on {\r
 507     width:100%;\r
 508     height:16px;\r
 509     background-position:center center;\r
 510     background-repeat:no-repeat;\r
 511     background-color:transparent;\r
 512 }\r
 513 \r
 514 /* Grouping classes */\r
 515 .x-grid-group, .x-grid-group-body, .x-grid-group-hd {\r
 516     zoom:1;\r
 517 }\r
 518 \r
 519 .x-grid-group-hd {\r
 520     border-bottom: 2px solid;\r
 521     cursor:pointer;\r
 522     padding-top:6px;\r
 523 }\r
 524 \r
 525 .x-grid-group-hd div.x-grid-group-title {\r
 526     background:transparent no-repeat 3px 3px;\r
 527     padding:4px 4px 4px 17px;\r
 528 }\r
 529 \r
 530 .x-grid-group-collapsed .x-grid-group-body {\r
 531     display:none;\r
 532 }\r
 533 \r
 534 .ext-ie6 .x-grid3 .x-editor .x-form-text, .ext-ie7 .x-grid3 .x-editor .x-form-text {\r
 535     position:relative;\r
 536     top:-1px;\r
 537 }\r
 538 \r
 539 .ext-ie .x-props-grid .x-editor .x-form-text {\r
 540     position:static;\r
 541     top:0;\r
 542 }\r
 543 \r
 544 .x-grid-empty {\r
 545     padding:10px;\r
 546 }\r
 547 \r
 548 /* fix floating toolbar issue */\r
 549 .ext-ie7 .x-grid-panel .x-panel-bbar {\r
 550     position:relative;\r
 551 }\r
 552 \r
 553 \r
 554 /* Reset position to static when Grid Panel has been framed */\r
 555 /* to resolve 'snapping' from top to bottom behavior. */\r
 556 /* @forumThread 86656 */\r
 557 .ext-ie7 .x-grid-panel .x-panel-mc .x-panel-bbar {\r
 558     position: static;\r
 559 }\r
 560 \r
 561 \r
 562 .ext-ie6 .x-grid3-header {\r
 563     position: relative;\r
 564 }\r
 565 \r
 566 /* column lines */\r
 567 .x-grid-with-col-lines .x-grid3-row td.x-grid3-cell {\r
 568     padding-right:0;\r
 569     border-right:1px solid;\r
 570 }\r