8
0
Просмотр исходного кода

Code refactoring. Minor visual tweaks. Added TMP editor styles and helpers.

Aleksander Nowodzinski 9 лет назад
Родитель
Сommit
71a79c19db

+ 26 - 8
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -40,20 +40,38 @@
 <div id="editor"></div>
 <div id="editor"></div>
 
 
 <h2>Icon</h2>
 <h2>Icon</h2>
-
-<p>Icons <svg class="ck-icon"><use xlink:href="#ck-icon-quote"></use></svg> and <svg class="ck-icon"><use xlink:href="#ck-icon-bold"></use></svg> in a plain paragraph.</p>
-<p style="color: red">Icons <svg class="ck-icon"><use xlink:href="#ck-icon-quote"></use></svg> follow the color of text.</p>
+<h3>Icon: In–text</h3>
+
+<p>Icons
+	<svg class="ck-icon"><use xlink:href="#ck-icon-quote"></use></svg>
+	and
+	<svg class="ck-icon"><use xlink:href="#ck-icon-bold"></use></svg> in a plain paragraph.
+	<span style="color: red">
+		Icons
+		<svg class="ck-icon"><use xlink:href="#ck-icon-link"></use></svg>
+		follow the
+		<svg class="ck-icon"><use xlink:href="#ck-icon-source"></use></svg>
+		color of text.
+	</span>
+</p>
+
+<h3>Icon: Availability</h3>
 <p id="icons"></p>
 <p id="icons"></p>
 
 
 <hr/>
 <hr/>
 
 
 <h2>Button</h2>
 <h2>Button</h2>
+<h3>Button: States</h3>
+
+<div class="ck-reset-all">
+	<button class="ck-button">State: normal (none)</button>
+	<button class="ck-button ck-disabled">State: disabled</button>
+	<button class="ck-button ck-on">State: on</button>
+</div>
+
 <h3>Button: Types</h3>
 <h3>Button: Types</h3>
 
 
 <div class="ck-reset-all">
 <div class="ck-reset-all">
-	<button class="ck-button">A button</button>
-	<button class="ck-button ck-disabled">Disabled</button>
-	<button class="ck-button ck-button-active">On state</button>
 	<button class="ck-button ck-button-action">Action button</button>
 	<button class="ck-button ck-button-action">Action button</button>
 	<button class="ck-button ck-rounded-corners">Rounded corners</button>
 	<button class="ck-button ck-rounded-corners">Rounded corners</button>
 	<button class="ck-button ck-button-bold">Bold text</button>
 	<button class="ck-button ck-button-bold">Bold text</button>
@@ -95,7 +113,7 @@
 	</button>
 	</button>
 </div>
 </div>
 
 
-<h3>Button: Responsive</h3>
+<h3>Button: Responsiveness</h3>
 <div id="button-responsive" class="ck-reset-all">
 <div id="button-responsive" class="ck-reset-all">
 	<div>
 	<div>
 		<button class="ck-button">A button</button>
 		<button class="ck-button">A button</button>
@@ -219,4 +237,4 @@
 			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-source"></use></svg>
 			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-source"></use></svg>
 		</button>
 		</button>
 	</div>
 	</div>
-</div>
+</div>

+ 9 - 1
packages/ckeditor5-theme-lark/tests/manual/theme.md

@@ -1,3 +1,11 @@
 @bender-ui: collapsed
 @bender-ui: collapsed
 
 
-1. Hi
+1. Visually observe and make sure all components are styled and displayed correctly.
+2. Check the behavior on `:hover` of buttons and the like.
+3. Check component interaction on `:focus` and `:active`.
+
+## Notes:
+
+* The theme should look the same in each web browser, however there might be some minor quirks related to the engine of the browser like:
+  * text not centered vertically (Firefox)
+  * blurry icons (Firefox)

