瀏覽代碼

Basic theme with tests.

Aleksander Nowodzinski 9 年之前
父節點
當前提交
0a0ecca588
共有 29 個文件被更改,包括 904 次插入0 次删除
  1. 26 0
      packages/ckeditor5-theme-lark/tests/.jshintrc
  2. 222 0
      packages/ckeditor5-theme-lark/tests/manual/theme.html
  3. 51 0
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  4. 3 0
      packages/ckeditor5-theme-lark/tests/manual/theme.md
  5. 108 0
      packages/ckeditor5-theme-lark/theme/components/button.scss
  6. 41 0
      packages/ckeditor5-theme-lark/theme/components/icon.scss
  7. 69 0
      packages/ckeditor5-theme-lark/theme/components/reset.scss
  8. 26 0
      packages/ckeditor5-theme-lark/theme/components/toolbar.scss
  9. 63 0
      packages/ckeditor5-theme-lark/theme/helpers/_colors.scss
  10. 15 0
      packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss
  11. 11 0
      packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss
  12. 15 0
      packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss
  13. 15 0
      packages/ckeditor5-theme-lark/theme/helpers/_states.scss
  14. 14 0
      packages/ckeditor5-theme-lark/theme/icons/align-center.svg
  15. 14 0
      packages/ckeditor5-theme-lark/theme/icons/align-left.svg
  16. 14 0
      packages/ckeditor5-theme-lark/theme/icons/align-right.svg
  17. 14 0
      packages/ckeditor5-theme-lark/theme/icons/bold.svg
  18. 14 0
      packages/ckeditor5-theme-lark/theme/icons/bulletedlist.svg
  19. 14 0
      packages/ckeditor5-theme-lark/theme/icons/image.svg
  20. 14 0
      packages/ckeditor5-theme-lark/theme/icons/italic.svg
  21. 17 0
      packages/ckeditor5-theme-lark/theme/icons/link.svg
  22. 19 0
      packages/ckeditor5-theme-lark/theme/icons/numberedlist.svg
  23. 16 0
      packages/ckeditor5-theme-lark/theme/icons/picker.svg
  24. 14 0
      packages/ckeditor5-theme-lark/theme/icons/quote.svg
  25. 16 0
      packages/ckeditor5-theme-lark/theme/icons/source.svg
  26. 14 0
      packages/ckeditor5-theme-lark/theme/icons/table.svg
  27. 15 0
      packages/ckeditor5-theme-lark/theme/icons/underline.svg
  28. 17 0
      packages/ckeditor5-theme-lark/theme/icons/unlink.svg
  29. 13 0
      packages/ckeditor5-theme-lark/theme/theme.scss

+ 26 - 0
packages/ckeditor5-theme-lark/tests/.jshintrc

@@ -0,0 +1,26 @@
+{
+	"browser": true,
+	"esnext": true,
+
+	"expr": true,
+	"immed": true,
+	"latedef": "nofunc",
+	"loopfunc": true,
+	"noarg": true,
+	"nonbsp": true,
+	"strict": "global",
+	"undef": true,
+	"unused": true,
+	"varstmt": true,
+
+	"globals": {
+		"after": false,
+		"afterEach": false,
+		"before": false,
+		"beforeEach": false,
+		"describe": false,
+		"expect": false,
+		"it": false,
+		"sinon": false
+	}
+}

