From 5258d263b066067844a4e8ed39e25d54049249b0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 7 Jan 2023 18:52:21 +0100
Subject: [PATCH] fix(core): add `focus` and `focus-visible` styles to nodes to
 avoid browser styles

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/style.css         | 15 +++++++++++++++
 packages/core/src/theme-default.css | 14 ++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/packages/core/src/style.css b/packages/core/src/style.css
index 494752a0..47591537 100644
--- a/packages/core/src/style.css
+++ b/packages/core/src/style.css
@@ -125,6 +125,21 @@
   transform-origin: 0 0;
 }
 
+.vue-flow__node-default,
+.vue-flow__node-input,
+.vue-flow__node-output {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+     outline: none;
+     border: 1px solid #555;
+   }
+}
+
 .vue-flow__node {
   position: absolute;
   user-select: none;
diff --git a/packages/core/src/theme-default.css b/packages/core/src/theme-default.css
index 23d8bd7a..1243ed6a 100644
--- a/packages/core/src/theme-default.css
+++ b/packages/core/src/theme-default.css
@@ -29,6 +29,13 @@
   cursor: grab;
 }
 
+.vue-flow__node.selectable {
+  &:focus,
+  &:focus-visible {
+     outline: none;
+   }
+}
+
 .vue-flow__node-default,
 .vue-flow__node-input,
 .vue-flow__node-output {
@@ -48,6 +55,13 @@
      box-shadow: 0 0 0 0.5px var(--vf-box-shadow);
    }
 
+  &.selected,
+  &:focus,
+  &:focus-visible {
+     outline: none;
+     border: 1px solid var(--vf-node-color);
+   }
+
   .vue-flow__handle {
     background: var(--vf-handle);
   }