diff options
| author | mat <github@matdoes.dev> | 2022-02-20 21:38:14 -0600 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-20 21:38:14 -0600 |
| commit | 13e5974114f759bae73f3bfd68c62ce9cfaf785e (patch) | |
| tree | 8a196b27b8d4dece1dc2187332422a4e41423dfa /src/lib/Collapsible.svelte | |
| parent | 582409e7cb1598b65bee6d1023b77620bb3791af (diff) | |
| download | skyblock-stats-13e5974114f759bae73f3bfd68c62ce9cfaf785e.tar.gz skyblock-stats-13e5974114f759bae73f3bfd68c62ce9cfaf785e.tar.bz2 skyblock-stats-13e5974114f759bae73f3bfd68c62ce9cfaf785e.zip | |
add more stuff to profile and fix bugs
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> |