Browse Source

Merge pull request #245 from ckeditor/t/ckeditor5-list/147

Internal: Moved to–do list styles away from the UI List component styles. Moved styles to ckeditor5-list (see ckeditor/ckeditor5-list#147).
Damian Konopka 6 years ago
parent
commit
4d2d2ff53f

+ 0 - 96
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

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