mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-03 10:53:31 +02:00
Code Issues Releases Wiki Activity

Add support for expandable file tree with details

Browse Source
This commit is contained in:
Mu-An Chiou
2020-04-26 23:07:20 -04:00
parent 6f56cce053
commit c258457c9e
2 changed files with 63 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/index.html.ejs
View File

@@ -586,6 +586,10 @@
(no class needed on these). This will provide them with a nice dotted (no class needed on these). This will provide them with a nice dotted
border and indentation to illustrate the structure of the tree. border and indentation to illustrate the structure of the tree.
</p> </p>
<p>
To create expandable sections, wrap child lists inside of
<code>details</code> elements.
</p>
<%- example(` <%- example(`
<ul class="tree-view"> <ul class="tree-view">
@@ -600,10 +604,33 @@
</ul> </ul>
</li> </li>
<li> <li>
JavaScript <details open>
<ul> <summary>JavaScript</summary>
<li>Avoid at all costs</li> <ul>
</ul> <li>Avoid at all costs</li>
<li>
<details>
<summary>Unless</summary>
<ul>
<li>Avoid</li>
<li>
<details>
<summary>At</summary>
<ul>
<li>Avoid</li>
<li>At</li>
<li>All</li>
<li>Cost</li>
</ul>
</details>
</li>
<li>All</li>
<li>Cost</li>
</ul>
</details>
</li>
</ul>
</details>
</li> </li>
<li>HTML</li> <li>HTML</li>
<li>Special Thanks</li> <li>Special Thanks</li>

32
style.css
View File

@@ -490,6 +490,38 @@ ul.tree-view ul > li:last-child::after {
background: var(--button-highlight); background: var(--button-highlight);
} }
ul.tree-view details {
margin-top: 0;
}
ul.tree-view details[open] summary {
margin-bottom: 0;
}
ul.tree-view ul details > summary:before {
margin-left: -22px;
position: relative;
z-index: 1;
}
ul.tree-view details > summary:before {
text-align: center;
display: block;
float: left;
content: '+';
border: 1px solid #808080;
width: 8px;
height: 9px;
line-height: 9px;
margin-right: 5px;
padding-left: 1px;
background-color: #fff;
}
ul.tree-view details[open] > summary:before {
content: '-'
}
pre { pre {
display: block; display: block;
background: var(--button-highlight); background: var(--button-highlight);