blob: 751a1b1caf072c379bb20e3771ed0350ab34fe30 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!--
@component
Collapsible content that works without JS but is enhanced by it.
-->
<script lang="ts">
import { browser } from '$app/env'
let open: boolean
export let id: string | undefined = undefined
function checkHash() {
if (id && id === location.hash.slice(1)) {
open = true
}
}
if (browser) checkHash()
</script>
<svelte:window on:hashchange={checkHash} />
<details bind:open {id}>
<summary>
<slot name="title">
<h2>Details</h2>
</slot>
</summary>
<div>
<!--
We do this so images and other things inside the content are not
loaded until it's open.
For some reason browsers don't handle this, although they should.
-->
<noscript>
<slot />
</noscript>
{#if open}
<slot />
{/if}
</div>
</details>
<style>
summary > :global(*) {
display: inline;
}
summary {
cursor: pointer;
list-style: none;
}
summary::marker,
summary::-webkit-details-marker {
content: '';
display: none;
}
summary:focus {
outline: none;
box-shadow: 0 0 0 2pt #06e7;
border-radius: 0.1em;
width: fit-content;
padding-right: 0.2em;
}
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>
|
