2
0
mirror of https://github.com/frappe/books.git synced 2024-12-25 12:10:06 +00:00
books/client/components/tree/treeNode.html
Faris Ansari 9878055ddf More functionality to Tree Component
- Make a basecomponent to encapsulate bootstrapping of WC
- Remove old tree.js
- Refactor Tree Components into JS and HTML
2018-04-12 02:04:45 +05:30

58 lines
1.0 KiB
HTML

<!-- styles -->
<style>
:host {
display: block;
}
.tree-node {
display: flex;
align-items: center;
}
.tree-node:hover {
background-color: gray;
background-color: var(--tree-node-hover);
cursor: pointer;
}
.tree-node:hover .tree-node-actions {
display: block;
}
.tree-node-content {
display: flex;
align-items: center;
}
.tree-node-actions {
display: none;
margin-left: 2rem;
}
.tree-node-icon {
width: 2rem;
height: 2rem;
}
.tree-node-icon svg {
padding: 0.5rem;
}
.tree-node-children {
padding-left: 2rem;
}
</style>
<!-- template -->
<div class="tree-node">
<div class="tree-node-content">
<div class="tree-node-icon"></div>
<div class="tree-node-label"></div>
</div>
<div class="tree-node-actions">
<slot name="actions"></slot>
</div>
</div>
<div class="tree-node-children">
<slot></slot>
</div>