97 lines
2.3 KiB
Svelte
97 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
density = "regular",
|
|
size = "md",
|
|
tone = "neutral",
|
|
}: {
|
|
density?: "regular" | "tight";
|
|
size?: "sm" | "md" | "lg";
|
|
tone?: "neutral" | "accent" | "danger";
|
|
} = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="corner-bracket-frame"
|
|
data-density={density}
|
|
data-size={size}
|
|
data-tone={tone}
|
|
aria-hidden="true"
|
|
>
|
|
<span data-corner="top-left"></span>
|
|
<span data-corner="top-right"></span>
|
|
<span data-corner="bottom-left"></span>
|
|
<span data-corner="bottom-right"></span>
|
|
</div>
|
|
|
|
<style>
|
|
.corner-bracket-frame {
|
|
--corner-color: var(--ui-color-line-strong);
|
|
--corner-offset: 0.5rem;
|
|
--corner-size: 1.45rem;
|
|
position: relative;
|
|
min-height: 5rem;
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--corner-color), transparent 78%) 1px, transparent 1px),
|
|
linear-gradient(color-mix(in srgb, var(--corner-color), transparent 84%) 1px, transparent 1px),
|
|
rgba(2, 3, 2, 0.64);
|
|
background-size: 2rem 2rem, 2rem 2rem, auto;
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
width: var(--corner-size);
|
|
height: var(--corner-size);
|
|
border-color: var(--corner-color);
|
|
}
|
|
|
|
[data-corner="top-left"] {
|
|
top: var(--corner-offset);
|
|
left: var(--corner-offset);
|
|
border-top: 1px solid;
|
|
border-left: 1px solid;
|
|
}
|
|
|
|
[data-corner="top-right"] {
|
|
top: var(--corner-offset);
|
|
right: var(--corner-offset);
|
|
border-top: 1px solid;
|
|
border-right: 1px solid;
|
|
}
|
|
|
|
[data-corner="bottom-left"] {
|
|
bottom: var(--corner-offset);
|
|
left: var(--corner-offset);
|
|
border-bottom: 1px solid;
|
|
border-left: 1px solid;
|
|
}
|
|
|
|
[data-corner="bottom-right"] {
|
|
right: var(--corner-offset);
|
|
bottom: var(--corner-offset);
|
|
border-right: 1px solid;
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.corner-bracket-frame[data-density="tight"] {
|
|
--corner-offset: 0.28rem;
|
|
}
|
|
|
|
.corner-bracket-frame[data-size="sm"] {
|
|
--corner-size: 0.95rem;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
.corner-bracket-frame[data-size="lg"] {
|
|
--corner-size: 2.25rem;
|
|
min-height: 8rem;
|
|
}
|
|
|
|
.corner-bracket-frame[data-tone="accent"] {
|
|
--corner-color: var(--ui-color-accent);
|
|
}
|
|
|
|
.corner-bracket-frame[data-tone="danger"] {
|
|
--corner-color: var(--ui-color-danger);
|
|
}
|
|
</style>
|