refac: checkbox styling
This commit is contained in:
parent
6bf218f720
commit
1de03c364f
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue