Sfoglia il codice sorgente

Added styles for "code" element.

Kamil Piechaczek 8 anni fa
parent
commit
6b2322a556

+ 1 - 0
packages/ckeditor5-basic-styles/src/code.js

@@ -11,6 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import CodeEngine from './codeengine';
 import CodeEngine from './codeengine';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import codeIcon from '../theme/icons/code.svg';
 import codeIcon from '../theme/icons/code.svg';
+import '../theme/theme.scss';
 
 
 /**
 /**
  * The code feature. It introduces the Code button.
  * The code feature. It introduces the Code button.

+ 27 - 0
packages/ckeditor5-basic-styles/theme/theme.scss

@@ -0,0 +1,27 @@
+// 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/_colors.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_rounded.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing.scss';
+
+// It's a darker shade of u-color( 'background-hue' ) so it looks good in info-boxes.
+@include ck-color-add( ( 'code': rgba( 202, 205, 207, 0.3 ) ) );
+
+code {
+	background-color: ck-color( 'code' );
+	padding: ck-spacing( 'tiny' );
+	border-radius: $ck-border-radius;
+
+	&:before,
+	&:after {
+		// To reduce the width of that space to 0px.
+		letter-spacing: -1 * ck-spacing();
+		content: "\00a0";
+	}
+
+	// To remove an empty line when `code` is empty.
+	& > br[data-cke-filler] {
+		display: none;
+	}
+}