995a384d46
* tree refactor * [tree] Tree as the only class * [tree] style tweaks * [ui-tree] remove frappe.call, add async handler * [minor] add way to add raw elements to sidebar * [ui-tree] cleanups * [ui-tree] default icon-set
111 lines
No EOL
1.6 KiB
Text
111 lines
No EOL
1.6 KiB
Text
@import "variables.less";
|
|
|
|
.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 .node-parent {
|
|
color: @text-muted;
|
|
font-size: 14px;
|
|
width: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tree-link .node-leaf {
|
|
color: @text-extra-muted;
|
|
}
|
|
|
|
.tree-link .node-parent, .tree-link .node-leaf {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.tree-link.active {
|
|
i {
|
|
color: @indicator-blue;
|
|
}
|
|
|
|
a {
|
|
color: @text-muted;
|
|
}
|
|
}
|
|
|
|
.tree-hover {
|
|
background-color: @panel-bg;
|
|
min-height: 20px;
|
|
border: 1px solid @border-color;
|
|
}
|
|
|
|
.tree-node-toolbar {
|
|
display: inline-block;
|
|
padding: 0px 5px;
|
|
margin-left: 15px;
|
|
margin-bottom: -4px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
@media (max-width: @screen-xs) {
|
|
ul.tree-children {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
// decoration
|
|
// .tree, .tree-node {
|
|
.tree.with-skeleton, .tree.with-skeleton .tree-node {
|
|
position: relative;
|
|
|
|
&.opened::before, &:last-child::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 8px;
|
|
height: ~"calc(100% - 26px)";
|
|
width: 1px;
|
|
background: @border-color;
|
|
z-index: -1;
|
|
}
|
|
|
|
&:last-child::after {
|
|
top: 11px;
|
|
left: -13px;
|
|
height: ~"calc(100% - 15px)";
|
|
width: 3px;
|
|
background: #fff;
|
|
}
|
|
|
|
&.opened > .tree-children > .tree-node > .tree-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 1px;
|
|
top: 10px;
|
|
left: -11px;
|
|
z-index: -1;
|
|
background: @border-color;
|
|
}
|
|
}
|
|
|
|
.tree.with-skeleton.opened::before {
|
|
left: 23px;
|
|
top: 33px;
|
|
height: ~"calc(100% - 67px)";
|
|
}
|
|
|
|
.tree-link.active ~ .balance-area {
|
|
color: @text-color !important;
|
|
} |