@jupyter/web-components/dist/esm/drafts/picker/picker.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 { bodyFont, designUnit, fillColor, typeRampBaseFontSize } from '../../design-tokens.js';
import { heightNumber } from '../../styles/index.js';
/**
 * Styles for Picker
 * @public
 */
export const pickerStyles = (context, definition) => css `
  .region {
    z-index: 1000;
    overflow: hidden;
    display: flex;
    font-family: ${bodyFont};
    font-size: ${typeRampBaseFontSize};
  }

  .loaded {
    opacity: 1;
    pointer-events: none;
  }

  .loading-display,
  .no-options-display {
    background: ${fillColor};
    width: 100%;
    min-height: calc(${heightNumber} * 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding: calc(${designUnit} * 1px);
  }

  .loading-progress {
    width: 42px;
    height: 42px;
  }

  .bottom {
    flex-direction: column;
  }

  .top {
    flex-direction: column-reverse;
  }
`;