|
|
@@ -1,5 +1,5 @@
|
|
|
:root {
|
|
|
- --ck-todo-list-checkmark-size: 14px;
|
|
|
+ --ck-todo-list-checkmark-size: 16px;
|
|
|
--ck-color-todo-list-checkmark-background: hsl(120, 100%, 42%);
|
|
|
--ck-color-todo-list-checkmark-border: hsl( 120, 100%, 27%);
|
|
|
}
|
|
|
@@ -17,12 +17,18 @@
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
-/* Let's hide native checkbox and make a fancy one. */
|
|
|
+/*
|
|
|
+ * Let's hide native checkbox and make a fancy one.
|
|
|
+ *
|
|
|
+ * Note: Checkbox element cannot be hidden using `display: block` or `visibility: hidden`.
|
|
|
+ * It has to be clickable to not steal the focus after clicking on it.
|
|
|
+ */
|
|
|
.ck .todo-list__checkmark input[type='checkbox'] {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
opacity: 0;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
.ck .todo-list__checkmark {
|
|
|
@@ -31,8 +37,9 @@
|
|
|
height: var(--ck-todo-list-checkmark-size);
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
- left: -20px;
|
|
|
- margin-right: -10px;
|
|
|
+ left: -23px;
|
|
|
+ margin-right: -16px;
|
|
|
+ top: 2px;
|
|
|
}
|
|
|
|
|
|
.ck .todo-list__checkmark::before {
|
|
|
@@ -44,6 +51,7 @@
|
|
|
border: 1px solid var(--ck-color-base-text);
|
|
|
border-radius: var(--ck-border-radius);
|
|
|
transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.ck .todo-list__checkmark::after {
|