diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 277dce8..8887e7d 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -3,6 +3,7 @@ Sanic - Flexbox layout + @@ -140,7 +141,54 @@
- playlist controls +
diff --git a/static/flexbox/treeview.css b/static/flexbox/treeview.css new file mode 100644 index 0000000..6f052b6 --- /dev/null +++ b/static/flexbox/treeview.css @@ -0,0 +1,91 @@ +/* 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; +} diff --git a/static/img/expand-collapse.svg b/static/img/expand-collapse.svg new file mode 100644 index 0000000..f34809c --- /dev/null +++ b/static/img/expand-collapse.svg @@ -0,0 +1,7 @@ + + + + + + +