PageRenderTime 405ms CodeModel.GetById 71ms app.highlight 308ms RepoModel.GetById 1ms app.codeStats 1ms

/ext-4.1.0_b3/resources/themes/stylesheets/neptune/default/widgets/_grid.scss

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