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); }