8
0
Просмотр исходного кода

Code refactoring in styles. Fixed to-do list styles in editors with mixed UI and content language direction.

Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
bc3a755064
1 измененных файлов с 30 добавлено и 23 удалено
  1. 30 23
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

+ 30 - 23
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

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