mirror of
https://github.com/frappe/books.git
synced 2024-09-20 19:29:02 +00:00
9878055ddf
- Make a basecomponent to encapsulate bootstrapping of WC - Remove old tree.js - Refactor Tree Components into JS and HTML
58 lines
1.0 KiB
HTML
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> |