mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-01 11:30:22 +02:00
Code Issues Releases Wiki Activity

Merge pull request #69 from muan/details

Browse Source 
Add support for expandable tree view
This commit is contained in:
Jordan Scales
2020-04-27 10:11:41 -04:00
committed by GitHub
parent bfdd0ec54d e4d19f431e
commit 68decebfec
3 changed files with 67 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs.css
View File

@@ -102,6 +102,10 @@ summary {
display: inline;
}
summary::-webkit-details-marker {
display: none;
}
details[open] summary {
margin-bottom: 8px;
}

35
docs/index.html.ejs
View File

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

32
style.css
View File

@@ -488,6 +488,38 @@ ul.tree-view ul > li:last-child::after {
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 {
display: block;
background: var(--button-highlight);