jimlee/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-10-26 21:19:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

style(web): add enhanced input styling for better UX

Browse Source 
Add comprehensive input styling for text, email, password, and search inputs with focus states and error state handling. Improves visual feedback and accessibility for form inputs
This commit is contained in:
Thomas Camlong
2025-10-01 18:22:33 +02:00
parent da40db6183
commit ddf1f13d7a
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/app/globals.css
View File

@@ -242,3 +242,31 @@
@apply backdrop-blur-sm;
}
}
/* Enhanced Input Styling */
@layer components {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
@apply bg-background text-foreground;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
@apply ring-2 ring-ring ring-offset-2 ring-offset-background;
}
/* Error state for inputs */
input[aria-invalid="true"],
input.error {
@apply border-destructive bg-destructive/5 text-foreground placeholder:text-muted-foreground;
}
input[aria-invalid="true"]:focus,
input.error:focus {
@apply ring-2 ring-destructive ring-offset-2 ring-offset-background;
}
}