| <script lang="ts"> | |
| export let equal_height = true; | |
| export let elem_id: string; | |
| export let elem_classes: string[] = []; | |
| export let visible = true; | |
| export let variant: "default" | "panel" | "compact" = "default"; | |
| </script> | |
| <div | |
| class:compact={variant === "compact"} | |
| class:panel={variant === "panel"} | |
| class:unequal-height={equal_height === false} | |
| class:stretch={equal_height} | |
| class:hide={!visible} | |
| id={elem_id} | |
| class={elem_classes.join(" ")} | |
| > | |
| <slot /> | |
| </div> | |
| <style> | |
| div { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--layout-gap); | |
| width: var(--size-full); | |
| } | |
| .hide { | |
| display: none; | |
| } | |
| .compact > :global(*), | |
| .compact :global(.box) { | |
| border-radius: 0; | |
| } | |
| .compact, | |
| .panel { | |
| border-radius: var(--container-radius); | |
| background: var(--background-fill-secondary); | |
| padding: var(--size-2); | |
| } | |
| .unequal-height { | |
| align-items: flex-start; | |
| } | |
| .stretch { | |
| align-items: stretch; | |
| } | |
| div > :global(*), | |
| div > :global(.form > *) { | |
| flex: 1 1 0%; | |
| flex-wrap: wrap; | |
| min-width: min(160px, 100%); | |
| } | |
| </style> | |