fix(styles): inconsistent cell size when selection mode is set (#2601)

gpbl · Nov 24, 2024 · 10bbecb · 10bbecb
1 parent 038659d
commit 10bbecb
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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.                   |