Merge pull request #153 from ckeditor/t/ckeditor5-list/136

Internal: Moved some to-do list styles to the ckeditor5-theme-lark repository. Code refactoring (see #136).

package.json

@@ -22,6 +22,7 @@
     "@ckeditor/ckeditor5-clipboard": "^12.0.2",
     "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
     "@ckeditor/ckeditor5-enter": "^11.1.0",
+    "@ckeditor/ckeditor5-font": "^11.2.2",
     "@ckeditor/ckeditor5-heading": "^11.0.5",
     "@ckeditor/ckeditor5-highlight": "^11.0.5",
     "@ckeditor/ckeditor5-indent": "^10.1.0",

tests/manual/todo-list.js

@@ -16,13 +16,20 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import List from '../../src/list';
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
 import TodoList from '../../src/todolist';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Heading, Highlight, Table, Bold, Paragraph, Undo, List, TodoList, Clipboard ],
+		plugins: [ Enter, Typing, Heading, Highlight, Table, Bold, Paragraph, Undo, List, TodoList, Clipboard, FontSize ],
 		toolbar: [
-			'heading', '|', 'bulletedList', 'numberedList', 'todoList', '|', 'bold', 'highlight', 'insertTable', '|', 'undo', 'redo'
+			'heading',
+			'|',
+			'bulletedList', 'numberedList', 'todoList',
+			'|',
+			'bold', 'highlight', 'insertTable', 'fontSize',
+			'|',
+			'undo', 'redo'
 		],
 		table: {
 			contentToolbar: [

theme/list.css

@@ -1,78 +1,26 @@
-:root {
-	--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%);
-}
-
-.ck .todo-list {
-	list-style: none;
-}
-
-.ck .todo-list > li {
-	margin-bottom: 5px;
-}
-
-.ck .todo-list > li > .todo-list {
-	margin-top: 5px;
-}
-
 /*
- * 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.
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-.ck .todo-list__checkmark input[type='checkbox'] {
-	display: block;
-	width: 100%;
-	height: 100%;
-	opacity: 0;
-	margin: 0;
-}
 
-.ck .todo-list__checkmark {
-	cursor: pointer;
-	width: var(--ck-todo-list-checkmark-size);
-	height: var(--ck-todo-list-checkmark-size);
-	position: relative;
+.ck-editor__editable .todo-list__checkmark {
 	display: inline-block;
-	left: -23px;
-	margin-right: -16px;
-	top: 2px;
-}
-
-.ck .todo-list__checkmark::before {
-	content: '';
-	position: absolute;
-	display: block;
-	width: 100%;
-	height: 100%;
-	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 {
-	box-sizing: content-box;
-	pointer-events: none;
-	content: '';
-	position: absolute;
-	left: 5px;
-	top: 3px;
-	display: block;
-	width: 3px;
-	height: 6px;
-	border: solid #fff;
-	border-width: 0 2px 2px 0;
-	transform: rotate(45deg);
-}
-
-.ck .todo-list__checkmark:hover::before {
-	box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1)
-}
+	position: relative;
 
-.ck .todo-list__checkmark_checked::before {
-	background: var(--ck-color-todo-list-checkmark-background);
-	border-color: var(--ck-color-todo-list-checkmark-border);
+	&::before {
+		display: block;
+		position: absolute;
+		box-sizing: border-box;
+	}
+
+	&::after {
+		display: block;
+		position: absolute;
+		box-sizing: content-box;
+		pointer-events: none;
+	}
+
+	& input[type='checkbox'] {
+		display: block;
+	}
 }