granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add size prop to Input with small/medium/large variants

Browse source
This commit is contained in:
Justin Edmund 2026-01-04 20:25:45 -08:00
parent f70d6c0fce
commit a8c2441652
1 changed files with 110 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
src/lib/components/ui/Input.svelte
View file

@ -6,6 +6,7 @@
interface Props extends HTMLInputAttributes {
variant?: 'default' | 'contained' | 'duration' | 'number' | 'range'
contained?: boolean
size?: 'small' | 'medium' | 'large'
error?: string
label?: string
leftIcon?: string
@ -29,6 +30,7 @@
let {
variant = 'default',
contained = false,
size = 'medium',
error,
label,
leftIcon,
@ -89,6 +91,7 @@
const inputClasses = $derived(
[
'input',
size,
(variant === 'contained' || contained) && 'contained',
variant === 'duration' && 'duration',
variant === 'number' && 'number',
@ -245,14 +248,9 @@
color: var(--text-primary);
display: block;
font-family: var(--font-family);
font-size: $font-regular;
width: 100%;
@include smooth-transition($duration-quick, background-color);
&:not(.wrapper) {
padding: calc($unit * 1.25) $unit-2x;
}
&.fullHeight {
height: 100%;
}
@ -293,12 +291,9 @@
input {
background: transparent;
border-radius: $input-corner;
// border: 2px solid transparent;
box-sizing: border-box;
color: var(--text-primary);
padding: calc($unit * 1.5) $unit-2x;
width: 100%;
font-size: $font-regular;
font-family: inherit;
@include smooth-transition($duration-quick, border-color);
@ -382,26 +377,6 @@
}
}
&:has(.iconLeft) input {
padding-left: $unit-5x;
}
&:has(.iconRight) input {
padding-right: $unit-5x;
}
&:has(.validationIcon) input {
padding-right: $unit-5x;
}
&:has(.clearButton) input {
padding-right: $unit-5x;
}
&:has(.counter) input {
padding-right: $unit-8x;
}
input {
border: 2px solid transparent;
}
@ -472,6 +447,94 @@
opacity: 0.5;
cursor: not-allowed;
}
// Size variants
&.small {
font-size: $font-small;
min-height: $unit-3x;
&:not(.wrapper) {
padding: $unit-half $unit;
}
&.wrapper input,
&.accessory input {
padding: $unit-half $unit;
font-size: $font-small;
}
&:has(.iconLeft) input {
padding-left: $unit-4x;
}
&:has(.iconRight) input,
&:has(.validationIcon) input,
&:has(.clearButton) input {
padding-right: $unit-4x;
}
&:has(.counter) input {
padding-right: $unit-6x;
}
}
&.medium {
font-size: $font-regular;
min-height: $unit-4x;
&:not(.wrapper) {
padding: $unit calc($unit * 1.5);
}
&.wrapper input,
&.accessory input {
padding: $unit calc($unit * 1.5);
font-size: $font-regular;
}
&:has(.iconLeft) input {
padding-left: $unit-5x;
}
&:has(.iconRight) input,
&:has(.validationIcon) input,
&:has(.clearButton) input {
padding-right: $unit-5x;
}
&:has(.counter) input {
padding-right: $unit-8x;
}
}
&.large {
font-size: $font-large;
min-height: calc($unit * 6);
&:not(.wrapper) {
padding: $unit-2x $unit-3x;
}
&.wrapper input,
&.accessory input {
padding: $unit-2x $unit-3x;
font-size: $font-large;
}
&:has(.iconLeft) input {
padding-left: $unit-6x;
}
&:has(.iconRight) input,
&:has(.validationIcon) input,
&:has(.clearButton) input {
padding-right: $unit-6x;
}
&:has(.counter) input {
padding-right: $unit-10x;
}
}
}
// Direct input element styles
@ -484,9 +547,7 @@
color: var(--text-primary);
display: block;
font-family: var(--font-family);
font-size: $font-regular;
width: 100%;
padding: calc($unit * 1.5) $unit-2x;
@include smooth-transition($duration-quick, background-color);
&[type='number']::-webkit-inner-spin-button {
@ -548,6 +609,25 @@
opacity: 0.5;
cursor: not-allowed;
}
// Size variants
&.small {
padding: $unit-half $unit;
font-size: $font-small;
min-height: $unit-3x;
}
&.medium {
padding: $unit calc($unit * 1.5);
font-size: $font-regular;
min-height: $unit-4x;
}
&.large {
padding: $unit-2x $unit-3x;
font-size: $font-large;
min-height: calc($unit * 6);
}
}
// Placeholder styles