You are here

orgchart-layout.css in Organigrams 8.2

.orgchart {
  display: block;
}

.orgchart,
.orgchart ul,
.orgchart ul.nodeassists {
  padding: 0;
  margin: 0;
}

.orgchart ul {
  display: flex;
}

.orgchart li,
.orgchart .item-list li {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 0 auto;
  padding: 0;
}

.orgchart .nodeassists > li {
  flex: 0 0 50%;
  margin-bottom: 20px;
}

.orgchart .nodeassists > li:nth-child(even)::after {
  width: 100%;
  display: block;
}

.orgchart .nodecontent {
  align-self: center;
  position: relative;
  margin: 20px 5px;
}

.orgchart .nodeassists .leaf .nodecontent {
  margin-bottom: 0;
}

.orgchart .collapsed > ul {
  display: none;
}

.orgchart ul.vertical::before,
.orgchart li::before,
.orgchart li::after,
.orgchart .nodecontent::after,
.orgchart .nodecontent::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  border: 0px solid #CCCCCC;
}

.orgchart li:not(:only-child)::before {
  border-top-width: 2px;
  width: 100%;
  height: 20px;
  top: 0px;
}

/* top left radius */
.orgchart li:first-child::before,
.orgchart .nodeassists > li:nth-child(odd)::before,
.orgchart ul.vertical > li:first-child::before {
  border-left-width: 2px;
  border-top-left-radius: 7px;
  width: calc(50% + 1px);
  right: 0;
}

/* top right radius */
.orgchart li:last-child::before,
.orgchart .nodeassists > li:nth-child(even)::before {
  width: calc(50% + 1px);
  border-right-width: 2px;
  border-top-right-radius: 7px;
}

.orgchart .nodecontent::after,
.orgchart .nodecontent::before {
  border-left-width: 2px;
  width: 2px;
  height: 20px;
  left: calc(50% - 1px);
}

.orgchart .nodecontent::before {
  top: -20px;
}

.orgchart .nodecontent::after {
  bottom: -20px;
}

.orgchart li:first-child:not(:only-child) > .nodecontent::before,
.orgchart li:last-child:not(:only-child) > .nodecontent::before {
  border-left-width: 0px;
}

.orgchart .nodeassists > li:nth-child(odd)::after {
  border-right-width: 2px;
  height: calc(100% + 20px);
  top: 0;
  right: -1px;
}

.orgchart .nodeassists > li > .nodecontent::before {
  top: -20px;
  border-left-width: 0;
}

.orgchart .nodeassists > li > .nodecontent::after {
  bottom: -20px;
}

.orgchart .leaf > .nodecontent::after,
.orgchart .root > .nodecontent::before,
.orgchart .collapsed > .nodecontent::after,
.orgchart .dummy .nodecontent,
.orgchart .dummy::before,
.orgchart .dummy::after {
  display: none;
}

.orgchart ul.vertical {
  flex-direction: column;
  align-items: center;
  margin: 0 2px;
  position: relative;
}

.orgchart ul.vertical::before {
  top: -8px;
  left: calc(50% - 9px);
  height: 10px;
  width: 10px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-bottom-right-radius: 7px;
}

.orgchart ul.vertical > li > .nodecontent {
  margin: 10px 0 0 10px;
}

.orgchart ul.vertical > li::before {
  border-width: 0 0 0 2px;
  left: 0px;
  height: 100%;
  width: 10px;
  border-radius: 0;
}

.orgchart ul.vertical > li:first-child::before {
  height: calc(100% + 2px);
  width: calc(50% - 7px);
  border-top-width: 2px;
}

.orgchart ul.vertical > li:last-child::before {
  height: calc(50% + 6px);
  border-bottom-width: 2px;
  border-bottom-left-radius: 7px;
}

.orgchart ul.vertical > li > .nodecontent::before {
  height: 2px;
  width: 8px;
  top: calc(50% - 1px);
  left: -8px;
  border-width: 2px 0 0 0;
}

.orgchart ul.vertical > li:first-child > .nodecontent {
  margin-top: 20px;
}

.orgchart ul.vertical > li:last-child > .nodecontent::before {
  display: none;
}

File

