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     .#{$prefix}accordion-item .#{$prefix}grid-header-ct {
  54         border: 0 none;
  55     }
  56
  57     @if $include-ie or $compile-all {
  58         .#{$prefix}border-box .#{$prefix}ie9 {
  59             .#{$prefix}grid-header-ct {
  60                 padding-left: 1px;
  61             }
  62         }
  63         .#{$prefix}ie6, .#{$prefix}ie7 {
  64             .#{$prefix}grid-header-ct {
  65                 padding-left: 1px;
  66             }
  67         }
  68
  69     }
  70
  71     .#{$prefix}column-header {
  72         padding: 0;
  73         position: absolute;
  74         overflow: hidden;
  75
  76         border-right: 1px solid $grid-header-background-color;
  77         border-left: 0 none;
  78         border-top: 0 none;
  79         border-bottom: 0 none;
  80
  81         text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  82         font: normal 11px/15px $font-family;
  83
  84         @if $grid-header-color {
  85             color: $grid-header-color;
  86         }
  87         font: normal ceil($font-size * .9) $font-family;
  88
  89         @if $supports-gradients or $compile-all {
  90             @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
  91         }
  92     }
  93
  94     .#{$prefix}group-header {
  95         padding: 0;
  96         border-left-width: 0;
  97     }
  98     .#{$prefix}group-sub-header {
  99         background: transparent;
 100         border-top: 1px solid $grid-header-background-color;
 101         border-left-width: 0;
 102     }
 103
 104     .#{$prefix}column-header-inner {
 105         zoom: 1;
 106         position: relative;
 107         white-space: nowrap;
 108         line-height: 22px;
 109         padding: $grid-header-padding;
 110
 111         .#{$prefix}column-header-text {
 112             white-space: nowrap;
 113         }
 114     }
 115
 116     .#{$prefix}column-header-over,
 117     .#{$prefix}column-header-sort-ASC,
 118     .#{$prefix}column-header-sort-DESC {
 119         border-left-color: $grid-header-over-border-color;
 120         border-right-color: $grid-header-over-border-color;
 121
 122         @if $supports-gradients or $compile-all {
 123             @include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient);
 124         }
 125     }
 126
 127     @if not $supports-gradients or $compile-all {
 128         .#{$prefix}nlg {
 129             .#{$prefix}grid-header-ct,
 130             .#{$prefix}column-header {
 131                 background: repeat-x 0 top;
 132                 background-image: theme-background-image($theme-name, 'grid/column-header-bg.gif');
 133             }
 134
 135             .#{$prefix}column-header-over,
 136             .#{$prefix}column-header-sort-ASC,
 137             .#{$prefix}column-header-sort-DESC {
 138                 background: #ebf3fd repeat-x 0 top;
 139                 background-image: theme-background-image($theme-name, 'grid/column-header-over-bg.gif');
 140             }
 141         }
 142     }
 143
 144     .#{$prefix}column-header-trigger {
 145         display: none;
 146         height: 100%;
 147         width: $grid-header-trigger-width;
 148         background: no-repeat left center;
 149         background-color: #c3daf9;
 150         background-image: theme-background-image($theme-name, 'grid/grid3-hd-btn.gif');
 151         position: absolute;
 152         right: 0;
 153         top: 0;
 154         z-index: 2;
 155         cursor: pointer;
 156     }
 157
 158     .#{$prefix}column-header-over, .#{$prefix}column-header-open {
 159         .#{$prefix}column-header-trigger {
 160             display: block;
 161         }
 162     }
 163
 164     .#{$prefix}column-header-align-right {
 165         text-align: right;
 166
 167         .#{$prefix}column-header-text {
 168             padding-right: 0.5ex;
 169             margin-right: 6px;
 170         }
 171     }
 172     .#{$prefix}column-header-align-center {
 173         text-align: center;
 174     }
 175     .#{$prefix}column-header-align-left {
 176         text-align: left;
 177     }
 178
 179     // Sort direction indicator is a background of the text span.
 180     .#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text {
 181         padding-right: 16px;
 182         background: no-repeat right 6px;
 183         background-image: theme-background-image($theme-name, 'grid/sort_asc.gif');
 184     }
 185     .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text {
 186         padding-right: 16px;
 187         background: no-repeat right 6px;
 188         background-image: theme-background-image($theme-name, 'grid/sort_desc.gif');
 189     }
 190
 191     //grid rows
 192     .#{$prefix}grid-row {
 193         line-height: 13px;
 194
 195         vertical-align: top;
 196
 197         padding: $grid-row-padding;
 198
 199         @include no-select;
 200
 201         .#{$prefix}grid-cell {
 202             @if $grid-row-cell-color {
 203                 color: $grid-row-cell-color;
 204             }
 205             font: $grid-row-cell-font;
 206             background-color: $grid-row-cell-background;
 207             border-color: $grid-row-cell-border-color;
 208             border-style: $grid-row-cell-border-style;
 209             border-width: $grid-row-cell-border-width;
 210             border-top-color: lighten($grid-row-cell-border-color, 5);
 211         }
 212     }
 213
 214     .#{$prefix}grid-rowwrap-div {
 215         border-width: $grid-row-wrap-border-width;
 216         border-color: $grid-row-wrap-border-color;
 217         border-style: $grid-row-wrap-border-style;
 218         border-top-color: lighten($grid-row-wrap-border-color, 5);
 219
 220         overflow: hidden;
 221     }
 222
 223     .#{$prefix}grid-row-alt .#{$prefix}grid-cell,
 224     .#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap-div {
 225         background-color: $grid-row-cell-alt-background;
 226     }
 227
 228     .#{$prefix}grid-row-over .#{$prefix}grid-cell,
 229     .#{$prefix}grid-row-over .#{$prefix}grid-rowwrap-div {
 230         border-color: $grid-row-cell-over-border-color;
 231
 232         background-color: $grid-row-cell-over-background-color;
 233     }
 234
 235     .#{$prefix}grid-row-focused .#{$prefix}grid-cell,
 236     .#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap-div {
 237         border-color: $grid-row-cell-focus-border-color;
 238
 239         background-color: $grid-row-cell-focus-background-color;
 240     }
 241
 242     .#{$prefix}grid-row-selected .#{$prefix}grid-cell,
 243     .#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div {
 244         border-style: $grid-row-cell-selected-border-style;
 245         border-color: $grid-row-cell-selected-border-color;
 246
 247         background-color: $grid-row-cell-selected-background-color !important;
 248     }
 249
 250     .#{$prefix}grid-rowwrap-div {
 251         .#{$prefix}grid-cell,
 252         .#{$prefix}grid-cell-inner {
 253             border-width: 0;
 254
 255             background: transparent;
 256         }
 257     }
 258
 259     .#{$prefix}grid-row-body-hidden {
 260         display: none;
 261     }
 262
 263     .#{$prefix}grid-rowbody {
 264         font: $grid-row-body-font;
 265
 266         padding: $grid-row-body-padding;
 267
 268         p {
 269             margin: 5px 5px 10px 5px;
 270         }
 271     }
 272
 273     //grid cells
 274     .#{$prefix}grid-cell {
 275         overflow: hidden;
 276
 277         font: $grid-cell-font;
 278
 279         @include no-select;
 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         background-image: 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                 background-image: 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                 background-image: 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             background-image: 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         @include no-select;
 403     }
 404
 405     .#{$prefix}grid-row-body-hidden {
 406         display: none;
 407     }
 408
 409     .#{$prefix}grid-group-collapsed {
 410         display: none;
 411     }
 412
 413     //grid expander
 414     .#{$prefix}grid-view {
 415         .#{$prefix}grid-td-expander {
 416             vertical-align: top;
 417         }
 418     }
 419
 420     .#{$prefix}grid-td-expander {
 421         background: repeat-y right transparent;
 422     }
 423
 424     .#{$prefix}grid-view {
 425         .#{$prefix}grid-td-expander {
 426             .#{$prefix}grid-cell-inner {
 427                 padding: 0 !important;
 428             }
 429         }
 430     }
 431
 432     .#{$prefix}grid-row-expander {
 433         background-image: theme-background-image($theme-name, 'grid/group-collapse.gif');
 434         background-color: transparent;
 435
 436         width: 9px;
 437         height: 13px;
 438
 439         margin-left: 3px;
 440
 441         background-repeat: no-repeat;
 442         background-position: 0 -2px;
 443     }
 444
 445     .#{$prefix}grid-row-collapsed {
 446         .#{$prefix}grid-row-expander {
 447             background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
 448         }
 449     }
 450
 451     .#{$prefix}grid-resize-marker {
 452         position: absolute;
 453         z-index: 5;
 454         top: 0;
 455         width: 1px;
 456         background-color: #0f0f0f;
 457     }
 458
 459     //column move icons, when moving columns
 460     .col-move-top,
 461     .col-move-bottom {
 462         width: 9px;
 463         height: 9px;
 464         position: absolute;
 465         top: 0;
 466         line-height: 0;
 467         font-size: 0;
 468         overflow: hidden;
 469         z-index: 20000;
 470         background: no-repeat left top transparent;
 471     }
 472
 473     .col-move-top {
 474         background-image: theme-background-image($theme-name, 'grid/col-move-top.gif');
 475     }
 476
 477     .col-move-bottom {
 478         background-image: theme-background-image($theme-name, 'grid/col-move-bottom.gif');
 479     }
 480
 481     //pading toolbar
 482     .#{$prefix}tbar-page-number {
 483         width: 30px;
 484     }
 485
 486     //grouped grid
 487     .#{$prefix}grid-group,
 488     .#{$prefix}grid-group-body,
 489     .#{$prefix}grid-group-hd {
 490         zoom: 1;
 491     }
 492
 493     .#{$prefix}grid-group-hd {
 494         padding-top: 6px;
 495
 496         .#{$prefix}grid-cell-inner {
 497             padding: 10px 4px 4px 4px;
 498
 499             background: $grid-grouped-header-background-color;
 500
 501             border-width: $grid-grouped-header-border-width;
 502             border-style: $grid-grouped-header-border-style;
 503             border-color: $grid-grouped-header-border-color;
 504
 505             cursor: pointer;
 506         }
 507     }
 508
 509     .#{$prefix}grid-group-title {
 510         background: transparent no-repeat 0 -1px;
 511         background-image: theme-background-image($theme-name, 'grid/group-collapse.gif');
 512
 513         color: $grid-grouped-title-color;
 514         font: $grid-grouped-title-font;
 515
 516         padding: 0 0 0 14px;
 517     }
 518
 519     .#{$prefix}grid-group-hd-collapsed {
 520         .#{$prefix}grid-group-title {
 521             background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
 522         }
 523     }
 524
 525     .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body {
 526         display: none;
 527     }
 528
 529     .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title {
 530         background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
 531     }
 532
 533     .#{$prefix}group-by-icon {
 534         background-image: theme-background-image($theme-name, 'grid/group-by.gif');
 535     }
 536
 537     .#{$prefix}show-groups-icon {
 538         background-image: theme-background-image($theme-name, 'grid/group-by.gif');
 539     }
 540
 541     .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
 542         padding: 1px;
 543     }
 544
 545     .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
 546         padding: 4px;
 547     }
 548
 549     .#{$prefix}grid-row-checker,
 550     .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
 551         height: 14px;
 552         width: 14px;
 553         background-image: theme-background-image($theme-name, 'grid/unchecked.gif');
 554         background-position: -1px -1px;
 555         background-repeat: no-repeat;
 556         background-color: transparent;
 557     }
 558
 559     // Row checker is a div but column header checker is the text span element, so make it display: block
 560     // Header checkbox element needs centering
 561     .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
 562         display: block;
 563         margin-top: 4px;
 564         margin-left: 4px;
 565     }
 566
 567     @if $include-ie or $compile-all {
 568         /* All IE Quirks mode need to squish the header height or the line-height will become too tall */
 569         /* IE6 always needs the hack regardless of quirks/strict */
 570         .#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie6 {
 571             .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
 572                 line-height: 18px;
 573             }
 574         }
 575
 576         /* IE 6, 7 & 9 are 1px too far to the right when centering, drop the margin 1px. */
 577         .#{$prefix}ie6, .#{$prefix}ie7, .#{$prefix}ie9 {
 578             .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
 579                 margin-left: 3px;
 580             }
 581         }
 582     }
 583
 584     .#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text {
 585         background-image: theme-background-image($theme-name, 'grid/checked.gif');
 586     }
 587
 588     .#{$prefix}grid-row-checker {
 589         margin-left: 1px;
 590
 591         background-position: 50% -2px;
 592     }
 593
 594     .#{$prefix}grid-row-selected .#{$prefix}grid-row-checker,
 595     .#{$prefix}grid-row-checked .#{$prefix}grid-row-checker {
 596         background-image: theme-background-image($theme-name, 'grid/checked.gif');
 597     }
 598
 599     //grid icons
 600     .#{$prefix}tbar-page-first {
 601         background-image: theme-background-image($theme-name, 'grid/page-first.gif') !important;
 602     }
 603
 604     .#{$prefix}tbar-loading {
 605         background-image: theme-background-image($theme-name, 'grid/refresh.gif') !important;
 606     }
 607
 608     .#{$prefix}tbar-page-last {
 609         background-image: theme-background-image($theme-name, 'grid/page-last.gif') !important;
 610     }
 611
 612     .#{$prefix}tbar-page-next {
 613         background-image: theme-background-image($theme-name, 'grid/page-next.gif') !important;
 614     }
 615
 616     .#{$prefix}tbar-page-prev {
 617         background-image: theme-background-image($theme-name, 'grid/page-prev.gif') !important;
 618     }
 619
 620     .#{$prefix}item-disabled {
 621         .#{$prefix}tbar-loading {
 622             background-image: theme-background-image($theme-name, 'grid/refresh-disabled.gif') !important;
 623         }
 624
 625         .#{$prefix}tbar-page-first {
 626             background-image: theme-background-image($theme-name, 'grid/page-first-disabled.gif') !important;
 627         }
 628
 629         .#{$prefix}tbar-page-last {
 630             background-image: theme-background-image($theme-name, 'grid/page-last-disabled.gif') !important;
 631         }
 632
 633         .#{$prefix}tbar-page-next {
 634             background-image: theme-background-image($theme-name, 'grid/page-next-disabled.gif') !important;
 635         }
 636
 637         .#{$prefix}tbar-page-prev {
 638             background-image: theme-background-image($theme-name, 'grid/page-prev-disabled.gif') !important;
 639         }
 640     }
 641
 642     //menu icons
 643     .#{$prefix}hmenu-sort-asc .#{$prefix}menu-item-icon {
 644         background-image: theme-background-image($theme-name, 'grid/hmenu-asc.gif');
 645     }
 646
 647     .#{$prefix}hmenu-sort-desc .#{$prefix}menu-item-icon {
 648         background-image: theme-background-image($theme-name, 'grid/hmenu-desc.gif');
 649     }
 650
 651     .#{$prefix}hmenu-lock .#{$prefix}menu-item-icon {
 652         background-image: theme-background-image($theme-name, 'grid/hmenu-lock.gif');
 653     }
 654
 655     .#{$prefix}hmenu-unlock .#{$prefix}menu-item-icon {
 656         background-image: theme-background-image($theme-name, 'grid/hmenu-unlock.gif');
 657     }
 658
 659     .#{$prefix}group-by-icon {
 660         background-image: theme-background-image($theme-name, 'grid/group-by.gif');
 661     }
 662
 663     .#{$prefix}cols-icon .#{$prefix}menu-item-icon {
 664         background-image: theme-background-image($theme-name, 'grid/columns.gif');
 665     }
 666
 667     .#{$prefix}show-groups-icon {
 668         background-image: theme-background-image($theme-name, 'grid/group-by.gif');
 669     }
 670
 671     // Drag/drop indicator styles
 672     .#{$prefix}grid-drop-indicator {
 673         position: absolute;
 674         height: 1px;
 675         line-height: 0px;
 676         background-color: #77BC71;
 677         overflow: visible;
 678
 679         .#{$prefix}grid-drop-indicator-left {
 680             position: absolute;
 681             top: -8px;
 682             left: -12px;
 683             background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.png');
 684             height: 16px;
 685             width: 16px;
 686         }
 687
 688         .#{$prefix}grid-drop-indicator-right {
 689             position: absolute;
 690             top: -8px;
 691             right: -11px;
 692             background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png');
 693             height: 16px;
 694             width: 16px;
 695         }
 696     }
 697
 698     .#{$prefix}ie6 {
 699         .#{$prefix}grid-drop-indicator-left {
 700             background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif');
 701         }
 702
 703         .#{$prefix}grid-drop-indicator-right {
 704             background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.gif');
 705         }
 706     }
 707
 708     // Row Editor
 709     .#{$prefix}grid-row-editor {
 710         position: absolute !important;
 711         z-index: 1;
 712         zoom: 1;
 713         overflow: visible !important;
 714
 715         .#{$prefix}form-field {
 716             font: $grid-row-editor-font;
 717         }
 718         .#{$prefix}form-display-field {
 719             font: $grid-row-editor-font;
 720             padding-top: 0;
 721             padding-left: 4px;
 722         }
 723
 724         .#{$prefix}panel-body {
 725             background-color: $grid-row-editor-background-color;
 726             border-top: $grid-row-editor-border;
 727             border-bottom: $grid-row-editor-border;
 728         }
 729     }
 730
 731     // Perfect alignment of input text with cell text
 732     .#{$prefix}grid-row-editor {
 733         // Align input text with text value in cell
 734         .#{$prefix}form-text {
 735             padding-left: 2px;
 736         }
 737     }
 738     .#{$prefix}grid-editor {
 739         // Align checkboxes input
 740         .#{$prefix}form-cb-wrap {
 741             text-align: center;
 742         }
 743     }
 744
 745 .#{$prefix}grid-row-editor-buttons {
 746         background-color: $grid-row-editor-background-color;
 747         position: absolute;
 748         bottom: -31px;
 749         padding: 4px;
 750         width: 200px;
 751         height: 32px;
 752
 753         .#{$prefix}strict & {
 754             width: 192px;
 755             height: 24px;
 756         }
 757
 758         &-ml,
 759         &-mr,
 760         &-bl,
 761         &-br,
 762         &-bc {
 763             position: absolute;
 764             overflow: hidden;
 765         }
 766
 767         &-bl,
 768         &-br {
 769             width: 4px;
 770             height: 4px;
 771             bottom: 0px;
 772             background-image: theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif');
 773         }
 774         &-bl {
 775             left: 0px;
 776             background-position: 0px -16px;
 777         }
 778         &-br {
 779             right: 0px;
 780             background-position: 0px -20px;
 781         }
 782
 783         &-bc {
 784             position: absolute;
 785             left: 4px;
 786             bottom: 0px;
 787             width: 192px;
 788             height: 1px;
 789             background-color: $grid-row-editor-border-color;
 790         }
 791
 792         &-ml,
 793         &-mr {
 794             height: 27px;
 795             width: 1px;
 796             top: 1px;
 797             background-color: $grid-row-editor-border-color;
 798         }
 799         &-ml {
 800             left: 0px
 801         }
 802         &-mr {
 803             background-position: 0px -20px;
 804             right: 0px;
 805         }
 806     }
 807
 808     .#{$prefix}grid-row-editor-errors {
 809         ul {
 810             margin-left: 5px;
 811         }
 812         li {
 813             list-style: disc;
 814             margin-left: 15px;
 815         }
 816     }
 817 }