From 24b77a6a407c3721d48891bcc1edb824048cecb0 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Fri, 2 Jul 2021 10:34:26 -0700 Subject: [PATCH] add focus outline style for hyperlink (#15977) --- .../browser/modelComponents/hyperlink.component.ts | 11 ++++++++++- .../browser/modelComponents/media/hyperlink.css | 6 ++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts index 2c004c03fa..b3565684f7 100644 --- a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts +++ b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts @@ -14,7 +14,7 @@ import * as azdata from 'azdata'; import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledComponent'; import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces'; import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { textLinkForeground, textLinkActiveForeground } from 'vs/platform/theme/common/colorRegistry'; +import { textLinkForeground, textLinkActiveForeground, focusBorder } from 'vs/platform/theme/common/colorRegistry'; import { IOpenerService } from 'vs/platform/opener/common/opener'; import * as DOM from 'vs/base/browser/dom'; import { ILogService } from 'vs/platform/log/common/log'; @@ -104,4 +104,13 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) = } `); } + + const outlineColor = theme.getColor(focusBorder); + if (outlineColor) { + collector.addRule(` + modelview-hyperlink a { + outline-color: ${outlineColor}; + } + `); + } }); diff --git a/src/sql/workbench/browser/modelComponents/media/hyperlink.css b/src/sql/workbench/browser/modelComponents/media/hyperlink.css index 176e82483b..6bf6a3eff6 100644 --- a/src/sql/workbench/browser/modelComponents/media/hyperlink.css +++ b/src/sql/workbench/browser/modelComponents/media/hyperlink.css @@ -9,3 +9,9 @@ modelview-hyperlink .link-with-icon::after { margin-left: 5px; vertical-align: bottom; } + +modelview-hyperlink a:focus { + outline-width: 1px; + outline-style: solid; + outline-offset: 1px; +}