[TASK] Clean up tree code
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_tree.less
1 //
2 // Variables
3 //
4 @navigation-text: #000;
5 @navigation-bg: rgb(245, 245, 245);
6 @navigation-border: rgb(195, 195, 195);
7
8
9 //
10 // Trees Variables
11 //
12 @tree-indentation: 0.5em;
13 @tree-border: #666666;
14
15
16 //
17 // Trees
18 //
19 .list-tree,
20 .list-tree ul {
21         margin-left: @tree-indentation;
22         padding: 0;
23         list-style: none;
24         position: relative;
25         &:before {
26                 content: "";
27                 display: block;
28                 width: 0;
29                 position: absolute;
30                 top: 0;
31                 bottom: 1em;
32                 left: 0;
33                 margin-bottom: -2px;
34                 border-left: 1px dotted @tree-border;
35         }
36 }
37 .list-tree {
38         li {
39                 &.active {
40                         > .list-tree-group,
41                         > .list-tree-group a {
42                                 .text-danger();
43                         }
44                 }
45                 &:before {
46                         content: "";
47                         display: block;
48                         width: @tree-indentation * 1.6;
49                         height: 0;
50                         border-top: 1px dotted @tree-border;
51                         margin-top: -2px;
52                         position: absolute;
53                         top: 1em;
54                         left: 2px;
55                 }
56                 &:last-child:before {
57                         background: white;
58                         height: auto;
59                         top: 1em;
60                         left: 0;
61                         bottom: 0;
62                 }
63                 margin: 0;
64                 padding-left: @tree-indentation * 2.5;
65                 line-height: 1.75em;
66                 position: relative;
67         }
68 }
69 .list-tree-value {
70         font-weight: bold;
71 }
72 .list-tree-control {
73         &:active,
74         &:focus,
75         &:hover {
76                 text-decoration: none;
77         }
78         > .fa {
79                 font-size: 1.1em;
80                 display: inline-block;
81                 text-align: center;
82                 width: @tree-indentation * 2;
83         }
84         &.list-tree-control-open > .fa:before {
85                 content: "\f0d7";
86         }
87         &.list-tree-control-closed > .fa:before {
88                 content: "\f0da";
89         }
90 }
91
92
93 //
94 // Treeline Icons
95 //
96 .treeline-icon {
97         position: relative;
98         display: block;
99         float: left;
100         margin-top: -6px;
101         margin-bottom: -6px;
102         margin-right: 2px;
103         padding: 0;
104         height: 31px;
105         width: 16px;
106         white-space: nowrap;
107         overflow: hidden;
108         &:after,
109         &:before {
110                 position: absolute;
111                 content: '';
112                 left: 50%;
113         }
114         &:before {
115                 top: 0;
116                 height: 100%;
117                 width: 2px;
118                 margin-left: -1px;
119                 border-left: 1px dotted @tree-border;
120         }
121         &:after {
122                 border-top: 1px dotted @tree-border;
123                 height: 2px;
124                 width: 100%;
125                 top: 50%;
126                 margin-top: -1px;
127         }
128 }
129 .treeline-icon-jointop:before {
130         top: 50%;
131 }
132 .treeline-icon-joinbottom:before {
133         top: -50%;
134 }
135 .treeline-icon-line:after {
136         display: none;
137 }
138 .treeline-icon-blank {
139         display: none;
140 }
141 .treeline-icon-clear {
142         &:before,
143         &:after {
144                 display: none;
145         }
146 }
147
148 #typo3-pagetree #typo3-docheader div.buttonsright,
149 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader div.buttonsright {
150         margin-right: 3px;
151 }
152
153 body#typo3-alt-db-navframe-php div.c-notice {
154         border: 1px solid black;
155         margin-top: 5px;
156         margin-bottom: 10px;
157         padding: 5px 5px 5px 5px;
158         width: 95%;
159 }
160
161 /** CSS-based tree for Foldertree */
162 ul.list-tree-root {
163         li:last-child:before {
164                 background-color: #ececec;
165         }
166
167         &:before {
168                 border: 0;
169         }
170
171         > li:before {
172                 border: 0;
173         }
174
175         > li {
176                 border-left: 0;
177         }
178 }
179
180 // change background color for folder nav frame
181 body#ext-backend-Modules-FileSystemNavigationFrame-index-php ul.list-tree-root li:last-child:before {
182         background-color: #f5f5f5;
183 }
184
185 body#imp-exp-mod ul.list-tree-root {
186         > li:first-child {
187                 padding-left: 0;
188         }
189         ul li:last-child:before {
190                 background-color: #f1f1f1;
191         }
192 }
193
194 ul.flat-tree-root li:last-child:before {
195         background-color: #f1f1f1;
196 }
197
198 //
199 // Configuration trees, used in Admin Tools => Configuration
200 //
201
202 table.t3-tree-config {
203         background: #ececec;
204         background-image: linear-gradient(center top, #ffffff 0px, #ececec 100px);
205         border: 1px solid #adadad;
206         min-width: 500px;
207
208         .t3-tree-config-header {
209                 text-align: left;
210         }
211 }
212
213 //
214 // AJAX Page Tree
215 //
216
217 body#typo3-pagetree,
218 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
219         margin: 0;
220         padding: 0;
221 }
222
223 body#typo3-pagetree #typo3-inner-docbody {
224         padding: 0 0 10px 0;
225 }
226 body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
227         padding: 10px 0;
228 }
229
230 ul.tree {
231         line-height: 12px;
232         list-style: none;
233         clear: both;
234         margin: 16px 0 0 10px;
235         padding: 0;
236
237         a {
238                 text-decoration: none;
239         }
240
241         a.pm {
242                 cursor: pointer;
243         }
244
245         div.treeLinkItem {
246                 display: block;
247                 min-height: 16px;
248                 padding-right: 2px;
249         }
250
251         ul {
252                 padding: 0 0 0 19px;
253                 margin: 0;
254                 list-style: none;
255
256                 li {
257                         padding: 0;
258                         margin: 0;
259                         white-space: nowrap;
260                         list-style: none;
261                 }
262
263                 li.active  {
264                         div.treeLinkItem {
265                                 background-color: #fff;
266                                 boder: 1px solid #d7d7d7;
267                                 border-right: 0;
268                         }
269
270                         li div.treeLinkItem {
271                                 margin: 0;
272                                 background-color: transparent;
273                                 border-width: 0;
274
275                         }
276                 }
277
278                 li.expanded {
279                         ul {
280                                 background: transparent url('../../../../icons/gfx/ol/line.gif') left top repeat-y;
281                         }
282                 }
283         }
284 }
285
286
287
288 ul.tree ul li.last > ul {
289         background: none;
290 }
291
292
293 ul.tree li.active span a,
294 ul.tree ul li.active span a {
295         font-weight: bold;
296 }
297
298 ul.tree li.active ul span a,
299 ul.tree ul li.active ul span a {
300         font-weight: normal;
301 }
302
303 ul #pages0_0 > ul {
304         padding-left: 0;
305 }
306
307 //
308 // active tree items, we have to work against the border: 1px here,
309 // otherwise tree elements would take too much space
310 //
311
312 ul.tree li.active div.treeLinkItem {
313         margin: -1px 0 -1px -1px;
314 }
315
316 span.dragIcon {
317         display: inline-block;
318         height: 16px;
319 }
320
321 ul.tree div.treeLinkItem span.dragId,
322 ul.tree div.treeLinkItem span.dragTitle,
323 ul.tree div.treeLinkItem img {
324         vertical-align: middle;
325 }
326
327 ul.tree div.treeLinkItem span.dragIcon {
328         vertical-align: top;
329 }
330
331 #dragIcon {
332         position: absolute;
333         visibility: hidden;
334         z-index: 20;
335         filter: alpha(opacity=50);
336         opacity: 0.5;
337         white-space: nowrap;
338 }
339
340 #typo3-pagetree #typo3-docheader img {
341         margin: 2px;
342 }
343
344
345 //
346 // Tree
347 //
348
349 body#typo3-pagetree,
350 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
351         background: #ebebeb;
352 }
353
354 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
355 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row1,
356 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row2,
357 .typo3-pagetree-indicatorBar-item,
358 #typo3-pagetree-topPanelItems,
359 #typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
360 #typo3-pagetree-treeContainer,
361 #typo3-pagetree .x-panel-tbar,
362 #typo3-pagetree-deletionDropZone .x-panel-body {
363         background-position: right;
364         background-repeat: repeat-y;
365 }
366
367 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
368 #typo3-pagetree-treeContainer {
369         border-right: 1px solid @navigation-border;
370         background-color: @navigation-bg;
371 }