+ 51 - 39
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -1,39 +1,14 @@
-////
-/// @author CKSource - Frederico Knabben
-/// @group components
-/// @copyright Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
-/// @license For licensing, see LICENSE.md or http://ckeditor.com/license
-////
-
-/// Implements button states.
-///
-/// @access public
-/// @param {String} $color - Background color of the button.
-@mixin ck-button-states( $color ) {
-	&:hover,
-	&:focus {
-		background: ck-color( $color, -10 );
-		border-color: ck-border-color( $color, -10 );
-	}
-
-	&:active {
-		background: ck-color( $color, -15 );
-		border-color: ck-border-color( $color, -15 );
-	}
-
-	&:focus,
-	&:active {
-		@include ck-focus-shadow();
-	}
-}
-
-/// Implements a button of given background color.
-///
-/// @access public
-/// @param {String} $color - Background color of the button.
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Implements a button of given background color.
+ *
+ * @access public
+ * @param {String} $color - Background color of the button.
+ */
 @mixin ck-button( $color ) {
 @mixin ck-button( $color ) {
-	background: ck-color( $color );
-	border: 1px solid ck-border-color( $color );
+	border: 1px solid;
 	white-space: nowrap;
 	white-space: nowrap;
 	cursor: pointer;
 	cursor: pointer;
 	vertical-align: middle;
 	vertical-align: middle;
@@ -41,12 +16,48 @@
 	padding: ck-spacing( 'small' ) ck-spacing();
 	padding: ck-spacing( 'small' ) ck-spacing();
 	position: relative;
 	position: relative;
 
 
-	@include ck-button-states( $color );
+	@include ck-button-colors( $color );
+	@include ck-focus-shadow();
+}
+
+/**
+ * Implements a button of given background color.
+ *
+ * @access public
+ * @param {String} $color - Background color of the button.
+ */
+@mixin ck-button-colors( $color, $offset: 0 ) {
+	background: ck-color( $color, $offset );
+	border-color: ck-border-color( $color, $offset );
+
+	@include ck-button-state-colors( $color, $offset );
+}
+
+/**
+ * Implements button states.
+ *
+ * @access public
+ * @param {String} $color - Background color of the button.
+ */
+@mixin ck-button-state-colors( $color, $offset: 0 ) {
+	&:hover,
+	&:focus {
+		background: ck-color( $color, $offset - 10 );
+		border-color: ck-border-color( $color, $offset - 10 );
+	}
+
+	&:active {
+		background: ck-color( $color, $offset - 15 );
+		border-color: ck-border-color( $color, $offset - 15 );
+		box-shadow: inset 0 2px 2px ck-color( $color, $offset - 25 );
+	}
 }
 }
 
 
