fix: use solid background for editable cells (#3753) (#3756)

* fix: use solid background for editable cells * revert background-clip changes * make editable cell background cover border as well Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Apr 29, 2022 · de1d0fd · de1d0fd
1 parent cc975eb
commit de1d0fd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js b/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js
@@ -23,20 +23,18 @@ registerStyles(
 
     [part~='editable-cell']:hover,
     [part~='editable-cell']:focus {
-      background-color: var(--lumo-contrast-5pct);
-      background-clip: padding-box;
+      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     }
 
     /* Indicate editable cells */
 
     :host([theme~='highlight-editable-cells']) [part~='editable-cell'] {
-      background-color: var(--lumo-contrast-5pct);
-      background-clip: border-box;
+      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     }
 
     :host([theme~='highlight-editable-cells']) [part~='editable-cell']:hover,
     :host([theme~='highlight-editable-cells']) [part~='editable-cell']:focus {
-      background-color: var(--lumo-contrast-10pct);
+      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
     }
 
     /* Indicate read-only cells */

diff --git a/packages/grid-pro/theme/material/vaadin-grid-pro-styles.js b/packages/grid-pro/theme/material/vaadin-grid-pro-styles.js
@@ -16,8 +16,7 @@ registerStyles(
 
     [part~='row'] > [part~='editable-cell']:hover,
     [part~='row'] > [part~='editable-cell']:focus {
-      background-color: var(--material-grid-pro-editable-cell-hover-background-color, rgba(0, 0, 0, 0.04));
-      background-clip: padding-box;
+      background: var(--material-background-color) linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
     }
   `,
   { moduleId: 'material-grid-pro' }