@vscode/webview-ui-toolkit
Version:
A component library for building webview-based extensions in Visual Studio Code.
52 lines (51 loc) • 1.43 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { css } from '@microsoft/fast-element';
import { display, } from '@microsoft/fast-foundation';
import { cornerRadius, designUnit, fontFamily, foreground, panelTabActiveForeground, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens.js';
export const panelsStyles = (context, definition) => css `
${display('grid')} :host {
box-sizing: border-box;
font-family: ${fontFamily};
font-size: ${typeRampBaseFontSize};
line-height: ${typeRampBaseLineHeight};
color: ${foreground};
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
overflow-x: auto;
}
.tablist {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto;
column-gap: calc(${designUnit} * 8px);
position: relative;
width: max-content;
align-self: end;
padding: calc(${designUnit} * 1px) calc(${designUnit} * 1px) 0;
box-sizing: border-box;
}
.start,
.end {
align-self: center;
}
.activeIndicator {
grid-row: 2;
grid-column: 1;
width: 100%;
height: calc((${designUnit} / 4) * 1px);
justify-self: center;
background: ${panelTabActiveForeground};
margin: 0;
border-radius: calc(${cornerRadius} * 1px);
}
.activeIndicatorTransition {
transition: transform 0.01s linear;
}
.tabpanel {
grid-row: 2;
grid-column-start: 1;
grid-column-end: 4;
position: relative;
}
`;