浏览代码

Docs: Added a draft of a theme customization example.

Aleksander Nowodzinski 8 年之前
父节点
当前提交
6ac6d97564

+ 59 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark-vars.scss

@@ -0,0 +1,59 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+$ck-border-radius: 4px;
+$ck-font-size-base: 14px;
+
+$custom-background: #4A494B;
+$custom-foreground: #3a393d;
+$custom-border: #383738;
+$custom-white: #fff;
+
+$ck-colors: (
+	'border-focus': #48a3f5,
+	'text': #fafafa,
+	'shadow-drop': rgba( 0, 0, 0, .2 ),
+	'shadow-inner': rgba( 0, 0, 0, .1 ),
+
+	'button-default-background': 				$custom-background,
+	'button-default-border': 					$custom-border,
+	'button-on-background': 					$custom-foreground,
+	'button-on-border': 						$custom-border,
+	'button-action-background': 				#1ABC9C,
+	'button-action-border': 					#49d2b7,
+	'button-action-text': 						$custom-white,
+
+	'dropdown-panel-background': 				$custom-background,
+	'dropdown-panel-border': 					$custom-foreground,
+	'dropdown-symbol': 							#f1f1f1,
+
+	'input-background': 						$custom-foreground,
+	'input-border': 							#6b6970,
+	'input-text': 								#fafafa,
+
+	'list-background': 							$custom-background,
+	'list-item-background-hover': 				$custom-foreground,
+	'list-item-background-active': 				#1A8BF1,
+	'list-item-text-active': 					$custom-white,
+
+	'panel-background': 						$custom-background,
+	'panel-border': 							$custom-border,
+
+	'toolbar-background': 						$custom-foreground,
+	'toolbar-border': 							$custom-border,
+
+	'tooltip-background': 						#212025,
+	'tooltip-text': 							#eee,
+
+	'editor-border': 							$custom-background,
+	'editor-toolbar-background': 				$custom-background,
+	'editor-toolbar-button-background': 		$custom-background,
+	'editor-dropdown-background': 				#535254,
+
+	'image-caption-background': 				#f7f7f7,
+	'image-caption-text': 						#333,
+
+	'widget-border-blurred': 					#ddd,
+	'widget-border-hover': 						#FFD25C,
+	'widget-editable-focused-background': 		$custom-white
+);

+ 3 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.html

@@ -0,0 +1,3 @@
+<div id="snippet-classic-editor">
+	<p>This is <a href="https://ckeditor5.github.io">CKEditor&nbsp;5</a>.</p>
+</div>

+ 27 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+/* config { "sassImportPath": "./theme-lark-vars.scss" } */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
+import './theme-lark.scss';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-classic-editor' ), {
+		plugins: [ ArticlePreset ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 19 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.scss

@@ -0,0 +1,19 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_button.scss';
+
+$shadow-color: ck-color( 'editor-toolbar-background', 10 );
+
+.ck-editor-toolbar {
+	.ck-button {
+		&.ck-dropdown__button {
+			@include ck-box-shadow(
+				0 0 0 1px $shadow-color inset,
+				0 0 5px $shadow-color inset
+			);
+		}
+	}
+}

+ 9 - 0
packages/ckeditor5-theme-lark/docs/examples/theme/theme-lark.md

@@ -0,0 +1,9 @@
+---
+title: Theme Lark customization
+category: examples-themes
+order: 20
+---
+
+TODO
+
+{@snippet examples/theme-lark}