Browse Source

Merge branch 't/513'

Docs: Added theme customization sample and guide. See #513.
Piotrek Koszuliński 8 years ago
parent
commit
52ad890934
4 changed files with 40 additions and 11 deletions
  1. 4 0
      docs/assets/snippet-styles.css
  2. 14 0
      docs/umberto.json
  3. 9 9
      mgit.json
  4. 13 2
      scripts/docs/snippet-adapter/snippetadapter.js

+ 4 - 0
docs/assets/snippet-styles.css

@@ -45,8 +45,12 @@
 #snippet-inline-editor .ck-editor__editable {
 	margin-bottom: 1rem;
 	padding: 2rem;
+}
+
+#snippet-inline-editor .ck-editor__editable:not(.ck-focused) {
 	border: 1px solid rgba(0, 0, 0, 0.15);
 }
+
 #snippet-inline-editor h2, #snippet-inline-editor h3 {
 	margin-top: 0;
 	padding-top: 0;

+ 14 - 0
docs/umberto.json

@@ -50,6 +50,11 @@
 							"name": "Plugins",
 							"id": "plugins",
 							"slug": "plugins"
+						},
+						{
+							"name": "User interface",
+							"id": "ui",
+							"slug": "ui"
 						}
 					]
 				},
@@ -119,6 +124,11 @@
 					"name": "Builds",
 					"id": "examples-builds",
 					"slug": "builds"
+				},
+				{
+					"name": "Framework",
+					"id": "examples-framework",
+					"slug": "framework"
 				}
 			]
 		}
@@ -139,6 +149,10 @@
 		{
 			"path": "packages/ckeditor5-markdown-gfm",
 			"prefix": "markdown-gfm"
+		},
+		{
+			"path": "packages/ckeditor5-theme-lark",
+			"prefix": "theme-lark"
 		}
 	]
 }

+ 9 - 9
mgit.json

@@ -11,24 +11,24 @@
     "@ckeditor/ckeditor5-build-inline": "ckeditor/ckeditor5-build-inline",
     "@ckeditor/ckeditor5-clipboard": "ckeditor/ckeditor5-clipboard",
     "@ckeditor/ckeditor5-core": "ckeditor/ckeditor5-core",
-    "@ckeditor/ckeditor5-editor-balloon-toolbar": "ckeditor/ckeditor5-editor-balloon-toolbar",
-    "@ckeditor/ckeditor5-editor-classic": "ckeditor/ckeditor5-editor-classic",
-    "@ckeditor/ckeditor5-editor-inline": "ckeditor/ckeditor5-editor-inline",
-    "@ckeditor/ckeditor5-engine": "ckeditor/ckeditor5-engine",
+    "@ckeditor/ckeditor5-editor-balloon-toolbar": "ckeditor/ckeditor5-editor-balloon-toolbar#t/ckeditor5-theme-lark/107",
+    "@ckeditor/ckeditor5-editor-classic": "ckeditor/ckeditor5-editor-classic#t/ckeditor5-theme-lark/107",
+    "@ckeditor/ckeditor5-editor-inline": "ckeditor/ckeditor5-editor-inline#t/ckeditor5-theme-lark/107",
+    "@ckeditor/ckeditor5-engine": "ckeditor/ckeditor5-engine#t/ckeditor5-theme-lark/107",
     "@ckeditor/ckeditor5-enter": "ckeditor/ckeditor5-enter",
     "@ckeditor/ckeditor5-heading": "ckeditor/ckeditor5-heading",
-    "@ckeditor/ckeditor5-image": "ckeditor/ckeditor5-image",
-    "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link",
+    "@ckeditor/ckeditor5-image": "ckeditor/ckeditor5-image#t/ckeditor5-theme-lark/107",
+    "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link#t/ckeditor5-theme-lark/107",
     "@ckeditor/ckeditor5-list": "ckeditor/ckeditor5-list",
     "@ckeditor/ckeditor5-markdown-gfm": "ckeditor/ckeditor5-markdown-gfm",
     "@ckeditor/ckeditor5-paragraph": "ckeditor/ckeditor5-paragraph",
     "@ckeditor/ckeditor5-presets": "ckeditor/ckeditor5-presets",
-    "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark",
+    "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark#t/107",
     "@ckeditor/ckeditor5-typing": "ckeditor/ckeditor5-typing",
-    "@ckeditor/ckeditor5-ui": "ckeditor/ckeditor5-ui",
+    "@ckeditor/ckeditor5-ui": "ckeditor/ckeditor5-ui#t/ckeditor5-theme-lark/107",
     "@ckeditor/ckeditor5-undo": "ckeditor/ckeditor5-undo",
     "@ckeditor/ckeditor5-upload": "ckeditor/ckeditor5-upload",
     "@ckeditor/ckeditor5-utils": "ckeditor/ckeditor5-utils",
-    "@ckeditor/ckeditor5-widget": "ckeditor/ckeditor5-widget"
+    "@ckeditor/ckeditor5-widget": "ckeditor/ckeditor5-widget#t/ckeditor5-theme-lark/107"
   }
 }

+ 13 - 2
scripts/docs/snippet-adapter/snippetadapter.js

@@ -22,12 +22,18 @@ module.exports = function snippetAdapter( data ) {
 
 	const snippetConfig = readSnippetConfig( data.snippetSource.js );
 	const outputPath = path.join( data.outputPath, data.snippetPath );
+	let sassImportPath;
+
+	if ( snippetConfig.sassImportPath ) {
+		sassImportPath = path.join( path.dirname( data.snippetSource.js ), snippetConfig.sassImportPath );
+	}
 
 	const webpackConfig = getWebpackConfig( {
 		entry: data.snippetSource.js,
 		outputPath,
 		language: snippetConfig.language,
-		minify: data.options.production
+		minify: data.options.production,
+		sassImportPath
 	} );
 
 	let promise;
@@ -129,7 +135,12 @@ function getWebpackConfig( config ) {
 									minimize: config.minify
 								}
 							},
-							'sass-loader'
+							{
+								loader: 'sass-loader',
+								options: {
+									data: config.sassImportPath ? `@import '${ config.sassImportPath }';` : ''
+								}
+							}
 						]
 					} )
 				}