64 lines
1.1 KiB
Svelte
64 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
export let hide = false;
|
|
let hidden = true;
|
|
</script>
|
|
|
|
<section class="labelborder" class:hide class:hidden>
|
|
<header
|
|
on:click={() => {
|
|
if (hide) {
|
|
hidden = !hidden;
|
|
}
|
|
}}
|
|
on:keydown={(ev) => {
|
|
if (["Space", "Enter"].includes(ev.key) && hide) hidden = !hidden;
|
|
}}
|
|
>
|
|
<slot name="header-full">
|
|
<h3><slot name="header" /></h3>
|
|
</slot>
|
|
</header>
|
|
<div class="content">
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
|
|
<style lang="scss">
|
|
section.labelborder {
|
|
margin-top: 0.66rem;
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
|
|
border-bottom: 1px solid var(--foreground);
|
|
padding-bottom: 0.33rem;
|
|
margin-bottom: 0.33rem;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.hide {
|
|
header {
|
|
cursor: pointer;
|
|
}
|
|
|
|
transition: opacity 0.2s ease-in-out;
|
|
&.hidden {
|
|
opacity: 0.66;
|
|
|
|
header {
|
|
border-bottom-width: 0.5px;
|
|
}
|
|
|
|
.content {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|