.organization-tree { padding: 5px; .tree-node-closer-container { position: relative; // border: 1px dotted grey; // border-width: 0 0 1px 1px; .tree-node-closer-top { width: 15px; height: 40px; position: absolute; border: 1px dotted grey; border-width: 0 0 1px 1px; top: -40px; left: 20px; } .tree-node-closer-bottom { width: 15px; height: 40px; position: absolute; border: 1px dotted grey; border-width: 0 0 1px 1px; top: 0px; left: 20px; } .tree-node-closer-bottom[expanded] { border-width: 0 0 1px 0px; } .tree-node-closer-bottom[lastNode] { border-width: 0 0 1px 0px; } } li { margin-top: 0; margin-bottom: 0; list-style-type: none; } // li:last-child { // border-left: 1px solid white; // margin-left: -41px; // } .tree-has-child { height: 40px; min-height: 40px; li { display: flex; align-items: center; cursor: pointer; width: 100%; .tree-node-body { .tree-node-expand-btn { background-color: white; } } } } .tree-no-child { height: 40px; min-height: 40px; font-size: 13px; li { display: flex; align-items: center; width: 100%; height: 100%; cursor: pointer; .tree-node-body { padding-left: 40px; } } } }