Add blue background to the resizer

dmtrKovalenko · dmtrKovalenko · commit d74d50dd5683 · 2021-02-08T16:03:21.000+02:00
diff --git a/packages/runner-ct/src/app/app.scss b/packages/runner-ct/src/app/app.scss
@@ -31,13 +31,13 @@ main.app-ct {
   box-shadow: $box-shadow-closest;
   transition: ease-in-out 0.2s;
   padding-left: $specs-list-padding;
-  padding-top: $specs-list-padding;
-
+ 
   .specs-list-container {
     display: grid;
     grid-template-rows: min-content;
     grid-gap: $specs-list-padding;
     height: calc(100vh - 20px);
+    padding-top: $specs-list-padding;
 
     nav {
       position: absolute;
@@ -135,59 +135,36 @@ main.app-ct {
 }
 
 
-// styles for react-split-pane
+// styles for react-split-pane and custom ResizableBox
 .Resizer {
-  $resize-border-color: rgba(255, 255, 255, 0);
-  $resize-hover-border-color: lighten($resize-border-color, 0.5);
-  $resize-border: 5px solid $resize-border-color;
-  $resize-hover-border: 5px solid $resize-hover-border-color;
-  $resize-thickness: 11px;
-
-  background: $resize-border-color;
-  opacity: 0.2;
+  $resize-thickness: 12px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  margin: -5px;
+
+  background: transparent;
   z-index: 1;
   box-sizing: border-box;
   background-clip: padding-box;
 
-  :hover {
-    transition: all 2s ease;
-  }
-
-  &.horizontal, &.vertical, {
-    margin: 0 -5px;
+  &:active {
+    background-color: lighten(#4299e1, 10%);
+    transition: background-color .3s ease-in-out;
   }
-
+ 
   &.horizontal {
     cursor: row-resize;
     width: 100%;
     height: $resize-thickness;
-    border-top: $resize-border;
-    border-bottom: $resize-border;
-
-    :hover {
-      border-top: $resize-hover-border;
-      border-bottom: $resize-hover-border;
-    }
   }
 
   &.vertical {
     width: $resize-thickness;
     cursor: col-resize;
-    border-left: $resize-border;
-    border-right: $resize-border;
-
-    :hover {
-      border-left: $resize-hover-border;
-      border-right: $resize-hover-border;
-    }
   }
 
   &.disabled {
     display: none;
-
-    :hover {
-      border-color: transparent;
-    }
   }
 }
 
diff --git a/packages/runner-ct/src/lib/ResizableBox.tsx b/packages/runner-ct/src/lib/ResizableBox.tsx
@@ -66,6 +66,7 @@ export const ResizableBox: React.FC<ResizableBoxProps> = ({
       {!disabled && (
         <div
           data-cy="resizer"
+          className="Resizer"
           style={{ cursor: 'col-resize', flexBasis: 11, width: 11 }}
           onMouseDown={initResizing}
         />
