瀏覽代碼

Added the code language label to the block. Added code block dropdown styles to render with a long list of languages.

Aleksander Nowodzinski 6 年之前
父節點
當前提交
55ef7fbd4f
共有 1 個文件被更改,包括 27 次插入0 次删除
  1. 27 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css

+ 27 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-editor__editable pre {
+	position: relative;
+
+	&[data-language]::after {
+		content: attr(data-language);
+		position: absolute;
+		top: -1px;
+		right: 10px;
+		background: hsl(0, 0%, 46%);
+
+		font-size: 10px;
+		font-family: var(--ck-font-face);
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
+		color: hsl(0, 0%, 100%);
+	}
+}
+
+.ck.ck-code-block-dropdown .ck-dropdown__panel {
+	/* There could be dozens of languages available. Use scroll to prevent a 10e6px dropdown. */
+	max-height: 250px;
+	overflow-y: auto;
+}