101 lines
1.8 KiB
CSS
101 lines
1.8 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::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) - 22px);
|
||
|
|
left : -2px;
|
||
|
|
width : calc(var(--spacing) + 2px);
|
||
|
|
height : calc(var(--spacing) - 2px);
|
||
|
|
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 : '\1F4C1';
|
||
|
|
display : block;
|
||
|
|
position : absolute;
|
||
|
|
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));
|
||
|
|
}u
|
||
|
|
|
||
|
|
/* Expand and collapse buttons */
|
||
|
|
|
||
|
|
.tree summary::before {
|
||
|
|
z-index: 1;
|
||
|
|
content: '\1F4C1';
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree details[open] > summary::before {
|
||
|
|
content: '\1F4C2';
|
||
|
|
}
|