From b6dbb7b437bf01dceb6b1c3dc4e8861c93637f74 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Fri, 13 Oct 2023 16:12:15 +0300 Subject: [PATCH] feat: add custom CSS property to configure cell padding (#6646) --- packages/grid/theme/lumo/vaadin-grid-styles.js | 9 ++++----- packages/grid/theme/material/vaadin-grid-styles.js | 8 +++++--- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js index e90e9ecbe0..97461ce78c 100644 --- a/packages/grid/theme/lumo/vaadin-grid-styles.js +++ b/packages/grid/theme/lumo/vaadin-grid-styles.js @@ -44,11 +44,13 @@ registerStyles( [part~='cell'] { min-height: var(--lumo-size-m); background-color: var(--lumo-base-color); + --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding)); + --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m); } [part~='cell'] ::slotted(vaadin-grid-cell-content) { cursor: default; - padding: var(--lumo-space-xs) var(--lumo-space-m); + padding: var(--_cell-padding); } /* Apply row borders by default and introduce the "no-row-borders" variant */ @@ -331,16 +333,13 @@ registerStyles( :host([theme~='compact']) [part~='cell'] { min-height: var(--lumo-size-s); + --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s); } :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) { min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width)); } - :host([theme~='compact']) [part~='cell'] ::slotted(vaadin-grid-cell-content) { - padding: var(--lumo-space-xs) var(--lumo-space-s); - } - /* Wrap cell contents */ :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) { diff --git a/packages/grid/theme/material/vaadin-grid-styles.js b/packages/grid/theme/material/vaadin-grid-styles.js index 6680f1fd35..77ab6b47c9 100644 --- a/packages/grid/theme/material/vaadin-grid-styles.js +++ b/packages/grid/theme/material/vaadin-grid-styles.js @@ -20,14 +20,16 @@ registerStyles( [part~='cell'] { min-height: 48px; -webkit-tap-highlight-color: transparent; + --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding)); + --_cell-default-padding: 8px 16px; } [part~='cell'] ::slotted(vaadin-grid-cell-content) { - padding: 8px 16px; + padding: var(--_cell-padding); } - [part~='details-cell'] ::slotted(vaadin-grid-cell-content) { - padding: 14px 16px; + [part~='details-cell'] { + --_cell-default-padding: 14px 16px; } [part~='header-cell'],