8
0
Эх сурвалжийг харах

Merge pull request #222 from ckeditor/t/ckeditor5/1457

t/ckeditor5/1457: Added styles for color features in ckeditor5-font and ckeditor5-ui
Marek Lewandowski 6 жил өмнө
parent
commit
a67eeddcd7

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

@@ -23,6 +23,7 @@ import superscript from '@ckeditor/ckeditor5-basic-styles/theme/icons/superscrip
 
 import cancel from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import check from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import eraser from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
 import lowVision from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
 import image from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
 import objectLeft from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
@@ -35,6 +36,8 @@ import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
 
 import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
 import fontSize from '@ckeditor/ckeditor5-font/theme/icons/font-size.svg';
+import fontColor from '@ckeditor/ckeditor5-font/theme/icons/font-color.svg';
+import fontBackground from '@ckeditor/ckeditor5-font/theme/icons/font-background.svg';
 
 import heading1 from '@ckeditor/ckeditor5-heading/theme/icons/heading1.svg';
 import heading2 from '@ckeditor/ckeditor5-heading/theme/icons/heading2.svg';
@@ -45,7 +48,6 @@ import heading6 from '@ckeditor/ckeditor5-heading/theme/icons/heading6.svg';
 
 import marker from '@ckeditor/ckeditor5-highlight/theme/icons/marker.svg';
 import pen from '@ckeditor/ckeditor5-highlight/theme/icons/pen.svg';
-import eraser from '@ckeditor/ckeditor5-highlight/theme/icons/eraser.svg';
 
 import link from '@ckeditor/ckeditor5-link/theme/icons/link.svg';
 import unlink from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
@@ -75,16 +77,16 @@ const icons = {
 	bold, italic, underline, code, strikethrough, subscript, superscript,
 
 	// core
-	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,
+	check, cancel, eraser, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,
 
 	// font
-	fontFamily, fontSize,
+	fontFamily, fontSize, fontColor, fontBackground,
 
 	// heading
 	heading1, heading2, heading3, heading4, heading5, heading6,
 
 	// highlight
-	marker, pen, eraser,
+	marker, pen,
 
 	// link
 	link, unlink,

+ 14 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-font/fontcolor.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck .ck-button.ck-color-table__remove-color {
+	border-bottom: 1px solid var(--ck-color-base-border);
+	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
+
+	& .ck.ck-icon {
+		margin-right: var(--ck-spacing-standard);
+	}
+}
+

+ 53 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+:root {
+	--ck-color-grid-tile-size: 20px;
+}
+
+.ck.ck-color-grid {
+	grid-gap: calc( var(--ck-spacing-standard) / 2 );
+	padding: var(--ck-spacing-standard);
+}
+
+.ck.ck-color-grid__tile {
+	@mixin ck-rounded-corners;
+
+	width: var(--ck-color-grid-tile-size);
+	height: var(--ck-color-grid-tile-size);
+	min-width: var(--ck-color-grid-tile-size);
+	min-height: var(--ck-color-grid-tile-size);
+	padding: 0;
+	transition: 200ms ease box-shadow;
+	border: 0;
+
+	&.ck-disabled {
+		cursor: unset;
+		transition: unset;
+	}
+
+	&.ck-color-table__color-tile_bordered {
+		box-shadow: 0 0 0 1px var(--ck-color-base-border);
+	}
+
+	& .ck.ck-icon {
+		display: none;
+	}
+
+	&.ck-on {
+		box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
+
+		& .ck.ck-icon {
+			display: block;
+		}
+	}
+
+	&:hover:not( .ck-disabled ) {
+		box-shadow: 0 0 0 2px var(--ck-color-focus-border);
+	}
+}
+