Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 16960 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16825 efrain 1 
/*
2 
 * jQuery OrgChart Plugin
3 
 * https://github.com/dabeng/OrgChart
4 
 *
5 
 * Copyright 2016, dabeng
6 
 * https://github.com/dabeng
7 
 *
8 
 * Licensed under the MIT license:
9 
 * http://www.opensource.org/licenses/MIT
10 
 */
11 
 
12 
 /* chart styles */
13 
.orgchart {
14 
  box-sizing: border-box;
15 
  display: inline-block;
16 
  -webkit-touch-callout: none;
17 
  -webkit-user-select: none;
18 
  -khtml-user-select: none;
19 
  -moz-user-select: none;
20 
  -ms-user-select: none;
21 
  user-select: none;
22 
  background-image: linear-gradient(to top, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
23 
  linear-gradient(to right, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
24 
  linear-gradient(to bottom, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
25 
  linear-gradient(to left, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%);
26 
  background-size: 10px 10px; /* background square size */
27 
  padding: 20px 20px 0 20px;
28 
  /* border: 0.5px solid rgba(200, 0, 0, 0.15); */
29 
}
30 
 
31 
.orgchart .hidden, .orgchart~.hidden {
32 
  display: none!important;
33 
}
34 
 
35 
.orgchart.b2t {
36 
  transform: rotate(180deg);
37 
}
38 
 
39 
.orgchart.l2r {
40 
  position: absolute;
41 
  transform: rotate(-90deg) rotateY(180deg);
42 
  transform-origin: left top;
43 
  text-align: center;
44 
}
45 
 
46 
.orgchart.r2l {
47 
  position: absolute;
48 
  transform: rotate(90deg);
49 
  transform-origin: left top;
50 
  text-align: center;
51 
}
52 
 
53 
.orgchart ~ .mask {
54 
  position: absolute;
55 
  top: 0;
56 
  right: 0;
57 
  bottom: 0;
58 
  left: 0;
59 
  z-index: 999;
60 
  text-align: center;
61 
  background-color: rgba(0,0,0,0.3);
62 
}
63 
 
64 
.orgchart ~ .mask .spinner {
65 
  position: absolute;
66 
  top: calc(50% - 50px);
67 
  left: calc(50% - 50px);
68 
}
69 
 
70 
.orgchart > .spinner::before,
71 
.orgchart ~ .mask .spinner::before {
72 
  width: 100px;
73 
  height: 100px;
74 
  border-width: 10px;
75 
  border-radius: 50px;
76 
  border-top-color: rgba(68, 157, 68, 0.8);
77 
  border-bottom-color: rgba(68, 157, 68, 0.8);
78 
  border-left-color: rgba(68, 157, 68, 0.8);
79 
}
80 
 
81 
.orgchart .nodes {
82 
  display: flex;
83 
  list-style: none;
84 
  padding-left: 0;
85 
  margin: 0;
86 
}
87 
 
88 
.orgchart .hierarchy {
89 
  position: relative;
90 
}
91 
 
92 
/* styles of link lines */
93 
.orgchart .hierarchy::before {
94 
  content: "";
95 
  position: absolute;
96 
  top: -11px; /* -(background square size + half width of line) */
97 
  left: 0;
98 
  width: 100%;
99 
  border-top: 2px solid rgba(217, 83, 79, 0.8);
100 
  box-sizing: border-box;
101 
}
102 
 
103 
.orgchart .hierarchy:first-child::before,
104 
.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
105 
  left: calc(50% - 1px);
106 
  width: calc(50% + 1px);
107 
}
108 
 
109 
.orgchart .hierarchy:last-child::before,
110 
.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before {
111 
  width: calc(50% + 1px);
112 
}
113 
 
114 
.orgchart .hierarchy:not(.hidden):only-child::before {
115 
  width: 2px;
116 
}
117 
 
118 
.orgchart > .nodes > .hierarchy::before,
119 
.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,
120 
.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,
121 
.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,
122 
.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
123 
.orgchart .isCollapsedSibling::before,
124 
.orgchart .isCollapsedSibling .hierarchy::before,
125 
.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
126 
.orgchart .isCollapsedDescendant::before,
127 
.orgchart .isCollapsedDescendant > .node::before,
128 
.orgchart .isCollapsedDescendant > .node::after,
129 
.orgchart .isAncestorsCollapsed:only-child::before,
130 
.orgchart .isAncestorsCollapsed > .node::before {
131 
  content: none;
132 
}
133 
 
134 
/* excluding leaf node */
135 
.orgchart .node:not(:only-child)::after {
136 
  content: "";
137 
  position: absolute;
138 
  bottom: -12px; /* -(background square size + node's border width) */
139 
  left: calc(50% - 1px);
140 
  width: 2px;
141 
  height: 10px; /* background square size */
142 
  background-color: rgba(217, 83, 79, 0.8);
143 
}
144 
 
145 
.orgchart ul li .node.allowedDrop {
146 
  border-color: rgba(68, 157, 68, 0.9);
147 
}
148 
.orgchart ul li .node.currentDropTarget {
149 
  background-color: rgba(68, 157, 68, 0.9);
150 
}
151 
.orgchart ul li .node.selected {
152 
  background-color: rgba(238, 217, 54, 0.5);
153 
}
154 
.orgchart ul li .node:hover {
155 
  background-color: rgba(238, 217, 54, 0.5);
156 
}
157 
/* excluding root node */
158 
.orgchart > ul > li > ul li > .node::before {
159 
  content: "";
160 
  position: absolute;
161 
  top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
162 
  left: calc(50% - 1px);
163 
  width: 2px;
164 
  height: var(--height, 10px); /* fallback value = background square size */
165 
  background-color: rgba(217, 83, 79, 0.8);
166 
}
167 
 
168 
.orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
169 
  top: var(--top-cross-point, -12px);
170 
  height: var(--height-cross-point, 10px);
171 
}
172 
 
173 
/* node styling */
174 
.orgchart .node {
175 
  box-sizing: border-box;
176 
  display: inline-block;
177 
  position: relative;
178 
  margin: 0 0 20px 0;
179 
  padding: 3px;
180 
  border: 2px dashed transparent;
181 
  text-align: center;
182 
}
183 
 
184 
.orgchart.l2r .node, .orgchart.r2l .node {
185 
  width: 50px;
186 
  height: 140px;
187 
}
188 
 
189 
.orgchart .node:hover {
190 
  background-color: rgba(238, 217, 54, 0.5);
191 
  transition: .5s;
192 
  cursor: default;
193 
  z-index: 20;
194 
}
195 
 
196 
.orgchart .node.focused {
197 
  background-color: rgba(238, 217, 54, 0.5);
198 
}
199 
 
200 
.orgchart .ghost-node {
201 
  position: fixed;
202 
  left: -10000px;
203 
  top: -10000px;
204 
}
205 
 
206 
.orgchart .ghost-node rect {
207 
  fill: #ffffff;
208 
  stroke: #bf0000;
209 
}
210 
 
211 
.orgchart .node.allowedDrop {
212 
  border-color: rgba(68, 157, 68, 0.9);
213 
}
214 
 
215 
.orgchart .node > .spinner {
216 
  position: absolute;
217 
  top: calc(50% - 1rem);
218 
  left: calc(50% - 1rem);
219 
}
220 
 
221 
.orgchart .node > .spinner::before {
222 
  width: 2rem;
223 
  height: 2rem;
224 
  border-width: 0.2rem;
225 
  border-radius: 1rem;
226 
  border-top-color: rgba(68, 157, 68, 0.8);
227 
  border-bottom-color: rgba(68, 157, 68, 0.8);
228 
  border-left-color: rgba(68, 157, 68, 0.8);
229 
}
230 
 
231 
.orgchart .node .title {
232 
  box-sizing: border-box;
233 
  width: 130px;
234 
  text-align: center;
235 
  font-size: 12px;
236 
  font-weight: bold;
237 
  height: 20px;
238 
  line-height: 20px;
239 
  overflow: hidden;
240 
  text-overflow: ellipsis;
241 
  white-space: nowrap;
242 
  background-color: rgba(217, 83, 79, 0.8);
243 
  color: #fff;
244 
  border-radius: 4px 4px 0 0;
245 
}
246 
 
247 
.orgchart.b2t .node .title {
248 
  transform: rotate(-180deg);
249 
  transform-origin: center bottom;
250 
}
251 
 
252 
.orgchart.l2r .node .title {
253 
  transform: rotate(-90deg) translate(-45px, -45px) rotateY(180deg);
254 
  transform-origin: bottom center;
255 
}
256 
 
257 
.orgchart.r2l .node .title {
258 
  transform: rotate(-90deg) translate(-45px, -45px);
259 
  transform-origin: bottom center;
260 
}
261 
 
262 
.orgchart .node .title .parentNodeSymbol {
263 
  float: left;
264 
}
265 
 
266 
.orgchart .node .title .parentNodeSymbol::before {
267 
  color: #fff;
268 
}
269 
 
270 
.orgchart .node .title .parentNodeSymbol::after {
271 
  background-color: #fff;
272 
}
273 
 
274 
.orgchart .node .content {
275 
  box-sizing: border-box;
276 
  height: 20px;
277 
  line-height: 20px;
278 
  font-size: 10px;
279 
  border: 1px solid rgba(217, 83, 79, 0.8);
280 
  border-width: 0 1px 1px 1px;
281 
  border-radius: 0 0 0.25rem 0.25rem;
282 
  text-align: center;
283 
  background-color: #fff;
284 
  color: #333;
285 
  text-overflow: ellipsis;
286 
  white-space: nowrap;
287 
}
288 
 
289 
.orgchart.b2t .node .content {
290 
  transform: rotate(180deg);
291 
  transform-origin: center top;
292 
}
293 
 
294 
.orgchart.l2r .node .content {
295 
  transform: rotate(-90deg) translate(-45px, -45px) rotateY(180deg);
296 
  transform-origin: top center;
297 
  width: 130px;
298 
}
299 
 
300 
.orgchart.r2l .node .content {
301 
  transform: rotate(-90deg) translate(-45px, -45px);
302 
  transform-origin: top center;
303 
  width: 130px;
304 
}
305 
 
306 
.orgchart .node .edge {
307 
  position: absolute;
308 
  cursor: default;
309 
  transition: .2s;
310 
}
311 
 
312 
.orgchart .node .edge::before {
313 
  border-color: rgba(68, 157, 68, 0.5);
314 
}
315 
 
316 
.orgchart.noncollapsable .node .edge {
317 
  display: none;
318 
}
319 
 
320 
.orgchart .node .edge:hover {
321 
  cursor: pointer;
322 
}
323 
 
324 
.orgchart .edge:hover::before {
325 
  border-color: #449d44;
326 
}
327 
 
328 
.orgchart .node .verticalEdge {
329 
  width: calc(100% - 6px); /* node top half's width */
330 
  height: 10px; /* background square's size */
331 
  left: 3px; /* node's padding value */
332 
}
333 
 
334 
.orgchart .node .verticalEdge::before {
335 
  position: absolute;
336 
  left: calc(50% - 5px); /* 50% width of node - half width of up arrow icon) */
337 
}
338 
 
339 
.orgchart .node .topEdge {
340 
  top: -2px;
341 
}
342 
 
343 
.orgchart .node .topEdge.oci-chevron-up::before {
344 
  top: 2px;
345 
}
346 
 
347 
.orgchart .node .topEdge.oci-chevron-down::before {
348 
  bottom: 3px;
349 
}
350 
 
351 
.orgchart .node .bottomEdge {
352 
  bottom: -2px; /* -(node's border-width) */
353 
}
354 
 
355 
.orgchart .node .bottomEdge.oci-chevron-up::before {
356 
  bottom: -3px;
357 
}
358 
 
359 
.orgchart .node .bottomEdge.oci-chevron-down::before {
360 
  bottom: 1px;
361 
}
362 
 
363 
.orgchart .node .horizontalEdge {
364 
  width: 10px;
365 
  height: calc(100% - 6px);
366 
  top: 3px; /* node's padding */
367 
}
368 
 
369 
.orgchart .node .rightEdge {
370 
  right: -2px;
371 
}
372 
 
373 
.orgchart .node .leftEdge {
374 
  left: -2px;
375 
}
376 
 
377 
.orgchart .node .horizontalEdge::before {
378 
  position: absolute;
379 
  top: calc(50% - 5px);
380 
}
381 
 
382 
.orgchart .node .leftEdge.oci-chevron-right::before {
383 
  left: -3px;
384 
}
385 
 
386 
.orgchart .node .leftEdge.oci-chevron-left::before {
387 
  left: 1px;
388 
}
389 
 
390 
.orgchart .node .rightEdge.oci-chevron-left::before {
391 
  right: -3px;
392 
}
393 
 
394 
.orgchart .node .rightEdge.oci-chevron-right::before {
395 
  right: 1px;
396 
}
397 
 
398 
.orgchart .node .toggleBtn {
399 
  position: absolute;
400 
  left: -2px; /* -(border width of node) */
401 
  bottom: -2px;
402 
  width: 16px;
403 
  height: 16px;
404 
}
405 
 
406 
.orgchart .node .toggleBtn::before {
407 
  background-color: rgba(68, 157, 68, 0.6);
408 
  position: absolute;
409 
  left: 0;
410 
  bottom: 0;
411 
}
412 
 
413 
.orgchart .node .toggleBtn:hover::before {
414 
  background-color: #449d44;
415 
}
416 
 
417 
.oc-export-btn {
418 
  margin-left: 0.5rem;
419 
  padding: 0.5rem 1rem;
420 
}
421 
 
422 
.orgchart .node {
423 
  transition: transform 0.3s, opacity 0.3s;
424 
}
425 
 
426 
.orgchart .slide-down {
427 
  opacity: 0;
428 
  transform: translateY(40px);
429 
}
430 
 
431 
.orgchart.l2r .node.slide-down, .orgchart.r2l .node.slide-down {
432 
  transform: translateY(130px);
433 
}
434 
 
435 
.orgchart .slide-up {
436 
  opacity: 0;
437 
  transform: translateY(-40px);
438 
}
439 
 
440 
.orgchart.l2r .node.slide-up, .orgchart.r2l .node.slide-up {
441 
  transform: translateY(-130px);
442 
}
443 
 
444 
.orgchart .slide-right {
445 
  opacity: 0;
446 
  transform: translateX(130px);
447 
}
448 
 
449 
.orgchart.l2r .node.slide-right, .orgchart.r2l .node.slide-right {
450 
  transform: translateX(40px);
451 
}
452 
 
453 
.orgchart .slide-left {
454 
  opacity: 0;
455 
  transform: translateX(-130px);
456 
}
457 
 
458 
.orgchart.l2r .node.slide-left, .orgchart.r2l .node.slide-left {
459 
  transform: translateX(-40px);
460 
}
461 
 
462 
/* styles for vertical nodes */
463 
 
464 
.orgchart .nodes.vertical {
465 
  display: block;
466 
  padding-left: 10px; /* width of background square*/
467 
}
468 
 
469 
.orgchart .nodes.vertical .nodes {
470 
  list-style: none;
471 
  display: block;
472 
  margin: 0;
473 
  padding-left: 10px; /* width of background square*/
474 
  text-align: left;
475 
}
476 
 
477 
.orgchart .nodes.vertical .node {
478 
  margin-bottom: 0;
479 
}
480 
 
481 
.orgchart .nodes.vertical .node::before,
482 
.orgchart .nodes.vertical .node::after {
483 
  content: none;
484 
}
485 
 
486 
.orgchart .nodes.vertical .hierarchy {
487 
  position: relative;
488 
  text-align: left;
489 
}
490 
 
491 
.orgchart .nodes.vertical .hierarchy::before,
492 
.orgchart .nodes.vertical .hierarchy::after {
493 
  box-sizing: border-box;
494 
  content: '';
495 
  position: absolute;
496 
  left: -6px; /* -(background square size + half width of line */
497 
  border-color: rgba(217, 83, 79, 0.8);
498 
  border-style: solid;
499 
  border-width: 0 0 2px 2px;
500 
}
501 
 
502 
.orgchart .nodes.vertical .hierarchy::before {
503 
  top: 0px;
504 
  height: 26px; /* node top half's height(25px) + half width of line */
505 
  width: 11px; /* background square size + half width of line */
506 
}
507 
 
508 
.orgchart .nodes.vertical .hierarchy::after {
509 
  bottom: 0;
510 
  height: calc(100% - 24px); /* height of hierarchy - (node top half's height(25px) - half width of line) */
511 
}
512 
 
513 
.orgchart .nodes.vertical .hierarchy:last-child::after {
514 
  border-width: 2px 0 0 0;
515 
}
516 
 
517 
.orgchart .nodes.vertical > .hierarchy:first-child::before {
518 
  box-sizing: border-box;
519 
  top: -11px; /* -(background square size + half width of line) */
520 
  height: 35px; /* node top half's height + node padding + node border width + background square size */
521 
  width: calc(50% + 2px);
522 
  border-width: 2px 0 0 2px;
523 
}
524 
 
525 
.orgchart .nodes.vertical > .hierarchy:first-child::after {
526 
  box-sizing: border-box;
527 
  top: 24px; /* node bottom half's height(25px) - half border width of line */
528 
  width: 11px; /* backgroud square size + half border width of line */
529 
  border-width: 2px 0 0 2px;
530 
}
531 
 
532 
.orgchart .nodes.vertical > .hierarchy:first-child:last-child::after {
533 
  border-width: 2px 0 0 0;
534 
}
535 
 
536 
/* custom icons for orgchart */
537 
.oci {
538 
  display: inline-block;
539 
  position: relative;
540 
  font-style: normal;
541 
  font-family: Arial;
542 
}
543 
 
544 
.oci-menu::before {
545 
  content: "≡";
546 
  display: inline-block;
547 
  width: 1rem;
548 
  height: 1rem;
549 
  text-align: center;
550 
  line-height: 1rem;
551 
  color: #000;
552 
  font-size: 1rem;
553 
}
554 
 
555 
.oci-chevron-up::before {
556 
  content: "";
557 
  box-sizing: border-box;
558 
  width: 10px;
559 
  height: 10px;
560 
  display: inline-block;
561 
  border: 3px solid #000;
562 
  transform: rotate(45deg);
563 
  border-right: unset;
564 
  border-bottom: unset;
565 
}
566 
 
567 
.oci-chevron-down::before {
568 
  content: "";
569 
  box-sizing: border-box;
570 
  width: 10px;
571 
  height: 10px;
572 
  display: inline-block;
573 
  border: 3px solid #000;
574 
  transform: rotate(45deg);
575 
  border-top: unset;
576 
  border-left: unset;
577 
}
578 
 
579 
.oci-chevron-left::before {
580 
  content: "";
581 
  box-sizing: border-box;
582 
  width: 10px;
583 
  height: 10px;
584 
  display: inline-block;
585 
  border: 3px solid #000;
586 
  transform: rotate(45deg);
587 
  border-top: unset;
588 
  border-right: unset;
589 
}
590 
 
591 
.oci-chevron-right::before {
592 
  content: "";
593 
  box-sizing: border-box;
594 
  width: 10px;
595 
  height: 10px;
596 
  display: inline-block;
597 
  border: 3px solid #000;
598 
  transform: rotate(45deg);
599 
  border-left: unset;
600 
  border-bottom: unset;
601 
}
602 
 
603 
.oci-plus-square::before {
604 
  content: "ï¹¢";
605 
  display: inline-block;
606 
  width: 16px;
607 
  height: 16px;
608 
  text-align: center;
609 
  line-height: 16px;
610 
  background-color: #000;
611 
  color: #fff;
612 
  font-weight: bold;
613 
}
614 
 
615 
.oci-minus-square::before {
616 
  content: "ï¹£";
617 
  display: inline-block;
618 
  width: 16px;
619 
  height: 16px;
620 
  text-align: center;
621 
  line-height: 16px;
622 
  background-color: #000;
623 
  color: #fff;
624 
  font-weight: bold;
625 
}
626 
 
627 
.oci-arrow-square-up::before {
628 
  content: "⬆";
629 
  display: inline-block;
630 
  width: 1rem;
631 
  height: 1rem;
632 
  text-align: center;
633 
  line-height: 1rem;
634 
  background-color: #000;
635 
  color: #fff;
636 
  font-weight: bold;
637 
}
638 
 
639 
.oci-arrow-square-down::before {
640 
  content: "⬇";
641 
  display: inline-block;
642 
  width: 1rem;
643 
  height: 1rem;
644 
  text-align: center;
645 
  line-height: 1rem;
646 
  background-color: #000;
647 
  color: #fff;
648 
  font-weight: bold;
649 
}
650 
 
651 
.oci-info-circle::before {
652 
  content: "i";
653 
  display: inline-block;
654 
  width: 1rem;
655 
  height: 1rem;
656 
  border-radius: 0.5rem;
657 
  background-color: #000;
658 
  color: #fff;
659 
  text-align: center;
660 
  font-weight: bold;
661 
}
662 
 
663 
.oci-spinner::before {
664 
  content: "";
665 
  vertical-align: text-bottom;
666 
  display: inline-block;
667 
  box-sizing: border-box;
668 
  width: 1rem;
669 
  height: 1rem;
670 
  border: 0.1rem solid #000;
671 
  border-right-color: transparent;
672 
  border-radius: 0.625rem;
673 
  animation: oci-infinite-spinning .75s linear infinite;
674 
}
675 
 
676 
@keyframes oci-infinite-spinning {
677 
  from {
678 
    transform: rotate(0deg);
679 
  }
680 
  to {
681 
    transform: rotate(360deg);
682 
  }
683 
}