75 lines
1.5 KiB
Plaintext
75 lines
1.5 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
interface Props {
|
|
id?: string;
|
|
title?: string | undefined;
|
|
icon?: string;
|
|
ariaLabel?: string;
|
|
class?: string | undefined;
|
|
}
|
|
|
|
const { title, icon, ariaLabel, id, ...otherProps } = Astro.props;
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<button
|
|
id={id}
|
|
class:list={["pressable", { "with-title": !!title }, otherProps.class]}
|
|
aria-label={ariaLabel}
|
|
title={ariaLabel}
|
|
{...otherProps.class ? otherProps : {}}>
|
|
{icon && <Icon name={icon} />}
|
|
{title}
|
|
</button>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
button {
|
|
border-radius: 9999px;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
height: 2.5em;
|
|
|
|
display: flex;
|
|
place-items: center;
|
|
place-content: center;
|
|
gap: 1em;
|
|
white-space: nowrap;
|
|
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
|
|
transition-duration: 250ms;
|
|
transition-property: padding-top, box-shadow, background-color, color, border-color;
|
|
|
|
&.with-title {
|
|
padding-right: 1.2em;
|
|
|
|
& > svg {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
> svg {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
box-shadow: inset 0 0.1em 0.1em 0 var(--color-shadow-2);
|
|
translate: unset;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: inset 0 0.1em 0.1em 0.1em var(--color-shadow-2);
|
|
padding-top: 0.2em;
|
|
}
|
|
}
|
|
</style>
|