efb4d2f3fd0ec8a6a7d4a9d2081f0780ab9140e3
[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     float: right;
112     margin-left: $tree-intendation-space;
113 }
114
115 .list-tree-control {
116     @include user-select(none);
117
118     position: relative;
119     display: block;
120     float: left;
121     margin-top: ceil($tree-line-height / 2) - ceil($tree-control-size / 2);
122     margin-left: -($tree-indentation + ceil($tree-control-size / 2));
123     text-align: center;
124     line-height: $tree-control-size;
125     width: $tree-control-size;
126     height: $tree-control-size;
127
128     &:before {
129         content: '';
130         position: absolute;
131         top: 50%;
132         left: 50%;
133         margin-top: ceil(-($tree-control-icon-size / 2));
134         margin-left: ceil(-($tree-control-icon-size / 2));
135         width: $tree-control-icon-size;
136         height: $tree-control-icon-size;
137     }
138
139     &:active,
140     &:focus,
141     &:hover {
142         outline: none;
143         text-decoration: none;
144     }
145
146     > .fa {
147         display: inline-block;
148         text-align: center;
149         cursor: pointer;
150
151         &:before {
152             width: $tree-control-icon-size;
153             height: $tree-control-icon-size;
154             background-color: $tree-bg;
155             display: block;
156         }
157     }
158
159     &.list-tree-control-open > .fa:before {
160         content: "\f0d7";
161     }
162
163     &.list-tree-control-closed > .fa:before {
164         content: "\f0da";
165     }
166 }
167
168 .list-tree-root {
169     margin-left: 0;
170
171     &:before {
172         display: none;
173     }
174
175     > li {
176         padding-left: $tree-control-size;
177
178         &:before {
179             display: none;
180         }
181
182         &.list-tree-path {
183             margin-left: -$tree-control-size;
184         }
185
186         > .list-tree-group {
187             > .list-tree-control {
188                 margin-left: -$tree-control-size;
189
190                 &:before {
191                     background-color: transparent;
192                 }
193             }
194         }
195     }
196 }
197
198 .list-tree-root-clean {
199     > li {
200         padding-left: 0;
201     }
202 }
203
204 //
205 // Tree Variations
206 //
207 [id=imp-exp-mod] {
208     .list-tree li:last-child:before,
209     .list-tree-control > .fa:before {
210         background-color: #f1f1f1;
211     }
212 }
213
214 [id=typo3-browse-links-php] {
215     .list-tree li:last-child:before,
216     .list-tree-control > .fa:before {
217         background-color: #ececec;
218     }
219 }
220
221 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] {
222     .list-tree li:last-child:before,
223     .list-tree-control > .fa:before {
224         background-color: #f5f5f5;
225     }
226
227     .module-body {
228         padding-left: 10px;
229         padding-right: 10px;
230     }
231 }
232
233 [id=ext-lowlevel-Modules-Configuration-index-php] {
234     .active {
235         > .list-tree-group {
236             display: inline-block;
237             color: $brand-danger;
238         }
239     }
240 }
241
242 //
243 // Treeline Icons
244 //
245 .treeline-icon {
246     position: relative;
247     display: block;
248     float: left;
249     margin-top: -6px;
250     margin-bottom: -6px;
251     margin-right: 2px;
252     padding: 0;
253     height: 31px;
254     width: 16px;
255     white-space: nowrap;
256     overflow: hidden;
257
258     &:after,
259     &:before {
260         position: absolute;
261         content: '';
262         left: 50%;
263     }
264
265     &:before {
266         top: 0;
267         height: 100%;
268         width: 2px;
269         margin-left: -1px;
270         border-left: 1px dotted $tree-border;
271     }
272
273     &:after {
274         border-top: 1px dotted $tree-border;
275         height: 2px;
276         width: 100%;
277         top: 50%;
278         margin-top: -1px;
279     }
280 }
281
282 .treeline-icon-jointop:before {
283     top: 50%;
284 }
285
286 .treeline-icon-joinbottom:before {
287     top: -50%;
288 }
289
290 .treeline-icon-line:after {
291     display: none;
292 }
293
294 .treeline-icon-blank {
295     display: none;
296 }
297
298 .treeline-icon-clear {
299     &:before,
300     &:after {
301         display: none;
302     }
303 }
304
305 #typo3-pagetree #typo3-docheader div.buttonsright {
306     margin-right: 3px;
307 }
308
309 body#typo3-alt-db-navframe-php div.c-notice {
310     border: 1px solid black;
311     margin-top: 5px;
312     margin-bottom: 10px;
313     padding: 5px;
314     width: 95%;
315 }
316
317 //
318 // AJAX Page Tree
319 //
320 body#typo3-pagetree {
321     margin: 0;
322     padding: 0;
323 }
324
325 #typo3-pagetree #typo3-inner-docbody {
326     padding: 10px 0;
327 }
328
329 span.dragIcon {
330     display: inline-block;
331     height: 16px;
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 //
344 // Tree
345 //
346 #typo3-pagetree-deletionDropZone .x-panel-body {
347     background-position: right;
348     background-repeat: repeat-y;
349 }
350
351 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
352 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
353 [id=typo3-pagetree-treeContainer] {
354     background-color: $navigation-bg;
355     height: 100%;
356 }
357
358 [id=typo3-pagetree-tree] {
359     height: 100%;
360
361     .x-panel-body {
362         height: 100% !important;
363     }
364 }
365
366 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
367     padding-left: 10px;
368     padding-right: 10px;
369 }
370
371 .x-layout-split {
372     width: 1px;
373     background-color: $navigation-border;
374 }