[BUGFIX] Remove no longer used CSS
[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-path {
162 margin-left: -@tree-control-size;
163 }
164 > .list-tree-group {
165 > .list-tree-control {
166 margin-left: -@tree-control-size;
167 &:before {
168 background-color: transparent;
169 }
170 }
171 }
172 }
173 }
174 .list-tree-root-clean {
175 > li {
176 padding-left: 0;
177 }
178 }
179
180
181 //
182 // Tree Variations
183 //
184 [id=imp-exp-mod] {
185 .list-tree li:last-child:before,
186 .list-tree-control > .fa:before {
187 background-color: #f1f1f1;
188 }
189 }
190 [id=typo3-browse-links-php] {
191 .list-tree li:last-child:before,
192 .list-tree-control > .fa:before {
193 background-color: #ececec;
194 }
195 }
196 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] {
197 .list-tree li:last-child:before,
198 .list-tree-control > .fa:before {
199 background-color: #f5f5f5;
200 }
201 .module-body {
202 padding-left: 10px;
203 padding-right: 10px;
204 }
205 }
206 [id=ext-lowlevel-Modules-Configuration-index-php] {
207 .active {
208 > .list-tree-group {
209 display: inline-block;
210 color: @brand-danger;
211 }
212 }
213 }
214
215
216 //
217 // Treeline Icons
218 //
219 .treeline-icon {
220 position: relative;
221 display: block;
222 float: left;
223 margin-top: -6px;
224 margin-bottom: -6px;
225 margin-right: 2px;
226 padding: 0;
227 height: 31px;
228 width: 16px;
229 white-space: nowrap;
230 overflow: hidden;
231 &:after,
232 &:before {
233 position: absolute;
234 content: '';
235 left: 50%;
236 }
237 &:before {
238 top: 0;
239 height: 100%;
240 width: 2px;
241 margin-left: -1px;
242 border-left: 1px dotted @tree-border;
243 }
244 &:after {
245 border-top: 1px dotted @tree-border;
246 height: 2px;
247 width: 100%;
248 top: 50%;
249 margin-top: -1px;
250 }
251 }
252 .treeline-icon-jointop:before {
253 top: 50%;
254 }
255 .treeline-icon-joinbottom:before {
256 top: -50%;
257 }
258 .treeline-icon-line:after {
259 display: none;
260 }
261 .treeline-icon-blank {
262 display: none;
263 }
264 .treeline-icon-clear {
265 &:before,
266 &:after {
267 display: none;
268 }
269 }
270
271 #typo3-pagetree #typo3-docheader div.buttonsright {
272 margin-right: 3px;
273 }
274
275 body#typo3-alt-db-navframe-php div.c-notice {
276 border: 1px solid black;
277 margin-top: 5px;
278 margin-bottom: 10px;
279 padding: 5px 5px 5px 5px;
280 width: 95%;
281 }
282
283
284 //
285 // AJAX Page Tree
286 //
287
288 body#typo3-pagetree {
289 margin: 0;
290 padding: 0;
291 }
292
293 #typo3-pagetree #typo3-inner-docbody {
294 padding: 10px 0;
295 }
296
297 span.dragIcon {
298 display: inline-block;
299 height: 16px;
300 }
301
302 #dragIcon {
303 position: absolute;
304 visibility: hidden;
305 z-index: 20;
306 filter: alpha(opacity=50);
307 opacity: 0.5;
308 white-space: nowrap;
309 }
310
311 //
312 // Tree
313 //
314 #typo3-pagetree-deletionDropZone .x-panel-body {
315 background-position: right;
316 background-repeat: repeat-y;
317 }
318 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
319 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
320 [id=typo3-pagetree-treeContainer] {
321 background-color: @navigation-bg;
322 height: 100%;
323 }
324 [id=typo3-pagetree-tree] {
325 height: 100%;
326 .x-panel-body {
327 height: 100% !important;
328 }
329 }
330 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
331 padding-left: 10px;
332 padding-right: 10px;
333 }
334
335 .x-layout-split {
336 width: 1px;
337 background-color: @navigation-border;
338 }