Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _tree.scss
1 @mixin extjs-tree {
2     .#{$prefix}tree-no-lines .#{$prefix}tree-elbow {
3         background-color: transparent;
4     }
5
6     .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-end {
7         background-color: transparent;
8     }
9
10     .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-line {
11         background-color: transparent;
12     }
13     
14     //arrows
15     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-plus {
16         background: transparent no-repeat 0 0;
17     }
18     
19     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-plus {
20         background: transparent no-repeat 0 0;
21     }
22
23     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-minus {
24         background: transparent no-repeat -16px 0;
25     }
26
27     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-minus {
28         background: transparent no-repeat -16px 0;
29     }
30     
31     .#{$prefix}tree-arrows .#{$prefix}tree-elbow {
32         background-color: transparent !important;
33     }
34     
35     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end {
36         background-color: transparent !important;
37     }
38     
39     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-line {
40         background-color: transparent !important;
41     }
42     
43     //elbows
44     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
45     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
46         background-position: -32px 0;
47     }
48
49     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-minus,
50     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-minus {
51         background-position: -48px 0;
52     }
53     
54     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
55     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
56         background-position: -16px 0;
57     }
58     
59     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
60     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
61         background-position: -48px 0;
62     }
63
64     .#{$prefix}tree-elbow-plus,
65     .#{$prefix}tree-elbow-minus,
66     .#{$prefix}tree-elbow-end-plus,
67     .#{$prefix}tree-elbow-end-minus{
68         cursor: pointer;
69     }
70     
71     //elbows
72     .#{$prefix}tree-lines {
73         .#{$prefix}tree-elbow {
74             background-image: theme-image($theme-name, 'tree/elbow.gif');
75         }
76         
77         .#{$prefix}tree-elbow-end {
78             background-image: theme-image($theme-name, 'tree/elbow-end.gif');
79         }
80
81         .#{$prefix}tree-elbow-plus {
82             background-image: theme-image($theme-name, 'tree/elbow-plus.gif');
83         }
84
85         .#{$prefix}tree-elbow-end-plus {
86             background-image: theme-image($theme-name, 'tree/elbow-end-plus.gif');
87         }
88
89         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
90             background-image: theme-image($theme-name, 'tree/elbow-minus.gif');
91         }
92
93         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
94             background-image: theme-image($theme-name, 'tree/elbow-end-minus.gif');
95         }
96         
97         .#{$prefix}tree-elbow-line {
98             background-image: theme-image($theme-name, 'tree/elbow-line.gif');
99         }
100     }
101     
102     .#{$prefix}tree-no-lines {
103         .#{$prefix}tree-elbow-plus,
104         .#{$prefix}tree-elbow-end-plus {
105                 background-image: theme-image($theme-name, 'tree/elbow-plus-nl.gif');
106         }
107
108         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
109         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
110             background-image: theme-image($theme-name, 'tree/elbow-end-minus-nl.gif');
111         }
112     }
113     
114     .#{$prefix}tree-arrows {
115         .#{$prefix}tree-elbow-plus,
116         .#{$prefix}tree-elbow-minus,
117         .#{$prefix}tree-elbow-end-plus,
118         .#{$prefix}tree-elbow-end-minus {
119             background-image: theme-image($theme-name, 'tree/arrows.gif');
120         }
121     }
122     
123     .#{$prefix}tree-icon {
124         margin-right: 3px;
125     }
126
127     .#{$prefix}tree-elbow,
128     .#{$prefix}tree-elbow-end,
129     .#{$prefix}tree-elbow-plus,
130     .#{$prefix}tree-elbow-end-plus,
131     .#{$prefix}tree-elbow-empty,
132     .#{$prefix}tree-elbow-line {
133         height: $tree-elbow-height;
134         width: $tree-elbow-width;
135     }
136     
137     .#{$prefix}tree-icon-leaf {
138         width: $tree-elbow-width;
139         background-image: theme-image($theme-name, 'tree/leaf.gif');
140     }
141
142     .#{$prefix}tree-icon-parent {
143         width: $tree-elbow-width;
144         background-image: theme-image($theme-name, 'tree/folder.gif');
145     }
146     
147     .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
148         background-image: theme-image($theme-name, 'tree/folder-open.gif');
149     }
150     
151     .#{$prefix}grid-rowbody {
152         padding: 0;
153     }
154     
155     .#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
156         padding: 0px;
157     }
158     
159     .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell {
160         border: none;
161     }
162     
163     .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
164         height: $tree-elbow-height;
165         
166         line-height: $tree-elbow-height;
167         vertical-align: middle;
168         cursor: pointer;
169         
170         img {
171             float: left;
172         }
173     }
174     
175     .#{$prefix}ie {
176         .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
177             white-space: normal;
178         }
179     }
180     
181     
182     .#{$prefix}tree-checkbox {
183         float: left;
184         margin: 2px 3px 0 0;
185         display: block;
186
187         width: $form-checkbox-size;
188         height: $form-checkbox-size;
189         background: theme-image($theme-name, $form-checkbox-image) no-repeat;
190
191         overflow: hidden;
192         padding: 0;
193         border: 0;
194         &::-moz-focus-inner {
195             padding: 0;
196             border: 0;
197         }
198     }
199     @if $include-ie {
200         /* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */
201         .#{$prefix}nbr.#{$prefix}ie {
202             .#{$prefix}tree-checkbox {
203                 font-size: 0;
204             }
205         }
206     }
207     .#{$prefix}tree-checkbox-checked {
208         background-position: 0 (0 - $form-checkbox-size);
209     }
210
211     @if $include-ie {
212         .#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
213             border-width: 0 !important;
214         }
215     }
216     
217     @if $include-ff {
218         .#{$prefix}gecko {
219             .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
220                 line-height: $tree-elbow-height - 2;
221             }
222         }
223     }
224     
225     .#{$prefix}tree-drop-ok-append .#{$prefix}dd-drop-icon {
226         background-image: theme-image($theme-name, 'tree/drop-append.gif');
227     }
228
229     .#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon {
230         background-image: theme-image($theme-name, 'tree/drop-above.gif');
231     }
232
233     .#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon {
234         background-image: theme-image($theme-name, 'tree/drop-below.gif');
235     }
236
237     .#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon {
238         background-image: theme-image($theme-name, 'tree/drop-between.gif');
239     }
240     
241     .#{$prefix}grid-tree-loading .#{$prefix}tree-icon {
242         background-image: theme-image($theme-name, 'tree/loading.gif');
243     }
244
245     .#{$prefix}tree-ddindicator {
246         height: 1px;
247         border-width: 1px 0px 0px;
248         border-style: dotted;
249         border-color: green;
250     }
251         
252     .#{$prefix}grid-tree-loading span {
253          font-style: italic;
254          color: #444444;
255     }
256     
257     .#{$prefix}tree-animator-wrap {
258         overflow: hidden;
259     }
260 }