From 50d0b74dfd45f1e3336b555016e52311407c53f9 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 26 May 2021 16:26:22 +0300
Subject: [PATCH] Making sidebar resizing indicator visible on hover

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../resizing-anchor/resizing-anchor.scss      | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss
index 0896a9ee62..024a83105b 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.scss
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss
@@ -31,6 +31,23 @@ body.resizing {
   position: absolute;
   z-index: 10;
 
+  &::after {
+    content: " ";
+    display: block;
+    width: 3px;
+    height: 100%;
+    margin-left: 50%;
+    background: transparent;
+    transition: all 0.2s 0s;
+  }
+
+  &:hover {
+    &::after {
+      background: var(--blue);
+      transition: all 0.2s 0.5s;
+    }
+  }
+
   &.disabled {
     display: none;
   }
@@ -56,6 +73,17 @@ body.resizing {
     cursor: col-resize;
     width: $dimension;
 
+    // Expand hoverable area while resizing to keep highlighting resizer.
+    // Otherwise, cursor can move far away dropping hover indicator.
+    .resizing & {
+      $expandedWidth: 200px;
+      width: $expandedWidth;
+
+      &.trailing {
+        right: -$expandedWidth / 2;
+      }
+    }
+
     &.leading {
       left: -$dimension / 2;
     }