|
|
@@ -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;
|
|
|
+ }
|
|
|
}
|