Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/az-golf-gurus. www.azgolfgurus.com
astro datocms typescript
Something went wrong. Try again.
1.7 kB · 90 lines
Astro
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091---import type { Polymorphic } from "astro/types";
type Props<Tag extends "a" | "button"> = Polymorphic<{ as: Tag; variant?: "outline" | "solid"; size?: "sm" | "md" | "lg" | "inherit";}>;
export type { Props as ButtonProps };
const { as: Tag = "button", variant = "solid", size = "md", class: className, ...props} = Astro.props;---
<Tag class:list={[`btn btn--${variant} btn--${size}`, className]} {...props} ><slot /></Tag>
<style> .btn { display: inline-block; border: none; border-radius: 9999px; padding-block: var(--space-sm); padding-inline: var(--space-md); font-family: var(--font-family-heading); line-height: var(--line-height-heading); text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.3s ease; appearance: none; }
.btn--outline { background-color: transparent; color: inherit; box-shadow: inset 0px 0px 0px 2px var(--color-green);
&:hover { background-color: var(--color-green); color: var(--color-white); }
&[disabled] { box-shadow: inset 0px 0px 0px 2px var(--color-gray-500); color: var(--color-gray-700); cursor: default; } }
.btn--solid { background-color: var(--color-green); color: var(--color-white);
&:hover { background-color: var(--color-green-700); }
&[disabled] { background-color: var(--color-gray-500); cursor: default; } }
.btn--inherit { font-size: inherit; }
.btn--sm { font-size: var(--font-size-sm); }
.btn--md { font-size: var(--font-size-md); }
.btn--lg { padding-inline: var(--space-lg); font-size: var(--font-size-lg); line-height: var(--line-height-body); }</style>