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 |
|
---|
850 | .#{$prefix}grid-row-editor-buttons-ml,
|
---|
851 | .#{$prefix}grid-row-editor-buttons-mr,
|
---|
852 | .#{$prefix}grid-row-editor-buttons-bl,
|
---|
853 | .#{$prefix}grid-row-editor-buttons-br,
|
---|
854 | .#{$prefix}grid-row-editor-buttons-bc {
|
---|
855 | position: absolute;
|
---|
856 | overflow: hidden;
|
---|
857 | }
|
---|
858 |
|
---|
859 | .#{$prefix}grid-row-editor-buttons-bl,
|
---|
860 | .#{$prefix}grid-row-editor-buttons-br {
|
---|
861 | width: 4px;
|
---|
862 | height: 4px;
|
---|
863 | bottom: 0px;
|
---|
864 | background-image: theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif');
|
---|
865 | }
|
---|
866 | .#{$prefix}grid-row-editor-buttons-bl {
|
---|
867 | left: 0px;
|
---|
868 | background-position: 0px -16px;
|
---|
869 | }
|
---|
870 | .#{$prefix}grid-row-editor-buttons-br {
|
---|
871 | right: 0px;
|
---|
872 | background-position: 0px -20px;
|
---|
873 | }
|
---|
874 | .#{$prefix}grid-row-editor-buttons-bc {
|
---|
875 | position: absolute;
|
---|
876 | left: 4px;
|
---|
877 | bottom: 0px;
|
---|
878 | width: 192px;
|
---|
879 | height: 1px;
|
---|
880 | background-color: $grid-row-editor-border-color;
|
---|
881 | }
|
---|
882 | .#{$prefix}grid-row-editor-buttons-ml,
|
---|
883 | .#{$prefix}grid-row-editor-buttons-mr {
|
---|
884 | height: 27px;
|
---|
885 | width: 1px;
|
---|
886 | top: 1px;
|
---|
887 | background-color: $grid-row-editor-border-color;
|
---|
888 | }
|
---|
889 | .#{$prefix}grid-row-editor-buttons-ml {
|
---|
890 | left: 0px
|
---|
891 | }
|
---|
892 | .#{$prefix}grid-row-editor-buttons-mr {
|
---|
893 | background-position: 0px -20px;
|
---|
894 | right: 0px;
|
---|
895 | }
|
---|
896 |
|
---|
897 | .#{$prefix}grid-row-editor-errors {
|
---|
898 | ul {
|
---|
899 | margin-left: 5px;
|
---|
900 | }
|
---|
901 | li {
|
---|
902 | list-style: disc;
|
---|
903 | margin-left: 15px;
|
---|
904 | }
|
---|
905 | }
|
---|
906 | }
|
---|