52 lines
952 B
Plaintext
52 lines
952 B
Plaintext
---
|
|
export interface Props {
|
|
name?: string;
|
|
id?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
class?: string;
|
|
}
|
|
|
|
const {
|
|
name,
|
|
id,
|
|
disabled = false,
|
|
required = false,
|
|
class: className = "",
|
|
...rest
|
|
} = Astro.props;
|
|
|
|
const classes = ["select", className].filter(Boolean).join(" ");
|
|
---
|
|
|
|
<select
|
|
class={classes}
|
|
name={name}
|
|
id={id}
|
|
disabled={disabled}
|
|
required={required}
|
|
{...rest}
|
|
>
|
|
<slot />
|
|
</select>
|
|
|
|
<style>
|
|
.select {
|
|
width: 100%;
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-normal);
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.select:focus {
|
|
outline: none;
|
|
border-color: var(--primary-600);
|
|
box-shadow: 0 0 0 3px rgba(132, 61, 255, 0.1);
|
|
}
|
|
</style>
|