瀏覽代碼

Merge branch 'master' into t/344

Piotrek Koszuliński 7 年之前
父節點
當前提交
ef10480e56

+ 3 - 3
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.html

@@ -52,7 +52,7 @@
 			/* Let's give the editor some space and limits using a border. */
 			.ck-editor {
 				margin: 0 0 1em;
-				border: 1px solid rgba( 0, 0, 0, .1 );
+				border: 1px solid hsla(0, 0%, 0%, 0.1);
 				border-radius: 4px;
 			}
 
@@ -60,7 +60,7 @@
 			.ck-editor .btn-toolbar {
 				padding: .5rem;
 				background: #f7f7f9;
-				border-bottom: 1px solid rgba( 0, 0, 0, .1 );
+				border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
 			}
 
 			/* Tweaking the editable area for better readability. */
@@ -73,7 +73,7 @@
 			/* When in read–only mode, the editable should fade out. */
 			.ck-editor .ck-editor__editable:not([contenteditable]) {
 				background: #fafafa;
-				color: #777;
+				color: hsl(0, 0%, 47%);
 			}
 
 			/* Make sure the headings dropdown button does not change its size

+ 5 - 5
packages/ckeditor5-ui/docs/framework/guides/external-ui.md

@@ -188,15 +188,15 @@ Although Bootstrap provides most of the CSS, it does not come with styles dedica
 /* Give the editor some space and limits using a border. */
 .ck-editor {
 	margin: 1em 0;
-	border: 1px solid rgba( 0, 0, 0, .1 );
+	border: 1px solid hsla(0, 0%, 0%, 0.1);
 	border-radius: 4px;
 }
 
 /* Adding internal spacing, border and background to the toolbar.  */
 .ck-editor .btn-toolbar {
 	padding: .5rem;
-	background: #f7f7f9;
-	border-bottom: 1px solid rgba( 0, 0, 0, .1 );
+	background: hsl(240, 14%, 97%);
+	border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
 }
 
 /* Tweaking the editable area for better readability. */
@@ -207,8 +207,8 @@ Although Bootstrap provides most of the CSS, it does not come with styles dedica
 
 /* When in read–only mode, the editable should fade out. */
 .ck-editor .ck-editor__editable:not([contenteditable]) {
-	background: #fafafa;
-	color: #777;
+	background: hsl(0, 0%, 98%);
+	color: hsl(0, 0%, 47%);
 }
 
 /* Make sure the headings drop-down button does not change its size

+ 2 - 0
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -36,7 +36,9 @@ export default class EditableUIView extends View {
 			attributes: {
 				class: [
 					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ),
+					'ck',
 					'ck-editor__editable',
+					'ck-content',
 					'ck-rounded-corners'
 				],
 				contenteditable: bind.to( 'isReadOnly', value => !value ),

+ 3 - 3
packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js

@@ -67,7 +67,7 @@ export default class BoxedEditorUIView extends EditorUIView {
 				role: 'application',
 				dir: 'ltr',
 				lang: locale.language,
-				'aria-labelledby': `cke-editor__aria-label_${ ariaLabelUid }`
+				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`
 			},
 
 			children: [
@@ -106,8 +106,8 @@ export default class BoxedEditorUIView extends EditorUIView {
 
 		voiceLabel.extendTemplate( {
 			attributes: {
-				id: `cke-editor__aria-label_${ ariaLabelUid }`,
-				class: 'cke-voice-label'
+				id: `ck-editor__aria-label_${ ariaLabelUid }`,
+				class: 'ck-voice-label'
 			}
 		} );
 

+ 2 - 0
packages/ckeditor5-ui/tests/editableui/editableuiview.js

@@ -35,7 +35,9 @@ describe( 'EditableUIView', () => {
 
 			view.render();
 			expect( view.element ).to.equal( view.editableElement );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-editor__editable' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-content' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( view.externalElement ).to.be.undefined;
 			expect( view.isRendered ).to.be.true;

+ 2 - 2
packages/ckeditor5-ui/tests/editorui/boxed/boxededitoruiview.js

@@ -32,13 +32,13 @@ describe( 'BoxedEditorUIView', () => {
 			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( element.attributes[ 'aria-labelledby' ].value )
 				.to.equal( view.element.firstChild.id )
-				.to.match( /^cke-editor__aria-label_\w+$/ );
+				.to.match( /^ck-editor__aria-label_\w+$/ );
 		} );
 
 		it( 'bootstraps the voice label from template', () => {
 			const voiceLabel = view.element.firstChild;
 
-			expect( voiceLabel.classList.contains( 'cke-voice-label' ) ).to.be.true;
+			expect( voiceLabel.classList.contains( 'ck-voice-label' ) ).to.be.true;
 			expect( voiceLabel.textContent ).to.equal( 'Rich Text Editor' );
 		} );
 

+ 1 - 1
packages/ckeditor5-ui/theme/components/label/label.css

@@ -7,6 +7,6 @@
 	display: block;
 }
 
-.cke-voice-label {
+.ck-voice-label {
 	display: none;
 }