92 lines
1.7 KiB
CSS
92 lines
1.7 KiB
CSS
|
/* https://iamkate.com/code/tree-views/ */
|
||
|
|
|
||
|
|
/* Custom properties */
|
||
|
|
|
||
|
|
.tree {
|
||
|
|
--spacing : 1.0rem;
|
||
|
|
--radius : 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Padding */
|
||
|
|
|
||
|
|
.tree li {
|
||
|
|
display : block;
|
||
|
|
position : relative;
|
||
|
|
padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree ul {
|
||
|
|
margin-left : calc(var(--radius) - var(--spacing));
|
||
|
|
padding-left : 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Vertical lines */
|
||
|
|
|
||
|
|
.tree ul li {
|
||
|
|
border-left : 2px solid #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree ul li:last-child {
|
||
|
|
border-color : transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Horizontal lines */
|
||
|
|
|
||
|
|
.tree ul li::before {
|
||
|
|
content : '';
|
||
|
|
display : block;
|
||
|
|
position : absolute;
|
||
|
|
top : calc(var(--spacing) / -2);
|
||
|
|
left : -2px;
|
||
|
|
width : calc(var(--spacing) + 2px);
|
||
|
|
height : calc(var(--spacing) + 1px);
|
||
|
|
border : solid #ddd;
|
||
|
|
border-width : 0 0 2px 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Summaries */
|
||
|
|
|
||
|
|
.tree summary {
|
||
|
|
display : block;
|
||
|
|
cursor : pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree summary::marker,
|
||
|
|
.tree summary::-webkit-details-marker {
|
||
|
|
display : none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree summary:focus {
|
||
|
|
outline : none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree summary:focus-visible {
|
||
|
|
outline : 1px dotted #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Markers */
|
||
|
|
|
||
|
|
.tree li::after,
|
||
|
|
.tree summary::before {
|
||
|
|
content : '';
|
||
|
|
display : block;
|
||
|
|
position : absolute;
|
||
|
|
top : calc(var(--spacing) / 2 - var(--radius));
|
||
|
|
left : calc(var(--spacing) - var(--radius) - 1px);
|
||
|
|
width : calc(2 * var(--radius));
|
||
|
|
height : calc(2 * var(--radius));
|
||
|
|
border-radius : 50%;
|
||
|
|
background : #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Expand and collapse buttons */
|
||
|
|
|
||
|
|
.tree summary::before {
|
||
|
|
z-index : 1;
|
||
|
|
background : #696 url('../img/expand-collapse.svg') 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree details[open] > summary::before {
|
||
|
|
background-position : calc(-2 * var(--radius)) 0;
|
||
|
|
}
|