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

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