58 lines
1.1 KiB
Svelte
58 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from "svelte";
|
|
import Icon from "../Icon.svelte";
|
|
|
|
export let label: string;
|
|
export let add: boolean = false;
|
|
export let nopad: boolean = false;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function onAdd() {
|
|
dispatch("add");
|
|
}
|
|
</script>
|
|
|
|
<div class="block" class:nopad>
|
|
<div class="label">
|
|
<div class="text">{label}</div>
|
|
{#if add}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div class="add-button" on:click={onAdd}><Icon name="plus" /></div>
|
|
{/if}
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<style lang="sass">
|
|
@import "$lib/css/colors.sass"
|
|
|
|
div.block
|
|
padding-left: 1ch
|
|
margin-left: 0.25ch
|
|
border-left: 2px solid $color-main2
|
|
margin-bottom: 0.5em
|
|
|
|
&.nopad
|
|
margin-left: 0
|
|
|
|
div.label
|
|
color: $color-main5
|
|
font-size: 0.666em
|
|
padding-top: 0.1em
|
|
padding-left: 0.3ch
|
|
display: flex
|
|
flex-direction: row
|
|
|
|
|
|
div.add-button
|
|
color: $color-green-dark
|
|
margin-top: 0.1em
|
|
margin-left: 0.5ch
|
|
font-size: 0.9em
|
|
line-height: 1em
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
color: $color-green
|
|
</style> |