@jupyter/web-components/dist/esm/combobox/combobox.styles.js

A component library for building extensions in Jupyter frontends.

// 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 { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
import { accentFillFocus, errorFillFocus, focusStrokeWidth, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens.js';
import { selectStyles } from '../select/select.styles.js';
/**
 * Styles for Combobox
 * @public
 */
export const comboboxStyles = (context, definition) => css `
  ${selectStyles(context, definition)}

  :host(:empty) .listbox {
    display: none;
  }

  :host([disabled]) *,
  :host([disabled]) {
    cursor: ${disabledCursor};
    user-select: none;
  }

  :host(:focus-within:not([disabled])) {
    border-color: ${accentFillFocus};
    box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
      ${accentFillFocus};
  }

  :host([aria-invalid='true']:focus-within:not([disabled])) {
    border-color: ${errorFillFocus};
    box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
      ${errorFillFocus};
  }

  .selected-value {
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font-size: ${typeRampBaseFontSize};
    line-height: ${typeRampBaseLineHeight};
    height: calc(100% - (${strokeWidth} * 1px));
    margin: auto 0;
    width: 100%;
  }

  .selected-value:hover,
    .selected-value:${focusVisible},
    .selected-value:disabled,
    .selected-value:active {
    outline: none;
  }
`;