From e808f23cc2c7d87d683b293be7b47886ace9911b Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Wed, 2 Oct 2024 12:14:20 +0300 Subject: [PATCH] document calculated css properties --- packages/dashboard/src/vaadin-dashboard-styles.js | 2 ++ packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js index 77c310c073..8311000203 100644 --- a/packages/dashboard/src/vaadin-dashboard-styles.js +++ b/packages/dashboard/src/vaadin-dashboard-styles.js @@ -9,6 +9,8 @@ export const hasWidgetWrappers = css` export const dashboardWidgetAndSectionStyles = css` :host { box-sizing: border-box; + /* Calculates the offset by which mode buttons that by default overflow the widget edges + should be shifted inwards based on a custom --vaadin-dashboard-spacing value */ --_mode-button-spacing-offset: calc( max(0px, var(--_vaadin-dashboard-default-spacing) - var(--_vaadin-dashboard-spacing)) ); diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js index 6c06a34067..f936d6ade0 100644 --- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js +++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js @@ -16,6 +16,8 @@ const dashboardWidgetAndSection = css` --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); --_focus-ring-spacing-max-offset: 0px; + /* Calculates the offset by which the focus ring should be shifted inwards based on a custom --vaadin-dashboard-spacing value. + Effectively keeps the focus ring visible if --vaadin-dashboard-spacing is set to 0px */ --_focus-ring-spacing-offset: min( max(calc(var(--_focus-ring-width) * -1), var(--_vaadin-dashboard-spacing) - var(--_focus-ring-width)), var(--_focus-ring-spacing-max-offset, 0px)