css/orgchart-layout.css
View source
  1. .orgchart {
  2. display: block;
  3. }
  4. .orgchart,
  5. .orgchart ul,
  6. .orgchart ul.nodeassists {
  7. padding: 0;
  8. margin: 0;
  9. }
  10. .orgchart ul {
  11. display: flex;
  12. }
  13. .orgchart li,
  14. .orgchart .item-list li {
  15. display: flex;
  16. flex-direction: column;
  17. position: relative;
  18. flex: 1 0 auto;
  19. padding: 0;
  20. }
  21. .orgchart .nodeassists > li {
  22. flex: 0 0 50%;
  23. margin-bottom: 20px;
  24. }
  25. .orgchart .nodeassists > li:nth-child(even)::after {
  26. width: 100%;
  27. display: block;
  28. }
  29. .orgchart .nodecontent {
  30. align-self: center;
  31. position: relative;
  32. margin: 20px 5px;
  33. }
  34. .orgchart .nodeassists .leaf .nodecontent {
  35. margin-bottom: 0;
  36. }
  37. .orgchart .collapsed > ul {
  38. display: none;
  39. }
  40. .orgchart ul.vertical::before,
  41. .orgchart li::before,
  42. .orgchart li::after,
  43. .orgchart .nodecontent::after,
  44. .orgchart .nodecontent::before {
  45. box-sizing: border-box;
  46. content: '';
  47. position: absolute;
  48. border: 0px solid #CCCCCC;
  49. }
  50. .orgchart li:not(:only-child)::before {
  51. border-top-width: 2px;
  52. width: 100%;
  53. height: 20px;
  54. top: 0px;
  55. }
  56. /* top left radius */
  57. .orgchart li:first-child::before,
  58. .orgchart .nodeassists > li:nth-child(odd)::before,
  59. .orgchart ul.vertical > li:first-child::before {
  60. border-left-width: 2px;
  61. border-top-left-radius: 7px;
  62. width: calc(50% + 1px);
  63. right: 0;
  64. }
  65. /* top right radius */
  66. .orgchart li:last-child::before,
  67. .orgchart .nodeassists > li:nth-child(even)::before {
  68. width: calc(50% + 1px);
  69. border-right-width: 2px;
  70. border-top-right-radius: 7px;
  71. }
  72. .orgchart .nodecontent::after,
  73. .orgchart .nodecontent::before {
  74. border-left-width: 2px;
  75. width: 2px;
  76. height: 20px;
  77. left: calc(50% - 1px);
  78. }
  79. .orgchart .nodecontent::before {
  80. top: -20px;
  81. }
  82. .orgchart .nodecontent::after {
  83. bottom: -20px;
  84. }
  85. .orgchart li:first-child:not(:only-child) > .nodecontent::before,
  86. .orgchart li:last-child:not(:only-child) > .nodecontent::before {
  87. border-left-width: 0px;
  88. }
  89. .orgchart .nodeassists > li:nth-child(odd)::after {
  90. border-right-width: 2px;
  91. height: calc(100% + 20px);
  92. top: 0;
  93. right: -1px;
  94. }
  95. .orgchart .nodeassists > li > .nodecontent::before {
  96. top: -20px;
  97. border-left-width: 0;
  98. }
  99. .orgchart .nodeassists > li > .nodecontent::after {
  100. bottom: -20px;
  101. }
  102. .orgchart .leaf > .nodecontent::after,
  103. .orgchart .root > .nodecontent::before,
  104. .orgchart .collapsed > .nodecontent::after,
  105. .orgchart .dummy .nodecontent,
  106. .orgchart .dummy::before,
  107. .orgchart .dummy::after {
  108. display: none;
  109. }
  110. .orgchart ul.vertical {
  111. flex-direction: column;
  112. align-items: center;
  113. margin: 0 2px;
  114. position: relative;
  115. }
  116. .orgchart ul.vertical::before {
  117. top: -8px;
  118. left: calc(50% - 9px);
  119. height: 10px;
  120. width: 10px;
  121. border-bottom-width: 2px;
  122. border-right-width: 2px;
  123. border-bottom-right-radius: 7px;
  124. }
  125. .orgchart ul.vertical > li > .nodecontent {
  126. margin: 10px 0 0 10px;
  127. }
  128. .orgchart ul.vertical > li::before {
  129. border-width: 0 0 0 2px;
  130. left: 0px;
  131. height: 100%;
  132. width: 10px;
  133. border-radius: 0;
  134. }
  135. .orgchart ul.vertical > li:first-child::before {
  136. height: calc(100% + 2px);
  137. width: calc(50% - 7px);
  138. border-top-width: 2px;
  139. }
  140. .orgchart ul.vertical > li:last-child::before {
  141. height: calc(50% + 6px);
  142. border-bottom-width: 2px;
  143. border-bottom-left-radius: 7px;
  144. }
  145. .orgchart ul.vertical > li > .nodecontent::before {
  146. height: 2px;
  147. width: 8px;
  148. top: calc(50% - 1px);
  149. left: -8px;
  150. border-width: 2px 0 0 0;
  151. }
  152. .orgchart ul.vertical > li:first-child > .nodecontent {
  153. margin-top: 20px;
  154. }
  155. .orgchart ul.vertical > li:last-child > .nodecontent::before {
  156. display: none;
  157. }