OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: override browser default checkbox behaviour

Browse Source
This commit is contained in:
Lewis England 2023-05-18 09:29:15 +00:00 committed by Lewis England
parent d3088018d7
commit d4c764e854
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/tasklist/item.jsx
View File

@ -3,7 +3,7 @@ export default function Item({ task }) {
<li key={task.title}> <li key={task.title}>
<div className="flex block w-full text-left transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10"> <div className="flex block w-full text-left transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10">
<div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md"> <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
<input type="checkbox" className="bg-theme-500/10 text-sm font-medium rounded-l-m" id={task.title} checked={task.checked} readOnly/> <input type="checkbox" className="checkbox bg-theme-500/10 text-theme-200 dark:text-theme-700" id={task.title} defaultChecked={task.checked}/>
</div> </div>
<div className="flex-1 flex items-center justify-between rounded-r-md "> <div className="flex-1 flex items-center justify-between rounded-r-md ">
<div className="flex-1 grow pl-3 py-2 text-xs">{task.title}</div> <div className="flex-1 grow pl-3 py-2 text-xs">{task.title}</div>

4
src/styles/globals.css
View File

@ -58,3 +58,7 @@ body {
::-webkit-details-marker { ::-webkit-details-marker {
display: none; display: none;
} }
.checkbox {
border-radius: 0.25em;
}