瀏覽代碼

Merge branch 'master' into t/57

Aleksander Nowodzinski 9 年之前
父節點
當前提交
7c056eb4ab

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/balloonpanel.scss

@@ -8,7 +8,7 @@ $ck-balloon-arrow-half-width: 10px;
 .ck-balloon-panel {
 	@include ck-unselectable();
 	@include ck-rounded-corners();
-	@include ck-dropshadow();
+	@include ck-drop-shadow();
 
 	min-width: 50px;
 	min-height: 15px;

+ 15 - 2
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -16,7 +16,11 @@
 	position: relative;
 
 	@include ck-button-colors( $color );
-	@include ck-user-focus-outline();
+
+	&:focus {
+		@include ck-focus-ring();
+		@include ck-box-shadow( $ck-focus-outer-shadow );
+	}
 }
 
 /**
@@ -68,12 +72,12 @@
 .ck-button,
 a.ck-button {
 	display: inline-block;
-	overflow: hidden;
 	padding: ck-spacing( 'small' );
 
 	@include ck-button( 'background' );
 	@include ck-unselectable();
 	@include ck-rounded-corners();
+	@include ck-tooltip_enabled();
 
 	@include ck-button-icon {
 		float: left;
@@ -120,6 +124,15 @@ a.ck-button {
 		}
 	}
 
+	&:hover {
+		@include ck-tooltip_visible();
+	}
+
+	// Get rid of the focus outline around the tooltip when focused (but not :hover).
+	&:focus:not(:hover) {
+		@include ck-tooltip_disabled();
+	}
+
 	.ck-button__label {
 		display: none;
 		float: left;

+ 25 - 13
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -4,30 +4,42 @@
 .ck-dropdown {
 	display: inline-block;
 	position: relative;
-}
 
-.ck-dropdown__button {
-	&:after {
+	// A triangle displayed to indicate this is actually a dropdown.
+	&::after {
 		content: '';
 		width: 0;
 		height: 0;
 		border-style: solid;
 		border-width: .4em .4em 0 .4em;
 		border-color: ck-color( 'text', 30 ) transparent;
-		position: relative;
-		top: .9em;
-		margin-left: ck-spacing( 'medium' );
+		pointer-events: none;
+
+		position: absolute;
+		top: 50%;
+		right: ck-spacing();
+		z-index: ck-z();
+		transform: translate( 0, -50% );
 	}
 
-	// #23
-	.ck-button__label {
-		width: 7em;
-		overflow: hidden;
-		text-overflow: ellipsis;
+	.ck-button.ck-dropdown__button {
+		// A space to accommodate the triangle.
+		padding-right: 2 * ck-spacing();
+
+		// #23
+		.ck-button__label {
+			width: 7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 }
 
 .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;
+
 	border: 1px solid ck-border-color( 'foreground' );
 	display: none;
 	position: absolute;
@@ -38,10 +50,10 @@
 
 	transform: translateY( 100% );
 	background: ck-color( 'background' );
-	z-index: ck-z();
+	z-index: ck-z( 'modal' );
 
 	@include ck-rounded-corners();
-	@include ck-dropshadow();
+	@include ck-drop-shadow();
 
 	&-visible {
 		display: inline-block;

+ 12 - 1
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -21,6 +21,16 @@
 		&.ck-on {
 			@include ck-button-colors( 'foreground', -10 );
 		}
+
+		// 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();
+		}
 	}
 
 	.ck-dropdown__button {
@@ -65,7 +75,8 @@
 
 	.ck-editor__editable {
 		&.ck-focused {
-			@include ck-focus-outline();
+			@include ck-focus-ring( 'outline' );
+			@include ck-box-shadow( $ck-inner-shadow );
 		}
 
 		&_inline {

+ 6 - 2
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -4,11 +4,15 @@
 .ck-input {
 	&-text {
 		@include ck-rounded-corners();
-		@include ck-user-focus-outline();
+		@include ck-box-shadow( $ck-inner-shadow );
 
 		border: 1px solid ck-border-color( 'foreground' );
 		padding: ck-spacing( 'medium' );
 		min-width: 250px;
-		box-shadow: 0 2px 3px ck-color( 'foreground', -7 ) inset;
+
+		&:focus {
+			@include ck-focus-ring();
+			@include ck-box-shadow( $ck-focus-outer-shadow, $ck-inner-shadow );
+		}
 	}
 }

+ 152 - 0
packages/ckeditor5-theme-lark/theme/components/tooltip.scss

@@ -0,0 +1,152 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+$ck-tooltip-arrow-size: 5px;
+
+/**
+ * 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;
+		left: 50%;
+		z-index: ck-z( 'modal' );
+
+		// Without this, hovering the tooltip could keep it visible.
+		pointer-events: none;
+
+		// For the transition to work, the tooltip must be controlled
+		// using visibility+opacity. A delay prevents a "tooltip avalanche"
+		// i.e. when scanning the toolbar with mouse cursor.
+		transition: opacity .2s ease-in-out .2s;
+
+		// 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);
+		border-radius: $ck-border-radius;
+		color: ck-color( 'background' );
+		font-size: ck-font-size( -2 );
+		background: ck-color( 'text' );
+		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
+	}
+
+	@include ck-tooltip__arrow {
+		content: "";
+		width: 0;
+		height: 0;
+		border-style: solid;
+	}
+}
+
+/**
+ * A class once applied displays the tooltip south of the element.
+ *
+ *       [element]
+ *           ^
+ *     +-----------+
+ *     |  Tooltip  |
+ *     +-----------+
+ */
+.ck-tooltip_s {
+	@include ck-tooltip__main {
+		bottom: -$ck-tooltip-arrow-size + 1;
+		transform: translate( -50%, 100% );
+	}
+
+	@include ck-tooltip__arrow {
+		bottom: 0;
+		transform: translate( -50%, 100% );
+		border-color: transparent transparent ck-color( 'text' ) transparent;
+		border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
+	}
+}
+
+/**
+ * A class once applied displays the tooltip north of the element.
+ *
+ *     +-----------+
+ *     |  Tooltip  |
+ *     +-----------+
+ *           V
+ *       [element]
+ */
+.ck-tooltip_n {
+	@include ck-tooltip__main {
+		top: -$ck-tooltip-arrow-size + 1;
+		transform: translate( -50%, -100% );
+	}
+
+	@include ck-tooltip__arrow {
+		top: 0;
+		transform: translate( -50%, -100% );
+		border-color: ck-color( 'text' ) transparent transparent transparent;
+		border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
+	}
+}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/helpers/_colors.scss

