Przeglądaj źródła

Add CSS chapter to mention feature guide.

Maciej Gołaszewski 6 lat temu
rodzic
commit
e019b7b0d8

+ 14 - 0
packages/ckeditor5-mention/docs/_snippets/features/custom-mention-colors-variables.html

@@ -0,0 +1,14 @@
+<style>
+	/* We are not using here :root because of many instances of editor */
+	#snippet-mention-custom-colors + .ck-editor {
+		/* Make mention background blue. */
+		--ck-color-mention-background: hsla(220, 100%, 54%, 0.4);
+
+		/* Make mention text dark grey. */
+		--ck-color-mention-text: hsl(0, 0%, 15%);
+	}
+</style>
+
+<div id="snippet-mention-custom-colors">
+	<p>Hello <span class="mention" data-mention="Ted">@Ted</span>.</p>
+</div>

+ 31 - 0
packages/ckeditor5-mention/docs/_snippets/features/custom-mention-colors-variables.js

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-mention-custom-colors' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		mention: [
+			{
+				marker: '@',
+				feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ]
+			}
+		]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 18 - 0
packages/ckeditor5-mention/docs/features/mention.md

@@ -261,6 +261,24 @@ Below is an example of a customized mention feature that:
 
 {@snippet features/mention-customization}
 
+### Colors and styles
+
+#### Using CSS variables
+
+The mention feature is using the power of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) which are defined in the [theme lark stylesheet](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-mention/mentionediting.css). Thanks to that mention styles can be easily customized:
+
+```css
+:root {
+	/* Make mention background blue. */
+	--ck-color-mention-background: hsla(220, 100%, 54%, 0.4);
+
+    /* Make mention text dark grey. */
+	--ck-color-mention-text: hsl(0, 0%, 15%);
+}
+```
+
+{@snippet features/custom-mention-colors-variables}
+
 ## Installation
 
 <info-box info>