Merge pull request #257 from ckeditor/i/5831

Internal: Improved special characters grid styles to prevent rendering issues (see ckeditor/ckeditor5#5831).

theme/ckeditor5-special-characters/charactergrid.css

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "../mixins/_rounded.css";
+
+:root {
+	--ck-character-grid-tile-size: 24px;
+}
+
+.ck.ck-character-grid {
+	overflow-y: auto;
+	overflow-x: hidden;
+	width: 350px;
+	max-height: 200px;
+
+	& .ck-character-grid__tiles {
+		margin: var(--ck-spacing-standard);
+		grid-gap: var(--ck-spacing-standard);
+	}
+
+	& .ck-character-grid__tile {
+		width: var(--ck-character-grid-tile-size);
+		height: var(--ck-character-grid-tile-size);
+		min-width: var(--ck-character-grid-tile-size);
+		min-height: var(--ck-character-grid-tile-size);
+		font-size: 1.2em;
+		padding: 0;
+		transition: .2s ease box-shadow;
+		border: 0;
+
+		&:focus:not( .ck-disabled ),
+		&:hover:not( .ck-disabled ) {
+			/* Disable the default .ck-button's border ring. */
+			border: 0;
+			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
+		}
+
+		/* Make sure the glyph is rendered in the center of the button */
+		& .ck-button__label {
+			line-height: var(--ck-character-grid-tile-size);
+			width: 100%;
+			text-align: center;
+		}
+	}
+}

theme/ckeditor5-special-characters/specialcharacters.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-special-characters-navigation {
+	border-bottom: 1px solid var(--ck-color-base-border);
+	padding: var(--ck-spacing-standard);
+
+	@mixin ck-dir ltr {
+		padding-left: var(--ck-spacing-large);
+	}
+
+	@mixin ck-dir rtl {
+		padding-right: var(--ck-spacing-large);
+	}
+
+	& > .ck-label {
+		max-width: 160px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	& > .ck-dropdown .ck-dropdown__panel {
+		/* There could be dozens of categories available. Use scroll to prevent a 10e6px dropdown. */
+		max-height: 250px;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+}