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>
decaporg · Feb 7, 2024 · 352eb6d · 352eb6d
1 parent e93c94f
commit 352eb6d
Showing 1 changed file with 9 additions and 4 deletions.
diff --git 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};
+            }
           }
         }
       `}