74 lines
1.3 KiB
CSS
74 lines
1.3 KiB
CSS
.tree {
|
|
padding: 15px;
|
|
}
|
|
.tree li {
|
|
list-style: none;
|
|
margin: 2px 0px;
|
|
}
|
|
ul.tree-children {
|
|
padding-left: 20px;
|
|
}
|
|
.tree-link {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding: 1px;
|
|
}
|
|
.tree-link.active i {
|
|
color: #5e64ff !important;
|
|
}
|
|
.tree-hover {
|
|
background-color: #F7FAFC;
|
|
min-height: 20px;
|
|
border: 1px solid #d1d8dd;
|
|
}
|
|
.tree-node-toolbar {
|
|
display: inline-block;
|
|
padding: 0px 5px;
|
|
margin-left: 15px;
|
|
margin-bottom: -4px;
|
|
margin-top: -8px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
ul.tree-children {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
.tree,
|
|
.tree-node {
|
|
position: relative;
|
|
}
|
|
.tree.opened::before,
|
|
.tree-node.opened::before,
|
|
.tree:last-child::after,
|
|
.tree-node:last-child::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 17px;
|
|
left: 8px;
|
|
height: calc(100% - 26px);
|
|
width: 1px;
|
|
background: #d1d8dd;
|
|
}
|
|
.tree:last-child::after,
|
|
.tree-node:last-child::after {
|
|
top: 11px;
|
|
left: -13px;
|
|
height: calc(100% - 15px);
|
|
width: 3px;
|
|
background: #fff;
|
|
}
|
|
.tree.opened > .tree-children > .tree-node > .tree-link::before,
|
|
.tree-node.opened > .tree-children > .tree-node > .tree-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 1px;
|
|
top: 10px;
|
|
left: -11px;
|
|
background: #d1d8dd;
|
|
}
|
|
.tree.opened::before {
|
|
left: 23px;
|
|
top: 33px;
|
|
height: calc(100% - 67px);
|
|
}
|