blob: 867117d195d8154792888569a59f9e28e423ded5 (
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
|
<!--
@component
Non-JS collapsible content.
-->
<script lang="ts">
let open: boolean
</script>
<details bind:open>
<summary>
<slot name="title">
<h2>Details</h2>
</slot>
</summary>
<div>
<!--
We do this so images inside the content are not loaded until it's
open. The browser (only tested on FF) doesn't handle this, although
it probably should.
-->
<noscript>
<slot />
</noscript>
{#if open}
<slot />
{/if}
</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>
|
