DMC/studentportalen
1
1
Fork 0
Code Issues 24 Pull Requests 3 Actions Projects 1 Wiki Activity

List components #31

Open
stne3960 wants to merge 57 commits from list_item into main
pull from: list_item
merge into: DMC:main
Conversation 10 Commits 57 Files Changed 30 +5 -4
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 24d0db7045 - Show all commits

9
frontend/src/components/TextInput/TextInput.tsx
View File

@ -52,13 +52,14 @@ const iconStyles: Record<TextInputSize, CSSProperties> = {
lg: { width: 'var(--font-size-body-lg)', height: 'var(--font-size-body-lg)' }, lg: { width: 'var(--font-size-body-lg)', height: 'var(--font-size-body-lg)' },
}; };
const baseClasses = 'bg-base-canvas border-(length:--border-width-sm) border-base-ink-medium placeholder:text-base-ink-medium'; const baseClasses = 'bg-base-canvas border-[length:var(--border-width-sm)] border-base-ink-medium';
// focus-within: applies styles when any child element (the input) has focus // focus-within: applies styles when any child element (the input) has focus
const defaultStateClasses = const defaultStateClasses =
'hover:border-base-ink-placeholder focus-within:border-primary focus-within:outline focus-within:outline-sky-100 focus-within:outline-(length:--border-width-lg)'; 'hover:border-base-ink-placeholder focus-within:border-primary focus-within:outline focus-within:outline-sky-100 focus-within:outline-[length:var(--border-width-lg)]';
const errorStateClasses = 'border-fire-100 outline outline-fire-100 outline-(length:--border-width-sm)'; const errorStateClasses =
'border-fire-100 outline outline-fire-100 outline-[length:var(--border-width-sm)] focus-within:border-primary focus-within:outline focus-within:outline-[length:var(--border-width-lg)] focus-within:outline-sky-100';
export default function TextInput({ export default function TextInput({
size = 'md', size = 'md',
@ -87,7 +88,7 @@ export default function TextInput({
</div> </div>
)} )}
<input <input
className={`flex-1 h-full bg-transparent border-none outline-none placeholder:text-base-ink-medium ${inputPadding} ${textClasses[size]}`} className={`flex-1 min-w-0 h-full bg-transparent border-none outline-none text-base-ink-strong placeholder:text-base-ink-placeholder ${inputPadding} ${textClasses[size]}`}
{...props} {...props}
/> />
</div> </div>