ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-16 12:32:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): add select items focus color

Browse Source
This commit is contained in:
rusconn
2023-08-11 20:31:18 +09:00
parent 8cf619573f
commit 15c01b73c6
3 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/ui/select.tsx
View File

@@ -83,6 +83,7 @@ export const Item = React.forwardRef<
className={cn( className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none", "relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none",
"hover:bg-select-item-hover", "hover:bg-select-item-hover",
"focus:bg-select-item-focus",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className className
)} )}

2
styles/globals.css
View File

@@ -39,6 +39,7 @@
--select-content-foreground: 0 0% 20%; --select-content-foreground: 0 0% 20%;
--select-item-hover: 0 0% 94%; --select-item-hover: 0 0% 94%;
--select-item-focus: 0 0% 94%;
--input: 0 0% 99%; --input: 0 0% 99%;
--input-hover: 0 0% 97%; --input-hover: 0 0% 97%;
@@ -103,6 +104,7 @@
--select-content-foreground: 0 0% 90%; --select-content-foreground: 0 0% 90%;
--select-item-hover: 0 0% 21%; --select-item-hover: 0 0% 21%;
--select-item-focus: 0 0% 21%;
--input: 0 0% 20%; --input: 0 0% 20%;
--input-hover: 0 0% 22%; --input-hover: 0 0% 22%;

1
tailwind.config.js
View File

@@ -46,6 +46,7 @@ module.exports = {
}, },
item: { item: {
hover: "hsl(var(--select-item-hover))", hover: "hsl(var(--select-item-hover))",
focus: "hsl(var(--select-item-focus))",
}, },
}, },
input: { input: {