From 448c7a7102c208c07c9659e0d82f0c51ed4b3cc0 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 10 Mar 2020 13:58:51 +0100 Subject: [PATCH 1/3] Inherit background color for focused element in table --- theme/ckeditor5-table/tableediting.css | 34 ++++++++++++++------------ 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/theme/ckeditor5-table/tableediting.css b/theme/ckeditor5-table/tableediting.css index 01966ab..6069c5c 100644 --- a/theme/ckeditor5-table/tableediting.css +++ b/theme/ckeditor5-table/tableediting.css @@ -3,23 +3,27 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -:root { - --ck-color-table-focused-cell-background: hsl(208, 90%, 98%); -} - .ck-widget.table { - & 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); + & .ck-editor__nested-editable.ck-editor__nested-editable_focused, + & .ck-editor__nested-editable:focus { + background: inherit; - /* 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: none; - outline: 1px solid var(--ck-color-focus-border); - outline-offset: -1px; /* progressive enhancement - no IE support */ + /* 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: none; + outline: 1px solid var(--ck-color-focus-border); + outline-offset: -1px; /* progressive enhancement - no IE support */ + } + + & th { + &.ck-editor__nested-editable.ck-editor__nested-editable_focused, + &.ck-editor__nested-editable:focus { + /* We can't just set `inherit` here as well, because we use `hsla` as an "overlay" + to darken the background based on the set table background. + This is also a workaround for overriding the styling that comes from the `widget`. + See related issue https://github.com/ckeditor/ckeditor5/issues/6228. */ + background: var(--ck-color-table-focused-th-background); } } } From adbc08d6b3df02db5773de6a8c2eb951bc31f595 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 11 Mar 2020 12:47:57 +0100 Subject: [PATCH 2/3] Remove reference to the color variable --- theme/ckeditor5-table/tableediting.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/theme/ckeditor5-table/tableediting.css b/theme/ckeditor5-table/tableediting.css index 6069c5c..0d271eb 100644 --- a/theme/ckeditor5-table/tableediting.css +++ b/theme/ckeditor5-table/tableediting.css @@ -21,9 +21,12 @@ &.ck-editor__nested-editable:focus { /* We can't just set `inherit` here as well, because we use `hsla` as an "overlay" to darken the background based on the set table background. - This is also a workaround for overriding the styling that comes from the `widget`. - See related issue https://github.com/ckeditor/ckeditor5/issues/6228. */ - background: var(--ck-color-table-focused-th-background); + + The value should be the same as for the table header element without focus. + See related issue https://github.com/ckeditor/ckeditor5/issues/6228. + + This is also a workaround for overriding the styling that comes from the `widget`. */ + background: hsla(0, 0%, 0%, 10%); } } } From 752271163dd8cf58568a66b3c4076c1f199b4707 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 11 Mar 2020 14:44:26 +0100 Subject: [PATCH 3/3] Change the value of the focused cell background variable --- theme/ckeditor5-table/tableediting.css | 32 +++++++++++--------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/theme/ckeditor5-table/tableediting.css b/theme/ckeditor5-table/tableediting.css index 0d271eb..9463ad9 100644 --- a/theme/ckeditor5-table/tableediting.css +++ b/theme/ckeditor5-table/tableediting.css @@ -3,30 +3,24 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -.ck-widget.table { - & .ck-editor__nested-editable.ck-editor__nested-editable_focused, - & .ck-editor__nested-editable:focus { - background: inherit; - - /* 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: none; - outline: 1px solid var(--ck-color-focus-border); - outline-offset: -1px; /* progressive enhancement - no IE support */ - } +:root { + --ck-color-table-focused-cell-background: hsla(208, 90%, 80%, .3); +} +.ck-widget.table { + & td, & th { &.ck-editor__nested-editable.ck-editor__nested-editable_focused, &.ck-editor__nested-editable:focus { - /* We can't just set `inherit` here as well, because we use `hsla` as an "overlay" - to darken the background based on the set table background. - - The value should be the same as for the table header element without focus. - See related issue https://github.com/ckeditor/ckeditor5/issues/6228. + /* A very slight background to highlight the focused cell */ + background: var(--ck-color-table-focused-cell-background); - This is also a workaround for overriding the styling that comes from the `widget`. */ - background: hsla(0, 0%, 0%, 10%); + /* 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: none; + outline: 1px solid var(--ck-color-focus-border); + outline-offset: -1px; /* progressive enhancement - no IE support */ } } }