瀏覽代碼

Merge branch t/ckeditor5-theme-lark/107 into master

Internal: Updated theme to match changes in ckeditor/ckeditor5-theme-lark#107.
Piotrek Koszuliński 8 年之前
父節點
當前提交
7f4f48aa5c

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

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

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

@@ -35,6 +35,7 @@ describe( 'EditableUIView', () => {
 			view.init();
 			expect( view.element ).to.equal( view.editableElement );
 			expect( view.element.classList.contains( 'ck-editor__editable' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( view.externalElement ).to.be.undefined;
 		} );
 
@@ -45,6 +46,7 @@ describe( 'EditableUIView', () => {
 			expect( view.element ).to.equal( editableElement );
 			expect( view.element ).to.equal( view.editableElement );
 			expect( view.element.classList.contains( 'ck-editor__editable' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( view.externalElement ).to.equal( editableElement );
 		} );
 	} );

+ 8 - 4
packages/ckeditor5-ui/theme/components/icon.scss

@@ -1,14 +1,18 @@
 // 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/_fonts';
+
 /**
- * Default width/height of an icon.
+ * Default width/height of an icon. Note that it equals the default
+ * height of the line of text, so e.g. it matches the height of the
+ * button's label.
  */
-$ck-icon-size: 20px;
+$ck-icon-min-size: round( $ck-font-size-base * $ck-line-height-base );
 
 svg.ck-icon {
-	min-width: $ck-icon-size;
-	min-height: $ck-icon-size;
+	min-width: $ck-icon-min-size;
+	min-height: $ck-icon-min-size;
 
 	font-size: 1em;
 	vertical-align: middle;