orgchart.js
Version:
organization chart plugin based on ES6
121 lines (101 loc) • 2.05 kB
CSS
#chart-container {
background-color: #eee;
height: 300px;
}
.orgchart {
background: #fff;
}
.orgchart.view-state .edge {
display: none;
}
.orgchart .node {
width: 150px;
}
.orgchart .node .title .symbol {
margin-top: 1px;
}
#edit-panel {
position: relative;
left: 10px;
width: calc(100% - 40px);
border-radius: 4px;
float: left;
margin-top: 10px;
padding: 10px;
color: #fff;
background-color: #449d44;
}
#edit-panel .btn-inputs {
font-size: 24px;
}
#edit-panel.view-state>:not(#chart-state-panel) {
display: none;
}
#edit-panel label {
font-weight: bold;
}
#edit-panel.edit-parent-node .selected-node-group{
display: none;
}
#chart-state-panel, #selected-node, #btn-remove-input {
margin-right: 20px;
}
#edit-panel button {
color: #333;
background-color: #fff;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
#edit-panel.edit-parent-node button:not(#btn-add-nodes) {
display: none;
}
#edit-panel button:hover,.edit-panel button:focus,.edit-panel button:active {
border-color: #eea236;
box-shadow: 0 0 10px #eea236;
}
#new-nodelist {
display: inline-block;
list-style:none;
margin-top: -2px;
padding: 0;
vertical-align: text-top;
}
#new-nodelist>* {
padding-bottom: 4px;
}
.btn-inputs {
vertical-align: sub;
}
#edit-panel.edit-parent-node .btn-inputs {
display: none;
}
.btn-inputs:hover {
text-shadow: 0 0 4px #fff;
}
.radio-panel input[type='radio'] {
display: inline-block;
height: 24px;
width: 24px;
vertical-align: top;
}
#edit-panel.view-state .radio-panel input[type='radio']+label {
vertical-align: -webkit-baseline-middle;
}
#btn-add-nodes {
margin-left: 20px;
}