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