Proyectos de Subversion LeadersLinked - Backend

Rev

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