From 9d826ae8b3a53b0c27cc11bf2b94034443de7a31 Mon Sep 17 00:00:00 2001 From: Vaadin Bot Date: Fri, 29 Apr 2022 14:11:45 +0200 Subject: [PATCH] fix: use solid background for editable cells (#3753) (#3757) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js | 8 +++----- .../grid-pro/theme/material/vaadin-grid-pro-styles.js | 3 +-- 2 files changed, 4 insertions(+), 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 index 75c8a116ba..5c760e1995 100644 --- 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 index 8444d0886d..14fc958320 100644 --- 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' }