add focus outline style for hyperlink (#15977)

This commit is contained in:
Alan Ren
2021-07-02 10:34:26 -07:00
committed by GitHub
parent e8ba89750b
commit 24b77a6a40
2 changed files with 16 additions and 1 deletions

View File

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

View File

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