From 2e45da4b71733169f5bcc8f4b1350d3792aed537 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Tue, 16 Jun 2020 12:35:42 +0300
Subject: [PATCH] chore(core): focus style for InlineEditor

---
 .../src/app/shared/InlineEditor/styles.ts     | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/webapp/packages/core/src/app/shared/InlineEditor/styles.ts b/webapp/packages/core/src/app/shared/InlineEditor/styles.ts
index 0f587ba63f..5f47d474af 100644
--- a/webapp/packages/core/src/app/shared/InlineEditor/styles.ts
+++ b/webapp/packages/core/src/app/shared/InlineEditor/styles.ts
@@ -12,6 +12,10 @@ import { composes } from '@dbeaver/core/theming';
 
 export const InlineEditorStyles = composes(
   css`
+  editor {
+    composes: theme-border-color-background from global;
+  }
+
   editor-actions {
     composes: theme-background-surface theme-text-on-surface theme-border-color-background from global;
   }
@@ -31,7 +35,11 @@ export const InlineEditorStyles = composes(
     display: flex;
     width: 100%;
     height: 100%;
-    border: solid 1px #01cca3;
+    border: solid 1px;
+  }
+
+  editor:focus-within {
+    border-color: #01cca3;
   }
 
   editor-container {
@@ -63,9 +71,14 @@ export const InlineEditorStyles = composes(
     flex-direction: row;
 
     border: solid 1px;
-    border-top-color:  #01cca3 !important;
-    border-right-color: #01cca3 !important;
-    border-bottom-color: #01cca3 !important;
+  }
+
+  editor:focus-within {
+    & editor-actions {
+      border-top-color:  #01cca3;
+      border-right-color: #01cca3;
+      border-bottom-color: #01cca3;
+    }
   }
 
   editor-actions[|position=inside] {
@@ -80,11 +93,17 @@ export const InlineEditorStyles = composes(
   editor-actions[|position=top] {
     right: -1px;
     left: auto;
-    border-left-color: #01cca3;
+  }
+
+  editor:focus-within {
+    & editor-actions[|position=bottom],
+    & editor-actions[|position=top] {
+      border-left-color: #01cca3;
+    }
   }
 
   editor-actions[|position=bottom] {
-    top: auto;
+    top: 100%;
   }
 
   editor-actions[|position=top] {