From 415207a97713f6013bcd38f53b6a4ebe8c3c2cbd Mon Sep 17 00:00:00 2001
From: John Walley <john@walley.org.uk>
Date: Mon, 15 Jan 2024 20:38:30 +0000
Subject: [PATCH] feat: allow customising sash animation duration (#740)

---
 src/allotment.module.css | 1 +
 src/sash/sash.module.css | 2 +-
 website/docs/styling.md  | 9 +++++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/allotment.module.css b/src/allotment.module.css
index 4c5fdfbd..8d36a428 100644
--- a/src/allotment.module.css
+++ b/src/allotment.module.css
@@ -1,5 +1,6 @@
 :root {
   --separator-border: rgba(128, 128, 128, 0.35);
+  --sash-hover-transition-duration: 0.1s;
 }
 
 .splitView {
diff --git a/src/sash/sash.module.css b/src/sash/sash.module.css
index 887bcba1..76fdf4b6 100644
--- a/src/sash/sash.module.css
+++ b/src/sash/sash.module.css
@@ -109,7 +109,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  transition: background-color 0.1s ease-out;
+  transition: background-color var(--sash-hover-transition-duration) ease-out;
   background: transparent;
 }
 
diff --git a/website/docs/styling.md b/website/docs/styling.md
index b3d73bb3..214cf58e 100644
--- a/website/docs/styling.md
+++ b/website/docs/styling.md
@@ -9,10 +9,11 @@ Some common style changes can be made by setting CSS variables.
 
 These include:
 
-| Name                 | Default                     | Description                    |
-| :------------------- | :-------------------------- | :----------------------------- |
-| `--focus-border`     | `#007fd4`                   | Color of the sash when hovered |
-| `--separator-border` | `rgba(128, 128, 128, 0.35)` | Color of the separator         |
+| Name                               | Default                     | Description                                                       |
+| :--------------------------------- | :-------------------------- | :---------------------------------------------------------------- |
+| `--focus-border`                   | `#007fd4`                   | Color of the sash when hovered                                    |
+| `--separator-border`               | `rgba(128, 128, 128, 0.35)` | Color of the separator                                            |
+| `--sash-hover-transition-duration` | `0.1s`                      | Length of time hover transition animation should take to complete |
 
 For more involved styling you can target the component's child elements.