git.roojs.org Git - roojs1/blob - css/grid.css

   1 /* <script type="text/javascript"> */\r
   2 /** unknown styles from new grid **/\r
   3 \r
   4 /*\r
   5 .x-layout-grid-wrapper\r
   6 \r
   7 \r
   8 .x-grid-container\r
   9 \r
  10 \r
  11 .x-grid\r
  12 */\r
  13 \r
  14 \r
  15 \r
  16 \r
  17 .x-grid {\r
  18     background-color:#FFFFFF;\r
  19     position:relative;\r
  20     overflow:hidden;\r
  21     \r
  22 }\r
  23 \r
  24 .x-grid-locked,\r
  25 .x-grid-viewport\r
  26 {\r
  27     \r
  28     position: absolute;\r
  29     display: block;\r
  30     z-index: 2;\r
  31     top: 0px;\r
  32     left: 0px;\r
  33     overflow: hidden;\r
  34 }\r
  35  .x-grid-scroller {\r
  36     overflow: auto;\r
  37 }\r
  38      \r
  39 \r
  40 .x-grid-hd-text {\r
  41         font-size: 8pt;\r
  42     padding-left: 6px;\r
  43 }\r
  44 .x-grid-hd-text,\r
  45 .x-grid-cell-text {\r
  46         display: block;\r
  47         overflow: hidden;\r
  48         padding: 3px 5px;\r
  49     /* stops jumping? */\r
  50     -moz-user-select: none;\r
  51 /*      white-space: nowrap; */\r
  52 }\r
  53 .x-grid-col{\r
  54         cursor: default;\r
  55         height:16px !important;\r
  56         box-sizing: border-box;\r
  57         -moz-box-sizing: border-box;\r
  58 /*      position:absolute; \r
  59         display:block;\r
  60     */\r
  61         -moz-outline: none;\r
  62         -moz-user-focus: normal;\r
  63         overflow: hidden;\r
  64         border-left: 1px solid #f1efe2;\r
  65 }\r
  66 .x-edit-grid .x-grid-col{\r
  67         -moz-outline: normal;\r
  68 }\r
  69 .x-grid-col, .x-grid-header {\r
  70         -o-text-overflow: ellipsis;\r
  71         text-overflow: ellipsis;\r
  72 }\r
  73 .x-grid-col-0{\r
  74         border-left: 0;\r
  75 }\r
  76 .x-grid-col-last{\r
  77         border-right: 1px solid #f1efe2;\r
  78 }\r
  79 .x-grid-editor {\r
  80         box-sizing: border-box;\r
  81         -moz-box-sizing: border-box;\r
  82         /* position:absolute; */\r
  83         /* visibility:hidden; */\r
  84         font: normal 8pt arial;\r
  85         border: 1px solid #afbdc9;\r
  86         z-index:10;\r
  87 }\r
  88 .x-grid-editor input{\r
  89         font: normal 8pt arial;\r
  90         border: 0;\r
  91         padding-top:2px;\r
  92         padding-left:3px;\r
  93     height: 18px;\r
  94 }\r
  95 .x-grid-editor-container{\r
  96         overflow:hidden;\r
  97         display:block;\r
  98         background-color:white;\r
  99 }\r
 100 .x-grid-editor .pick-button{\r
 101         width:15px;\r
 102         height:20px;\r
 103         position:absolute;\r
 104         display:block;\r
 105         right:0;\r
 106         top:0;\r
 107         z-index:2;\r
 108         background-image: url(../images/default/grid/pick-button.gif);\r
 109         background-repeat: no-repeat;\r
 110 }\r
 111 .x-grid-editor-invalid{\r
 112         background-image: url(../images/default/grid/invalid_line.gif);\r
 113         background-repeat: repeat-x;\r
 114         background-position: bottom;\r
 115         border: 1px solid #afbdc9;\r
 116 }\r
 117 .x-grid-checkbox-editor{\r
 118         text-align: center;\r
 119         overflow:hidden;\r
 120         display:block;\r
 121         background-color:white;\r
 122 }\r
 123 .x-grid-checkbox-editor input{\r
 124         margin-top:3px;\r
 125         height:13px;\r
 126         width:13px;\r
 127 }\r
 128 select.x-grid-editor{\r
 129         padding: 0;\r
 130         -moz-outline: none;\r
 131         border: 1px solid #afbdc9;\r
 132 }\r
 133 .x-grid-num-editor{\r
 134         text-align:right;\r
 135         padding-top:2px;\r
 136         padding-left:3px;\r
 137 }\r
 138 .x-grid-text-editor{\r
 139         padding-top:2px;\r
 140         padding-left:3px;\r
 141 }\r
 142 .x-grid-header {\r
 143         font: normal 8pt arial;\r
 144         background-color: #ebeadb;\r
 145         box-sizing: border-box;\r
 146         -moz-box-sizing: border-box;\r
 147         display: block;\r
 148         position: absolute;\r
 149         overflow:hidden;\r
 150     width: 100%;\r
 151     height: 22px;\r
 152     border-bottom: 1px solid #333;\r
 153     cursor: pointer;\r
 154 }\r
 155 .x-grid-column-sizer {\r
 156         width:1px;\r
 157         border-right:1px dashed #6593cf;\r
 158         background:none;\r
 159         cursor: col-resize;\r
 160 }\r
 161 .x-grid-drag-proxy{\r
 162         width:150px;\r
 163         height:24px;\r
 164         background-color:#3366cc;\r
 165         border: 1px solid #002266;\r
 166         position:absolute;\r
 167         visibility:hidden;\r
 168         z-index:10000;\r
 169 }\r
 170 .x-grid-drag-text{\r
 171    font: normal 8pt arial;\r
 172         color:white;\r
 173         position:absolute;\r
 174         top:0;\r
 175         left:26px;\r
 176         padding:3px;\r
 177         display:block;\r
 178 }\r
 179 .x-grid-drop-icon{\r
 180    position:absolute;\r
 181         top:0;\r
 182         left:0;\r
 183         display:block;\r
 184         width:24px;\r
 185         height:100%;\r
 186         background-position: center;\r
 187         background-repeat: no-repeat;\r
 188 }\r
 189 .x-grid-drop-nodrop{\r
 190    background-image: url(../images/default/grid/drop-no.gif);\r
 191 }\r
 192 .x-grid-drop-ok{\r
 193    background-image: url(../images/default/grid/drop-yes.gif);\r
 194 }\r
 195 \r
 196 .x-grid-hd-row img.x-grid-sort-icon {\r
 197     height: 4px;\r
 198         width: 13px;\r
 199     border: 0;\r
 200     margin-left: 4px;\r
 201     vertical-align: middle;\r
 202     \r
 203 }\r
 204 .x-grid-hd-row .sort-asc img.x-grid-sort-icon {\r
 205         background-image: url(../images/default/grid/sort_asc.gif);\r
 206         background-position: right;\r
 207         background-repeat: no-repeat;\r
 208         /* display: none; */\r
 209  \r
 210 }\r
 211 .x-grid-hd-row .sort-desc img.x-grid-sort-icon {\r
 212         background-image: url(../images/default/grid/sort_desc.gif);\r
 213         background-position: right;\r
 214         background-repeat: no-repeat;\r
 215         /* display: none; */\r
 216  \r
 217 }\r
 218 .x-grid-hd-body {\r
 219         cursor: default;\r
 220         display: block;\r
 221         font: normal 8pt arial;\r
 222         left: 0;\r
 223         overflow: hidden;\r
 224         padding: 3px 5px;\r
 225         position: relative;\r
 226         top: 0;\r
 227         white-space: nowrap;\r
 228 }\r
 229 .x-grid-hd-body span {\r
 230         font: normal 8pt arial;\r
 231         white-space: nowrap; \r
 232 }\r
 233 .x-grid-hd-over{\r
 234         border-bottom: 2px solid #fcc247;\r
 235 }\r
 236 .x-grid-hd-over .x-grid-hd-body{\r
 237         background-color: #faf9f4;\r
 238         border-bottom: 1px solid #f9a900;\r
 239 }\r
 240 .x-grid-split {\r
 241         background-image: url(../images/default/grid/grid-split.gif);\r
 242         background-position: center;\r
 243         background-repeat: no-repeat;\r
 244         cursor: e-resize;\r
 245         display: block;\r
 246         font-size: 1px;\r
 247         height: 16px;\r
 248         overflow: hidden;\r
 249         position: absolute;\r
 250         top: 2px;\r
 251         width: 6px;\r
 252         z-index: 3;\r
 253 }\r
 254 .x-grid-hrow{\r
 255         background: #ebeadb url(../images/default/grid/grid-hrow.gif) repeat-x;\r
 256         display: block;\r
 257         height: 22px;\r
 258         left: 0;\r
 259         position: relative;\r
 260         top: 0;\r
 261         width: 10000px;\r
 262         overflow:hidden;\r
 263         z-index:2;\r
 264 }\r
 265 .x-grid-hrow-frame{\r
 266         height: 22px;\r
 267         left: 0;\r
 268         display:block;\r
 269         position: absolute;\r
 270         top: 0;\r
 271         width: 10000px;\r
 272         z-index:1;\r
 273 }\r
 274 .x-grid-footer .x-toolbar{\r
 275         border:0;\r
 276 }\r
 277 .x-grid-page-number{\r
 278         width:24px;\r
 279         height:14px;    \r
 280 }\r
 281 \r
 282  \r
 283 .x-grid-page-first button {\r
 284         background: url(../images/default/grid/page-first.gif) no-repeat;\r
 285     width:16px;\r
 286 }\r
 287 .x-grid-loading button {\r
 288         background: url(../images/default/grid/done.gif) no-repeat;\r
 289     width:16px;\r
 290 }\r
 291 .x-grid-page-last button {\r
 292         background: url(../images/default/grid/page-last.gif) no-repeat;\r
 293     width:16px;\r
 294 }\r
 295 .x-date-mp-next,\r
 296 .x-grid-page-next button \r
 297 {\r
 298         background: url(../images/default/grid/page-next.gif) no-repeat;\r
 299     width:16px;\r
 300 }\r
 301 .x-date-mp-prev,\r
 302 .x-grid-page-prev button \r
 303 {\r
 304         background: url(../images/default/grid/page-prev.gif) no-repeat;\r
 305     width:16px;\r
 306 }\r
 307 .x-date-mp-prev, \r
 308 .x-date-mp-next\r
 309 {\r
 310     display: block;\r
 311     width: 16px;\r
 312     height: 16px;\r
 313 }\r
 314     \r
 315 \r
 316 \r
 317 .x-item-disabled .x-grid-loading button {\r
 318         background: url(../images/default/grid/loading.gif) no-repeat;\r
 319 }\r
 320 .x-item-disabled .x-grid-page-first button {\r
 321         background: url(../images/default/grid/page-first-disabled.gif) no-repeat;\r
 322 }\r
 323 .x-item-disabled .x-grid-page-last button {\r
 324         background: url(../images/default/grid/page-last-disabled.gif) no-repeat;\r
 325 }\r
 326 .x-item-disabled .x-grid-page-next button {\r
 327         background: url(../images/default/grid/page-next-disabled.gif) no-repeat;\r
 328 }\r
 329 .x-item-disabled .x-grid-page-prev button {\r
 330         background: url(../images/default/grid/page-prev-disabled.gif) no-repeat;\r
 331 }\r
 332 .x-grid-mso{\r
 333 }\r
 334 .x-grid-mso .x-grid-header{\r
 335         background:none;\r
 336         border-bottom:0;\r
 337 }\r
 338 .x-grid-mso .x-grid-footer {\r
 339         border-top: 1px solid #6593cf;\r
 340 }\r
 341 \r
 342 .x-grid-mso .x-grid-footer .x-grid-fbutton{\r
 343         border:0;\r
 344 }\r
 345 .x-grid-mso .x-grid-hd-body {\r
 346         border-bottom:0;\r
 347 }\r
 348 .x-grid-mso .x-grid-hd-over{\r
 349         border-bottom:0;\r
 350 }\r
 351 .x-grid-mso .x-grid-hd-over .x-grid-hd-body{\r
 352         background-color: transparent;\r
 353 }\r
 354 .x-grid-mso .x-grid-split {\r
 355         background-image: url(../images/default/grid/grid-blue-split.gif);\r
 356 }\r
 357 .x-grid-mso .x-toolbar .x-tb-sep {\r
 358         background-image: url(../images/default/grid/grid-blue-split.gif);\r
 359 }\r
 360 .x-grid-mso .x-grid-hrow{\r
 361         background: url(../images/default/grid/mso-hd.gif);\r
 362         border-bottom: 1px solid #6593cf;\r
 363         height: 21px;\r
 364 }\r
 365 .x-grid-mso .x-grid-row{\r
 366         color: black;\r
 367         border-bottom: 1px solid #ddecfe;\r
 368 }\r
 369 .x-grid-mso .x-grid-row-alt{\r
 370         background-color: #f5f5f5;\r
 371 }\r
 372 .x-grid-mso .x-grid-row-selected{\r
 373         background-color: #b3c8e8  !important;\r
 374         color: black;\r
 375 }\r
 376 .x-grid-mso .x-grid-row-selected span{\r
 377         color: black !important;\r
 378 }\r
 379 .x-props-grid .x-grid-col-1{\r
 380          background-color: #f1efe2;\r
 381 }\r
 382 .x-props-grid .x-grid-col-1 .x-grid-cell-text{\r
 383          background-color: white;\r
 384 }\r
 385 .x-props-grid .x-grid-col-0{\r
 386          background-color: #f1efe2;\r
 387 }\r
 388 .x-props-grid .x-grid-col-0 .x-grid-cell-text{\r
 389          background-color: white;\r
 390          margin-left:10px;\r
 391 }\r
 392 .x-props-grid .x-grid-prop-edting .x-grid-col-0 .x-grid-cell-text{\r
 393          background-color: #316ac5;\r
 394          color: white;\r
 395 }\r
 396 .x-props-grid .x-grid-prop-edting .x-grid-col-0{\r
 397          color: white;\r
 398 }\r
 399 .x-props-grid .x-grid-num-editor{\r
 400         text-align:left;\r
 401 }\r
 402 .x-grid-row td,\r
 403 .x-grid-hd-row td\r
 404 {\r
 405         font: normal 8pt tahoma,arial,helvetica;\r
 406         border-bottom: 1px solid #f1efe2;\r
 407     border-left: 1px solid #f1efe2;\r
 408         overflow: visible;\r
 409         white-space: nowrap;\r
 410         /* height:21px; */\r
 411         /* width:10000px; */\r
 412         /* box-sizing: border-box;\r
 413         -moz-box-sizing: border-box;\r
 414         display:block;\r
 415     */\r
 416         /* position:absolute; */\r
 417 }\r
 418 .x-grid-row-alt{\r
 419         background-color: #fcfaf6;\r
 420 }\r
 421 .x-grid-row-over{\r
 422         background-color: #f1f1f1;\r
 423         color: black;\r
 424 }\r
 425 .x-grid-cell-selected,\r
 426 .x-grid-row-selected {\r
 427         background-color: #316ac5 !important;\r
 428         color: white;\r
 429 }\r
 430 /*.x-grid-row-selected span{\r
 431         color: white !important;\r
 432 }\r
 433 */\r
 434 \r
 435 \r
 436 \r
 437 \r
 438 /* \r
 439   To have the scrollbars overlap the header, change .x-grid-wrap top style to 0 and \r
 440   and ygrid-wrap-body top to 22px\r
 441   Then grid.getView().scrollbarMode = YAHOO.ext.grid.GridView.SCROLLBARS_OVERLAP;\r
 442  */\r
 443 .x-grid-body {\r
 444         height: 100%;\r
 445         left: 0;\r
 446         overflow: hidden;\r
 447         position: relative;\r
 448         top: 22px;\r
 449         /* width: 100%; */\r
 450 }\r
 451 .x-grid-footer{\r
 452         display: block;\r
 453         padding:0;\r
 454         border-top: 1px solid #cbc7b8;\r
 455 }\r
 456 .x-grid-wrap-footer {\r
 457         display: block;\r
 458         overflow: hidden;\r
 459         width:100%;\r
 460         height:25px;\r
 461         box-sizing: border-box;\r
 462         -moz-box-sizing: border-box;\r
 463         background-color: #ebeadb;\r
 464         position:absolute;\r
 465         bottom:0;\r
 466 }\r
 467 .x-grid-wrap-body {\r
 468         left: 0;\r
 469         overflow: hidden;\r
 470         position: absolute;\r
 471         top: 0;\r
 472         display: block;\r
 473 }\r
 474 .x-grid-wrap-headers {\r
 475         left: 0;\r
 476         overflow: hidden;\r
 477         position: absolute;\r
 478         top: 0;\r
 479         z-index: 12;\r
 480 }\r
 481 \r
 482 \r
 483 \r
 484 .x-grid-simple-view .x-grid-col{\r
 485          height:100% !important;\r
 486          position:static;\r
 487          display:table-cell;\r
 488          display:inline-block;\r
 489 }\r
 490 .x-grid-simple-view .x-grid-row{\r
 491          position:static; \r
 492          display: table-row;\r
 493 }\r
 494 \r
 495  /* -----------------------   PAGING ---------------------- */\r
 496  \r
 497  .x-paging-info\r
 498  {\r
 499      position: absolute;\r
 500      right: 7px;\r
 501      top: 7px;\r
 502 }\r
 503 \r
 504 .x-grid-topbar, .x-grid-bottombar\r
 505 {\r
 506     line-height: 0px; \r
 507     display: none;\r
 508     position: relative;\r
 509     height: 24px;\r
 510     top: 0;\r
 511     \r
 512 }\r
 513 /* --- checkbox wrapping hides background -- */\r
 514 .x-grid-editor .x-form-check-wrap {\r
 515     background-color:#FFFFFF;\r
 516     padding: 2px 0px;\r
 517     \r
 518 } \r
 519 \r
 520 .x-grid-row-selected .x-grid-check-icon-toggle,\r
 521 .x-grid-check-icon-checked {\r
 522     background:transparent url(../../roojs1/images/default/menu/chk-sprite.gif) no-repeat scroll 0 -16px;\r
 523     height:16px;\r
 524     width:16px;\r
 525 }\r
 526 .x-grid-check-icon-toggle,\r
 527 .x-grid-check-icon {\r
 528     background:transparent url(../../roojs1/images/default/menu/chk-sprite.gif) no-repeat scroll 0 0;\r
 529     height:16px;\r
 530     width:16px;\r
 531 }\r
 532 \r
 533 \r
 534 \r
 535 \r
 536 .x-grid-dd-above td {\r
 537     border-top: 20px solid #fcfcfc;\r
 538     \r
 539 }\r
 540 .x-grid-dd-below td {\r
 541     border-bottom: 20px solid #fcfcfc;\r
 542     \r
 543 }\r
 544  \r
 545 .x-grid-row-fadeout {\r
 546   visibility: hidden;\r
 547   opacity: 0;\r
 548   transition: visibility 0s 1s, opacity 1s linear;\r
 549 }