Browse Source

Merge branch 'master' into t/333

# Conflicts:
#	theme/theme.scss
Maciej Gołaszewski 8 years ago
parent
commit
21b869e26d
54 changed files with 518 additions and 444 deletions
  1. 29 0
      packages/ckeditor5-ui/CHANGELOG.md
  2. 14 0
      packages/ckeditor5-ui/lang/translations/fi.po
  3. 14 14
      packages/ckeditor5-ui/package.json
  4. 2 0
      packages/ckeditor5-ui/src/button/buttonview.js
  5. 2 0
      packages/ckeditor5-ui/src/dropdown/dropdownview.js
  6. 34 13
      packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js
  7. 2 0
      packages/ckeditor5-ui/src/editorui/editoruiview.js
  8. 2 0
      packages/ckeditor5-ui/src/icon/iconview.js
  9. 2 0
      packages/ckeditor5-ui/src/inputtext/inputtextview.js
  10. 2 0
      packages/ckeditor5-ui/src/label/labelview.js
  11. 2 0
      packages/ckeditor5-ui/src/list/listview.js
  12. 2 0
      packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js
  13. 2 0
      packages/ckeditor5-ui/src/panel/sticky/stickypanelview.js
  14. 2 0
      packages/ckeditor5-ui/src/toolbar/toolbarview.js
  15. 2 0
      packages/ckeditor5-ui/src/tooltip/tooltipview.js
  16. 2 0
      packages/ckeditor5-ui/src/view.js
  17. 0 1
      packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js
  18. 0 2
      packages/ckeditor5-ui/tests/manual/icon/icon.js
  19. 0 1
      packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.js
  20. 0 2
      packages/ckeditor5-ui/tests/manual/panel/sticky/stickypanelview.js
  21. 0 2
      packages/ckeditor5-ui/tests/manual/tickets/126/1.js
  22. 36 33
      packages/ckeditor5-ui/tests/template.js
  23. 0 30
      packages/ckeditor5-ui/theme/components/button.scss
  24. 35 0
      packages/ckeditor5-ui/theme/components/button/button.css
  25. 0 37
      packages/ckeditor5-ui/theme/components/dropdown.scss
  26. 39 0
      packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
  27. 0 21
      packages/ckeditor5-ui/theme/components/editor.scss
  28. 10 0
      packages/ckeditor5-ui/theme/components/editorui/editorui.css
  29. 0 34
      packages/ckeditor5-ui/theme/components/icon.scss
  30. 24 0
      packages/ckeditor5-ui/theme/components/icon/icon.css
  31. 10 0
      packages/ckeditor5-ui/theme/components/inputtext/inputtext.css
  32. 0 10
      packages/ckeditor5-ui/theme/components/label.scss
  33. 12 0
      packages/ckeditor5-ui/theme/components/label/label.css
  34. 0 10
      packages/ckeditor5-ui/theme/components/list.scss
  35. 22 0
      packages/ckeditor5-ui/theme/components/list/list.css
  36. 51 0
      packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
  37. 0 55
      packages/ckeditor5-ui/theme/components/panel/balloonpanel.scss
  38. 19 0
      packages/ckeditor5-ui/theme/components/panel/stickypanel.css
  39. 0 17
      packages/ckeditor5-ui/theme/components/panel/stickypanel.scss
  40. 0 23
      packages/ckeditor5-ui/theme/components/reset.scss
  41. 19 0
      packages/ckeditor5-ui/theme/components/toolbar/toolbar.css
  42. 0 15
      packages/ckeditor5-ui/theme/components/toolbar/toolbar.scss
  43. 0 62
      packages/ckeditor5-ui/theme/components/tooltip.scss
  44. 34 0
      packages/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css
  45. 35 0
      packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
  46. 13 0
      packages/ckeditor5-ui/theme/globals/_hidden.css
  47. 13 0
      packages/ckeditor5-ui/theme/globals/_reset.css
  48. 9 0
      packages/ckeditor5-ui/theme/globals/_zindex.css
  49. 8 0
      packages/ckeditor5-ui/theme/globals/globals.css
  50. 0 11
      packages/ckeditor5-ui/theme/helpers/_editor.scss
  51. 0 20
      packages/ckeditor5-ui/theme/helpers/_states.scss
  52. 0 11
      packages/ckeditor5-ui/theme/helpers/_zindex.scss
  53. 14 0
      packages/ckeditor5-ui/theme/mixins/_unselectable.css
  54. 0 20
      packages/ckeditor5-ui/theme/theme.scss

+ 29 - 0
packages/ckeditor5-ui/CHANGELOG.md

@@ -1,6 +1,35 @@
 Changelog
 =========
 
+## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
+
+### Bug fixes
+
+* `Template#getViews()` generator should not traverse native HTML elements. Closes [#337](https://github.com/ckeditor/ckeditor5-ui/issues/337). Closes [ckeditor/ckeditor5#657](https://github.com/ckeditor/ckeditor5/issues/657). ([894bad0](https://github.com/ckeditor/ckeditor5-ui/commit/894bad0))
+* Improved binding of the `value` attribute in `InputTextView`. Closes [#335](https://github.com/ckeditor/ckeditor5-ui/issues/335). ([823120b](https://github.com/ckeditor/ckeditor5-ui/commit/823120b))
+
+### Other changes
+
+* Implemented `View#render()` method which replaces rendering the `#element` upon the first access and incorporates the `#init()` method functionality. Closes [#262](https://github.com/ckeditor/ckeditor5-ui/issues/262). Closes [#302](https://github.com/ckeditor/ckeditor5-ui/issues/302). ([bf90ad5](https://github.com/ckeditor/ckeditor5-ui/commit/bf90ad5))
+
+   In other words – the `View#render()` method needs to be called to render a view and it sets the `View#element` itself. It can be called only once and it is done automatically if a view is added to some other view (as its child). If you need to add any additional logic to your component's initialization, then override the `render()` method (and remember to call `super.render()`).
+
+   Additionally, from now on `View#setTemplate()` and `View#extendTemplate()` methods are recommended as a shorthand for `view.template = new Template( { ... } )` and `Template.extend( view.template )`.
+
+    Please refer to the updated [documentation](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/architecture/intro.html#UI-library) to learn more.
+* Removed legacy `width` and `height` attributes from the `BoxedEditorUIView`. Closes [#25](https://github.com/ckeditor/ckeditor5-ui/issues/25). ([ffa419a](https://github.com/ckeditor/ckeditor5-ui/commit/ffa419a))
+* The `ComponentFactory` should be case-insensitive. Closes [#324](https://github.com/ckeditor/ckeditor5-ui/issues/324). ([94417e9](https://github.com/ckeditor/ckeditor5-ui/commit/94417e9))
+* Updated translations. ([186f365](https://github.com/ckeditor/ckeditor5-ui/commit/186f365))
+
+### BREAKING CHANGES
+
+* The `View#init()` method in UI components has been renamed to `render()`. Please refer to the [documentation](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/architecture/intro.html#UI-library) to learn more.
+* The `View#element` is no longer a getter which renders an element when first referenced. Use the `View#render()` method instead.
+* `Template#children` property became an `Array` (previously `ViewCollection`).
+* `View#addChildren()` and `View#removeChildren()` methods became `#registerChildren()` and `#deregisterChildren()`.
+* The DOM structure of the `StickyPanelView` has changed along with the class names. Please refer to the component documentation to learn more.
+
+
 ## [1.0.0-alpha.1](https://github.com/ckeditor/ckeditor5-ui/compare/v0.10.0...v1.0.0-alpha.1) (2017-10-03)
 
 ### Bug fixes

+ 14 - 0
packages/ckeditor5-ui/lang/translations/fi.po

@@ -0,0 +1,14 @@
+# Copyright (c) Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: fi\n"
+"Language-Team: Finnish (https://www.transifex.com/ckeditor/teams/11143/fi/)\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "Rikas tekstieditori, %0"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "Rikas tekstieditori"

+ 14 - 14
packages/ckeditor5-ui/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor5",
     "ckeditor5-lib"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.1"
+    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-heading": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-link": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.1",
-    "@ckeditor/ckeditor5-undo": "^1.0.0-alpha.1",
+    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-heading": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-link": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-undo": "^1.0.0-alpha.2",
     "del": "^2.2.0",
     "eslint": "^4.8.0",
     "eslint-config-ckeditor5": "^1.0.6",

+ 2 - 0
packages/ckeditor5-ui/src/button/buttonview.js

@@ -13,6 +13,8 @@ import TooltipView from '../tooltip/tooltipview';
 
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
+import '../../theme/components/button/button.css';
+
 /**
  * The button view class.
  *

+ 2 - 0
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -11,6 +11,8 @@ import View from '../view';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+import '../../theme/components/dropdown/dropdown.css';
+
 /**
  * The dropdown view class.
  *

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

@@ -8,6 +8,7 @@
  */
 
 import EditorUIView from '../../editorui/editoruiview';
+import LabelView from '../../label/labelview';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 
 /**
@@ -25,7 +26,6 @@ export default class BoxedEditorUIView extends EditorUIView {
 	constructor( locale ) {
 		super( locale );
 
-		const t = this.t;
 		const ariaLabelUid = uid();
 
 		/**
@@ -46,6 +46,15 @@ export default class BoxedEditorUIView extends EditorUIView {
 		 */
 		this.main = this.createCollection();
 
+		/**
+		 * Voice label of the UI.
+		 *
+		 * @protected
+		 * @readonly
+		 * @member {module:ui/view~View} #_voiceLabelView
+		 */
+		this._voiceLabelView = this._createVoiceLabel( ariaLabelUid );
+
 		this.setTemplate( {
 			tag: 'div',
 
@@ -57,22 +66,12 @@ export default class BoxedEditorUIView extends EditorUIView {
 				],
 				role: 'application',
 				dir: 'ltr',
-				lang: locale.lang,
+				lang: locale.language,
 				'aria-labelledby': `cke-editor__aria-label_${ ariaLabelUid }`
 			},
 
 			children: [
-				{
-					tag: 'span',
-					attributes: {
-						id: `cke-editor__aria-label_${ ariaLabelUid }`,
-						class: 'cke-voice-label'
-					},
-					children: [
-						// TODO: Editor name?
-						t( 'Rich Text Editor' )
-					]
-				},
+				this._voiceLabelView,
 				{
 					tag: 'div',
 					attributes: {
@@ -92,4 +91,26 @@ export default class BoxedEditorUIView extends EditorUIView {
 			]
 		} );
 	}
+
+	/**
+	 * Creates a voice label view instance.
+	 *
+	 * @private
+	 * @returns {module:ui/label/labelview~LabelView}
+	 */
+	_createVoiceLabel( ariaLabelUid ) {
+		const t = this.t;
+		const voiceLabel = new LabelView();
+
+		voiceLabel.text = t( 'Rich Text Editor' );
+
+		voiceLabel.extendTemplate( {
+			attributes: {
+				id: `cke-editor__aria-label_${ ariaLabelUid }`,
+				class: 'cke-voice-label'
+			}
+		} );
+
+		return voiceLabel;
+	}
 }

+ 2 - 0
packages/ckeditor5-ui/src/editorui/editoruiview.js

@@ -12,6 +12,8 @@
 import View from '../view';
 import Template from '../template';
 
+import '../../theme/components/editorui/editorui.css';
+
 /**
  * The editor UI view class. Base class for the editor main views.
  *

+ 2 - 0
packages/ckeditor5-ui/src/icon/iconview.js

@@ -11,6 +11,8 @@
 
 import View from '../view';
 
+import '../../theme/components/icon/icon.css';
+
 /**
  * The icon view class.
  *

+ 2 - 0
packages/ckeditor5-ui/src/inputtext/inputtextview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/inputtext/inputtext.css';
+
 /**
  * The text input view class.
  *

+ 2 - 0
packages/ckeditor5-ui/src/label/labelview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/label/label.css';
+
 /**
  * The label view class.
  *

+ 2 - 0
packages/ckeditor5-ui/src/list/listview.js

@@ -12,6 +12,8 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+import '../../theme/components/list/list.css';
+
 /**
  * The list view class.
  *

+ 2 - 0
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -14,6 +14,8 @@ import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
+import '../../../theme/components/panel/balloonpanel.css';
+
 const toPx = toUnit( 'px' );
 const defaultLimiterElement = global.document.body;
 

+ 2 - 0
packages/ckeditor5-ui/src/panel/sticky/stickypanelview.js

@@ -12,6 +12,8 @@ import View from '../../view';
 import Template from '../../template';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 
+import '../../../theme/components/panel/stickypanel.css';
+
 const toPx = toUnit( 'px' );
 
 /**

+ 2 - 0
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -15,6 +15,8 @@ import ToolbarSeparatorView from './toolbarseparatorview';
 import preventDefault from '../bindings/preventdefault.js';
 import log from '@ckeditor/ckeditor5-utils/src/log';
 
+import '../../theme/components/toolbar/toolbar.css';
+
 /**
  * The toolbar view class.
  *

+ 2 - 0
packages/ckeditor5-ui/src/tooltip/tooltipview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/tooltip/tooltip.css';
+
 /**
  * The tooltip view class.
  *

+ 2 - 0
packages/ckeditor5-ui/src/view.js

@@ -16,6 +16,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable';
 
+import '../theme/globals/globals.css';
+
 /**
  * The basic view class, which represents an HTML element created out of a
  * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle

+ 0 - 1
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -11,7 +11,6 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import createDropdown from '../../../src/dropdown/createdropdown';
 import createListDropdown from '../../../src/dropdown/list/createlistdropdown';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 import testUtils from '../../_utils/utils';
 
 import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';

+ 0 - 2
packages/ckeditor5-ui/tests/manual/icon/icon.js

@@ -7,8 +7,6 @@
 
 import IconView from '../../../src/icon/iconview';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 const wrapper = document.querySelector( '#inline-svg' );
 
 const icon = `

+ 0 - 1
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.js

@@ -6,7 +6,6 @@
 /* globals document */
 
 import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 
 const defaultPositions = BalloonPanelView.defaultPositions;
 const container = document.querySelector( '#container' );

+ 0 - 2
packages/ckeditor5-ui/tests/manual/panel/sticky/stickypanelview.js

@@ -6,8 +6,6 @@
 import testUtils from '../../../_utils/utils';
 import StickyPanelView from '../../../../src/panel/sticky/stickypanelview';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 const ui = testUtils.createTestUIView( {
 	stickyToTheTop: '.ck-sticky_to-the-top .ck-editor__top',
 	stickyToTheBox: '.ck-sticky_to-the-box .ck-editor__top'

+ 0 - 2
packages/ckeditor5-ui/tests/manual/tickets/126/1.js

@@ -7,8 +7,6 @@
 
 import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 window.createPanel = selector => {
 	const view = new BalloonPanelView();
 

+ 36 - 33
packages/ckeditor5-ui/tests/template.js

@@ -279,18 +279,21 @@ describe( 'Template', () => {
 						}
 					} );
 
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;"></p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red"></p>' );
 				} );
 
 				it( 'renders as a static value (Array of values)', () => {
 					setElement( {
 						tag: 'p',
 						attributes: {
-							style: [ 'color: red;', 'display: block;' ]
+							style: {
+								color: 'red',
+								display: 'block'
+							}
 						}
 					} );
 
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;display:block;"></p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;display:block"></p>' );
 				} );
 
 				it( 'renders as a value bound to the model', () => {
@@ -301,11 +304,11 @@ describe( 'Template', () => {
 						}
 					} );
 
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px;"></p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px"></p>' );
 
 					observable.width = '1em';
 
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:1em;"></p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:1em"></p>' );
 				} );
 
 				it( 'renders as a value bound to the model (Array of bindings)', () => {
@@ -319,11 +322,11 @@ describe( 'Template', () => {
 						}
 					} );
 
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:10px;background-color:yellow;"></p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="background-color:yellow;width:10px"></p>' );
 
 					observable.width = '1em';
 
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="width:1em;background-color:yellow;"></p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="background-color:yellow;width:1em"></p>' );
 				} );
 
 				describe( 'object', () => {
@@ -340,13 +343,13 @@ describe( 'Template', () => {
 						} );
 
 						expect( normalizeHtml( el.outerHTML ) )
-							.to.equal( '<p style="width:10px;height:10px;background-color:yellow;"></p>' );
+							.to.equal( '<p style="background-color:yellow;height:10px;width:10px"></p>' );
 
 						observable.width = '20px';
 						observable.backgroundColor = 'green';
 
 						expect( normalizeHtml( el.outerHTML ) )
-							.to.equal( '<p style="width:20px;height:10px;background-color:green;"></p>' );
+							.to.equal( '<p style="background-color:green;height:10px;width:20px"></p>' );
 					} );
 
 					it( 'renders with empty string attributes', () => {
@@ -360,7 +363,7 @@ describe( 'Template', () => {
 							}
 						} );
 
-						expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="background-color:yellow;"></p>' );
+						expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="background-color:yellow"></p>' );
 
 						observable.backgroundColor = '';
 
@@ -801,7 +804,7 @@ describe( 'Template', () => {
 				} ).apply( el );
 
 				expect( normalizeHtml( el.outerHTML ) ).to.equal(
-					'<div class="default a b" x="bar"></div>'
+					'<div class="a b default" x="bar"></div>'
 				);
 			} );
 
@@ -852,7 +855,7 @@ describe( 'Template', () => {
 						}
 					} ).apply( el );
 
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;display:block;"></p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p style="color:red;display:block"></p>' );
 				} );
 
 				it( 'applies as a static value (Array of values)', () => {
@@ -870,7 +873,7 @@ describe( 'Template', () => {
 					} ).apply( el );
 
 					expect( normalizeHtml( el.outerHTML ) ).to.equal(
-						'<p style="color:red;display:block;float:left;overflow:hidden;"></p>'
+						'<p style="color:red;display:block;float:left;overflow:hidden"></p>'
 					);
 				} );
 
@@ -895,7 +898,7 @@ describe( 'Template', () => {
 					} ).apply( el );
 
 					expect( normalizeHtml( el.outerHTML ) )
-						.to.equal( '<p style="width:20px;height:10px;float:left;background-color:green;"></p>' );
+						.to.equal( '<p style="background-color:green;float:left;height:10px;width:20px"></p>' );
 				} );
 
 				it( 'applies when bound to observable', () => {
@@ -919,13 +922,13 @@ describe( 'Template', () => {
 					} ).apply( el );
 
 					expect( normalizeHtml( el.outerHTML ) ).to.equal(
-						'<p style="left:20px;width:10px;float:left;background-color:green;"></p>'
+						'<p style="background-color:green;float:left;left:20px;width:10px"></p>'
 					);
 
 					observable.width = '100px';
 
 					expect( normalizeHtml( el.outerHTML ) ).to.equal(
-						'<p style="left:20px;width:100px;float:left;background-color:green;"></p>'
+						'<p style="background-color:green;float:left;left:20px;width:100px"></p>'
 					);
 				} );
 			} );
