UNPKG

orgchart.js

Version:

organization chart plugin based on ES6

121 lines (101 loc) 2.05 kB
#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; }