Merge pull request #176 from ckeditor/t/ckeditor5-table/2

Internal: Moved table editing styles from ckeditor5-table. Decreased the specificity of the widget's nested editable styles to make it possible to style tables as a content (see ckeditor/ckeditor5-table#2). Partially fixes ckeditor/ckeditor5-table#29.

theme/ckeditor5-table/tableediting.css

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-color-table-focused-cell-background: hsl(208, 90%, 98%);
+}
+
+.ck table.ck-widget {
+	& td,
+	& th {
+		&.ck-editor__nested-editable.ck-editor__nested-editable_focused {
+			/* A very slight background to highlight the focused cell */
+			background: var(--ck-color-table-focused-cell-background);
+
+			/* Fixes the problem where surrounding cells cover the focused cell's border.
+			It does not fix the problem in all places but the UX is improved.
+			See https://github.com/ckeditor/ckeditor5-table/issues/29. */
+			border-style: double;
+		}
+	}
+}

theme/ckeditor5-widget/widget.css

@@ -29,18 +29,18 @@
 	&:hover {
 		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-hover);
 	}
+}
 
-	& .ck-editor__nested-editable {
-		border: 1px solid transparent;
+.ck .ck-editor__nested-editable {
+	border: 1px solid transparent;
 
-		/* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
-		These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
-		&.ck-editor__nested-editable_focused,
-		&:focus {
-			@mixin ck-focus-ring;
-			@mixin ck-box-shadow var(--ck-inner-shadow);
+	/* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
+	These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
+	&.ck-editor__nested-editable_focused,
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-inner-shadow);
 
-			background-color: var(--ck-color-widget-editable-focused-background);
-		}
+		background-color: var(--ck-color-widget-editable-focused-background);
 	}
 }