81 lines
1.5 KiB
Svelte
81 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
|
|
let {
|
|
title,
|
|
density = "dense",
|
|
children,
|
|
}: {
|
|
title?: string;
|
|
density?: "compact" | "dense";
|
|
children?: Snippet;
|
|
} = $props();
|
|
</script>
|
|
|
|
<section class="panel" data-density={density}>
|
|
{#if title}
|
|
<header class="panel__header">
|
|
<h2>{title}</h2>
|
|
</header>
|
|
{/if}
|
|
<div class="panel__body">
|
|
{@render children?.()}
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.panel {
|
|
position: relative;
|
|
min-width: 0;
|
|
border: var(--ui-border);
|
|
background: rgba(3, 4, 3, 0.86);
|
|
box-shadow: var(--ui-shadow-hard);
|
|
}
|
|
|
|
.panel::before,
|
|
.panel::after {
|
|
position: absolute;
|
|
width: 0.55rem;
|
|
height: 0.55rem;
|
|
border-color: var(--ui-color-line-strong);
|
|
content: "";
|
|
}
|
|
|
|
.panel::before {
|
|
top: 0.2rem;
|
|
right: 0.2rem;
|
|
border-top: 1px solid;
|
|
border-right: 1px solid;
|
|
}
|
|
|
|
.panel::after {
|
|
right: 0.2rem;
|
|
bottom: 0.2rem;
|
|
border-right: 1px solid;
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.panel__header {
|
|
padding: 0.42rem 0.55rem 0;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-family: var(--ui-font-display);
|
|
font-size: clamp(1.45rem, 2.05vw, 1.95rem);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
line-height: 0.9;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.panel__body {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
padding: 0.42rem 0.55rem 0.55rem;
|
|
}
|
|
|
|
.panel[data-density="compact"] .panel__body {
|
|
padding: var(--ui-space-2);
|
|
}
|
|
</style>
|