[TASK] Replace treeline GFX icons with CSS icons
[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
149 table#typo3-tree {
150 margin: 10px 0 20px 10px;
151 width: 95%;
152 vertical-align: middle;
153
154 tr {
155 td {
156 padding: 0;
157
158 img {
159 vertical-align: middle;
160 &.c-recIcon {
161 margin-right: 1px;
162 }
163 }
164 }
165 }
166
167 a {
168 text-decoration: none;
169 }
170
171 }
172
173 p.c-refresh img {
174 margin-right: 7px;
175 vertical-align: middle;
176 }
177
178 #typo3-pagetree #typo3-docheader div.buttonsright,
179 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader div.buttonsright {
180 margin-right: 3px;
181 }
182
183 body#typo3-alt-db-navframe-php div.c-notice {
184 border: 1px solid black;
185 margin-top: 5px;
186 margin-bottom: 10px;
187 padding: 5px 5px 5px 5px;
188 width: 95%;
189 }
190
191 /** CSS-based tree for Foldertree */
192 ul#treeRoot {
193 li:last-child:before {
194 background-color: #ececec;
195 }
196
197 &:before {
198 border: 0;
199 }
200
201 > li:before {
202 border: 0;
203 }
204
205 > li {
206 border-left: 0;
207 }
208 }
209
210 // change background color for folder nav frame
211 body#ext-backend-Modules-FileSystemNavigationFrame-index-php ul#treeRoot li:last-child:before {
212 background-color: #f5f5f5;
213 }
214
215 body#imp-exp-mod ul#treeRoot {
216 > li:first-child {
217 padding-left: 0;
218 }
219 ul li:last-child:before {
220 background-color: #f1f1f1;
221 }
222 }
223
224 ul#flatTreeRoot {
225 li:last-child:before {
226 background-color: #f1f1f1;
227 }
228 }
229
230 //
231 // Configuration trees, used in Admin Tools => Configuration
232 //
233
234 table.t3-tree-config {
235 background: #ececec;
236 background-image: linear-gradient(center top, #ffffff 0px, #ececec 100px);
237 border: 1px solid #adadad;
238 min-width: 500px;
239
240 .t3-tree-config-header {
241 text-align: left;
242 }
243 }
244
245 //
246 // AJAX Page Tree
247 //
248
249 body#typo3-pagetree,
250 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
251 margin: 0;
252 padding: 0;
253 }
254
255 body#typo3-pagetree #typo3-inner-docbody {
256 padding: 0 0 10px 0;
257 }
258 body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
259 padding: 10px 0;
260 }
261
262 ul.tree {
263 line-height: 12px;
264 list-style: none;
265 clear: both;
266 margin: 16px 0 0 10px;
267 padding: 0;
268
269 a {
270 text-decoration: none;
271 }
272
273 a.pm {
274 cursor: pointer;
275 }
276
277 div.treeLinkItem {
278 display: block;
279 min-height: 16px;
280 padding-right: 2px;
281 }
282
283 ul {
284 padding: 0 0 0 19px;
285 margin: 0;
286 list-style: none;
287
288 li {
289 padding: 0;
290 margin: 0;
291 white-space: nowrap;
292 list-style: none;
293 }
294
295 li.active {
296 div.treeLinkItem {
297 background-color: #fff;
298 boder: 1px solid #d7d7d7;
299 border-right: 0;
300 }
301
302 li div.treeLinkItem {
303 margin: 0;
304 background-color: transparent;
305 border-width: 0;
306
307 }
308 }
309
310 li.expanded {
311 ul {
312 background: transparent url('../../../../icons/gfx/ol/line.gif') left top repeat-y;
313 }
314 }
315 }
316 }
317
318
319
320 ul.tree ul li.last > ul {
321 background: none;
322 }
323
324
325 ul.tree li.active span a,
326 ul.tree ul li.active span a {
327 font-weight: bold;
328 }
329
330 ul.tree li.active ul span a,
331 ul.tree ul li.active ul span a {
332 font-weight: normal;
333 }
334
335 ul #pages0_0 > ul {
336 padding-left: 0;
337 }
338
339 //
340 // active tree items, we have to work against the border: 1px here,
341 // otherwise tree elements would take too much space
342 //
343
344 ul.tree li.active div.treeLinkItem {
345 margin: -1px 0 -1px -1px;
346 }
347
348 span.dragIcon {
349 display: inline-block;
350 height: 16px;
351 }
352
353 ul.tree div.treeLinkItem span.dragId,
354 ul.tree div.treeLinkItem span.dragTitle,
355 ul.tree div.treeLinkItem img {
356 vertical-align: middle;
357 }
358
359 ul.tree div.treeLinkItem span.dragIcon {
360 vertical-align: top;
361 }
362 #dragIcon {
363 position: absolute;
364 visibility: hidden;
365 z-index: 20;
366 }
367
368 #treeFilterBox {
369 background: url('../../../../icons/gfx/filter_bg.gif') 0 -2px no-repeat;
370 background-color: #dadada;
371 display: none;
372 height: 25px;
373 position: absolute;
374 top: 49px;
375 left: 0;
376 right: 0;
377 width: auto;
378 z-index: 3;
379 }
380
381 #searchBubble {
382 padding-left: 10px;
383 }
384
385 #treeFilter {
386 margin: 6px 0 0 17px !important;
387 height: 16px;
388 width: 160px;
389 }
390
391 #treeFilterReset {
392 position: absolute;
393 top: 5px;
394 left: 192px;
395 border: 0;
396 cursor: pointer;
397 visibility: hidden;
398 }
399
400 #typo3-pagetree #typo3-docheader img {
401 margin: 2px;
402 }
403
404
405 //
406 // Tree
407 //
408
409 body#typo3-pagetree,
410 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
411 background: #ebebeb;
412 }
413
414 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
415 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row1,
416 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row2,
417 .typo3-pagetree-indicatorBar-item,
418 #typo3-pagetree-topPanelItems,
419 #typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
420 #typo3-pagetree-treeContainer,
421 #typo3-pagetree .x-panel-tbar,
422 #typo3-pagetree-deletionDropZone .x-panel-body {
423 background-position: right;
424 background-repeat: repeat-y;
425 }
426
427 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
428 #typo3-pagetree-treeContainer {
429 border-right: 1px solid @navigation-border;
430 background-color: @navigation-bg;
431 }
432
433 table#typo3-tree tr:hover {
434 background-color: #d7dbe2;
435 }
436
437 //
438 // AJAX Page Tree
439 //
440
441 #dragIcon {
442 filter: alpha(opacity=50);
443 opacity: 0.5;
444 white-space: nowrap;
445 }
446
447 #treeFilter {
448 background: transparent;
449 border: 0;
450 }
451
452 #tree-toolbar-filter-item {
453 display: inline-block;
454 height: 22px;
455 width: 20px;
456 }
457
458 #tree-toolbar-filter-item.active {
459 background-image: url("../../../../icons/gfx/toolbar_item_active_bg.png")
460 }