瀏覽代碼

Merge branch 'master' into t/ckeditor5/416d

Piotrek Koszuliński 6 年之前
父節點
當前提交
757058e2d1

+ 3 - 3
packages/ckeditor5-theme-lark/.travis.yml

@@ -1,9 +1,11 @@
 sudo: required
-dist: trusty
+dist: xenial
 addons:
   chrome: stable
   firefox: latest
 language: node_js
+services:
+- xvfb
 node_js:
 - '8'
 cache:
@@ -13,8 +15,6 @@ branches:
   - stable
 before_install:
 - export START_TIME=$( date +%s )
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
 - npm i -g yarn
 install:
 - yarn add @ckeditor/ckeditor5-dev-tests

+ 0 - 1
packages/ckeditor5-theme-lark/README.md

@@ -1,7 +1,6 @@
 CKEditor 5 Lark theme
 ========================================
 
-[![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-theme-lark.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark)
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-theme-lark.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-theme-lark)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-theme-lark/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-theme-lark?branch=master)

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

@@ -6,6 +6,13 @@
 @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;
@@ -79,3 +86,92 @@
 	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;
+}