Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Moved todolist styles to the theme-lark. #153

Merged
merged 7 commits into from
Sep 19, 2019
Merged

Moved todolist styles to the theme-lark. #153

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
31fcd86
Moved todolsit styles to the theme-lark.
Sep 4, 2019
3d4f751
Merge branch 'master' into t/ckeditor5-list/136
oleq Sep 17, 2019
c39a303
Bring back UI styles of todo-list.
Sep 18, 2019
cc900c8
Tests: Added Font Size feature to the to-do list manual test.
oleq Sep 19, 2019
14a5773
Code refactoring in styles.
oleq Sep 19, 2019
2f9fd92
Code refactoring in styles.
oleq Sep 19, 2019
90cf293
Added a missing dependency to package.json.
oleq Sep 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 9 additions & 2 deletions tests/manual/todo-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
93 changes: 18 additions & 75 deletions theme/list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,21 @@
:root {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is missing CKSource header.

--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.
*/
.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.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;
}
}