refactor(webui): LabelBorder uses Svelte transitions, tidy CSS
This commit is contained in:
parent
405f9e9886
commit
9df708ba11
1 changed files with 21 additions and 23 deletions
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
export let hide = false;
|
||||
let hidden = true;
|
||||
</script>
|
||||
|
@ -6,28 +8,33 @@
|
|||
<section class="labelborder" class:hide class:hidden>
|
||||
<header
|
||||
on:click={() => {
|
||||
if (hide) {
|
||||
hidden = !hidden;
|
||||
}
|
||||
if (hide) hidden = !hidden;
|
||||
}}
|
||||
on:keydown={(ev) => {
|
||||
if (['Space', 'Enter'].includes(ev.key) && hide) hidden = !hidden;
|
||||
}}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<slot name="header-full">
|
||||
<h3><slot name="header" /></h3>
|
||||
<h3>
|
||||
<slot name="header" />
|
||||
</h3>
|
||||
</slot>
|
||||
</header>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
{#if !hide || !hidden}
|
||||
<div class="content" transition:slide>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
section.labelborder {
|
||||
margin-top: 0.66rem;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
|
||||
header {
|
||||
& header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
|
@ -36,28 +43,19 @@
|
|||
padding-bottom: 0.33rem;
|
||||
margin-bottom: 0.33rem;
|
||||
|
||||
h3 {
|
||||
& h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
header {
|
||||
& header {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&.hidden {
|
||||
opacity: 0.66;
|
||||
|
||||
header {
|
||||
border-bottom-width: 0.5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.hide.hidden {
|
||||
opacity: 0.66;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue