diff options
Diffstat (limited to 'src/lib/Collapsible.svelte')
| -rw-r--r-- | src/lib/Collapsible.svelte | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte new file mode 100644 index 0000000..f3a28d2 --- /dev/null +++ b/src/lib/Collapsible.svelte @@ -0,0 +1,40 @@ +<!-- + @component + + Non-JS collapsible content. + --> + +<details> + <summary> + <slot name="title"> + <h2>Details</h2> + </slot> + </summary> + <div> + <slot /> + </div> +</details> + +<style> + summary > :global(*) { + display: inline; + } + summary { + cursor: pointer; + } + summary::marker { + content: ''; + } + summary::before { + /* the background image is an arrow pointing down */ + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTcuNSA0Ljc1bC03LjUgNy41LTcuNS03LjVMMSA2LjI1bDkgOSA5LTl6IiBmaWxsPSIjYWFhIi8+IDwvc3ZnPg==); + width: 20px; + height: 20px; + display: inline-block; + margin-right: 1em; + content: ''; + } + details[open] summary::before { + transform: rotate(180deg); + } +</style> |