56 lines
865 B
SCSS
56 lines
865 B
SCSS
|
@use "sass:color";
|
||
|
|
@use "../variables" as *;
|
||
|
|
|
||
|
|
$selection-border-width: 2px;
|
||
|
|
|
||
|
|
div.tree {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
grid-column: left / left;
|
||
|
|
grid-row: upper / upper;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: 2px solid $color-dark;
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#controls {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2%;
|
||
|
|
right: 2%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div.tree ul {
|
||
|
|
width: 80%;
|
||
|
|
margin-left: 10%;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: stretch;
|
||
|
|
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.tree li {
|
||
|
|
display: inline;
|
||
|
|
margin-left: 0;
|
||
|
|
margin-bottom: 0.4rem;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
|
||
|
|
user-select: none;
|
||
|
|
list-style: none;
|
||
|
|
line-height: 1em;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: color.change($color-light, $alpha: 0.08);
|
||
|
|
border: $selection-border-width solid color.change($color-light, $alpha:0.3);
|
||
|
|
}
|
||
|
|
&.selected {
|
||
|
|
background: color.change($color-light, $alpha: 0.2);
|
||
|
|
}
|
||
|
|
}
|