From 10bbecb7569e45cd37eca6da276e7583d2f369f8 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Sun, 24 Nov 2024 10:08:36 -0500 Subject: [PATCH] fix(styles): inconsistent cell size when selection mode is set (#2601) --- src/style.css | 8 ++++---- src/style.module.css | 8 ++++---- website/docs/docs/styling.mdx | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/style.css b/src/style.css index a2e2f6d52..a035b4ec4 100644 --- a/src/style.css +++ b/src/style.css @@ -4,13 +4,13 @@ --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */ --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */ - --rdp-day-height: 2.75rem; /* The height of the day cells. */ - --rdp-day-width: 2.75rem; /* The width of the day cells. */ + --rdp-day-height: 44px; /* The height of the day cells. */ + --rdp-day-width: 44px; /* The width of the day cells. */ --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */ --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */ - --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */ - --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */ + --rdp-day_button-height: 42px; /* The height of the day cells. */ + --rdp-day_button-width: 42px; /* The width of the day cells. */ --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */ --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */ diff --git a/src/style.module.css b/src/style.module.css index db991007a..767e9657e 100644 --- a/src/style.module.css +++ b/src/style.module.css @@ -4,13 +4,13 @@ --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */ --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */ - --rdp-day-height: 2.75rem; /* The height of the day cells. */ - --rdp-day-width: 2.75rem; /* The width of the day cells. */ + --rdp-day-height: 44px; /* The height of the day cells. */ + --rdp-day-width: 44px; /* The width of the day cells. */ --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */ --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */ - --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */ - --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */ + --rdp-day_button-height: 42px; /* The height of the day cells. */ + --rdp-day_button-width: 42px; /* The width of the day cells. */ --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */ --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */ diff --git a/website/docs/docs/styling.mdx b/website/docs/docs/styling.mdx index 635cc018b..2a2ab7296 100644 --- a/website/docs/docs/styling.mdx +++ b/website/docs/docs/styling.mdx @@ -56,13 +56,13 @@ The following table lists the CSS variables used by DayPicker within the `.rdp-r | ----------------------------------------- | -------------------------------------------------------------------- | | `--rdp-accent-color` | The accent color used for selected days and UI elements. | | `--rdp-accent-background-color` | The accent background color used for selected days and UI elements. | -| `--rdp-day-height` | The height of the day cells. | -| `--rdp-day-width` | The width of the day cells. | +| `--rdp-day-height` | The height of the day cells (default: `44px`). | +| `--rdp-day-width` | The width of the day cells (default: `44px`). | | `--rdp-chevron-disabled-opacity` | The opacity of the chevron when its container is disabled. | | `--rdp-day_button-border-radius` | The border radius of the day cells. | | `--rdp-day_button-border` | The border of the day cells. | -| `--rdp-day_button-height` | The height of the day cells. | -| `--rdp-day_button-width` | The width of the day cells. | +| `--rdp-day_button-height` | The height of the day cells (default: `42px`). | +| `--rdp-day_button-width` | The width of the day cells (default: `42px`). | | `--rdp-selected-border` | The border of the selected days. | | `--rdp-disabled-opacity` | The opacity of the disabled days. | | `--rdp-outside-opacity` | The opacity of the days outside the current month. |