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