Something went wrong. Try again.
https://clembs.com
Something went wrong. Try again.
1.4 kB · 76 lines
Astro
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677---interface Props { id: string; 'aria-label': string;}
const { id, 'aria-label': ariaLabel } = Astro.props;---
<button popovertarget={id} aria-label={ariaLabel}> <slot name="icon" /></button>
<div {id} popover> <slot /></div>
<style lang="scss"> @use '../styles/mixins.scss' as *;
button { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px;
border-radius: 999px; border: none; background-color: transparent;
user-select: none; cursor: pointer;
&:has(+ :popover-open) { background-color: var(--color-100); } @include focus-hover { background-color: var(--color-100); }
:global(svg) { width: 20px; height: 20px; } }
div { background-color: var(--color-100); box-shadow: 0 3px 0 0 var(--color-400); border: 1px solid var(--color-400); border-radius: 1.5rem;
position-area: end span-start; margin-block-start: 0.25rem;
transition: opacity, transform, overlay allow-discrete, display allow-discrete; transition-duration: 200ms;
opacity: 0; transform: translate(0.5rem, -1rem) scale(0.9);
&:popover-open { opacity: 1; transform: translate(0, 0) scale(1);
@starting-style { opacity: 0; transform: translate(0.5rem, -1rem) scale(0.9); } } }</style>