ソースを参照

Migrated UI components from SASS to PostCSS. Added theme support.

Aleksander Nowodzinski 8 年 前
コミット
aebf806d13
46 ファイル変更356 行追加345 行削除
  1. 2 0
      packages/ckeditor5-ui/src/button/buttonview.js
  2. 2 0
      packages/ckeditor5-ui/src/dropdown/dropdownview.js
  3. 33 12
      packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js
  4. 2 0
      packages/ckeditor5-ui/src/editorui/editoruiview.js
  5. 2 0
      packages/ckeditor5-ui/src/icon/iconview.js
  6. 2 0
      packages/ckeditor5-ui/src/inputtext/inputtextview.js
  7. 2 0
      packages/ckeditor5-ui/src/label/labelview.js
  8. 2 0
      packages/ckeditor5-ui/src/list/listview.js
  9. 2 0
      packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js
  10. 2 0
      packages/ckeditor5-ui/src/panel/sticky/stickypanelview.js
  11. 2 0
      packages/ckeditor5-ui/src/toolbar/toolbarview.js
  12. 2 0
      packages/ckeditor5-ui/src/tooltip/tooltipview.js
  13. 2 0
      packages/ckeditor5-ui/src/view.js
  14. 0 1
      packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js
  15. 0 2
      packages/ckeditor5-ui/tests/manual/icon/icon.js
  16. 0 1
      packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.js
  17. 0 2
      packages/ckeditor5-ui/tests/manual/panel/sticky/stickypanelview.js
  18. 0 2
      packages/ckeditor5-ui/tests/manual/tickets/126/1.js
  19. 35 0
      packages/ckeditor5-ui/theme/components/button.css
  20. 0 30
      packages/ckeditor5-ui/theme/components/button.scss
  21. 41 0
      packages/ckeditor5-ui/theme/components/dropdown.css
  22. 0 37
      packages/ckeditor5-ui/theme/components/dropdown.scss
  23. 0 21
      packages/ckeditor5-ui/theme/components/editor.scss
  24. 4 0
      packages/ckeditor5-ui/theme/components/editorui.css
  25. 24 0
      packages/ckeditor5-ui/theme/components/icon.css
  26. 0 34
      packages/ckeditor5-ui/theme/components/icon.scss
  27. 4 0
      packages/ckeditor5-ui/theme/components/inputtext.css
  28. 12 0
      packages/ckeditor5-ui/theme/components/label.css
  29. 0 10
      packages/ckeditor5-ui/theme/components/label.scss
  30. 23 0
      packages/ckeditor5-ui/theme/components/list.css
  31. 0 10
      packages/ckeditor5-ui/theme/components/list.scss
  32. 53 0
      packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
  33. 0 55
      packages/ckeditor5-ui/theme/components/panel/balloonpanel.scss
  34. 21 0
      packages/ckeditor5-ui/theme/components/panel/stickypanel.css
  35. 0 17
      packages/ckeditor5-ui/theme/components/panel/stickypanel.scss
  36. 0 23
      packages/ckeditor5-ui/theme/components/reset.scss
  37. 19 0
      packages/ckeditor5-ui/theme/components/toolbar/toolbar.css
  38. 0 15
      packages/ckeditor5-ui/theme/components/toolbar/toolbar.scss
  39. 17 13
      packages/ckeditor5-ui/theme/components/tooltip.scss
  40. 0 11
      packages/ckeditor5-ui/theme/helpers/_editor.scss
  41. 0 20
      packages/ckeditor5-ui/theme/helpers/_states.scss
  42. 0 11
      packages/ckeditor5-ui/theme/helpers/_zindex.scss
  43. 22 0
      packages/ckeditor5-ui/theme/helpers/states.css
  44. 9 0
      packages/ckeditor5-ui/theme/helpers/zindex.css
  45. 15 0
      packages/ckeditor5-ui/theme/reset.css
  46. 0 18
      packages/ckeditor5-ui/theme/theme.scss

+ 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.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.css';
+
 /**
  * The dropdown view class.
  *

+ 33 - 12
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',
 
@@ -62,17 +71,7 @@ export default class BoxedEditorUIView extends EditorUIView {
 			},
 
 			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.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.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.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.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.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.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/reset.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';
 
 const ui = testUtils.createTestUIView( {

+ 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();
 

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/states.css";
+@import "./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 - 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;
-	}
-}

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/zindex.css";
+
+.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 - 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;
-	}
-}

+ 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();
-		}
-	}
-}

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

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */

+ 24 - 0
packages/ckeditor5-ui/theme/components/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;
+	}
+}

+ 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;
-	}
-}

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

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */

+ 12 - 0
packages/ckeditor5-ui/theme/components/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/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;
-}

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/states.css";
+@import "../helpers/zindex.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);
+	}
+}

+ 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;
-	}
-}

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/zindex.css";
+
+.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;
-	}
-}

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/zindex.css";
+
+.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 "../../helpers/states.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;
-	}
-}

+ 17 - 13
packages/ckeditor5-ui/theme/components/tooltip.scss

@@ -1,12 +1,16 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/zindex.css";
 
 /**
  * Enables the tooltip, which is the tooltip is in DOM but
  * not yet displayed.
  */
-@mixin ck-tooltip_enabled {
-	.ck-tooltip {
+@define-mixin ck-tooltip_enabled {
+	& .ck-tooltip {
 		display: block;
 	}
 }
@@ -14,8 +18,8 @@
 /**
  * Disables the tooltip making it disappear from DOM.
  */
-@mixin ck-tooltip_disabled {
-	.ck-tooltip {
+@define-mixin ck-tooltip_disabled {
+	& .ck-tooltip {
 		display: none;
 	}
 }
@@ -24,8 +28,8 @@
  * Shows the tooltip, which is already in DOM.
  * Requires `ck-tooltip_enabled` first.
  */
-@mixin ck-tooltip_visible {
-	.ck-tooltip {
+@define-mixin ck-tooltip_visible {
+	& .ck-tooltip {
 		visibility: visible;
 		opacity: 1;
 	}
@@ -35,20 +39,20 @@
 .ck-tooltip__text::after {
 	position: absolute;
 
-	// Without this, hovering the tooltip could keep it visible.
+	/*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.
+	/*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.
+	/*Tooltip is hidden by default.*/
 	visibility: hidden;
 	opacity: 0;
 	display: none;
-	z-index: ck-z( 'modal' );
+	z-index: var(--ck-z-modal);
 }
 
 .ck-tooltip__text {

+ 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;
-}

+ 22 - 0
packages/ckeditor5-ui/theme/helpers/states.css

@@ -0,0 +1,22 @@
+/*
+ * 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;
+}
+
+/**
+ * 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;
+}

+ 9 - 0
packages/ckeditor5-ui/theme/helpers/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;
+}

+ 15 - 0
packages/ckeditor5-ui/theme/reset.css

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

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

@@ -1,18 +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/toolbar/toolbar';
-@import 'components/dropdown';
-@import 'components/list';
-@import 'components/label';
-@import 'components/editor';
-@import 'components/panel/balloonpanel';
-@import 'components/panel/stickypanel';