From 352eb6d368aee3928143fc40545fd4b0573a2454 Mon Sep 17 00:00:00 2001
From: Oleg Fedak <olegfedak@gmail.com>
Date: Wed, 7 Feb 2024 09:31:36 +0200
Subject: [PATCH] style: add resizer vertial hover (#7081)

* style: align SidebarHeading with TopHeading

* style: bring to shorthand property

* style: fix guides

* style: update after testing

* style: align items in sidebar

* style: update after testing

* Update config.yml

* style: add resizer vertial hover

---------

Co-authored-by: Martin Jagodic <jagodicmartin1@gmail.com>
---
 .../src/components/Editor/EditorInterface.js        | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/decap-cms-core/src/components/Editor/EditorInterface.js b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
index e54101b9441a..7fb49ae0efac 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorInterface.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
@@ -47,24 +47,29 @@ function ReactSplitPaneGlobalStyles() {
     <Global
       styles={css`
         .Resizer.vertical {
-          width: 21px;
+          width: 2px;
           cursor: col-resize;
           position: relative;
-          transition: background-color ${transitions.main};
+          background: none;
 
           &:before {
             content: '';
             width: 2px;
             height: 100%;
             position: relative;
-            left: 10px;
             background-color: ${colors.textFieldBorder};
             display: block;
+            z-index: 10;
+            transition: background-color ${transitions.main};
           }
 
           &:hover,
           &:active {
-            background-color: ${colorsRaw.GrayLight};
+            &:before {
+              width: 4px;
+              left: -1px;
+              background-color: ${colorsRaw.blue};
+            }
           }
         }
       `}