[BUGFIX] Use same height for tree bar as for the right module
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / component / _svgtree.scss
1 $svgColors: (
2 border: #d7d7d7,
3 lines: #ddd,
4 nodeSelectedBg: #fff,
5 nodeOverBg: #f2f2f2,
6 dragOverBg: #d7e4f1,
7 dragOverBorder: transparent,
8 dragAlertBg: #f6d3cf,
9 dragAlertBorder: #d66c68,
10 dragAboveBg: transparent,
11 dragAboveBorder: transparent,
12 dragBetweenBg: transparent,
13 dragBetweenBorder: transparent,
14 dragBelowBg: transparent,
15 dragBelowBorder: transparent,
16 dragTooltipBg: #d7e4f1,
17 dragTooltipAlertBg: #f6d3cf,
18 dragTooltipAlertBorder: #d66c68
19 );
20
21 .svg-tree {
22 position: relative;
23 }
24
25 .svg-tree-loader {
26 display: none;
27 position: absolute;
28 width: 100%;
29 height: 100%;
30 padding-top: 200px;
31 top: 0;
32 left: 0;
33 text-align: center;
34 background: rgba(0, 0, 0, 0.3);
35 z-index: 3000;
36
37 & > * {
38 position: absolute;
39 top: 0;
40 bottom: 0;
41 left: 0;
42 right: 0;
43 margin: auto;
44 }
45 }
46
47 .node-loader {
48 display: none;
49 position: absolute;
50 width: 100%;
51 height: 20px;
52 top: 0;
53 left: 0;
54 text-align: center;
55 background: rgba(0, 0, 0, 0.3);
56 z-index: 3000;
57
58 & > * {
59 position: absolute;
60 top: 0;
61 bottom: 0;
62 right: 10px;
63 margin: auto;
64 }
65 }
66
67 .svg-tree-wrapper {
68 position: relative;
69 overflow-y: scroll;
70
71 & > svg {
72 margin-top: 15px;
73 }
74
75 path.link {
76 fill: none;
77 shape-rendering: crispEdges;
78 stroke: map_get($svgColors, lines);
79 stroke-width: 1;
80 pointer-events: none;
81 }
82
83 .node {
84 &-bg {
85 fill: transparent;
86
87 &__border {
88 display: none;
89 pointer-events: none;
90 fill: #9eb2c5;
91 }
92
93 &.ver-element,
94 &.ver-versions,
95 &.ver-page {
96 fill: #f7c898 !important;
97 }
98 }
99
100 &-over:not(.node-selected) {
101 fill: map_get($svgColors, nodeOverBg);
102 stroke-width: 1px;
103 stroke: map_get($svgColors, border);
104 }
105
106 &-selected {
107 fill: map_get($svgColors, nodeSelectedBg);
108 stroke-width: 1px;
109 stroke: map_get($svgColors, border);
110 }
111 }
112
113 .nodes {
114 &-wrapper {
115 $b: '.nodes-wrapper';
116
117 cursor: pointer;
118
119 &--dragging {
120 cursor: -webkit-grabbing;
121
122 .node-over {
123 //it must be important because there is inline style in code that we must overwrite
124 fill: map_get($svgColors, dragOverBg) !important;
125 stroke-width: 1px;
126 stroke: map_get($svgColors, dragOverBorder);
127 }
128
129 .node-alert {
130 //it must be important because there is inline style in code that we must overwrite
131 fill: map_get($svgColors, dragAlertBg) !important;
132 stroke: map_get($svgColors, dragAlertBorder);
133 }
134
135 &#{$b}--nodrop {
136 .node-over {
137 //it must be important because there is inline style in code that we must overwrite
138 fill: map_get($svgColors, dragAlertBg) !important;
139 }
140 }
141
142 &#{$b}--ok-above {
143 .node-over {
144 //it must be important because there is inline style in code that we must overwrite
145 fill: map_get($svgColors, dragAboveBg) !important;
146 stroke: map_get($svgColors, dragAboveBorder);
147 }
148 }
149
150 &#{$b}--ok-between {
151 .node-over {
152 //it must be important because there is inline style in code that we must overwrite
153 fill: map_get($svgColors, dragBetweenBg) !important;
154 stroke: map_get($svgColors, dragBetweenBorder);
155 }
156 }
157
158 &#{$b}--ok-below {
159 .node-over {
160 //it must be important because there is inline style in code that we must overwrite
161 fill: map_get($svgColors, dragBelowBg) !important;
162 stroke: map_get($svgColors, dragBelowBorder);
163 }
164 }
165 }
166
167 &--nodrop {
168 cursor: no-drop;
169 }
170 }
171 }
172 }
173
174 //node drag & drop tooltip
175 .node-dd {
176 position: fixed;
177 display: none;
178 padding: 0;
179 margin: 0;
180 border: none;
181 background-color: map_get($svgColors, dragTooltipBg);
182 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
183 z-index: 9999;
184
185 &--nodrop {
186 background-color: map_get($svgColors, dragTooltipAlertBg);
187 border: 1px solid map_get($svgColors, dragTooltipAlertBorder);
188
189 & .node-dd__ctrl-icon {
190 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-place-denied.png);
191 }
192 }
193
194 &__text {
195 display: table;
196 vertical-align: middle;
197 opacity: 0.85;
198 padding: 5px 5px 5px 20px;
199 }
200
201 &--ok-below {
202 &.node-dd--copy .node-dd__ctrl-icon {
203 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-copy-below.png);
204 }
205
206 .node-dd__ctrl-icon {
207 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-below.png);
208 }
209 }
210
211 &--ok-between {
212 &.node-dd--copy .node-dd__ctrl-icon {
213 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-new-between.png);
214 }
215
216 .node-dd__ctrl-icon {
217 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-between.png);
218 }
219 }
220
221 &--ok-append {
222 &.node-dd--copy .node-dd__ctrl-icon {
223 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-new-inside.png);
224 }
225
226 .node-dd__ctrl-icon {
227 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-into.png);
228 }
229 }
230
231 &--ok-above {
232 &.node-dd--copy .node-dd__ctrl-icon {
233 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-copy-above.png);
234 }
235
236 .node-dd__ctrl-icon {
237 background-image: url(../../../../backend/Resources/Public/Images/pagetree-drag-move-above.png);
238 }
239 }
240
241 &__icon {
242 display: table-cell;
243 vertical-align: top;
244 padding-left: 3px;
245 padding-right: 3px;
246 }
247
248 &__name {
249 display: table-cell;
250 vertical-align: top;
251 }
252
253 &__ctrl-icon {
254 position: absolute;
255 top: 3px;
256 left: 3px;
257 display: block;
258 width: 16px;
259 height: 16px;
260 background-color: transparent;
261 background-position: center;
262 background-repeat: no-repeat;
263 z-index: 1;
264 }
265 }
266
267 .nodes-drop-zone {
268 rect {
269 fill: map_get($svgColors, dragAlertBorder);
270 cursor: -webkit-grabbing;
271 }
272
273 text {
274 pointer-events: none;
275 }
276 }
277
278 .node-edit {
279 position: absolute;
280 top: 0;
281 left: 0;
282 }
283
284 .svg-toolbar {
285 min-height: $module-docheader-height;
286 padding: 4px 10px 0;
287 border-bottom: 1px solid $module-docheader-border;
288 background-color: $module-docheader-bg;
289
290 &__btn {
291 padding: 0;
292 border: none;
293 background: transparent;
294
295 &:focus {
296 outline: none;
297 }
298 }
299
300 &__menu {
301 margin-bottom: 4px;
302
303 .x-btn {
304 &:not(:last-child) {
305 margin-right: 4px;
306 }
307
308 &:last-child {
309 float: right;
310 }
311 }
312 }
313
314 &__submenu {
315 margin: 0 -5px;
316
317 .search-input {
318 max-height: 26px;
319 }
320 }
321
322 &__submenu-item {
323 display: none;
324
325 &.active {
326 display: block;
327 }
328 }
329
330 &__drag-node {
331 display: inline-block;
332 cursor: move;
333 padding: 5px;
334 border: none;
335 background: 0 0;
336 font-size: 11px;
337 line-height: 16px;
338 }
339 }
340
341 .node-stop {
342 fill: map_get($svgColors, dragAlertBorder);
343 }
344
345 .node-mount-point {
346 display: table;
347 width: 100%;
348 max-width: 265px;
349 margin: 10px 10px 0;
350 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
351 border: 0;
352 background-color: #6daae0;
353 color: #fff;
354 padding: 11px;
355 border-radius: 2px;
356
357 &__icon {
358 display: table-cell;
359 width: 1%;
360
361 &[data-tree-icon=actions-close] {
362 cursor: pointer;
363 }
364 }
365
366 &__text {
367 display: table-cell;
368 padding-left: 10px;
369 padding-right: 10px;
370
371 & > div {
372 max-width: 185px;
373 overflow: hidden;
374 }
375 }
376 }