@@ -22,7 +22,7 @@ $ck-colors: () !default;
 $_ck-colors: (
 	'action': #61B145,
 	'background': #fff,
-	'focus': #83BFFC,
+	'focus': #6ab5f9,
 	'foreground': #f7f7f7,
 	'text': #333,
 	'shadow': rgba(0,0,0,.2)

+ 1 - 0
packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss

@@ -23,6 +23,7 @@ $ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
  * @see ck-font-size
  */
 $ck-font-sizes: (
+	-2: 0.7rem,
 	-1: 0.75rem,
 	 0: 1rem,
 	 1: 1.4rem,

+ 22 - 2
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -1,6 +1,26 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-@mixin ck-dropshadow() {
-	box-shadow: 0 0 5px ck-color( 'shadow' );
+/**
+ * A visual style of element's inner shadow (i.e. input).
+ */
+$ck-inner-shadow: 2px 2px 3px ck-color( 'foreground', -7 ) inset;
+
+/**
+ * A visual style of element's drop shadow (i.e. panel).
+ */
+$ck-drop-shadow: 0 0 5px ck-color( 'shadow' );
+
+/**
+ * A helper to combine multiple shadows.
+ */
+@mixin ck-box-shadow($shadows...) {
+	box-shadow: $shadows;
+}
+
+/**
+ * Gives an element a drop shadow so it looks like a floating panel.
+ */
+@mixin ck-drop-shadow() {
+	@include ck-box-shadow( $ck-drop-shadow );
 }

+ 26 - 13
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -1,31 +1,46 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+/**
+ * A visual style of focused element's outer shadow.
+ */
+$ck-focus-outer-shadow: 0 0 3px 2px lighten( ck-color( 'focus' ), 10% );
+
+/**
+ * A visual style of focused element's border or outline.
+ */
+$ck-focus-ring: 1px solid ck-color( 'focus' );
+
+/**
+ * A class which hides an element in DOM.
+ */
 .ck-hidden {
 	display: none;
 }
 
+/**
+ * A class which indicates that an element holding it is disabled.
+ */
 .ck-disabled {
 	opacity: .5;
 }
 
 /**
- * A visual styling of focused element.
- *
- * @access public
+ * A visual style of focused element's border or outline.
  */
-@mixin ck-focus-outline() {
-	outline: thin dotted;
-	outline: 5px auto -webkit-focus-ring-color;
-
-	// To avoid collision with border in Firefox.
-	outline-offset: -2px;
+@mixin ck-focus-ring( $borderOrOutline: 'border' ) {
+	@if $borderOrOutline == 'outline' {
+		outline: $ck-focus-ring;
+	}
+	@else {
+		// Disable native outline.
+		outline: none;
+		border: $ck-focus-ring;
+	}
 }
 
 /**
  * Brings visual styling for :focus state.
- *
- * @access public
  */
 @mixin ck-user-focus-outline() {
 	&:focus {
@@ -35,8 +50,6 @@
 
 /**
  * Makes element unselectable.
- *
- * @access public
  */
 @mixin ck-unselectable() {
 	-moz-user-select: none;

+ 1 - 0
packages/ckeditor5-theme-lark/theme/theme.scss

@@ -12,6 +12,7 @@
 
 @import 'components/reset';
 @import 'components/icon';
+@import 'components/tooltip';
 @import 'components/button';
 @import 'components/toolbar';
 @import 'components/dropdown';