+ 222 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -0,0 +1,222 @@
+<head>
+	<link rel="stylesheet" href="%APPS_DIR%ckeditor/build/amd/theme/ckeditor.css">
+	<style>
+		.wrappable {
+			white-space: initial;
+			line-height: 3em;
+		}
+
+		#button-responsive div > div {
+			font-size: 1.3em;
+			line-height: 2.8em;
+		}
+
+		#button-responsive div .ck-button {
+			font-size: inherit;
+		}
+
+		@keyframes icon-color-change {
+			0% {;
+				color: white;
+				background: orange;
+			}
+			50% {
+				color: orange;
+				background: white;
+			}
+			100% {
+				color: white;
+				background: orange;
+			}
+		}
+
+		#icon-color-change {
+			border: 0;
+			animation: icon-color-change 3s infinite;
+		}
+	</style>
+</head>
+
+<div id="editor"></div>
+
+<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>
+<p id="icons"></p>
+
+<hr/>
+
+<h2>Button</h2>
+<h3>Button: Types</h3>
+
+<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-rounded-corners">Rounded corners</button>
+	<button class="ck-button ck-button-bold">Bold text</button>
+</div>
+
+<h3>Button: Icon</h3>
+<div class="ck-reset-all" >
+	<div id="button-icon"></div>
+
+	<br/>
+
+	<button class="ck-button">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		Icon to the left
+	</button>
+	<button class="ck-button">
+		<svg class="ck-icon ck-icon-right"><use xlink:href="#ck-icon-bold"></use></svg>
+		Icon to the right (RTL)
+	</button>
+	<button class="ck-button" style="border-radius: 100px; border: 0">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		Custom style with icon
+	</button>
+
+	<br/>
+	<br/>
+
+	<button class="ck-button ck-disabled">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		Disabled with icon
+	</button>
+
+	<button class="ck-button ck-disabled ck-button-notext">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+	</button>
+	<button id="icon-color-change" class="ck-button">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		Icon follows text color
+	</button>
+</div>
+
+<h3>Button: Responsive</h3>
+<div id="button-responsive" class="ck-reset-all">
+	<div>
+		<button class="ck-button">A button</button>
+		<button class="ck-button ck-button-action">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+			Image
+		</button>
+		<button class="ck-button">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		 	Bold
+		 </button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		</button>
+	</div>
+</div>
+
+<hr/>
+
+<h2>Toolbar</h2>
+
+<h3>Toolbar: Text</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		Just text and some <svg class="ck-icon"><use xlink:href="#ck-icon-bold"></use></svg> icon.
+	</div>
+</div>
+
+<h3>Toolbar: Button</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		<button class="ck-button">A button</button>
+		<button class="ck-button ck-disabled">Disabled button</button>
+		<button class="ck-button ck-button-active">Active button</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		And some text.
+	</div>
+</div>
+
+<h3>Toolbar: Rounded</h3>
+<div class="ck-reset-all">
+	<div class="ck-rounded-corners ck-toolbar">
+		<button class="ck-button">A button which corners are also rounded because of toolbar class</button>
+		<button class="ck-button ck-button-notext"><svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg></button>
+	</div>
+</div>
+
+<h3>Toolbar: Wrapping content</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar" style="width: 80px">
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
+		</button>
+	</div>
+</div>
+
+<h3>Toolbar: Item separators</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		<button class="ck-button">First</button>
+		<button class="ck-button">Second</button>
+		<s class="ck-toolbar-separator"></s>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
+		</button>
+		<s class="ck-toolbar-separator"></s>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		</button>
+	</div>
+</div>
+
+<h3>Toolbar: Multi-row</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		<button class="ck-button">First row</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
+		</button>
+		<s class="ck-toolbar-newline"></s>
+		<button class="ck-button">Second row</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-table"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-source"></use></svg>
+		</button>
+	</div>
+</div>

+ 51 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import IconManagerView from '/ckeditor5/ui/iconmanagerview.js';
+import iconManagerModel from '/theme/iconmanagermodel.js';
+
+function setupIconManager() {
+	const iconManagerView = new IconManagerView( iconManagerModel );
+	document.body.appendChild( iconManagerView.element );
+	iconManagerView.init();
+}
+
+function renderIcons() {
+	const buttonIcons = document.getElementById( 'button-icon' );
+	const icons = document.getElementById( 'icons' );
+	const tmp = document.createElement( 'div' );
+
+	iconManagerModel.icons.forEach( i => {
+		tmp.innerHTML = `<svg class="ck-icon"><use xlink:href="#ck-icon-${ i }"></use></svg>`;
+
+		icons.appendChild( tmp.firstChild );
+		icons.appendChild( document.createTextNode( ' ' ) );
+
+		tmp.innerHTML =
+			`<button class="ck-button ck-button-notext">
+				<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-${ i }"></use></svg>
+			</button>`;
+
+		buttonIcons.appendChild( tmp.firstChild );
+		buttonIcons.appendChild( document.createTextNode( ' ' ) );
+	} );
+}
+
+function renderResponsiveButtons() {
+	const responsive = document.getElementById( 'button-responsive' );
+	let current = responsive.firstElementChild;
+
+	for ( let i = 3; i--; ) {
+		const clone = current.cloneNode( 1 );
+		current.appendChild( clone );
+		current = clone;
+	}
+}
+
+setupIconManager();
+renderIcons();
+renderResponsiveButtons();

