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