ソースを参照

Moved wireframe CSS to a separate theme.

Aleksander Nowodzinski 9 年 前
コミット
54540d900a

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

@@ -94,5 +94,3 @@
 
 	<h3>Toolbar: Multi-row</h3>
 	<div id="toolbar-multi-row" class="ck-reset_all"></div>
-
-<div id="body"></div>

+ 5 - 4
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -45,9 +45,7 @@ testUtils.createTestUIView( {
 	'toolbarRounded':				'#toolbar-rounded',
 	'toolbarWrap':					'#toolbar-wrap',
 	'toolbarSeparator':				'#toolbar-separator',
-	'toolbarMultiRow':				'#toolbar-multi-row',
-
-	body:							'div#body'
+	'toolbarMultiRow':				'#toolbar-multi-row'
 } ).then( ui => {
 	renderIcon( ui );
 	renderButton( ui );
@@ -137,6 +135,7 @@ function renderButton( ui ) {
 	ui.buttonIconStates.add( button( {
 		label: 'Bold',
 		withText: false,
+		tooltip: true,
 		icon: boldIcon
 	} ) );
 
@@ -157,6 +156,7 @@ function renderButton( ui ) {
 		const notextButton = button( {
 			label: 'Bold',
 			withText: false,
+			tooltip: true,
 			icon: boldIcon
 		} );
 
@@ -303,11 +303,12 @@ function button( {
 	isEnabled = true,
 	isOn = false,
 	withText = true,
+	tooltip,
 	icon
 } = {} ) {
 	const button = new ButtonView();
 
-	button.set( { label, isEnabled, isOn, withText, icon } );
+	button.set( { label, isEnabled, isOn, withText, icon, tooltip } );
 
 	return button;
 }

+ 0 - 24
packages/ckeditor5-theme-lark/theme/components/balloonpanel.scss

@@ -6,38 +6,22 @@ $ck-balloon-arrow-height: 15px;
 $ck-balloon-arrow-half-width: 10px;
 
 .ck-balloon-panel {
-	@include ck-unselectable();
 	@include ck-rounded-corners();
 	@include ck-drop-shadow();
 
 	min-width: 50px;
 	min-height: 15px;
 
-	display: none;
-	position: absolute;
 	background: ck-color( 'background' );
 	border: 1px solid ck-border-color( 'foreground' );
 
-	z-index: ck-z( 'modal' );
-
 	&:before,
 	&:after {
-		content: "";
-		position: absolute;
-
 		width: 0;
 		height: 0;
 		border-style: solid;
 	}
 
-	&:before {
-		z-index: ck-z();
-	}
-
-	&:after {
-		z-index: ck-z( 'default', 1 );
-	}
-
 	&_arrow_s,
 	&_arrow_se,
 	&_arrow_sw {
@@ -47,12 +31,10 @@ $ck-balloon-arrow-half-width: 10px;
 		}
 
 		&:before {
-			z-index: ck-z( 'default' );
 			border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
 		}
 
 		&:after {
-			z-index: ck-z( 'default', 1 );
 			border-color: transparent transparent ck-color( 'background' ) transparent;
 			margin-top: $ck-balloon-arrow-offset;
 		}
@@ -67,12 +49,10 @@ $ck-balloon-arrow-half-width: 10px;
 		}
 
 		&:before {
-			z-index: ck-z( 'default' );
 			border-color: ck-border-color( 'foreground' ) transparent  transparent;
 		}
 
 		&:after {
-			z-index: ck-z( 'default', 1 );
 			border-color: ck-color( 'background' ) transparent transparent transparent;
 			margin-bottom: $ck-balloon-arrow-offset;
 		}
@@ -127,8 +107,4 @@ $ck-balloon-arrow-half-width: 10px;
 			bottom: -$ck-balloon-arrow-height;
 		}
 	}
-
-	&_visible {
-		display: block;
-	}
 }

+ 16 - 43
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -4,29 +4,6 @@
 /**
  * Implements a button of given background color.
  *
- * @access public
- * @param {String} $color - Background color of the button.
- */
-@mixin ck-button( $color ) {
-	border: 1px solid;
-	white-space: nowrap;
-	cursor: default;
-	vertical-align: middle;
-	line-height: $ck-icon-size / $ck-font-size-base;
-	position: relative;
-
-	@include ck-button-colors( $color );
-
-	&:focus {
-		@include ck-focus-ring();
-		@include ck-box-shadow( $ck-focus-outer-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 ) {
@@ -39,7 +16,6 @@
 /**
  * Implements button states.
  *
- * @access public
  * @param {String} $color - Background color of the button.
  */
 @mixin ck-button-state-colors( $color, $offset: 0 ) {
@@ -61,7 +37,6 @@
 /**
  * A helper to define button–specific icon styles.
  *
- * @access public
  */
 @mixin ck-button-icon {
 	.ck-icon {
@@ -71,13 +46,21 @@
 
 .ck-button,
 a.ck-button {
-	display: inline-block;
+	@include ck-button-colors( 'background' );
+	@include ck-rounded-corners();
+
+	border-width: 1px;
+	border-style: solid;
+	white-space: nowrap;
+	cursor: default;
+	vertical-align: middle;
 	padding: ck-spacing( 'small' );
+	line-height: $ck-icon-size / $ck-font-size-base;
 
-	@include ck-button( 'background' );
-	@include ck-unselectable();
-	@include ck-rounded-corners();
-	@include ck-tooltip_enabled();
+	&:focus {
+		@include ck-focus-ring();
+		@include ck-box-shadow( $ck-focus-outer-shadow );
+	}
 
 	@include ck-button-icon {
 		float: left;
@@ -97,15 +80,15 @@ a.ck-button {
 	}
 
 	&.ck-on {
-		@include ck-button( 'foreground' );
+		@include ck-button-colors( 'foreground' );
 	}
 
 	&-action {
+		@include ck-button-colors( 'action' );
+
 		text-shadow: 0 -1px ck-color( 'action', -20 );
 		color: ck-color();
 
-		@include ck-button( 'action' );
-
 		&:hover,
 		&:focus,
 		&:active {
@@ -124,17 +107,7 @@ 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;
 		line-height: inherit;
 		font-size: inherit;

+ 0 - 20
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -2,23 +2,14 @@
 // 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;
 		border-style: solid;
 		border-width: .4em .4em 0 .4em;
 		border-color: ck-color( 'text', 30 ) transparent;
-		pointer-events: none;
 
-		position: absolute;
 		top: 50%;
 		right: ck-spacing();
-		z-index: ck-z();
 		transform: translate( 0, -50% );
 	}
 
@@ -36,13 +27,7 @@
 }
 
 .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;
 	left: 0px;
 
 	// Compensate double border from button and from box when positioned below the button.
@@ -50,12 +35,7 @@
 
 	transform: translateY( 100% );
 	background: ck-color( 'background' );
-	z-index: ck-z( 'modal' );
 
 	@include ck-rounded-corners();
 	@include ck-drop-shadow();
-
-	&-visible {
-		display: inline-block;
-	}
 }

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

@@ -8,11 +8,6 @@
 	.ck-button {
 		border-width: 0;
 
-		// Make sure the next button does not overlap focused one.
-		&:focus {
-			z-index: 1;
-		}
-
 		&:not(:hover):not(:focus):not(.ck-on),
 		&.ck-disabled {
 			background: ck-color( 'foreground' );
@@ -21,16 +16,6 @@
 		&.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 {

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

@@ -3,22 +3,9 @@
 
 /**
  * Default width/height of an icon.
- *
- * @access public
  */
 $ck-icon-size: 20px;
 
-.ck-icon-manager__sprite {
-	display: none;
-
-	* {
-		// Allows dynamic coloring of the icons.
-		color: inherit;
-		// Needed by Webkit/Blink.
-		fill: currentColor;
-	}
-}
-
 .ck-icon {
 	min-width: $ck-icon-size;
 	min-height: $ck-icon-size;

+ 0 - 5
packages/ckeditor5-theme-lark/theme/components/label.scss

@@ -2,10 +2,5 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .ck-label {
-	display: block;
 	font-weight: bold;
 }
-
-.cke-voice-label {
-	display: none;
-}

+ 0 - 2
packages/ckeditor5-theme-lark/theme/components/list.scss

@@ -6,11 +6,9 @@
 	list-style-type: none;
 	background: ck-color( 'background' );
 
-	@include ck-unselectable();
 	@include ck-rounded-corners();
 
 	&__item {
-		display: block;
 		padding: ck-spacing( 'medium' );
 		cursor: pointer;
 		min-width: 12em;

+ 6 - 12
packages/ckeditor5-theme-lark/theme/components/reset.scss

@@ -1,7 +1,9 @@
 // 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.
+/**
+ * Resets an element, ignoring its children.
+ */
 .ck-reset {
 	// Do not include inheritable rules here.
 	margin: 0;
@@ -11,13 +13,11 @@
 	text-decoration: none;
 	vertical-align: middle;
 	transition: none;
-	box-sizing: border-box;
-	width: auto;
-	height: auto;
-	position: static;
 }
 
-// Reset for elements and their children.
+/**
+ * Resets an element AND its children.
+ */
 .ck-reset_all {
 	&, *, a, textarea {
 		// These are rule inherited by all children elements.
@@ -63,15 +63,9 @@
 		border: 2px groove #E0DFE3;
 	}
 
-	table {
-		table-layout: auto;
-	}
-
 	// See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox
 	button::-moz-focus-inner {
 	    padding: 0;
 	    border: 0
 	}
 }
-
-

+ 0 - 2
packages/ckeditor5-theme-lark/theme/components/stickytoolbar.scss

@@ -5,14 +5,12 @@
 	.ck-toolbar.ck-toolbar_sticky {
 		@include ck-drop-shadow();
 
-		position: fixed;
 		top: 0;
 		border: 1px solid ck-border-color();
 		border-width: 0 0 1px;
 		background: ck-color( 'foreground' );
 
 		&.ck-toolbar_sticky_bottom-limit {
-			top: auto;
 			position: absolute;
 		}
 	}

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

@@ -14,13 +14,10 @@
 		width: 1px;
 		height: calc( 1em + 2 * #{ck-spacing( 'medium' )} );
 		vertical-align: middle;
-		display: inline-block;
 		background: ck-border-color();
 	}
 
 	&-newline {
-		display: block;
-		clear: left;
 		height: ck-spacing( 'small' );
 	}
 

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

@@ -3,93 +3,17 @@
 
 $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 );
@@ -98,9 +22,6 @@ $ck-tooltip-arrow-size: 5px;
 	}
 
 	@include ck-tooltip__arrow {
-		content: "";
-		width: 0;
-		height: 0;
 		border-style: solid;
 	}
 }

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

@@ -5,7 +5,6 @@
  * Colors configured by the user.
  *
  * @type Map
- * @access public
  * @example
  *		$ck-colors: ( 'foreground': red );
  * @see $_ck-colors
@@ -16,7 +15,6 @@ $ck-colors: () !default;
  * Internal map with default colors.
  *
  * @type Map
- * @access private
  * @see ck-color-add
  */
 $_ck-colors: (
@@ -31,7 +29,6 @@ $_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}
@@ -46,7 +43,6 @@ $_ck-colors: (
 /**
  * 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}
@@ -59,7 +55,6 @@ $_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.

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

@@ -1,13 +0,0 @@
-// 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;
-	}
-}

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

@@ -4,7 +4,6 @@
 /**
  * Base font size.
  *
- * @access public
  * @see $ck-font-sizes
  */
 $ck-font-size-base: 12px !default;
@@ -12,14 +11,12 @@ $ck-font-size-base: 12px !default;
 /**
  * Base font face.
  *
- * @access public
  */
 $ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
 
 /**
  * Base font sizes for scaling.
  *
- * @access public
  * @see ck-font-size
  */
 $ck-font-sizes: (
@@ -33,7 +30,6 @@ $ck-font-sizes: (
 /**
  * Returns font-size in units for given level.
  *
- * @access public
  * @param {Number} $level [ 0 ] - Size of the font.
  * @return {String}
  * @see $ck-font-sizes

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

@@ -4,14 +4,12 @@
 /**
  * Default border-radius value.
  *
- * @access public
  */
 $ck-border-radius: 2px !default;
 
 /**
  * Implements rounded corner interface for .ck-rounded-corners class.
  *
- * @access public
  * @see $ck-border-radius
  */
 @mixin ck-rounded-corners() {

+ 0 - 3
packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss

@@ -4,7 +4,6 @@
 /**
  * Default spacing value ("unit").
  *
- * @access public
  */
 $ck-def-spacing: .8em !default;
 
@@ -12,7 +11,6 @@ $ck-def-spacing: .8em !default;
  * Internal map with default spacings.
  *
  * @type Map
- * @access public
  * @see ck-spacing
  */
 $ck-def-spacings: (
@@ -26,7 +24,6 @@ $ck-def-spacings: (
 /**
  * Returns a spacing value with units for given name.
  *
- * @access public
  * @param {String} $spacing [ 'standard' ] - Spacing level.
  * @return {String}
  * @see $ck-def-spacing

+ 0 - 9
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -47,12 +47,3 @@ $ck-focus-ring: 1px solid ck-color( 'focus' );
 		@include ck-focus-outline();
 	}
 }
-
-/**
- * Makes element unselectable.
- */
-@mixin ck-unselectable() {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}

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

@@ -1,11 +0,0 @@
-// 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;
-}

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

@@ -1,14 +1,15 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+// Lark is based on Wireframe Theme
+@import '~ckeditor5-theme-wireframe/theme/theme';
+
 @import 'helpers/colors';
 @import 'helpers/fonts';
 @import 'helpers/rounded';
 @import 'helpers/spacing';
 @import 'helpers/states';
-@import 'helpers/zindex';
 @import 'helpers/shadow';
-@import 'helpers/editor';
 
 @import 'components/reset';
 @import 'components/icon';