@jupyter/web-components
Version:
A component library for building extensions in Jupyter frontends.
75 lines (68 loc) • 2.57 kB
JavaScript
// Copyright (c) Jupyter Development Team.
// Copyright (c) Microsoft Corporation.
// Distributed under the terms of the Modified BSD License.
import { css } from '@microsoft/fast-element';
import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
import { SystemColors } from '@microsoft/fast-web-utilities';
import { accentFillRest, bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '../../design-tokens.js';
import { heightNumber } from '../../styles/index.js';
/**
* Styles for Picker list item
* @public
*/
export const pickerListItemStyles = (context, definition) => css `
:host {
display: flex;
align-items: center;
justify-items: center;
font-family: ${bodyFont};
border-radius: calc(${controlCornerRadius} * 1px);
border: calc(${focusStrokeWidth} * 1px) solid transparent;
box-sizing: border-box;
background: ${neutralFillStealthRest};
color: ${neutralForegroundRest};
cursor: pointer;
fill: currentcolor;
font-size: ${typeRampBaseFontSize};
height: calc(${heightNumber} * 1px);
line-height: ${typeRampBaseLineHeight};
outline: none;
overflow: hidden;
padding: 0 calc(${designUnit} * 2.25px);
user-select: none;
white-space: nowrap;
}
:host(:hover) {
background: ${neutralFillStealthHover};
}
:host(:active) {
background: ${neutralFillStealthActive};
}
:host(:${focusVisible}) {
background: ${neutralFillStealthFocus};
border-color: ${focusStrokeOuter};
}
:host([aria-selected='true']) {
background: ${accentFillRest};
color: ${foregroundOnAccentActive};
}
`.withBehaviors(forcedColorsStylesheetBehavior(css `
:host {
border-color: transparent;
forced-color-adjust: none;
color: ${SystemColors.ButtonText};
fill: currentcolor;
}
:host(:not([aria-selected='true']):hover),
:host([aria-selected='true']) {
background: ${SystemColors.Highlight};
color: ${SystemColors.HighlightText};
}
:host([disabled]),
:host([disabled]:not([aria-selected='true']):hover) {
background: ${SystemColors.Canvas};
color: ${SystemColors.GrayText};
fill: currentcolor;
opacity: 1;
}
`));