Revert "[TASK] Migrate to ExtJS 4: Migrate Backend Base Components"
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / extjs / 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 }