moar stuff.

2023-09-23 14:04:13 +02:00
parent c7d3a3200e
commit 2188d489ea
48 changed files with 1684 additions and 91 deletions
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import Icon from "./Icon.svelte";
+
+  export let expanded: boolean;
+  export let title: string;
+
+  function toggleExpand() {
+    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>
+    <Icon block name="{expanded ? "chevron_down" : "chevron_right"}" />
+  </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>