77 lines
1.6 KiB
Svelte
77 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { HTMLInputAttributes } from 'svelte/elements';
|
|
|
|
interface Props extends Omit<HTMLInputAttributes, 'size'> {
|
|
variant?: 'underline' | 'solid';
|
|
size?: 'sm' | 'md';
|
|
value?: string | number | string[] | undefined | null;
|
|
}
|
|
|
|
let {
|
|
variant = 'solid',
|
|
size = 'md',
|
|
value = $bindable(),
|
|
class: className = '',
|
|
...rest
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<input class="admin-input {variant} size-{size} {className}" bind:value {...rest} />
|
|
|
|
<style>
|
|
.admin-input {
|
|
width: 100%;
|
|
font-family: inherit;
|
|
color: var(--text-color);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.admin-input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* variant: underline */
|
|
.admin-input.underline {
|
|
border: none;
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
|
background: transparent;
|
|
transition: border-bottom-color 0.3s ease;
|
|
}
|
|
.admin-input.underline:focus {
|
|
border-bottom-color: var(--accent-color, #419b38);
|
|
}
|
|
|
|
/* variant: solid */
|
|
.admin-input.solid {
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
border-radius: 0;
|
|
background: rgba(0, 0, 0, 0.015);
|
|
transition:
|
|
border-color 0.3s ease,
|
|
box-shadow 0.3s ease;
|
|
}
|
|
.admin-input.solid:focus {
|
|
border-color: var(--accent-color, #419b38);
|
|
box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
|
|
}
|
|
|
|
/* size: md (default for main forms) */
|
|
.admin-input.size-md {
|
|
padding: 12px 14px;
|
|
font-size: 1.05rem;
|
|
}
|
|
/* override padding for underline which traditionally uses less padding */
|
|
.admin-input.underline.size-md {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
/* size: sm (default for tables / sidebars) */
|
|
.admin-input.size-sm {
|
|
padding: 8px 10px;
|
|
font-size: 0.95rem;
|
|
}
|
|
.admin-input.underline.size-sm {
|
|
padding: 8px 0;
|
|
}
|
|
</style>
|