source: branches/testFACT++branch/dim/WebDID/ext-4.1.1a/resources/themes/stylesheets/neptune/default/widgets/_tree.scss

Last change on this file was 14939, checked in by tbretz, 12 years ago
Added WebDID from v20r5
File size: 11.4 KB
Line 
1@mixin extjs-tree {
2
3 // Declare some 'constants' for the image sprites
4 $PLUS_NO_LINES: -0 * $tree-elbow-width;
5 $MINUS_NO_LINES: -1 * $tree-elbow-width;
6 $RIGHT_ARROW_NO_LINES: -2 * $tree-elbow-width;
7 $DOWN_ARROW_NO_LINES: -3 * $tree-elbow-width;
8 $PLUS_WITH_LINES: -4 * $tree-elbow-width;
9 $PLUS_WITH_LINES_LAST_CHILD: -5 * $tree-elbow-width;
10 $MINUS_WITH_LINES: -6 * $tree-elbow-width;
11 $MINUS_WITH_LINES_LAST_CHILD: -7 * $tree-elbow-width;
12 $RIGHT_ARROW_WITH_LINES: -8 * $tree-elbow-width;
13 $RIGHT_ARROW_WITH_LINES_LAST_CHILD: -9 * $tree-elbow-width;
14 $DOWN_ARROW_WITH_LINES: -10 * $tree-elbow-width;
15 $DOWN_ARROW_WITH_LINES_LAST_CHILD: -11 * $tree-elbow-width;
16 $CLOSED_FOLDER_NO_LINES: -12 * $tree-elbow-width;
17 $CLOSED_FOLDER_WITH_LINES: -13 * $tree-elbow-width;
18 $OPEN_FOLDER_NO_LINES: -15 * $tree-elbow-width;
19 $OPEN_FOLDER_WITH_LINES: -16 * $tree-elbow-width;
20 $LEAF_NO_LINES: -18 * $tree-elbow-width;
21 $LEAF_WITH_LINES: -19 * $tree-elbow-width;
22
23 // Tree tables must assume either full width of the View element, or, when necessary, must overflow
24 // They must not shrink wrap the width and only be as wide as their widest node's content.
25 .#{$prefix}autowidth-table table.#{$prefix}grid-table {
26 table-layout: auto;
27 width: auto !important;
28 }
29
30 .#{$prefix}tree-elbow-plus,
31 .#{$prefix}tree-elbow-minus,
32 .#{$prefix}tree-elbow-end-plus,
33 .#{$prefix}tree-elbow-end-minus{
34 cursor: pointer;
35 }
36
37 .#{$prefix}tree-icon {
38 margin-right: 4px;
39 }
40
41 .#{$prefix}tree-elbow,
42 .#{$prefix}tree-elbow-line,
43 .#{$prefix}tree-elbow-end,
44 .#{$prefix}tree-elbow-plus,
45 .#{$prefix}tree-elbow-minus,
46 .#{$prefix}tree-elbow-end-plus,
47 .#{$prefix}tree-elbow-end-minus,
48 .#{$prefix}tree-icon-end,
49 .#{$prefix}tree-icon-end-plus,
50 .#{$prefix}tree-icon-leaf,
51 .#{$prefix}tree-elbow-empty,
52 .#{$prefix}tree-icon-parent {
53 height: $tree-elbow-height;
54 width: $tree-elbow-width;
55 }
56
57 .#{$prefix}tree-lines .#{$prefix}tree-elbow,
58 .#{$prefix}tree-lines .#{$prefix}tree-elbow-line,
59 .#{$prefix}tree-lines .#{$prefix}tree-elbow-end,
60 .#{$prefix}tree-elbow-plus,
61 .#{$prefix}tree-elbow-minus,
62 .#{$prefix}tree-elbow-end-plus,
63 .#{$prefix}tree-elbow-end-minus,
64 .#{$prefix}tree-icon-end,
65 .#{$prefix}tree-icon-end-plus,
66 .#{$prefix}tree-icon-leaf,
67 .#{$prefix}tree-icon-parent {
68 background-image: theme-background-image($theme-name, 'tree/elbows.png');
69 }
70
71 //+/-, no lines
72 .#{$prefix}tree-elbow-plus,
73 .#{$prefix}tree-elbow-end-plus {
74 background-image: theme-background-image($theme-name, 'tree/icons-gray.png');
75 background-position: $PLUS_NO_LINES 0;
76 }
77
78 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
79 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
80 background-image: theme-background-image($theme-name, 'tree/icons-gray.png');
81 background-position: $MINUS_NO_LINES 0;
82 }
83
84 //+/-, lines
85 .#{$prefix}tree-lines {
86 .#{$prefix}tree-elbow-plus {
87 background-image: theme-background-image($theme-name, 'tree/icons-gray.png');
88 background-position: $PLUS_WITH_LINES 0;
89 }
90
91 .#{$prefix}tree-elbow-end-plus {
92 background-image: theme-background-image($theme-name, 'tree/icons-gray.png');
93 background-position: $PLUS_WITH_LINES_LAST_CHILD 0;
94 }
95
96 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
97 background-image: theme-background-image($theme-name, 'tree/icons-gray.png');
98 background-position: $MINUS_WITH_LINES 0;
99 }
100
101 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
102 background-image: theme-background-image($theme-name, 'tree/icons-gray.png');
103 background-position: $MINUS_WITH_LINES_LAST_CHILD 0;
104 }
105 }
106
107 //arrows, no lines
108 .#{$prefix}tree-arrows {
109 .#{$prefix}tree-elbow-plus,
110 .#{$prefix}tree-elbow-end-plus {
111 background-position: $RIGHT_ARROW_NO_LINES 0;
112 }
113
114 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
115 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
116 background-position: $DOWN_ARROW_NO_LINES 0;
117 }
118 }
119
120 .#{$prefix}tree-arrows {
121 &.#{$prefix}tree-lines {
122 .#{$prefix}tree-elbow-plus {
123 background-position: $RIGHT_ARROW_WITH_LINES 0;
124 }
125
126 .#{$prefix}tree-elbow-end-plus {
127 background-position: $RIGHT_ARROW_WITH_LINES_LAST_CHILD 0;
128 }
129
130 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
131 background-position: $DOWN_ARROW_WITH_LINES 0;
132 }
133
134 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
135 background-position: $DOWN_ARROW_WITH_LINES_LAST_CHILD 0;
136 }
137 }
138 }
139
140 //folder, no lines
141 .#{$prefix}tree-icon-parent {
142 background-position: $CLOSED_FOLDER_NO_LINES 0 !important;
143 background-image: theme-background-image($theme-name, 'tree/icons-orange.png');
144 }
145
146 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
147 background-position: $OPEN_FOLDER_NO_LINES 0 !important;
148 }
149
150 .#{$prefix}tree-icon-leaf {
151 background-position: $LEAF_NO_LINES 0 !important;
152 }
153
154 //folder, lines
155 .#{$prefix}tree-lines {
156 .#{$prefix}tree-icon-parent {
157 width: $tree-elbow-width;
158 background-position: $CLOSED_FOLDER_WITH_LINES 0 !important;
159 }
160
161 .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
162 background-position: $OPEN_FOLDER_WITH_LINES 0 !important;
163 }
164 }
165
166 //leaf, no lines
167 .#{$prefix}tree-icon-leaf {
168 width: $tree-elbow-width;
169 background-position: $LEAF_NO_LINES 0 !important;
170 background-image: theme-background-image($theme-name, 'tree/icons-orange.png');
171 }
172
173 .#{$prefix}tree-lines {
174 .#{$prefix}tree-icon-leaf {
175 background-position: $LEAF_WITH_LINES 0 !important;
176 }
177 }
178
179 //selected row
180 .x-grid-row-selected {
181 .#{$prefix}tree-elbow-plus,
182 .#{$prefix}tree-elbow-minus,
183 .#{$prefix}tree-elbow-end-plus,
184 .#{$prefix}tree-elbow-end-minus,
185 .#{$prefix}tree-icon-end,
186 .#{$prefix}tree-icon-end-plus,
187 .#{$prefix}tree-icon-leaf,
188 .#{$prefix}tree-icon-parent {
189 background-image: theme-background-image($theme-name, 'tree/icons-white.png') !important;
190 }
191 }
192
193 // lines
194 .#{$prefix}tree-lines {
195 .#{$prefix}tree-elbow-line {
196 background-image: theme-background-image($theme-name, 'tree/elbows.png');
197 background-position: 0 $tree-elbow-height * 2;
198 }
199
200 .#{$prefix}tree-elbow {
201 background-image: theme-background-image($theme-name, 'tree/elbows.png');
202 background-position: 0 $tree-elbow-height * 0;
203 }
204
205 .#{$prefix}tree-elbow-end {
206 background-image: theme-background-image($theme-name, 'tree/elbows.png');
207 background-position: 0 $tree-elbow-height * 1;
208 }
209 }
210
211// .#{$prefix}grid-with-row-lines {
212// .#{$prefix}tree-elbow,
213// .#{$prefix}tree-elbow-end,
214// .#{$prefix}tree-elbow-plus,
215// .#{$prefix}tree-elbow-end-plus,
216// .#{$prefix}tree-elbow-empty,
217// .#{$prefix}tree-elbow-line {
218// height: $tree-elbow-height - 1;
219// background-position: 0 -1px;
220// }
221// }
222
223 .#{$prefix}grid-cell-treecolumn .#{$prefix}grid-cell-inner {
224 padding: 0;
225 line-height: $tree-elbow-height - 1;
226 }
227
228 .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-treecolumn .#{$prefix}grid-cell-inner {
229 line-height: $tree-elbow-height - 3;
230 }
231
232 .#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
233 cursor: pointer;
234 img {
235 display: inline-block;
236 vertical-align: top;
237 }
238 }
239
240// @if $include-ie {
241// .#{$prefix}ie .#{$prefix}tree-panel {
242// .#{$prefix}tree-elbow,
243// .#{$prefix}tree-elbow-end,
244// .#{$prefix}tree-elbow-plus,
245// .#{$prefix}tree-elbow-end-plus,
246// .#{$prefix}tree-elbow-empty,
247// .#{$prefix}tree-elbow-line {
248// // vertical alignment is necessary for IE to show the ellipsis in the right place.
249// vertical-align: -6px;
250// }
251// }
252// }
253
254// .#{$prefix}tree-panel .#{$prefix}grid-editor-on-text-node {
255// .#{$prefix}form-text {
256// // specify padding left and padding right individually since we don't want to override padding-bottom (which can vary)
257// padding-left: $grid-cell-treecolumn-editor-field-padding-horizontal;
258// padding-right: $grid-cell-treecolumn-editor-field-padding-horizontal;
259// }
260// }
261// @if $include-ie {
262// .#{$prefix}ie .#{$prefix}tree-panel .#{$prefix}grid-editor-on-text-node .#{$prefix}form-text {
263// padding-left: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
264// padding-right: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
265// }
266// }
267// @if $include-opera {
268// .#{$prefix}opera .#{$prefix}tree-panel .#{$prefix}grid-editor-on-text-node .#{$prefix}form-text {
269// padding-left: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
270// padding-right: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
271// }
272// }
273
274 .#{$prefix}tree-checkbox {
275 margin: $tree-checkbox-margin-top $tree-checkbox-margin-right 0 0;
276 display: inline-block;
277 vertical-align: top;
278
279 width: $form-checkbox-size;
280 height: $form-checkbox-size;
281 background: no-repeat;
282 background-image: theme-background-image($theme-name, $form-checkbox-image);
283
284 overflow: hidden;
285 padding: 0;
286 border: 0;
287 &::-moz-focus-inner {
288 padding: 0;
289 border: 0;
290 }
291 }
292
293 .#{$prefix}grid-with-row-lines .#{$prefix}tree-checkbox {
294 margin-top: $tree-checkbox-margin-top - 1;
295 }
296
297 .#{$prefix}tree-checkbox-checked {
298 background-position: 0 (0 - $form-checkbox-size);
299 }
300
301 .#{$prefix}tree-drop-ok-append .#{$prefix}dd-drop-icon {
302 background-image: theme-background-image($theme-name, 'tree/drop-append.gif');
303 }
304
305 .#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon {
306 background-image: theme-background-image($theme-name, 'tree/drop-above.gif');
307 }
308
309 .#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon {
310 background-image: theme-background-image($theme-name, 'tree/drop-below.gif');
311 }
312
313 .#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon {
314 background-image: theme-background-image($theme-name, 'tree/drop-between.gif');
315 }
316
317 .#{$prefix}grid-tree-loading .#{$prefix}tree-icon {
318 background-image: theme-background-image($theme-name, 'tree/loading.gif');
319 }
320
321 .#{$prefix}tree-ddindicator {
322 height: 1px;
323 border-width: 1px 0px 0px;
324 border-style: dotted;
325 border-color: green;
326 }
327
328 .#{$prefix}grid-tree-loading span {
329 font-style: italic;
330 color: #444444;
331 }
332
333 .#{$prefix}tree-animator-wrap {
334 overflow: hidden;
335 }
336}
Note: See TracBrowser for help on using the repository browser.