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