feat: allow customising sash animation duration (#740)

johnwalley · Jan 15, 2024 · e92b944 · e92b944
1 parent 13ae176
commit e92b944
Show file tree

Hide file tree

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