diff --git a/static/flexbox/treeview.css b/static/flexbox/treeview.css index 6f052b6..30a7c54 100644 --- a/static/flexbox/treeview.css +++ b/static/flexbox/treeview.css @@ -32,14 +32,25 @@ /* Horizontal lines */ +.tree ul::before { + content : ''; + display : block; + position : absolute; + top : calc(var(--spacing) - 8px); + left : 6px; + width : calc(var(--spacing) + 2px); + border : solid #ddd; + border-width : 0 0 2px 2px; +} + .tree ul li::before { content : ''; display : block; position : absolute; - top : calc(var(--spacing) / -2); + top : calc(var(--spacing) - 22px); left : -2px; width : calc(var(--spacing) + 2px); - height : calc(var(--spacing) + 1px); + height : calc(var(--spacing) - 2px); border : solid #ddd; border-width : 0 0 2px 2px; } @@ -68,24 +79,22 @@ .tree li::after, .tree summary::before { - content : ''; + content : '\1F4C1'; display : block; position : absolute; - top : calc(var(--spacing) / 2 - var(--radius)); + top : calc(var(--spacing) / 1.5 - var(--radius)); left : calc(var(--spacing) - var(--radius) - 1px); width : calc(2 * var(--radius)); height : calc(2 * var(--radius)); - border-radius : 50%; - background : #ddd; -} +}u /* Expand and collapse buttons */ .tree summary::before { - z-index : 1; - background : #696 url('../img/expand-collapse.svg') 0 0; + z-index: 1; + content: '\1F4C1'; } .tree details[open] > summary::before { - background-position : calc(-2 * var(--radius)) 0; + content: '\1F4C2'; }