[TASK] Unify layout of tables in submodules
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / typo3 / _element_tree.scss
1 //
2 // Variables
3 //
4 $navigation-text: #000;
5 $navigation-bg: $gray-lighter;
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.t3js-contextmenutrigger {
375 margin-right: 4px;
376 }