Explorar el Código

Merge pull request #345 from ckeditor/t/144

Other: Migrated the package styles from SASS to PostCSS to bring theme support and avoid duplicates in some editor builds. Closes #144. Closes ckeditor/ckeditor5#420.

BREAKING CHANGE: The styles are no longer developed in SASS which means the `.scss` files became unavailable. Please refer to the [Theme Customization](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.
Aleksander Nowodzinski hace 8 años
padre
commit
795bfdc697
Se han modificado 50 ficheros con 424 adiciones y 394 borrados
  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. 0 30
      packages/ckeditor5-ui/theme/components/button.scss
  20. 35 0
      packages/ckeditor5-ui/theme/components/button/button.css
  21. 0 37
      packages/ckeditor5-ui/theme/components/dropdown.scss
  22. 39 0
      packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
  23. 0 21
      packages/ckeditor5-ui/theme/components/editor.scss
  24. 10 0
      packages/ckeditor5-ui/theme/components/editorui/editorui.css
  25. 0 34
      packages/ckeditor5-ui/theme/components/icon.scss
  26. 24 0
      packages/ckeditor5-ui/theme/components/icon/icon.css
  27. 10 0
      packages/ckeditor5-ui/theme/components/inputtext/inputtext.css
  28. 0 10
      packages/ckeditor5-ui/theme/components/label.scss
  29. 12 0
      packages/ckeditor5-ui/theme/components/label/label.css
  30. 0 10
      packages/ckeditor5-ui/theme/components/list.scss
  31. 22 0
      packages/ckeditor5-ui/theme/components/list/list.css
  32. 51 0
      packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
  33. 0 55
      packages/ckeditor5-ui/theme/components/panel/balloonpanel.scss
  34. 19 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. 0 62
      packages/ckeditor5-ui/theme/components/tooltip.scss
  40. 34 0
      packages/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css
  41. 35 0
      packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
  42. 13 0
      packages/ckeditor5-ui/theme/globals/_hidden.css
  43. 13 0
      packages/ckeditor5-ui/theme/globals/_reset.css
  44. 9 0
      packages/ckeditor5-ui/theme/globals/_zindex.css
  45. 8 0
      packages/ckeditor5-ui/theme/globals/globals.css
  46. 0 11
      packages/ckeditor5-ui/theme/helpers/_editor.scss
  47. 0 20
      packages/ckeditor5-ui/theme/helpers/_states.scss
  48. 0 11
      packages/ckeditor5-ui/theme/helpers/_zindex.scss
  49. 14 0
      packages/ckeditor5-ui/theme/mixins/_unselectable.css
  50. 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 { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
 
+import '../../theme/components/button/button.css';
+
 /**
 /**
  * The button view class.
  * 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 FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 
+import '../../theme/components/dropdown/dropdown.css';
+
 /**
 /**
  * The dropdown view class.
  * The dropdown view class.
  *
  *

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

@@ -8,6 +8,7 @@
  */
  */
 
 
 import EditorUIView from '../../editorui/editoruiview';
 import EditorUIView from '../../editorui/editoruiview';
+import LabelView from '../../label/labelview';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 
 
 /**
 /**
@@ -25,7 +26,6 @@ export default class BoxedEditorUIView extends EditorUIView {
 	constructor( locale ) {
 	constructor( locale ) {
 		super( locale );
 		super( locale );
 
 
-		const t = this.t;
 		const ariaLabelUid = uid();
 		const ariaLabelUid = uid();
 
 
 		/**
 		/**
@@ -46,6 +46,15 @@ export default class BoxedEditorUIView extends EditorUIView {
 		 */
 		 */
 		this.main = this.createCollection();
 		this.main = this.createCollection();
 
 
+		/**
+		 * Voice label of the UI.
+		 *
+		 * @protected
+		 * @readonly
+		 * @member {module:ui/view~View} #_voiceLabelView
+		 */
+		this._voiceLabelView = this._createVoiceLabel( ariaLabelUid );
+
 		this.setTemplate( {
 		this.setTemplate( {
 			tag: 'div',
 			tag: 'div',
 
 
@@ -62,17 +71,7 @@ export default class BoxedEditorUIView extends EditorUIView {
 			},
 			},
 
 
 			children: [
 			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',
 					tag: 'div',
 					attributes: {
 					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 View from '../view';
 import Template from '../template';
 import Template from '../template';
 
 
+import '../../theme/components/editorui/editorui.css';
+
 /**
 /**
  * The editor UI view class. Base class for the editor main views.
  * 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 View from '../view';
 
 
+import '../../theme/components/icon/icon.css';
+
 /**
 /**
  * The icon view class.
  * The icon view class.
  *
  *

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

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

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

@@ -9,6 +9,8 @@
 
 
 import View from '../view';
 import View from '../view';
 
 
+import '../../theme/components/label/label.css';
+
 /**
 /**
  * The label view class.
  * 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 FocusCycler from '../focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 
+import '../../theme/components/list/list.css';
+
 /**
 /**
  * The list view class.
  * 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 toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 
+import '../../../theme/components/panel/balloonpanel.css';
+
 const toPx = toUnit( 'px' );
 const toPx = toUnit( 'px' );
 const defaultLimiterElement = global.document.body;
 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 Template from '../../template';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 
 
+import '../../../theme/components/panel/stickypanel.css';
+
 const toPx = toUnit( 'px' );
 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 preventDefault from '../bindings/preventdefault.js';
 import log from '@ckeditor/ckeditor5-utils/src/log';
 import log from '@ckeditor/ckeditor5-utils/src/log';
 
 
+import '../../theme/components/toolbar/toolbar.css';
+
 /**
 /**
  * The toolbar view class.
  * The toolbar view class.
  *
  *

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

@@ -9,6 +9,8 @@
 
 
 import View from '../view';
 import View from '../view';
 
 
+import '../../theme/components/tooltip/tooltip.css';
+
 /**
 /**
  * The tooltip view class.
  * 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 mix from '@ckeditor/ckeditor5-utils/src/mix';
 import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable';
 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
  * 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
  * {@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 createDropdown from '../../../src/dropdown/createdropdown';
 import createListDropdown from '../../../src/dropdown/list/createlistdropdown';
 import createListDropdown from '../../../src/dropdown/list/createlistdropdown';
 
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 import testUtils from '../../_utils/utils';
 import testUtils from '../../_utils/utils';
 
 
 const ui = testUtils.createTestUIView( {
 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 IconView from '../../../src/icon/iconview';
 
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 const wrapper = document.querySelector( '#inline-svg' );
 const wrapper = document.querySelector( '#inline-svg' );
 
 
 const icon = `
 const icon = `

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

@@ -6,7 +6,6 @@
 /* globals document */
 /* globals document */
 
 
 import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
 import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 
 
 const defaultPositions = BalloonPanelView.defaultPositions;
 const defaultPositions = BalloonPanelView.defaultPositions;
 const container = document.querySelector( '#container' );
 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 testUtils from '../../../_utils/utils';
 import StickyPanelView from '../../../../src/panel/sticky/stickypanelview';
 import StickyPanelView from '../../../../src/panel/sticky/stickypanelview';
 
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 const ui = testUtils.createTestUIView( {
 const ui = testUtils.createTestUIView( {
 	stickyToTheTop: '.ck-sticky_to-the-top .ck-editor__top',
 	stickyToTheTop: '.ck-sticky_to-the-top .ck-editor__top',
 	stickyToTheBox: '.ck-sticky_to-the-box .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 BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
 
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 window.createPanel = selector => {
 window.createPanel = selector => {
 	const view = new BalloonPanelView();
 	const view = new BalloonPanelView();
 
 

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