Ver Fonte

Introduced todolist styles in theme-lark.

dkonopka há 6 anos atrás
pai
commit
dab83664fb

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

@@ -7,6 +7,11 @@
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_shadow.css";
 
+:root {
+	--ck-todo-list-checkmark-size: 16px;
+	--ck-color-todo-list-checkmark-background: hsl(126, 64%, 41%);
+}
+
 .ck.ck-list {
 	@mixin ck-rounded-corners;
 
@@ -79,3 +84,81 @@
 	width: 100%;
 	background: var(--ck-color-base-border);
 }
+
+.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.
+ */
+.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;
+	display: inline-block;
+	vertical-align: middle;
+	left: -23px;
+	margin-right: -15px;
+}
+
+.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-style: solid;
+	border-color: transparent;
+	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)
+}
+
+.ck .todo-list__checkmark_checked::after {
+	border-color: #fff;
+}
+
+.ck .todo-list__checkmark_checked::before {
+	background: var(--ck-color-todo-list-checkmark-background);
+	border-color: var(--ck-color-todo-list-checkmark-background);
+}