@vscode/webview-ui-toolkit
Version:
A component library for building webview-based extensions in Visual Studio Code.
94 lines (93 loc) • 2.7 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { css } from '@microsoft/fast-element';
import { disabledCursor, display, focusVisible, } from '@microsoft/fast-foundation';
import { borderWidth, cornerRadiusRound, designUnit, disabledOpacity, dropdownBorder, focusBorder, fontFamily, foreground, inputBackground, inputForeground, inputMinWidth, scrollbarHeight, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, scrollbarWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens.js';
export const textAreaStyles = (context, definition) => css `
${display('inline-block')} :host {
font-family: ${fontFamily};
outline: none;
user-select: none;
}
.control {
box-sizing: border-box;
position: relative;
color: ${inputForeground};
background: ${inputBackground};
border-radius: calc(${cornerRadiusRound} * 1px);
border: calc(${borderWidth} * 1px) solid ${dropdownBorder};
font: inherit;
font-size: ${typeRampBaseFontSize};
line-height: ${typeRampBaseLineHeight};
padding: calc(${designUnit} * 2px + 1px);
width: 100%;
min-width: ${inputMinWidth};
resize: none;
}
.control:hover:enabled {
background: ${inputBackground};
border-color: ${dropdownBorder};
}
.control:active:enabled {
background: ${inputBackground};
border-color: ${focusBorder};
}
.control:hover,
.control:${focusVisible},
.control:disabled,
.control:active {
outline: none;
}
.control::-webkit-scrollbar {
width: ${scrollbarWidth};
height: ${scrollbarHeight};
}
.control::-webkit-scrollbar-corner {
background: ${inputBackground};
}
.control::-webkit-scrollbar-thumb {
background: ${scrollbarSliderBackground};
}
.control::-webkit-scrollbar-thumb:hover {
background: ${scrollbarSliderHoverBackground};
}
.control::-webkit-scrollbar-thumb:active {
background: ${scrollbarSliderActiveBackground};
}
:host(:focus-within:not([disabled])) .control {
border-color: ${focusBorder};
}
:host([resize='both']) .control {
resize: both;
}
:host([resize='horizontal']) .control {
resize: horizontal;
}
:host([resize='vertical']) .control {
resize: vertical;
}
.label {
display: block;
color: ${foreground};
cursor: pointer;
font-size: ${typeRampBaseFontSize};
line-height: ${typeRampBaseLineHeight};
margin-bottom: 2px;
}
.label__hidden {
display: none;
visibility: hidden;
}
:host([disabled]) .label,
:host([readonly]) .label,
:host([readonly]) .control,
:host([disabled]) .control {
cursor: ${disabledCursor};
}
:host([disabled]) {
opacity: ${disabledOpacity};
}
:host([disabled]) .control {
border-color: ${dropdownBorder};
}
`;