refac: checkbox styling

This commit is contained in:
Timothy Jaeryang Baek 2025-07-09 00:34:03 +04:00
parent 6bf218f720
commit 1de03c364f
2 changed files with 32 additions and 1 deletions

View File

@ -61,8 +61,10 @@
}; };
const createNoteHandler = async () => { const createNoteHandler = async () => {
// $i18n.t('New Note'),
const res = await createNewNote(localStorage.token, { const res = await createNewNote(localStorage.token, {
title: $i18n.t('New Note'), // YYYY-MM-DD
title: dayjs().format('YYYY-MM-DD'),
data: { data: {
content: { content: {
json: null, json: null,

View File

@ -40,6 +40,35 @@
textarea::placeholder { textarea::placeholder {
color: theme(--color-gray-400); color: theme(--color-gray-400);
} }
input[type='checkbox'] {
@apply appearance-none size-3.5 align-middle bg-white border border-gray-300 rounded transition cursor-pointer focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-gray-800 dark:border-gray-600 self-center;
/* Center the custom mark */
display: inline-block;
position: relative;
}
input[type='checkbox']:checked {
@apply bg-blue-600 border-blue-600;
}
input[type='checkbox']:after {
content: '';
display: block;
width: 100%;
height: 100%;
/* Hide by default */
opacity: 0;
transition: opacity 0.2s;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
/* SVG checkmark as background image */
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 8l3 3l5-5"/></svg>')
center/80% no-repeat;
}
input[type='checkbox']:checked:after {
opacity: 1;
}
} }
@custom-variant hover (&:hover); @custom-variant hover (&:hover);