File size: 909 Bytes
0ad74ed |
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 |
<script lang="ts">
import Lightbulb from "$lib/components/icons/Lightbulb.svelte";
export let summary: string;
export let content: string;
let open = false;
</script>
<div class="container">
<button class="summary" class:open on:click={() => (open = !open)}
><span><Lightbulb /></span>{summary}</button
>
{#if open}
<div class="detail">{@html content}</div>
{/if}
</div>
<style>
.container {
border-left: 3px solid rgb(9, 105, 218);
margin-bottom: 1.5rem;
padding: 0.25rem 1.25rem;
}
.summary {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.75rem;
color: #374151;
cursor: pointer;
display: flex;
align-items: center;
color: rgb(9, 105, 218);
}
.detail {
margin-top: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
color: #374151;
text-align: justify;
}
span {
color: rgb(9, 105, 218);
margin-left: -3px;
margin-right: 0.75rem;
}
</style>
|