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