106 lines
2.1 KiB
SCSS
106 lines
2.1 KiB
SCSS
tree-viewport {
|
|
height: calc(100vh - 165px);
|
|
& > div {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
tree-node-expander {
|
|
|
|
& .toggle-children {
|
|
&:before {
|
|
@extend .material-icons;
|
|
content: 'add';
|
|
}
|
|
top: 2px;
|
|
@extend .blue;
|
|
background: white;
|
|
background-image: none;
|
|
color: $blue-green;
|
|
padding-left:3px;
|
|
}
|
|
}
|
|
.toggle-children-wrapper {
|
|
padding: 0px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
tree-node-expander .toggle-children-wrapper-expanded {
|
|
& .toggle-children {
|
|
&:before {
|
|
@extend .material-icons;
|
|
content: 'remove';
|
|
}
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.node-content-wrapper {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 16px;
|
|
margin: 0px 14px;
|
|
}
|
|
|
|
.node-wrapper {
|
|
padding: 4px 0px;
|
|
}
|
|
|
|
.node-drop-slot {
|
|
height: 0px;
|
|
}
|
|
|
|
.node-content-wrapper, .tree-children {
|
|
position: relative;
|
|
}
|
|
|
|
.node-content-wrapper::before, .tree-children::after {
|
|
content: "";
|
|
position: absolute;
|
|
}
|
|
|
|
.node-content-wrapper-active, .node-content-wrapper.node-content-wrapper-active:hover, .node-content-wrapper-active.node-content-wrapper-focused {
|
|
background-color: $blue;
|
|
& >tree-node-content{
|
|
color:white;
|
|
& >span >svg-icon{
|
|
@extend .white;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* START Children branch lines*/
|
|
.node-content-wrapper::before {
|
|
border-bottom: 1px dotted $blue-green;
|
|
border-left: 1px dotted $blue-green;
|
|
height: 28px;
|
|
top: -17px;
|
|
width: 20px;
|
|
left: -28px;
|
|
}
|
|
|
|
.tree-node-level-1 > tree-node-wrapper > .node-wrapper > .node-content-wrapper::before {
|
|
display: none;
|
|
}
|
|
|
|
.tree-node-leaf > .node-wrapper > .node-content-wrapper::before {
|
|
width: 25px;
|
|
}
|
|
|
|
.tree-children::after {
|
|
border-left: 1px dotted $blue-green;
|
|
|
|
height: 100%;
|
|
top: -15px;
|
|
left: -15px;
|
|
}
|
|
|
|
tree-node:last-child > .tree-node > .tree-children::after {
|
|
border-left: none;
|
|
}
|
|
|
|
.toggle-children {
|
|
z-index: 1;
|
|
}
|
|
|
|
/* END children branch lines */
|