+ 3 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.md

@@ -0,0 +1,3 @@
+@bender-ui: collapsed
+
+1. Hi

+ 108 - 0
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -0,0 +1,108 @@
+////
+/// @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.
+@mixin ck-button( $color ) {
+	background: ck-color( $color );
+	border: 1px solid ck-border-color( $color );
+	white-space: nowrap;
+	cursor: pointer;
+	vertical-align: middle;
+	line-height: $ck-icon-size / $ck-font-size-base;
+	padding: ck-spacing( 'small' ) ck-spacing();
+	position: relative;
+
+	@include ck-button-states( $color );
+}
+
+/// A helper to define button–specific icon styles.
+///
+/// @access public
+@mixin ck-button-icon {
+	[class*="ck-icon"] {
+		@content;
+	}
+}
+
+.ck-button,
+a.ck-button {
+	display: inline-block;
+	overflow: hidden;
+
+	@include ck-button( 'background' );
+	@include ck-rounded-corners();
+
+	&.ck-button-notext {
+		padding: ck-spacing( 'small' );
+
+		@include ck-button-icon {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+
+	&.ck-on {
+		@include ck-button( 'foreground' );
+	}
+
+	&-action {
+		text-shadow: 0 -1px ck-color( 'action', -20 );
+		color: ck-color();
+
+		@include ck-button( 'action' );
+
+		&:hover,
+		&:focus,
+		&:active {
+			text-shadow: 0 -1px ck-color( 'action', -40 );
+		}
+	}
+
+	&-bold {
+		font-weight: bold;
+	}
+
+	.ck-icon {
+		use,
+		use * {
+			color: inherit;
+		}
+
+		&-left {
+			margin-left: -#{ck-spacing( 'small' )};
+		}
+
+		&-right {
+			margin-right: -#{ck-spacing( 'small' )};
+		}
+	}
+}

+ 41 - 0
packages/ckeditor5-theme-lark/theme/components/icon.scss

@@ -0,0 +1,41 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+$ck-icon-size: 20px;
+
+#ck-sprite {
+	display: none;
+
+	* {
+		fill: currentColor; // needed by Webkit/Blink
+	}
+}
+
+.ck-icon {
+	min-width: $ck-icon-size;
+	min-height: $ck-icon-size;
+	width: #{$ck-icon-size / $ck-font-size-base}em;
+	height: #{$ck-icon-size / $ck-font-size-base}em;
+	font-size: 1em;
+	vertical-align: middle;
+	color: inherit;
+
+	&-left {
+		float: left;
+		margin-right: ck-spacing( 'small' );
+	}
+
+	&-right {
+		float: right;
+		margin-left: ck-spacing( 'small' );
+	}
+
+	* {
+		fill: currentColor; // needed by FF
+	}
+
+	use {
+		width: $ck-icon-size;
+		height: $ck-icon-size;
+	}
+}

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

@@ -0,0 +1,69 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+// Reset for single elements, not their children.
+.ck-reset {
+	// Do not include inheritable rules here.
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	text-decoration: none;
+	vertical-align: middle;
+	transition: none;
+	box-sizing: border-box;
+	width: auto;
+	height: auto;
+	position: static;
+}
+
+// Reset for elements and their children.
+.ck-reset-all {
+	&, *, a, textarea {
+		// These are rule inherited by all children elements.
+		border-collapse: collapse;
+		font: normal normal normal $ck-font-size-base $ck-font-face;
+		color: ck-color( 'text' );
+		text-align: left;
+		white-space: nowrap;
+		cursor: auto;
+		float: none;
+
+		// The following must be identical to .ck-reset.
+		@extend .ck-reset;
+	}
+
+	.ck-rtl * {
+		text-align: right;
+	}
+
+	// Defaults for some elements.
+	iframe {
+		vertical-align: inherit;	// For IE
+	}
+
+	textarea {
+		white-space: pre-wrap;
+	}
+
+	textarea,
+	input[type="text"],
+	input[type="password"] {
+		cursor: text;
+	}
+
+	textarea[disabled],
+	input[type="text"][disabled],
+	input[type="password"][disabled] {
+		cursor: default;
+	}
+
+	fieldset {
+		padding: 10px;
+		border: 2px groove #E0DFE3;
+	}
+
+	table {
+		table-layout: auto;
+	}
+}

+ 26 - 0
packages/ckeditor5-theme-lark/theme/components/toolbar.scss

@@ -0,0 +1,26 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-toolbar {
+	line-height: 1;
+	padding: ck-spacing( 'small' );
+	border: 1px solid ck-border-color();
+	white-space: initial;
+
+	@include ck-rounded-corners();
+
+	&-separator {
+		width: 1px;
+		height: calc( 1em + 2 * #{ck-spacing( 'medium' )};
+		vertical-align: middle;
+		display: inline-block;
+		background: ck-border-color();
+		margin: 0 ck-spacing( 'tiny' );
+	}
+
+	&-newline {
+		display: block;
+		clear: left;
+		height: ck-spacing( 'small' );
+	}
+}

+ 63 - 0
packages/ckeditor5-theme-lark/theme/helpers/_colors.scss

@@ -0,0 +1,63 @@
+////
+/// @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
+////
+
+/// Colors configured by the user.
+///
+/// @type Map
+/// @access public
+/// @example
+///		$ck-colors: ( 'foreground': red );
+/// @see $_ck-colors
+$ck-colors: () !default;
+
+/// Internal map with default colors.
+///
+/// @type Map
+/// @access private
+/// @see ck-color-add
+$_ck-colors: (
+	'action': #61B145,
+	'background': #fff,
+	'focus': #83BFFC,
+	'foreground': #f7f7f7,
+	'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
+@function ck-color( $name: 'background', $offset: 0 ) {
+	$colors: map-merge( $_ck-colors, $ck-colors );
+
+	@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
+@function ck-border-color( $name: 'background', $offset: 0 ) {
+	@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
+@mixin ck-color-add( $map ) {
+	$_ck-colors: map-merge( $_ck-colors, $map ) !global;
+}

+ 15 - 0
packages/ckeditor5-theme-lark/theme/helpers/_fonts.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-font-size-base: 12px !default;
+$ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
+$ck-font-sizes: (
+	-1: 0.75rem,
+	 0: 1rem,
+	 1: 1.4rem,
+	 2: 1.8rem
+);
+
+@function ck-font-size( $level: 0 ) {
+	@return map-get( $ck-font-sizes, $level );
+}

+ 11 - 0
packages/ckeditor5-theme-lark/theme/helpers/_rounded.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-border-radius: 3px !default;
+
+@mixin ck-rounded-corners() {
+	&.ck-rounded-corners,
+	.ck-rounded-corners & {
+		border-radius: $ck-border-radius;
+	}
+}

+ 15 - 0
packages/ckeditor5-theme-lark/theme/helpers/_spacing.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-def-spacing: .8em !default;
+$ck-def-spacings: (
+	'large': 1.5,
+	'standard': 1,
+	'medium': .8,
+	'small': .5,
+	'tiny': .25
+);
+
+@function ck-spacing( $spacing: 'standard' ) {
+	@return $ck-def-spacing * map-get( $ck-def-spacings, $spacing );
+}

+ 15 - 0
packages/ckeditor5-theme-lark/theme/helpers/_states.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-hidden {
+	display: none;
+}
+
+.ck-disabled {
+	opacity: .5;
+}
+
+@mixin ck-focus-shadow() {
+	outline: 0;
+	box-shadow: 0 0 2px 3px ck-color( 'focus' );
+}

+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/align-center.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <title>align-center</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="align-center" sketch:type="MSArtboardGroup" fill="#444444">
+            <g id="icon:align-center" sketch:type="MSLayerGroup" transform="translate(2.000000, 4.000000)">
+                <path d="M2,6 L2,7 L14,7 L14,6 L2,6 L2,6 Z M3,12 L3,13 L13,13 L13,12 L3,12 L3,12 Z M0,9 L0,10 L16,10 L16,9 L0,9 L0,9 Z M2,0 L2,1 L14,1 L14,0 L2,0 L2,0 Z M0,3 L0,4 L16,4 L16,3 L0,3 L0,3 Z" id="path4634-copy-3" sketch:type="MSShapeGroup" transform="translate(8.000000, 6.500000) scale(-1, 1) translate(-8.000000, -6.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/align-left.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <title>align-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="align-left" sketch:type="MSArtboardGroup" fill="#444444">
+            <g id="icon:align-left" sketch:type="MSLayerGroup" transform="translate(3.000000, 4.000000)">
+                <path d="M0,6 L0,7 L12,7 L12,6 L0,6 L0,6 Z M0,12 L0,13 L10,13 L10,12 L0,12 L0,12 Z M0,9 L0,10 L15,10 L15,9 L0,9 L0,9 Z M0,0 L0,1 L12,1 L12,0 L0,0 L0,0 Z M0,3 L0,4 L15,4 L15,3 L0,3 L0,3 Z" id="path4634" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/align-right.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <title>align-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="align-right" sketch:type="MSArtboardGroup" fill="#444444">
+            <g id="icon:align-right" sketch:type="MSLayerGroup" transform="translate(2.000000, 4.000000)">
+                <path d="M0,6 L0,7 L12,7 L12,6 L0,6 L0,6 Z M0,12 L0,13 L10,13 L10,12 L0,12 L0,12 Z M0,9 L0,10 L15,10 L15,9 L0,9 L0,9 Z M0,0 L0,1 L12,1 L12,0 L0,0 L0,0 Z M0,3 L0,4 L15,4 L15,3 L0,3 L0,3 Z" id="path4634-copy" sketch:type="MSShapeGroup" transform="translate(7.500000, 6.500000) scale(-1, 1) translate(-7.500000, -6.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

文件差異過大導致無法顯示
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/bold.svg


文件差異過大導致無法顯示
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/bulletedlist.svg


文件差異過大導致無法顯示
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/image.svg


文件差異過大導致無法顯示
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/italic.svg


文件差異過大導致無法顯示
+ 17 - 0
packages/ckeditor5-theme-lark/theme/icons/link.svg


文件差異過大導致無法顯示
+ 19 - 0
packages/ckeditor5-theme-lark/theme/icons/numberedlist.svg


文件差異過大導致無法顯示
+ 16 - 0
packages/ckeditor5-theme-lark/theme/icons/picker.svg


文件差異過大導致無法顯示
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/quote.svg


文件差異過大導致無法顯示
+ 16 - 0
packages/ckeditor5-theme-lark/theme/icons/source.svg


文件差異過大導致無法顯示
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/table.svg


文件差異過大導致無法顯示
+ 15 - 0
packages/ckeditor5-theme-lark/theme/icons/underline.svg


文件差異過大導致無法顯示
+ 17 - 0
packages/ckeditor5-theme-lark/theme/icons/unlink.svg


+ 13 - 0
packages/ckeditor5-theme-lark/theme/theme.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
+
+@import 'helpers/colors';
+@import 'helpers/fonts';
+@import 'helpers/rounded';
+@import 'helpers/spacing';
+@import 'helpers/states';
+
+@import 'components/reset';
+@import 'components/icon';
+@import 'components/button';
+@import 'components/toolbar';