8
0
Oskar Wróbel 6 лет назад
Родитель
Сommit
049588df8a
1 измененных файлов с 12 добавлено и 4 удалено
  1. 12 4
      packages/ckeditor5-list/theme/list.css

+ 12 - 4
packages/ckeditor5-list/theme/list.css

@@ -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 {