You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.4 KiB
64 lines
1.4 KiB
<script lang="ts">
|
|
import Icon from "./Icon.svelte";
|
|
|
|
export let expanded: boolean;
|
|
export let title: string;
|
|
export let disableExpandToggle: boolean = false;
|
|
|
|
function toggleExpand() {
|
|
if (!disableExpandToggle) {
|
|
expanded = !expanded;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="modal-section" class:expanded>
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div class="modal-section-header" on:click={toggleExpand}>
|
|
<div class="title">{title}</div>
|
|
{#if !disableExpandToggle}
|
|
<Icon block name="{expanded ? "chevron_down" : "chevron_right"}" />
|
|
{/if}
|
|
</div>
|
|
<div class="modal-section-body">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="sass">
|
|
@import "$lib/css/colors.sass"
|
|
|
|
div.modal-section
|
|
margin-left: -1.8ch
|
|
margin-right: -1.8ch
|
|
margin-bottom: 0.5em
|
|
|
|
> div.modal-section-body
|
|
display: none
|
|
padding: 0.25em 2.3ch
|
|
|
|
> div.modal-section-header
|
|
display: flex
|
|
flex-direction: row
|
|
user-select: none
|
|
padding: 0.5ch 1.6ch
|
|
padding-right: 1.8ch
|
|
color: $color-main4
|
|
|
|
> div.title
|
|
margin-left: 0.5ch
|
|
font-size: 0.9em
|
|
color: $color-main5
|
|
margin-right: auto
|
|
|
|
&.expanded
|
|
background-color: $color-mainhalf
|
|
|
|
> div.modal-section-body
|
|
display: block
|
|
|
|
> div.modal-section-header
|
|
color: $color-main5
|
|
> div.title
|
|
color: $color-main9
|
|
</style>
|