|
|
@@ -6,13 +6,6 @@
|
|
|
@import "../../../mixins/_disabled.css";
|
|
|
@import "../../../mixins/_rounded.css";
|
|
|
@import "../../../mixins/_shadow.css";
|
|
|
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
|
|
|
-
|
|
|
-:root {
|
|
|
- --ck-todo-list-checkmark-size: 16px;
|
|
|
- --ck-color-todo-list-checkmark-background: hsl(126, 64%, 41%);
|
|
|
- --ck-color-todo-list-checkmark-shadow: hsla(0, 0%, 0%, 0.1);
|
|
|
-}
|
|
|
|
|
|
.ck.ck-list {
|
|
|
@mixin ck-rounded-corners;
|
|
|
@@ -86,92 +79,3 @@
|
|
|
width: 100%;
|
|
|
background: var(--ck-color-base-border);
|
|
|
}
|
|
|
-
|
|
|
-.ck-editor__editable .todo-list {
|
|
|
- list-style: none;
|
|
|
-
|
|
|
- & li {
|
|
|
- margin-bottom: 5px;
|
|
|
-
|
|
|
- & .todo-list {
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ck-editor__editable .todo-list__checkmark {
|
|
|
- cursor: pointer;
|
|
|
- width: var(--ck-todo-list-checkmark-size);
|
|
|
- height: var(--ck-todo-list-checkmark-size);
|
|
|
- vertical-align: middle;
|
|
|
-
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- 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;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
-
|
|
|
- /* Calculate tick position, size and border-width proportional to the checkmark size. */
|
|
|
- left: calc( var(--ck-todo-list-checkmark-size) / 3 );
|
|
|
- top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
|
|
- width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
|
|
- height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
|
|
|
- border-style: solid;
|
|
|
- border-color: transparent;
|
|
|
- border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- &::before {
|
|
|
- box-shadow: 0 0 0 5px var(--ck-color-todo-list-checkmark-shadow);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * Let's hide the native checkbox and use a fancy one (above styles).
|
|
|
- *
|
|
|
- * Note: Checkbox element cannot be hidden using `display: none` or `visibility: hidden`.
|
|
|
- * It has to be clickable to not steal the focus after clicking on it.
|
|
|
- */
|
|
|
- & input[type='checkbox'] {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 0;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &.todo-list__checkmark_checked {
|
|
|
- &::before {
|
|
|
- background: var(--ck-color-todo-list-checkmark-background);
|
|
|
- border-color: var(--ck-color-todo-list-checkmark-background);
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-color: var(--ck-color-base-background);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ck-editor__editable[dir="ltr"] .todo-list__checkmark {
|
|
|
- left: -25px;
|
|
|
- margin-right: -15px;
|
|
|
-
|
|
|
- right: 0;
|
|
|
- margin-left: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ck-editor__editable[dir="rtl"] .todo-list__checkmark {
|
|
|
- left: 0;
|
|
|
- margin-right: 0;
|
|
|
-
|
|
|
- right: -25px;
|
|
|
- margin-left: -15px;
|
|
|
-}
|