docs/resources/themes/stylesheets/ext4/default/widgets/_grid.scss

   1 @mixin extjs-grid {
   2     //main grid view
   3     .#{$prefix}panel {
   4         .#{$prefix}grid-body {
   5             background: $panel-body-background-color;
   6             border-color: $panel-body-border-color;
   7             border-style: $panel-body-border-style;
   8             border-width: 1px;
   9             border-top-color: $grid-header-background-color;
  10         }
  11
  12         .#{$prefix}grid-header-ct-hidden {
  13             border-width: 0 0 0 0 !important;
  14         }
  15     }
  16
  17     .#{$prefix}grid-header-hidden .#{$prefix}grid-body {
  18         border-top-color: $panel-body-border-color !important;
  19     }
  20
  21     .#{$prefix}grid-view {
  22         overflow: hidden;
  23
  24         position: relative;
  25     }
  26
  27     .#{$prefix}grid-table {
  28         table-layout: fixed;
  29         border-collapse: separate;
  30     }
  31
  32     .#{$prefix}grid-locked .#{$prefix}grid-inner-locked {
  33         border-width: 0 1px 0 0 !important;
  34         border-style: solid;
  35     }
  36
  37     @if $include-ie or $compile-all {
  38         .#{$prefix}ie .#{$prefix}grid-table {
  39             border-collapse: collapse;
  40         }
  41     }
  42
  43     .#{$prefix}grid-header-ct {
  44         cursor: default;
  45         zoom: 1;
  46         padding: 0;
  47         border: 1px solid $panel-body-border-color;
  48
  49         @if $supports-gradients or $compile-all {
  50             @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
  51         }
  52     }
  53
  54     @if $include-ie or $compile-all {
  55         .#{$prefix}border-box .#{$prefix}ie9 {
  56             .#{$prefix}grid-header-ct {
  57                 padding-left: 1px;
  58             }
  59         }
  60         .#{$prefix}ie6, .#{$prefix}ie7 {
  61             .#{$prefix}grid-header-ct {
  62                 padding-left: 1px;
  63             }
  64         }
  65
  66     }
  67
  68     .#{$prefix}column-header {
  69         padding: 0;
  70         position: absolute;
  71         overflow: hidden;
  72
  73         border-right: 1px solid $grid-header-background-color;
  74         border-left: 0 none;
  75         border-top: 0 none;
  76         border-bottom: 0 none;
  77
  78         text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  79         font: normal 11px/15px $font-family;
  80
  81         @if $grid-header-color {
  82             color: $grid-header-color;
  83         }
  84         font: normal ceil($font-size * .9) $font-family;
  85
  86         @if $supports-gradients or $compile-all {
  87             @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
  88         }
  89     }
  90
  91     .#{$prefix}group-header {
  92         padding: 0;
  93         border-left-width: 0;
  94     }
  95     .#{$prefix}group-sub-header {
  96         background: transparent;
  97         border-top: 1px solid $grid-header-background-color;
  98         border-left-width: 0;
  99     }
 100
 101     .#{$prefix}column-header-inner {
 102         zoom: 1;
 103         position: relative;
 104         white-space: nowrap;
 105         line-height: 22px;
 106         padding: $grid-header-padding;
 107
 108         .#{$prefix}column-header-text {
 109             white-space: nowrap;
 110         }
 111     }
 112
 113     .#{$prefix}column-header-over,
 114     .#{$prefix}column-header-sort-ASC,
 115     .#{$prefix}column-header-sort-DESC {
 116         border-left-color: $grid-header-over-border-color;
 117         border-right-color: $grid-header-over-border-color;
 118
 119         @if $supports-gradients or $compile-all {
 120             @include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient);
 121         }
 122     }
 123
 124     @if not $supports-gradients or $compile-all {
 125         .#{$prefix}nlg {
 126             .#{$prefix}grid-header-ct,
 127             .#{$prefix}column-header {
 128                 background: theme-image($theme-name, 'grid/column-header-bg.gif') repeat-x 0 top;
 129             }
 130
 131             .#{$prefix}column-header-over,
 132             .#{$prefix}column-header-sort-ASC,
 133             .#{$prefix}column-header-sort-DESC {
 134                 background: #ebf3fd theme-image($theme-name, 'grid/column-header-over-bg.gif') repeat-x 0 top;
 135             }
 136         }
 137     }
 138
 139     .#{$prefix}column-header-trigger {
 140         display: none;
 141         height: 100%;
 142         width: $grid-header-trigger-width;
 143         background: no-repeat left center;
 144         background-color: #c3daf9;
 145         background-image: theme-image($theme-name, 'grid/grid3-hd-btn.gif');
 146         position: absolute;
 147         right: 0;
 148         top: 0;
 149         z-index: 2;
 150         cursor: pointer;
 151     }
 152
 153     .#{$prefix}column-header-over, .#{$prefix}column-header-open {
 154         .#{$prefix}column-header-trigger {
 155             display: block;
 156         }
 157     }
 158
 159     .#{$prefix}column-header-align-right {
 160         text-align: right;
 161
 162         .#{$prefix}column-header-text {
 163             padding-right: 0.5ex;
 164         }
 165     }
 166     .#{$prefix}column-header-align-center {
 167         text-align: center;
 168     }
 169     .#{$prefix}column-header-align-left {
 170         text-align: left;
 171     }
 172
 173     // Sort direction indicator is a background of the text span.
 174     .#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text {
 175         padding-right: 16px;
 176         background: theme-image($theme-name, 'grid/sort_asc.gif') no-repeat right 6px;
 177     }
 178     .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text {
 179         padding-right: 16px;
 180         background: theme-image($theme-name, 'grid/sort_desc.gif') no-repeat right 6px;
 181     }
 182
 183     //grid rows
 184     .#{$prefix}grid-row {
 185         line-height: 13px;
 186
 187         vertical-align: top;
 188
 189         padding: $grid-row-padding;
 190
 191         -moz-user-select: none;
 192         -khtml-user-select: none;
 193         -webkit-user-select: ignore;
 194
 195         .#{$prefix}grid-cell {
 196             @if $grid-row-cell-color {
 197                 color: $grid-row-cell-color;
 198             }
 199             font: $grid-row-cell-font;
 200
 201             border-color: $grid-row-cell-border-color;
 202             border-style: $grid-row-cell-border-style;
 203             border-width: $grid-row-cell-border-width;
 204             border-top-color: lighten($grid-row-cell-border-color, 5);
 205         }
 206     }
 207
 208     .#{$prefix}grid-rowwrap-div {
 209         border-width: $grid-row-wrap-border-width;
 210         border-color: $grid-row-wrap-border-color;
 211         border-style: $grid-row-wrap-border-style;
 212         border-top-color: lighten($grid-row-wrap-border-color, 5);
 213
 214         overflow: hidden;
 215     }
 216
 217     .#{$prefix}grid-row-alt .#{$prefix}grid-cell,
 218     .#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap-div {
 219         background-color: $grid-row-cell-alt-background;
 220     }
 221
 222     .#{$prefix}grid-row-over .#{$prefix}grid-cell,
 223     .#{$prefix}grid-row-over .#{$prefix}grid-rowwrap-div {
 224         border-color: $grid-row-cell-over-border-color;
 225
 226         background-color: $grid-row-cell-over-background-color;
 227     }
 228
 229     .#{$prefix}grid-row-focused .#{$prefix}grid-cell,
 230     .#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap-div {
 231         border-color: $grid-row-cell-focus-border-color;
 232
 233         background-color: $grid-row-cell-focus-background-color;
 234     }
 235
 236     .#{$prefix}grid-row-selected .#{$prefix}grid-cell,
 237     .#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div {
 238         border-style: $grid-row-cell-selected-border-style;
 239         border-color: $grid-row-cell-selected-border-color;
 240
 241         background-color: $grid-row-cell-selected-background-color !important;
 242     }
 243
 244     @if $include-ie {
 245         .#{$prefix}ie {
 246             .#{$prefix}grid-cell {
 247                 border-width: 0;
 248             }
 249
 250             .#{$prefix}grid-cell-inner {
 251                 border-color: $grid-row-cell-border-color;
 252                 border-style: $grid-row-cell-border-style;
 253                 border-width: $grid-row-cell-border-width;
 254                 border-top-color: lighten($grid-row-cell-border-color, 5);
 255                 height: 100%;
 256             }
 257
 258             .#{$prefix}grid-row-over .#{$prefix}grid-cell-inner {
 259                 border-color: $grid-row-cell-over-border-color;
 260             }
 261
 262             .#{$prefix}grid-row-focused .#{$prefix}grid-cell-inner {
 263                 border-color: $grid-row-cell-focus-border-color;
 264             }
 265
 266             .#{$prefix}grid-row-selected .#{$prefix}grid-cell-inner {
 267                 border-style: $grid-row-cell-selected-border-style;
 268                 border-color: $grid-row-cell-selected-border-color;
 269             }
 270         }
 271     }
 272
 273     .#{$prefix}grid-rowwrap-div {
 274         .#{$prefix}grid-cell,
 275         .#{$prefix}grid-cell-inner {
 276             border-width: 0;
 277
 278             background: transparent;
 279         }
 280     }
 281
 282     .#{$prefix}grid-row-body-hidden {
 283         display: none;
 284     }
 285
 286     .#{$prefix}grid-rowbody {
 287         font: $grid-row-body-font;
 288
 289         padding: $grid-row-body-padding;
 290
 291         p {
 292             margin: 5px 5px 10px 5px;
 293         }
 294     }
 295
 296     //grid cells
 297     .#{$prefix}grid-cell {
 298         overflow: hidden;
 299
 300         font: $grid-cell-font;
 301
 302         -moz-user-select: none;
 303         -khtml-user-select:none;
 304         -webkit-user-select:ignore;
 305     }
 306
 307     .#{$prefix}grid-cell-inner {
 308         overflow: hidden;
 309
 310         -o-text-overflow: ellipsis;
 311         text-overflow: ellipsis;
 312
 313         padding: $grid-cell-inner-padding;
 314
 315         white-space: nowrap;
 316     }
 317
 318     // Action columns with a standard, 16x16 icon require less padding
 319     .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
 320         padding: 1px 2px 0 2px;
 321     }
 322
 323     .#{$prefix}ie6,
 324     .#{$prefix}ie7,
 325     .#{$prefix}quirks .#{$prefix}ie9,
 326     .#{$prefix}quirks .#{$prefix}ie8,
 327     .#{$prefix}strict .#{$prefix}ie8 {
 328         .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
 329             padding: 2px 2px 1px 2px;
 330         }
 331     }
 332
 333     .#{$prefix}grid-row .#{$prefix}grid-cell-special {
 334         padding: 0;
 335         border-right: 1px solid $grid-cell-with-col-lines-border-color;
 336
 337         @include background-gradient(#f6f6f6, 'grid-cell-special');
 338     }
 339
 340     .#{$prefix}ie6,
 341     .#{$prefix}ie7,
 342     .#{$prefix}quirks .#{$prefix}ie8,
 343     .#{$prefix}strict .#{$prefix}ie8 {
 344         .#{$prefix}grid-row .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
 345             padding-bottom: 2px;
 346         }
 347     }
 348
 349
 350     .#{$prefix}strict {
 351         .#{$prefix}ie6, .#{$prefix}ie7 {
 352             .#{$prefix}grid-cell-inner {
 353                 padding-top: 2px;
 354                 padding-bottom: 0;
 355             }
 356         }
 357     }
 358
 359     .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
 360         border-right: 1px solid adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%);
 361
 362         @include background-gradient($grid-row-cell-selected-background-color, 'grid-cell-special');
 363     }
 364
 365     .#{$prefix}grid-dirty-cell {
 366         background-image: theme-image($theme-name, 'grid/dirty.gif');
 367         background-position: 0 0;
 368         background-repeat: no-repeat;
 369     }
 370
 371     .#{$prefix}grid-cell-selected {
 372         background-color: #B8CFEE !important;
 373     }
 374
 375     @if not $supports-gradients or $compile-all {
 376         .#{$prefix}nlg {
 377             .#{$prefix}grid-cell-special {
 378                 background-repeat: repeat-y;
 379                 background-position: top right;
 380             }
 381
 382             .#{$prefix}grid-row .#{$prefix}grid-cell-special,
 383             .#{$prefix}grid-row-over .#{$prefix}grid-cell-special {
 384                 background-image: theme-image($theme-name, 'grid/cell-special-bg.gif');
 385
 386             }
 387
 388             .#{$prefix}grid-row-focused .#{$prefix}grid-cell-special,
 389             .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
 390                 background-image: theme-image($theme-name, 'grid/cell-special-selected-bg.gif');
 391             }
 392         }
 393     }
 394
 395     //this is panel as gridpanel doesnt use a baseCls..........
 396     .#{$prefix}panel-with-col-lines .#{$prefix}grid-row .#{$prefix}grid-cell {
 397         padding-right: 0;
 398         border-right: 1px solid $grid-cell-with-col-lines-border-color;
 399     }
 400
 401     @if $include-ie {
 402         .#{$prefix}ie {
 403             .#{$prefix}grid-cell-special {
 404                 border-right-width: 0 !important;
 405             }
 406         }
 407     }
 408
 409     .#{$prefix}property-grid {
 410         .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
 411             padding: 3px 6px 5px;
 412         }
 413
 414         .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
 415         .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
 416             padding-left: 12px;
 417             background: theme-image($theme-name, 'grid/property-cell-bg.gif');
 418             background-repeat: no-repeat;
 419             background-position: -16px 1px;
 420         }
 421     }
 422
 423     @if $include-ie {
 424         .#{$prefix}quirks .#{$prefix}ie .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
 425             background-position: -16px 2px;
 426         }
 427     }
 428
 429     .#{$prefix}unselectable {
 430         -moz-user-select: none;
 431         -khtml-user-select: none;
 432         -webkit-user-select: ignore;
 433     }
 434
 435     .#{$prefix}grid-row-body-hidden {
 436         display: none;
 437     }
 438
 439     .#{$prefix}grid-group-collapsed {
 440         display: none;
 441     }
 442
 443     //grid expander
 444     .#{$prefix}grid-view {
 445         .#{$prefix}grid-td-expander {
 446             vertical-align: top;
 447         }
 448     }
 449
 450     .#{$prefix}grid-td-expander {
 451         background: repeat-y right transparent;
 452     }
 453
 454     .#{$prefix}grid-view {
 455         .#{$prefix}grid-td-expander {
 456             .#{$prefix}grid-cell-inner {
 457                 padding: 0 !important;
 458             }
 459         }
 460     }
 461
 462     .#{$prefix}grid-row-expander {
 463         background-image: theme-image($theme-name, 'grid/group-collapse.gif');
 464         background-color: transparent;
 465
 466         width: 9px;
 467         height: 13px;
 468
 469         margin-left: 3px;
 470
 471         background-repeat: no-repeat;
 472         background-position: 0 -2px;
 473     }
 474
 475     .#{$prefix}grid-row-collapsed {
 476         .#{$prefix}grid-row-expander {
 477             background-image: theme-image($theme-name, 'grid/group-expand.gif');
 478         }
 479     }
 480
 481     .#{$prefix}grid-resize-marker {
 482         position: absolute;
 483         z-index: 5;
 484         top: 0;
 485         width: 1px;
 486         background-color: #0f0f0f;
 487     }
 488
 489     //column move icons, when moving columns
 490     .col-move-top,
 491     .col-move-bottom {
 492         width: 9px;
 493         height: 9px;
 494         position: absolute;
 495         top: 0;
 496         line-height: 0;
 497         font-size: 0;
 498         overflow: hidden;
 499         z-index: 20000;
 500         background: no-repeat left top transparent;
 501     }
 502
 503     .col-move-top {
 504         background-image: theme-image($theme-name, 'grid/col-move-top.gif');
 505     }
 506
 507     .col-move-bottom {
 508         background-image: theme-image($theme-name, 'grid/col-move-bottom.gif');
 509     }
 510
 511     //pading toolbar
 512     .#{$prefix}tbar-page-number {
 513         width: 30px;
 514     }
 515
 516     //grouped grid
 517     .#{$prefix}grid-group,
 518     .#{$prefix}grid-group-body,
 519     .#{$prefix}grid-group-hd {
 520         zoom: 1;
 521     }
 522
 523     .#{$prefix}grid-group-hd {
 524         padding-top: 6px;
 525
 526         .#{$prefix}grid-cell-inner {
 527             padding: 10px 4px 4px 4px;
 528
 529             background: $grid-grouped-header-background-color;
 530
 531             border-width: $grid-grouped-header-border-width;
 532             border-style: $grid-grouped-header-border-style;
 533             border-color: $grid-grouped-header-border-color;
 534
 535             cursor: pointer;
 536         }
 537     }
 538
 539     .#{$prefix}grid-group-title {
 540         background: transparent no-repeat 0 -1px;
 541         background-image: theme-image($theme-name, 'grid/group-collapse.gif');
 542
 543         color: $grid-grouped-title-color;
 544         font: $grid-grouped-title-font;
 545
 546         padding: 0 0 0 14px;
 547     }
 548
 549     .#{$prefix}grid-group-hd-collapsed {
 550         .#{$prefix}grid-group-title {
 551             background-image: theme-image($theme-name, 'grid/group-expand.gif');
 552         }
 553     }
 554
 555     .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body {
 556         display: none;
 557     }
 558
 559     .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title {
 560         background-image: theme-image($theme-name, 'grid/group-expand.gif');
 561     }
 562
 563     .#{$prefix}group-by-icon {
 564         background-image: theme-image($theme-name, 'grid/group-by.gif');
 565     }
 566
 567     .#{$prefix}show-groups-icon {
 568         background-image: theme-image($theme-name, 'grid/group-by.gif');
 569     }
 570
 571     .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
 572         padding: 1px;
 573     }
 574
 575     .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
 576         padding: 4px;
 577     }
 578
 579     .#{$prefix}grid-row-checker,
 580     .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
 581         height: 14px;
 582         width: 14px;
 583         background-image: theme-image($theme-name, 'grid/unchecked.gif');
 584         background-position: -1px -1px;
 585         background-repeat: no-repeat;
 586         background-color: transparent;
 587     }
 588
 589     // Row checker is a div but column header checker is the text span element, so make it display: block
 590     // Header checkbox element needs centering
 591     .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
 592         display: block;
 593         margin-top: 4px;
 594         margin-left: 4px;
 595     }
 596
 597     @if $include-ie or $compile-all {
 598         /* All IE Quirks mode need to squish the header height or the line-height will become too tall */
 599         /* IE6 always needs the hack regardless of quirks/strict */
 600         .#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie6 {
 601             .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
 602                 line-height: 18px;
 603             }
 604         }
 605
 606         /* IE 6, 7 & 9 are 1px too far to the right when centering, drop the margin 1px. */
 607         .#{$prefix}ie6, .#{$prefix}ie7, .#{$prefix}ie9 {
 608             .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
 609                 margin-left: 3px;
 610             }
 611         }
 612     }
 613
 614     .#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text {
 615         background-image: theme-image($theme-name, 'grid/checked.gif');
 616     }
 617
 618     .#{$prefix}grid-row-checker {
 619         margin-left: 1px;
 620
 621         background-position: 50% -2px;
 622     }
 623
 624     .#{$prefix}grid-row-selected .#{$prefix}grid-row-checker,
 625     .#{$prefix}grid-row-checked .#{$prefix}grid-row-checker {
 626         background-image: theme-image($theme-name, 'grid/checked.gif');
 627     }
 628
 629     //grid icons
 630     .#{$prefix}tbar-page-first {
 631         background-image: theme-image($theme-name, 'grid/page-first.gif') !important;
 632     }
 633
 634     .#{$prefix}tbar-loading {
 635         background-image: theme-image($theme-name, 'grid/refresh.gif') !important;
 636     }
 637
 638     .#{$prefix}tbar-page-last {
 639         background-image: theme-image($theme-name, 'grid/page-last.gif') !important;
 640     }
 641
 642     .#{$prefix}tbar-page-next {
 643         background-image: theme-image($theme-name, 'grid/page-next.gif') !important;
 644     }
 645
 646     .#{$prefix}tbar-page-prev {
 647         background-image: theme-image($theme-name, 'grid/page-prev.gif') !important;
 648     }
 649
 650     .#{$prefix}item-disabled {
 651         .#{$prefix}tbar-loading {
 652             background-image: theme-image($theme-name, 'grid/refresh-disabled.gif') !important;
 653         }
 654
 655         .#{$prefix}tbar-page-first {
 656             background-image: theme-image($theme-name, 'grid/page-first-disabled.gif') !important;
 657         }
 658
 659         .#{$prefix}tbar-page-last {
 660             background-image: theme-image($theme-name, 'grid/page-last-disabled.gif') !important;
 661         }
 662
 663         .#{$prefix}tbar-page-next {
 664             background-image: theme-image($theme-name, 'grid/page-next-disabled.gif') !important;
 665         }
 666
 667         .#{$prefix}tbar-page-prev {
 668             background-image: theme-image($theme-name, 'grid/page-prev-disabled.gif') !important;
 669         }
 670     }
 671
 672     //menu icons
 673     .xg-hmenu-sort-asc .#{$prefix}menu-item-icon {
 674         background-image: theme-image($theme-name, 'grid/hmenu-asc.gif');
 675     }
 676
 677     .xg-hmenu-sort-desc .#{$prefix}menu-item-icon {
 678         background-image: theme-image($theme-name, 'grid/hmenu-desc.gif');
 679     }
 680
 681     .xg-hmenu-lock .#{$prefix}menu-item-icon {
 682         background-image: theme-image($theme-name, 'grid/hmenu-lock.gif');
 683     }
 684
 685     .xg-hmenu-unlock .#{$prefix}menu-item-icon {
 686         background-image: theme-image($theme-name, 'grid/hmenu-unlock.gif');
 687     }
 688
 689     .#{$prefix}group-by-icon {
 690         background-image: theme-image($theme-name, 'grid/group-by.gif');
 691     }
 692
 693     .#{$prefix}cols-icon .#{$prefix}menu-item-icon {
 694         background-image: theme-image($theme-name, 'grid/columns.gif');
 695     }
 696
 697     .#{$prefix}show-groups-icon {
 698         background-image: theme-image($theme-name, 'grid/group-by.gif');
 699     }
 700
 701     // Drag/drop indicator styles
 702     .#{$prefix}grid-drop-indicator {
 703         position: absolute;
 704         height: 1px;
 705         line-height: 0px;
 706         background-color: #77BC71;
 707         overflow: visible;
 708
 709         .#{$prefix}grid-drop-indicator-left {
 710             position: absolute;
 711             top: -8px;
 712             left: -12px;
 713             background-image: theme-image($theme-name, 'grid/dd-insert-arrow-right.png');
 714             height: 16px;
 715             width: 16px;
 716         }
 717
 718         .#{$prefix}grid-drop-indicator-right {
 719             position: absolute;
 720             top: -8px;
 721             right: -11px;
 722             background-image: theme-image($theme-name, 'grid/dd-insert-arrow-left.png');
 723             height: 16px;
 724             width: 16px;
 725         }
 726     }
 727
 728     .#{$prefix}ie6 {
 729         .#{$prefix}grid-drop-indicator-left {
 730             background-image: theme-image($theme-name, 'grid/dd-insert-arrow-right.gif');
 731         }
 732
 733         .#{$prefix}grid-drop-indicator-right {
 734             background-image: theme-image($theme-name, 'grid/dd-insert-arrow-left.gif');
 735         }
 736     }
 737
 738     // Row Editor
 739     .#{$prefix}grid-row-editor {
 740         position: absolute !important;
 741         z-index: 1;
 742         zoom: 1;
 743         overflow: visible !important;
 744
 745         .#{$prefix}form-field {
 746             font: $grid-row-editor-font;
 747         }
 748         .#{$prefix}form-display-field {
 749             font: $grid-row-editor-font;
 750             padding-top: 0;
 751         }
 752
 753         .#{$prefix}panel-body {
 754             background-color: $grid-row-editor-background-color;
 755             border-top: $grid-row-editor-border;
 756             border-bottom: $grid-row-editor-border;
 757         }
 758     }
 759
 760     // Perfect alignment of input text with cell text
 761     .#{$prefix}grid-row-editor {
 762         // Align input text with text value in cell
 763         .#{$prefix}form-text {
 764             padding-left: 2px;
 765         }
 766     }
 767     .#{$prefix}grid-editor {
 768         // Align checkboxes input
 769         .#{$prefix}form-cb-wrap {
 770             text-align: center;
 771         }
 772     }
 773
 774 .#{$prefix}grid-row-editor-buttons {
 775         background-color: $grid-row-editor-background-color;
 776         position: absolute;
 777         bottom: -31px;
 778         padding: 4px;
 779         width: 200px;
 780         height: 32px;
 781
 782         .#{$prefix}strict & {
 783             width: 192px;
 784             height: 24px;
 785         }
 786
 787         &-ml,
 788         &-mr,
 789         &-bl,
 790         &-br,
 791         &-bc {
 792             position: absolute;
 793             overflow: hidden;
 794         }
 795
 796         &-bl,
 797         &-br {
 798             width: 4px;
 799             height: 4px;
 800             bottom: 0px;
 801             background-image: theme-image($theme-name, 'panel/panel-default-framed-corners.gif');
 802         }
 803         &-bl {
 804             left: 0px;
 805             background-position: 0px -16px;
 806         }
 807         &-br {
 808             right: 0px;
 809             background-position: 0px -20px;
 810         }
 811
 812         &-bc {
 813             position: absolute;
 814             left: 4px;
 815             bottom: 0px;
 816             width: 192px;
 817             height: 1px;
 818             background-color: $grid-row-editor-border-color;
 819         }
 820
 821         &-ml,
 822         &-mr {
 823             height: 27px;
 824             width: 1px;
 825             top: 1px;
 826             background-color: $grid-row-editor-border-color;
 827         }
 828         &-ml {
 829             left: 0px
 830         }
 831         &-mr {
 832             background-position: 0px -20px;
 833             right: 0px;
 834         }
 835     }
 836
 837     .#{$prefix}grid-row-editor-errors {
 838         ul {
 839             margin-left: 5px;
 840         }
 841         li {
 842             list-style: disc;
 843             margin-left: 15px;
 844         }
 845     }
 846 }