-/// A helper to define button–specific icon styles.
-///
-/// @access public
+/**
+ * A helper to define button–specific icon styles.
+ *
+ * @access public
+ */
 @mixin ck-button-icon {
 @mixin ck-button-icon {
 	[class*="ck-icon"] {
 	[class*="ck-icon"] {
 		@content;
 		@content;
@@ -59,6 +70,7 @@ a.ck-button {
 	overflow: hidden;
 	overflow: hidden;
 
 
 	@include ck-button( 'background' );
 	@include ck-button( 'background' );
+	@include ck-unselectable();
 	@include ck-rounded-corners();
 	@include ck-rounded-corners();
 
 
 	&.ck-button-notext {
 	&.ck-button-notext {

+ 54 - 0
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -0,0 +1,54 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+// TODO/NOTE: This along with _editor helper will probably become a creator theme.
+@include ck-editor {
+	.ck-editor-top {
+		.ck-toolbar {
+			border-top: 0;
+			border-left: 0;
+			border-right: 0;
+		}
+	}
+
+	.ck-editor-editable {
+		background: ck-color();
+		overflow: hidden;
+		padding: ck-spacing();
+	}
+
+	.ck-editor-bottom {
+		border-bottom: 0;
+		border-left: 0;
+		border-right: 0;
+
+		padding: ck-spacing();
+	}
+}
+
+.ck-editor,
+.ck-editor-bottom {
+	background: ck-color( 'foreground' );
+	border: 1px solid ck-border-color( 'foreground' );
+}
+
+@include ck-editor {
+	.ck-toolbar {
+		.ck-button {
+			border: 0;
+		}
+
+		// Make sure the next button does not overlap focused one.
+		.ck-button:focus {
+			z-index: 1;
+		}
+
+		.ck-button:not(:hover):not(:focus):not(.ck-on) {
+			background: ck-color( 'foreground' );
+		}
+
+		.ck-button.ck-on {
+			@include ck-button-colors( 'foreground', -10 );
+		}
+	}
+}

+ 10 - 3
packages/ckeditor5-theme-lark/theme/components/icon.scss

@@ -1,13 +1,20 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 
+/**
+ * Default width/height of an icon.
+ *
+ * @access public
+ */
 $ck-icon-size: 20px;
 $ck-icon-size: 20px;
 
 
-#ck-sprite {
+.ck-icon-manager {
 	display: none;
 	display: none;
 
 
-	* {
-		fill: currentColor; // needed by Webkit/Blink
+	&-sprite {
+		* {
+			fill: currentColor; // needed by Webkit/Blink
+		}
 	}
 	}
 }
 }
 
 

+ 8 - 0
packages/ckeditor5-theme-lark/theme/components/reset.scss

@@ -66,4 +66,12 @@
 	table {
 	table {
 		table-layout: auto;
 		table-layout: auto;
 	}
 	}
+
+	// See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox
+	button::-moz-focus-inner {
+	    padding: 0;
+	    border: 0
+	}
 }
 }
+
+

+ 2 - 1
packages/ckeditor5-theme-lark/theme/components/toolbar.scss

@@ -7,6 +7,7 @@
 	border: 1px solid ck-border-color();
 	border: 1px solid ck-border-color();
 	white-space: initial;
 	white-space: initial;
 
 
+	@include ck-unselectable();
 	@include ck-rounded-corners();
 	@include ck-rounded-corners();
 
 
 	&-separator {
 	&-separator {
@@ -23,4 +24,4 @@
 		clear: left;
 		clear: left;
 		height: ck-spacing( 'small' );
 		height: ck-spacing( 'small' );
 	}
 	}
-}
+}

+ 46 - 40
packages/ckeditor5-theme-lark/theme/helpers/_colors.scss

@@ -1,24 +1,24 @@
-////
-/// @author CKSource - Frederico Knabben
-/// @group helpers
-/// @copyright Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
-/// @license For licensing, see LICENSE.md or http://ckeditor.com/license
-////
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
 
 
-/// Colors configured by the user.
-///
-/// @type Map
-/// @access public
-/// @example
-///		$ck-colors: ( 'foreground': red );
-/// @see $_ck-colors
+/**
+ * Colors configured by the user.
+ *
+ * @type Map
+ * @access public
+ * @example
+ *		$ck-colors: ( 'foreground': red );
+ * @see $_ck-colors
+ */
 $ck-colors: () !default;
 $ck-colors: () !default;
 
 
-/// Internal map with default colors.
-///
-/// @type Map
-/// @access private
-/// @see ck-color-add
+/**
+ * Internal map with default colors.
+ *
+ * @type Map
+ * @access private
+ * @see ck-color-add
+ */
 $_ck-colors: (
 $_ck-colors: (
 	'action': #61B145,
 	'action': #61B145,
 	'background': #fff,
 	'background': #fff,
@@ -27,37 +27,43 @@ $_ck-colors: (
 	'text': #333,
 	'text': #333,
 );
 );
 
 
-/// Returns a color of given name and lightness offset.
-///
-/// @access public
-/// @param {String} $name [ 'background' ] - Name of the color.
-/// @param {Number} $offset [ 0 ] - Offset of the lightness.
-/// @return {String}
-/// @see $_ck-colors
+/**
+ * Returns a color of given name and lightness offset.
+ *
+ * @access public
+ * @param {String} $name [ 'background' ] - Name of the color.
+ * @param {Number} $offset [ 0 ] - Offset of the lightness.
+ * @return {String}
+ * @see $_ck-colors
+ */
 @function ck-color( $name: 'background', $offset: 0 ) {
 @function ck-color( $name: 'background', $offset: 0 ) {
 	$colors: map-merge( $_ck-colors, $ck-colors );
 	$colors: map-merge( $_ck-colors, $ck-colors );
 
 
 	@return scale-color( map-get( $colors, $name ), $lightness: $offset );
 	@return scale-color( map-get( $colors, $name ), $lightness: $offset );
 }
 }
 
 
-/// Returns a border–color for a given name and lightness offset.
-///
-/// @access public
-/// @param {String} $name [ 'background' ] - Name of the color.
-/// @param {Number} $offset [ 0 ] - Offset of the lightness.
-/// @return {String}
-/// @see $ck-color
+/**
+ * Returns a border–color for a given name and lightness offset.
+ *
+ * @access public
+ * @param {String} $name [ 'background' ] - Name of the color.
+ * @param {Number} $offset [ 0 ] - Offset of the lightness.
+ * @return {String}
+ * @see $ck-color
+ */
 @function ck-border-color( $name: 'background', $offset: 0 ) {
 @function ck-border-color( $name: 'background', $offset: 0 ) {
 	@return ck-color( $name, $offset - 25 );
 	@return ck-color( $name, $offset - 25 );
 }
 }
 
 
-/// Adds a color to internal color map.
-///
-/// @access public
-/// @example
-///		@include ck-color-add( ( 'special': yellow, 'hover': #00FF00 ) );
-/// @param {Map} $map - A map with new colors.
-/// @see $_ck-colors
+/**
+ * Adds a color to internal color map.
+ *
+ * @access public
+ * @example
+ *		@include ck-color-add( ( 'special': yellow, 'hover': #00FF00 ) );
+ * @param {Map} $map - A map with new colors.
+ * @see $_ck-colors
+ */
 @mixin ck-color-add( $map ) {
 @mixin ck-color-add( $map ) {
 	$_ck-colors: map-merge( $_ck-colors, $map ) !global;
 	$_ck-colors: map-merge( $_ck-colors, $map ) !global;
-}
+}

+ 13 - 0
packages/ckeditor5-theme-lark/theme/helpers/_editor.scss

@@ -0,0 +1,13 @@
+// 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.
+ *
+ * @access public
+ */
+@mixin ck-editor {
+	.ck-editor {
+		@content;
+	}
+}

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

@@ -1,8 +1,27 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 
+/**
+ * Base font size.
+ *
+ * @access public
+ * @see $ck-font-sizes
+ */
 $ck-font-size-base: 12px !default;
 $ck-font-size-base: 12px !default;
+
+/**
+ * Base font face.
+ *
+ * @access public
+ */
 $ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
 $ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
+
+/**
+ * Base font sizes for scaling.
+ *
+ * @access public
+ * @see ck-font-size
+ */
 $ck-font-sizes: (
 $ck-font-sizes: (
 	-1: 0.75rem,
 	-1: 0.75rem,
 	 0: 1rem,
 	 0: 1rem,
@@ -10,6 +29,15 @@ $ck-font-sizes: (
 	 2: 1.8rem
 	 2: 1.8rem
 );
 );
 
 
+/**
+ * Returns font-size in units for given level.
+ *
+ * @access public
+ * @param {Number} $level [ 0 ] - Size of the font.
+ * @return {String}
+ * @see $ck-font-sizes
+ * @see $ck-font-size-base
+ */
 @function ck-font-size( $level: 0 ) {
 @function ck-font-size( $level: 0 ) {
 	@return map-get( $ck-font-sizes, $level );
 	@return map-get( $ck-font-sizes, $level );
-}
+}

+ 11 - 0
packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss

@@ -1,8 +1,19 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 
+/**
+ * Default border-radius value.
+ *
+ * @access public
+ */
 $ck-border-radius: 3px !default;
 $ck-border-radius: 3px !default;
 
 
+/**
+ * Implements rounded corner interface for .ck-rounded-corners class.
+ *
+ * @access public
+ * @see $ck-border-radius
+ */
 @mixin ck-rounded-corners() {
 @mixin ck-rounded-corners() {
 	&.ck-rounded-corners,
 	&.ck-rounded-corners,
 	.ck-rounded-corners & {
 	.ck-rounded-corners & {

+ 23 - 1
packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss

@@ -1,7 +1,20 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 
+/**
+ * Default spacing value ("unit").
+ *
+ * @access public
+ */
 $ck-def-spacing: .8em !default;
 $ck-def-spacing: .8em !default;
+
+/**
+ * Internal map with default spacings.
+ *
+ * @type Map
+ * @access public
+ * @see ck-spacing
+ */
 $ck-def-spacings: (
 $ck-def-spacings: (
 	'large': 1.5,
 	'large': 1.5,
 	'standard': 1,
 	'standard': 1,
@@ -10,6 +23,15 @@ $ck-def-spacings: (
 	'tiny': .25
 	'tiny': .25
 );
 );
 
 
+/**
+ * Returns a spacing value with units for given name.
+ *
+ * @access public
+ * @param {String} $spacing [ 'standard' ] - Spacing level.
+ * @return {String}
+ * @see $ck-def-spacing
+ * @see $ck-def-spacings
+ */
 @function ck-spacing( $spacing: 'standard' ) {
 @function ck-spacing( $spacing: 'standard' ) {
 	@return $ck-def-spacing * map-get( $ck-def-spacings, $spacing );
 	@return $ck-def-spacing * map-get( $ck-def-spacings, $spacing );
-}
+}

+ 20 - 3
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -9,7 +9,24 @@
 	opacity: .5;
 	opacity: .5;
 }
 }
 
 
+/**
+ * Brings visual styling for :focus state.
+ *
+ * @access public
+ */
 @mixin ck-focus-shadow() {
 @mixin ck-focus-shadow() {
-	outline: 0;
-	box-shadow: 0 0 2px 3px ck-color( 'focus' );
-}
+	&:focus {
+		outline: 5px auto -webkit-focus-ring-color;
+	}
+}
+
+/**
+ * Makes element unselectable.
+ *
+ * @access public
+ */
+@mixin ck-unselectable() {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}

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

@@ -6,8 +6,10 @@
 @import 'helpers/rounded';
 @import 'helpers/rounded';
 @import 'helpers/spacing';
 @import 'helpers/spacing';
 @import 'helpers/states';
 @import 'helpers/states';
+@import 'helpers/editor';
 
 
 @import 'components/reset';
 @import 'components/reset';
 @import 'components/icon';
 @import 'components/icon';
 @import 'components/button';
 @import 'components/button';
-@import 'components/toolbar';
+@import 'components/toolbar';
+@import 'components/editor';