|
@@ -99,21 +99,12 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.ck .todo-list__checkmark {
|
|
|
|
|
|
|
+.ck.ck-editor__editable .todo-list__checkmark {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
width: var(--ck-todo-list-checkmark-size);
|
|
width: var(--ck-todo-list-checkmark-size);
|
|
|
height: var(--ck-todo-list-checkmark-size);
|
|
height: var(--ck-todo-list-checkmark-size);
|
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
- @mixin ck-dir ltr {
|
|
|
|
|
- left: -25px;
|
|
|
|
|
- margin-right: -15px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- @mixin ck-dir rtl {
|
|
|
|
|
- right: -25px;
|
|
|
|
|
- margin-left: -15px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
&::before {
|
|
|
content: '';
|
|
content: '';
|
|
@@ -145,26 +136,42 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
/*
|
|
|
- * 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.
|
|
|
|
|
- */
|
|
|
|
|
|
|
+ * 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'] {
|
|
& input[type='checkbox'] {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
opacity: 0;
|
|
opacity: 0;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
-.ck .todo-list__checkmark_checked {
|
|
|
|
|
- &::before {
|
|
|
|
|
- background: var(--ck-color-todo-list-checkmark-background);
|
|
|
|
|
- border-color: var(--ck-color-todo-list-checkmark-background);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.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);
|
|
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ border-color: var(--ck-color-base-background);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.ck.ck-editor__editable[dir="ltr"] .todo-list__checkmark {
|
|
|
|
|
+ left: -25px;
|
|
|
|
|
+ margin-right: -15px;
|
|
|
|
|
+
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ margin-left: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ck.ck-editor__editable[dir="rtl"] .todo-list__checkmark {
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+
|
|
|
|
|
+ right: -25px;
|
|
|
|
|
+ margin-left: -15px;
|
|
|
|
|
+}
|