67 lines
1.6 KiB
Plaintext
67 lines
1.6 KiB
Plaintext
---
|
|
interface Props {
|
|
href?: string | undefined;
|
|
disableRoundedTop?: boolean;
|
|
}
|
|
|
|
const { href, disableRoundedTop = false } = Astro.props;
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
{
|
|
href !== undefined ? (
|
|
<a href={href} id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
|
|
<slot />
|
|
</a>
|
|
) : (
|
|
<div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
|
|
<slot />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
#card {
|
|
backdrop-filter: blur(10px);
|
|
|
|
border-bottom-left-radius: 1em;
|
|
border-bottom-right-radius: 1em;
|
|
|
|
&.rounded-top {
|
|
border-radius: 1em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
border: 1px solid var(--color-base-300);
|
|
box-shadow: 0 1px 2px 0 var(--color-shadow-2);
|
|
background-color: color-mix(in srgb, var(--color-elevation-2) 30%, transparent);
|
|
}
|
|
|
|
a#card {
|
|
transition-duration: 150ms;
|
|
transition-property: border-color, box-shadow, background-color;
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
border-color: var(--color-base-650);
|
|
box-shadow: 0 2px 2px var(--color-shadow-2);
|
|
background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 3px solid var(--color-base-650);
|
|
outline-offset: unset;
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--color-base-1000);
|
|
box-shadow: 0 6px 12px 2px var(--color-shadow-2);
|
|
background-color: var(--color-elevation-2);
|
|
outline-color: var(--color-base-1000);
|
|
}
|
|
}
|
|
</style>
|