/ext-4.1.0_b3/resources/themes/stylesheets/neptune/default/widgets/_grid.scss
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}