i/6229: Inherit background color for focused element in table #271
Conversation
|
Ready for review. |
| 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); |
There was a problem hiding this comment.
As commented in ckeditor/ckeditor5-table#269 – this sounds really wrong. I don't understand why we need to refactor here anything.
There was a problem hiding this comment.
The :focus selector prevents the FOUC because the _focused class is applied with a delay by the engine. It looks nasty and this is OK.
But I agree the overall fix should be simpler, like this
diff --git a/theme/ckeditor5-table/tableediting.css b/theme/ckeditor5-table/tableediting.css
index 01966ab..9463ad9 100644
--- a/theme/ckeditor5-table/tableediting.css
+++ b/theme/ckeditor5-table/tableediting.css
@@ -4,13 +4,14 @@
*/
:root {
- --ck-color-table-focused-cell-background: hsl(208, 90%, 98%);
+ --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.ck-editor__nested-editable_focused,
+ &.ck-editor__nested-editable:focus {
/* A very slight background to highlight the focused cell */
background: var(--ck-color-table-focused-cell-background);
There was a problem hiding this comment.
@oleq I like the :focus color in your example, but when we have a cell with a color set by JS (inline styles) :focus set by the CSS is always overridden and we don't see any changes... So do we need to replace the background anyway? I'd just reset it. We have other indicators that the cell is focused.
|
As agreed, I only changed the value of the variable. |
Suggested merge commit message (convention)
Other: Prevented the background color change of the focused element in table. Closes ckeditor/ckeditor5#6229.