Skip to content

Commit 8bfef08

Browse files
committed
ui(editor): taskList 체크박스 커스텀 스타일
기본 OS 체크박스 외형 대신 primary 배경 + 흰색 체크 SVG로 일관된 톤 제공.
1 parent 9d0f27b commit 8bfef08

1 file changed

Lines changed: 32 additions & 2 deletions

File tree

src/styles/editor.css

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,11 +124,41 @@
124124
}
125125

126126
.tiptap ul[data-type="taskList"] li > label input[type="checkbox"] {
127-
accent-color: var(--primary);
127+
appearance: none;
128+
-webkit-appearance: none;
128129
width: 1.1em;
129130
height: 1.1em;
130-
cursor: pointer;
131131
margin: 0;
132+
padding: 0;
133+
cursor: pointer;
134+
background-color: var(--background, white);
135+
border: 1.5px solid var(--border);
136+
border-radius: 4px;
137+
transition:
138+
background-color 0.12s ease,
139+
border-color 0.12s ease,
140+
box-shadow 0.12s ease;
141+
display: inline-block;
142+
vertical-align: middle;
143+
flex-shrink: 0;
144+
}
145+
146+
.tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
147+
border-color: var(--muted-foreground);
148+
}
149+
150+
.tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible {
151+
outline: none;
152+
box-shadow: 0 0 0 2px var(--background, white), 0 0 0 4px var(--primary);
153+
}
154+
155+
.tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
156+
background-color: var(--primary);
157+
border-color: var(--primary);
158+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
159+
background-repeat: no-repeat;
160+
background-position: center;
161+
background-size: 100% 100%;
132162
}
133163

134164
.tiptap ul[data-type="taskList"] li > div {

0 commit comments

Comments
 (0)