@@ -1067,14 +1070,14 @@ describe( 'Template', () => {
 
 				expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="applied-parent-qux" id="BAR">' +
 					'<a class="a1 a2 applied-A-bar" id="applied-A">applied-a</a>' +
-					'<b class="b1 b2 applied-B-qux" id="applied-B">applied-b</b>' +
+					'<b class="applied-B-qux b1 b2" id="applied-B">applied-b</b>' +
 				'</div>' );
 
 				observable.foo = 'updated';
 
 				expect( normalizeHtml( el.outerHTML ) ).to.equal( '<div class="applied-parent-qux" id="UPDATED">' +
 					'<a class="a1 a2 applied-A-updated" id="applied-A">applied-a</a>' +
-					'<b class="b1 b2 applied-B-qux" id="applied-B">applied-b</b>' +
+					'<b class="applied-B-qux b1 b2" id="applied-B">applied-b</b>' +
 				'</div>' );
 
 				document.body.appendChild( el );
@@ -1381,22 +1384,22 @@ describe( 'Template', () => {
 
 					tpl.apply( el );
 					expect( normalizeHtml( el.outerHTML ) ).to.equal(
-						'<a style="font-weight:bold;overflow:visible;">' +
-							'<b style="color:red;display:block;"></b>' +
+						'<a style="font-weight:bold;overflow:visible">' +
+							'<b style="color:red;display:block"></b>' +
 						'</a>'
 					);
 
 					tpl.revert( el );
 					expect( normalizeHtml( el.outerHTML ) ).to.equal(
-						'<a style="font-weight:bold;">' +
-							'<b style="color:red;"></b>' +
+						'<a style="font-weight:bold">' +
+							'<b style="color:red"></b>' +
 						'</a>'
 					);
 
 					observable.overflow = 'hidden';
 					expect( normalizeHtml( el.outerHTML ) ).to.equal(
-						'<a style="font-weight:bold;">' +
-							'<b style="color:red;"></b>' +
+						'<a style="font-weight:bold">' +
+							'<b style="color:red"></b>' +
 						'</a>'
 					);
 				} );
@@ -1472,17 +1475,17 @@ describe( 'Template', () => {
 
 				tpl.apply( el );
 				expect( normalizeHtml( el.outerHTML ) ).to.equal(
-					'<div class="div1 div2" style="font-weight:bold;">' +
+					'<div class="div1 div2" style="font-weight:bold">' +
 						'<a class="a1 a2 x y" data-new-attr="foo">applied-a</a>' +
-						'<b class="b1 b2 a b bar">applied-b</b>' +
+						'<b class="a b b1 b2 bar">applied-b</b>' +
 					'</div>'
 				);
 
 				observable.foo = 'baz';
 				expect( normalizeHtml( el.outerHTML ) ).to.equal(
-					'<div class="div1 div2" style="font-weight:bold;">' +
+					'<div class="div1 div2" style="font-weight:bold">' +
 						'<a class="a1 a2 x y" data-new-attr="foo">applied-a</a>' +
-						'<b class="b1 b2 a b baz">applied-b</b>' +
+						'<b class="a b b1 b2 baz">applied-b</b>' +
 					'</div>'
 				);
 
@@ -1932,11 +1935,11 @@ describe( 'Template', () => {
 
 					observable.foo = 'a';
 					observable.baz = 'b';
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class a b foo-is-a ck-end">abc</p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="a b ck-class ck-end foo-is-a">abc</p>' );
 
 					observable.foo = 'c';
 					observable.baz = 'd';
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class c d foo-is-c ck-end">abc</p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="c ck-class ck-end d foo-is-c">abc</p>' );
 				} );
 
 				it( 'allows binding attribute to the observable – array of bindings (Text Node)', () => {
@@ -2172,10 +2175,10 @@ describe( 'Template', () => {
 					} );
 
 					observable.foo = observable.bar = true;
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class foo-set ck-end">abc</p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class ck-end foo-set">abc</p>' );
 
 					observable.foo = observable.bar = false;
-					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="ck-class bar-not-set ck-end">abc</p>' );
+					expect( normalizeHtml( el.outerHTML ) ).to.equal( '<p class="bar-not-set ck-class ck-end">abc</p>' );
 				} );
 
 				it( 'allows binding attribute to the observable – value of an attribute processed by a callback', () => {
@@ -2791,7 +2794,7 @@ describe( 'Template', () => {
 							}
 						]
 					},
-					'<p><span class="foo bar"></span></p>'
+					'<p><span class="bar foo"></span></p>'
 				);
 			} );
 

+ 0 - 30
packages/ckeditor5-ui/theme/components/button.scss

@@ -1,30 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-button,
-a.ck-button {
-	display: inline-block;
-	position: relative;
-
-	@include ck-unselectable();
-	@include ck-tooltip_enabled();
-
-	&.ck-button_with-text {
-		.ck-button__label {
-			display: block;
-		}
-	}
-
-	&:hover {
-		@include ck-tooltip_visible();
-	}
-
-	// Get rid of the native focus outline around the tooltip when focused (but not :hover).
-	&:focus:not(:hover) {
-		@include ck-tooltip_disabled();
-	}
-
-	.ck-button__label {
-		display: none;
-	}
-}

+ 35 - 0
packages/ckeditor5-ui/theme/components/button/button.css

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../mixins/_unselectable.css";
+@import "../tooltip/mixins/_tooltip.css";
+
+.ck-button,
+a.ck-button {
+	@mixin ck-unselectable;
+	@mixin ck-tooltip_enabled;
+
+	display: inline-block;
+	position: relative;
+
+	&.ck-button_with-text {
+		& .ck-button__label {
+			display: block;
+		}
+	}
+
+	&:hover {
+		@mixin ck-tooltip_visible;
+	}
+
+	/* Get rid of the native focus outline around the tooltip when focused (but not :hover). */
+	&:focus:not(:hover) {
+		@mixin ck-tooltip_disabled;
+	}
+
+	& .ck-button__label {
+		display: none;
+	}
+}

+ 0 - 37
packages/ckeditor5-ui/theme/components/dropdown.scss

@@ -1,37 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-dropdown {
-	display: inline-block;
-	position: relative;
-
-	// A triangle displayed to indicate this is actually a dropdown.
-	&::after {
-		content: '';
-		width: 0;
-		height: 0;
-		pointer-events: none;
-		z-index: ck-z();
-
-		position: absolute;
-		top: 50%;
-		transform: translate( 0, -50% );
-	}
-}
-
-.ck-dropdown__panel {
-	// This is to get rid of flickering when the tooltip is shown under the panel,
-	// which looks like the panel moves vertically a pixel down and up.
-	-webkit-backface-visibility: hidden;
-
-	display: none;
-	z-index: ck-z( 'modal' );
-
-	position: absolute;
-	left: 0px;
-	transform: translateY( 100% );
-
-	&-visible {
-		display: inline-block;
-	}
-}

+ 39 - 0
packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-dropdown {
+	display: inline-block;
+	position: relative;
+
+	/* A triangle displayed to indicate this is actually a dropdown. */
+	&::after {
+		content: '';
+		width: 0;
+		height: 0;
+		pointer-events: none;
+		z-index: var(--ck-z-default);
+
+		position: absolute;
+		top: 50%;
+		transform: translate( 0, -50% );
+	}
+}
+
+.ck-dropdown__panel {
+	/* This is to get rid of flickering when the tooltip is shown under the panel,
+	which looks like the panel moves vertically a pixel down and up. */
+	-webkit-backface-visibility: hidden;
+
+	display: none;
+	z-index: var(--ck-z-modal);
+
+	position: absolute;
+	left: 0px;
+	transform: translateY( 100% );
+}
+
+.ck-dropdown__panel-visible {
+	display: inline-block;
+}

+ 0 - 21
packages/ckeditor5-ui/theme/components/editor.scss

@@ -1,21 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@mixin ck-editor-toolbar {
-	.ck-button {
-		// Make sure the next button does not overlap focused one.
-		&:focus {
-			z-index: ck-z();
-		}
-
-		// Tooltip tweaks:
-		//    1. Don't display tooltips for disabled buttons in the toolbar,
-		//       they're unavailable anyway.
-		//    2. Don't display tooltips for buttons with text; text explains
-		//       the button anyway.
-		&.ck-button_with-text:not(.ck-dropdown__button),
-		&.ck-disabled {
-			@include ck-tooltip_disabled();
-		}
-	}
-}

+ 10 - 0
packages/ckeditor5-ui/theme/components/editorui/editorui.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

+ 0 - 34
packages/ckeditor5-ui/theme/components/icon.scss

@@ -1,34 +0,0 @@
-// 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. 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-min-size: round( $ck-font-size-base * $ck-line-height-base );
-
-svg.ck-icon {
-	min-width: $ck-icon-min-size;
-	min-height: $ck-icon-min-size;
-
-	font-size: 1em;
-	vertical-align: middle;
-	color: inherit;
-
-	// Inherit cursor style (#5).
-	cursor: inherit;
-
-	* {
-		// Inherit cursor style (#5).
-		cursor: inherit;
-
-		// Allows dynamic coloring of the icons.
-		color: inherit;
-
-		// Needed by FF.
-		fill: currentColor;
-	}
-}

+ 24 - 0
packages/ckeditor5-ui/theme/components/icon/icon.css

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+svg.ck-icon {
+	font-size: 1em;
+	vertical-align: middle;
+	color: inherit;
+
+	/* Inherit cursor style (#5). */
+	cursor: inherit;
+
+	& * {
+		/* Inherit cursor style (#5). */
+		cursor: inherit;
+
+		/* Allows dynamic coloring of the icons. */
+		color: inherit;
+
+		/* Needed by FF. */
+		fill: currentColor;
+	}
+}

+ 10 - 0
packages/ckeditor5-ui/theme/components/inputtext/inputtext.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

+ 0 - 10
packages/ckeditor5-ui/theme/components/label.scss

@@ -1,10 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-label {
-	display: block;
-}
-
-.cke-voice-label {
-	display: none;
-}

+ 12 - 0
packages/ckeditor5-ui/theme/components/label/label.css

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-label {
+	display: block;
+}
+
+.cke-voice-label {
+	display: none;
+}

+ 0 - 10
packages/ckeditor5-ui/theme/components/list.scss

@@ -1,10 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-list {
-	@include ck-unselectable();
-
-	&__item {
-		display: block;
-	}
-}

+ 22 - 0
packages/ckeditor5-ui/theme/components/list/list.css

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../mixins/_unselectable.css";
+
+.ck-list {
+	@mixin ck-unselectable;
+
+	/* Crop the the items when the list has huge border-radius. */
+	overflow: hidden;
+}
+
+.ck-list__item {
+	display: block;
+
+	&:focus {
+		position: relative;
+		z-index: var(--ck-z-default);
+	}
+}

+ 51 - 0
packages/ckeditor5-ui/theme/components/panel/balloonpanel.css

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-balloon-panel {
+	display: none;
+	position: absolute;
+
+	z-index: var(--ck-z-modal);
+
+	&.ck-balloon-panel_with-arrow {
+		&::before,
+		&::after {
+			content: "";
+			position: absolute;
+		}
+
+		&::before {
+			z-index: var(--ck-z-default);
+		}
+
+		&::after {
+			z-index: calc(var(--ck-z-default) + 1 );
+		}
+	}
+
+	&[class*="arrow_n"] {
+		&::before {
+			z-index: var(--ck-z-default);
+		}
+
+		&::after {
+			z-index: calc(var(--ck-z-default) + 1);
+		}
+	}
+
+	&[class*="arrow_s"] {
+		&::before {
+			z-index: var(--ck-z-default);
+		}
+
+		&::after {
+			z-index: calc(var(--ck-z-default) + 1);
+		}
+	}
+}
+
+.ck-balloon-panel_visible {
+	display: block;
+}

+ 0 - 55
packages/ckeditor5-ui/theme/components/panel/balloonpanel.scss

@@ -1,55 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-balloon-panel {
-	display: none;
-	position: absolute;
-
-	z-index: ck-z( 'modal' );
-
-	&.ck-balloon-panel_with-arrow {
-		&:before,
-		&:after {
-			content: "";
-			position: absolute;
-		}
-
-		&:before {
-			z-index: ck-z();
-		}
-
-		&:after {
-			z-index: ck-z( 'default', 1 );
-		}
-	}
-
-	&.ck-balloon-panel_arrow {
-		&_n,
-		&_ne,
-		&_nw {
-			&:before {
-				z-index: ck-z( 'default' );
-			}
-
-			&:after {
-				z-index: ck-z( 'default', 1 );
-			}
-		}
-
-		&_s,
-		&_se,
-		&_sw {
-			&:before {
-				z-index: ck-z( 'default' );
-			}
-
-			&:after {
-				z-index: ck-z( 'default', 1 );
-			}
-		}
-	}
-
-	&_visible {
-		display: block;
-	}
-}

+ 19 - 0
packages/ckeditor5-ui/theme/components/panel/stickypanel.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-editor {
+	& .ck-sticky-panel {
+		& .ck-sticky-panel__content_sticky {
+			z-index: var(--ck-z-modal); /* #315 */
+			position: fixed;
+			top: 0;
+		}
+
+		& .ck-sticky-panel__content_sticky_bottom-limit {
+			top: auto;
+			position: absolute;
+		}
+	}
+}

+ 0 - 17
packages/ckeditor5-ui/theme/components/panel/stickypanel.scss

@@ -1,17 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@include ck-editor {
-	.ck-sticky-panel {
-		.ck-sticky-panel__content_sticky {
-			z-index: ck-z( 'modal' ); // #315
-			position: fixed;
-			top: 0;
-
-			&_bottom-limit {
-				top: auto;
-				position: absolute;
-			}
-		}
-	}
-}

+ 0 - 23
packages/ckeditor5-ui/theme/components/reset.scss

@@ -1,23 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Resets an element, ignoring its children.
- */
-.ck-reset {
-	// Do not include inheritable rules here.
-	box-sizing: border-box;
-	width: auto;
-	height: auto;
-	position: static;
-}
-
-/**
- * Resets an element AND its children.
- */
-.ck-reset_all {
-	&, *, a, textarea {
-		// The following must be identical to .ck-reset.
-		@extend .ck-reset;
-	}
-}

+ 19 - 0
packages/ckeditor5-ui/theme/components/toolbar/toolbar.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../mixins/_unselectable.css";
+
+.ck-toolbar {
+	@mixin ck-unselectable;
+}
+
+.ck-toolbar__separator {
+	display: inline-block;
+}
+
+.ck-toolbar__newline {
+	display: block;
+	clear: left;
+}

+ 0 - 15
packages/ckeditor5-ui/theme/components/toolbar/toolbar.scss

@@ -1,15 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-toolbar {
-	@include ck-unselectable();
-
-	&__separator {
-		display: inline-block;
-	}
-
-	&__newline {
-		display: block;
-		clear: left;
-	}
-}

+ 0 - 62
packages/ckeditor5-ui/theme/components/tooltip.scss

@@ -1,62 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Enables the tooltip, which is the tooltip is in DOM but
- * not yet displayed.
- */
-@mixin ck-tooltip_enabled {
-	.ck-tooltip {
-		display: block;
-	}
-}
-
-/**
- * Disables the tooltip making it disappear from DOM.
- */
-@mixin ck-tooltip_disabled {
-	.ck-tooltip {
-		display: none;
-	}
-}
-
-/**
- * Shows the tooltip, which is already in DOM.
- * Requires `ck-tooltip_enabled` first.
- */
-@mixin ck-tooltip_visible {
-	.ck-tooltip {
-		visibility: visible;
-		opacity: 1;
-	}
-}
-
-.ck-tooltip,
-.ck-tooltip__text::after {
-	position: absolute;
-
-	// Without this, hovering the tooltip could keep it visible.
-	pointer-events: none;
-
-	// This is to get rid of flickering when transitioning opacity in Chrome.
-	// It's weird but it works.
-	-webkit-backface-visibility: hidden;
-}
-
-.ck-tooltip {
-	// Tooltip is hidden by default.
-	visibility: hidden;
-	opacity: 0;
-	display: none;
-	z-index: ck-z( 'modal' );
-}
-
-.ck-tooltip__text {
-	display: inline-block;
-}
-
-.ck-tooltip__text::after {
-	content: "";
-	width: 0;
-	height: 0;
-}

+ 34 - 0
packages/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Enables the tooltip, which is the tooltip is in DOM but
+ * not yet displayed.
+ */
+@define-mixin ck-tooltip_enabled {
+	& .ck-tooltip {
+		display: block;
+	}
+}
+
+/**
+ * Disables the tooltip making it disappear from DOM.
+ */
+@define-mixin ck-tooltip_disabled {
+	& .ck-tooltip {
+		display: none;
+	}
+}
+
+/**
+ * Shows the tooltip, which is already in DOM.
+ * Requires `ck-tooltip_enabled` first.
+ */
+@define-mixin ck-tooltip_visible {
+	& .ck-tooltip {
+		visibility: visible;
+		opacity: 1;
+	}
+}

+ 35 - 0
packages/ckeditor5-ui/theme/components/tooltip/tooltip.css

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-tooltip,
+.ck-tooltip__text::after {
+	position: absolute;
+
+	/* Without this, hovering the tooltip could keep it visible. */
+	pointer-events: none;
+
+	/* This is to get rid of flickering when transitioning opacity in Chrome.
+	It's weird but it works. */
+	-webkit-backface-visibility: hidden;
+}
+
+.ck-tooltip {
+	/* Tooltip is hidden by default. */
+	visibility: hidden;
+	opacity: 0;
+	display: none;
+	z-index: var(--ck-z-modal);
+}
+
+.ck-tooltip__text {
+	display: inline-block;
+
+	&::after {
+		content: "";
+		width: 0;
+		height: 0;
+	}
+}
+

+ 13 - 0
packages/ckeditor5-ui/theme/globals/_hidden.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * A class which hides an element in DOM.
+ */
+.ck-hidden {
+	/* Override selector specificity. Otherwise, all elements with some display
+	style defined will override this one, which is not a desired result. */
+	display: none !important;
+}

+ 13 - 0
packages/ckeditor5-ui/theme/globals/_reset.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-reset,
+.ck-reset_all,
+.ck-reset_all * {
+	box-sizing: border-box;
+	width: auto;
+	height: auto;
+	position: static;
+}

+ 9 - 0
packages/ckeditor5-ui/theme/globals/_zindex.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-z-default: 1;
+	--ck-z-modal: 999;
+}

