summaryrefslogtreecommitdiff
path: root/src/components/CollapsableContent.svelte
blob: e75fbf17584ac3cc03c9d1f2cc0b1463c4358b99 (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
<script lang="ts">
    import ChevronDown from '~/sf-symbols/chevron.down.svg';
</script>

<details>
    <summary>
        <slot name="summary" />
        <ChevronDown />
    </summary>

    <slot />
</details>

<style>
    details[open] summary {
        display: none;
    }

    summary {
        list-style: none;
        cursor: pointer;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    summary :global(svg) {
        overflow: visible;
        width: 14px;
        fill: var(--systemTertiary);
        position: relative;
        top: 3px;
        left: 2px;
    }
</style>