浏览代码

Merge pull request #137 from ckeditor/t/136

Extracted wireframe theme from Lark.
Piotrek Koszuliński 9 年之前
父节点
当前提交
d3901214ec

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

@@ -0,0 +1,53 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-balloon-panel {
+	@include ck-unselectable();
+
+	display: none;
+	position: absolute;
+
+	z-index: ck-z( 'modal' );
+
+	&:before,
+	&:after {
+		content: "";
+		position: absolute;
+	}
+
+	&:before {
+		z-index: ck-z();
+	}
+
+	&:after {
+		z-index: ck-z( 'default', 1 );
+	}
+
+	&_arrow_s,
+	&_arrow_se,
+	&_arrow_sw {
+		&:before {
+			z-index: ck-z( 'default' );
+		}
+
+		&:after {
+			z-index: ck-z( 'default', 1 );
+		}
+	}
+
+	&_arrow_n,
+	&_arrow_ne,
+	&_arrow_nw {
+		&:before {
+			z-index: ck-z( 'default' );
+		}
+
+		&:after {
+			z-index: ck-z( 'default', 1 );
+		}
+	}
+
+	&_visible {
+		display: block;
+	}
+}

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

@@ -0,0 +1,30 @@
+// Copyright (c) 2003-2016, 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;
+	}
+}

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

@@ -0,0 +1,37 @@
+// Copyright (c) 2003-2016, 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;
+	}
+}

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

@@ -0,0 +1,21 @@
+// Copyright (c) 2003-2016, 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();
+		}
+	}
+}

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

@@ -0,0 +1,30 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Default width/height of an icon.
+ */
+$ck-icon-size: 20px;
+
+svg.ck-icon {
+	min-width: $ck-icon-size;
+	min-height: $ck-icon-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;
+	}
+}

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

@@ -0,0 +1,10 @@
+// Copyright (c) 2003-2016, 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;
+}

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

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

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

@@ -0,0 +1,23 @@
+// Copyright (c) 2003-2016, 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;
+	}
+}

+ 14 - 0
packages/ckeditor5-ui/theme/components/stickytoolbar.scss

@@ -0,0 +1,14 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@include ck-editor {
+	.ck-toolbar.ck-toolbar_sticky {
+		position: fixed;
+		top: 0;
+
+		&.ck-toolbar_sticky_bottom-limit {
+			top: auto;
+			position: absolute;
+		}
+	}
+}

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

@@ -0,0 +1,15 @@
+// Copyright (c) 2003-2016, 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;
+	}
+}

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

@@ -0,0 +1,92 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Applies styles to the main part of the tooltip.
+ */
+@mixin ck-tooltip__main {
+	&::after {
+		@content;
+	}
+}
+
+/**
+ * Applies styles to the arrow part of the tooltip.
+ */
+@mixin ck-tooltip__arrow {
+	&::before {
+		@content;
+	}
+}
+
+/**
+ * Applies styles to both arrow and main part of the tooltip.
+ */
+@mixin ck-tooltip__elements {
+	@include ck-tooltip__main {
+		@content;
+	}
+
+	@include ck-tooltip__arrow {
+		@content;
+	}
+}
+
+/**
+ * Enables the tooltip, which is the tooltip is in DOM but
+ * not yet displayed.
+ */
+@mixin ck-tooltip_enabled {
+	@include ck-tooltip__elements {
+		display: block;
+	}
+}
+
+/**
+ * Disables the tooltip making it disappear from DOM.
+ */
+@mixin ck-tooltip_disabled {
+	@include ck-tooltip__elements {
+		display: none;
+	}
+}
+
+/**
+ * Shows the tooltip, which is already in DOM.
+ * Requires `ck-tooltip_enabled` first.
+ */
+@mixin ck-tooltip_visible {
+	@include ck-tooltip__elements {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+
+[data-ck-tooltip] {
+	@include ck-tooltip__elements {
+		// Tooltip is hidden by default.
+		visibility: hidden;
+		opacity: 0;
+		display: none;
+
+		position: absolute;
+		z-index: ck-z( 'modal' );
+
+		// 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;
+	}
+
+	@include ck-tooltip__main {
+		content: attr(data-ck-tooltip);
+	}
+
+	@include ck-tooltip__arrow {
+		content: "";
+		width: 0;
+		height: 0;
+	}
+}

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

@@ -0,0 +1,11 @@
+// Copyright (c) 2003-2016, 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;
+	}
+}

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

@@ -0,0 +1,11 @@
+// Copyright (c) 2003-2016, 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;
+}

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

@@ -0,0 +1,11 @@
+// Copyright (c) 2003-2016, 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;
+}

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

@@ -0,0 +1,18 @@
+// Copyright (c) 2003-2016, 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';
+@import 'components/dropdown';
+@import 'components/list';
+@import 'components/label';
+@import 'components/balloonpanel';
+@import 'components/editor';
+@import 'components/stickytoolbar';