+ 8 - 0
packages/ckeditor5-ui/theme/globals/globals.css

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "./_hidden.css";
+@import "./_reset.css";
+@import "./_zindex.css";

+ 0 - 11
packages/ckeditor5-ui/theme/helpers/_editor.scss

@@ -1,11 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Wraps (S)CSS into .ck-editor namespace.
- */
-@mixin ck-editor {
-	.ck-editor {
-		@content;
-	}
-}

+ 0 - 20
packages/ckeditor5-ui/theme/helpers/_states.scss

@@ -1,20 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Makes element unselectable.
- */
-@mixin ck-unselectable() {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-/**
- * A class which hides an element in DOM.
- */
-.ck-hidden {
-	// Override selector specificity. Otherwise, all elements with some display
-	// style defined will override this one, which is not a desired result.
-	display: none !important;
-}

+ 0 - 11
packages/ckeditor5-ui/theme/helpers/_zindex.scss

@@ -1,11 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-def-z: (
-	'default': 1,
-	'modal': 999
-);
-
-@function ck-z( $layer: 'default', $index: 0 ) {
-	@return map-get( $ck-def-z, $layer ) + $index;
-}

+ 14 - 0
packages/ckeditor5-ui/theme/mixins/_unselectable.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Makes element unselectable.
+ */
+@define-mixin ck-unselectable {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none
+}

+ 0 - 20
packages/ckeditor5-ui/theme/theme.scss

@@ -1,20 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import 'helpers/states';
-@import 'helpers/zindex';
-@import 'helpers/editor';
-
-@import 'components/reset';
-@import 'components/icon';
-@import 'components/tooltip';
-@import 'components/button';
-@import 'components/buttongroup';
-@import 'components/toolbar/toolbar';
-@import 'components/dropdown';
-@import 'components/dropdown/buttondropdown';
-@import 'components/list';
-@import 'components/label';
-@import 'components/editor';
-@import 'components/panel/balloonpanel';
-@import 'components/panel/stickypanel';