@vscode/webview-ui-toolkit
Version:
A component library for building webview-based extensions in Visual Studio Code.
51 lines (50 loc) • 1.43 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { css } from '@microsoft/fast-element';
import { display, focusVisible, } from '@microsoft/fast-foundation';
import { borderWidth, cornerRadius, focusBorder, fontFamily, linkActiveForeground, linkForeground, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens.js';
export const linkStyles = (context, definition) => css `
${display('inline-flex')} :host {
background: transparent;
box-sizing: border-box;
color: ${linkForeground};
cursor: pointer;
fill: currentcolor;
font-family: ${fontFamily};
font-size: ${typeRampBaseFontSize};
line-height: ${typeRampBaseLineHeight};
outline: none;
}
.control {
background: transparent;
border: calc(${borderWidth} * 1px) solid transparent;
border-radius: calc(${cornerRadius} * 1px);
box-sizing: border-box;
color: inherit;
cursor: inherit;
fill: inherit;
font-family: inherit;
height: inherit;
padding: 0;
outline: none;
text-decoration: none;
word-break: break-word;
}
.control::-moz-focus-inner {
border: 0;
}
:host(:hover) {
color: ${linkActiveForeground};
}
:host(:hover) .content {
text-decoration: underline;
}
:host(:active) {
background: transparent;
color: ${linkActiveForeground};
}
:host(:${focusVisible}) .control,
:host(:focus) .control {
border: calc(${borderWidth} * 1px) solid ${focusBorder};
}
`;