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