Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / 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 }