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