@jupyter/web-components/dist/esm/disclosure/disclosure.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 { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, bodyFont, controlCornerRadius, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, strokeWidth, typeRampBaseFontSize } from '../design-tokens.js';
/**
 * Styles for Disclosure
 * @public
 */
export const disclosureStyles = (context, definition) => css `
  .disclosure {
    transition: height 0.35s;
  }

  .disclosure .invoker::-webkit-details-marker {
    display: none;
  }

  .disclosure .invoker {
    list-style-type: none;
  }

  :host([appearance='accent']) .invoker {
    background: ${accentFillRest};
    color: ${foregroundOnAccentRest};
    font-family: ${bodyFont};
    font-size: ${typeRampBaseFontSize};
    border-radius: calc(${controlCornerRadius} * 1px);
    outline: none;
    cursor: pointer;
    margin: 16px 0;
    padding: 12px;
    max-width: max-content;
  }

  :host([appearance='accent']) .invoker:active {
    background: ${accentFillActive};
    color: ${foregroundOnAccentActive};
  }

  :host([appearance='accent']) .invoker:hover {
    background: ${accentFillHover};
    color: ${foregroundOnAccentHover};
  }

  :host([appearance='lightweight']) .invoker {
    background: transparent;
    color: ${accentForegroundRest};
    border-bottom: calc(${strokeWidth} * 1px) solid ${accentForegroundRest};
    cursor: pointer;
    width: max-content;
    margin: 16px 0;
  }

  :host([appearance='lightweight']) .invoker:active {
    border-bottom-color: ${accentForegroundActive};
  }

  :host([appearance='lightweight']) .invoker:hover {
    border-bottom-color: ${accentForegroundHover};
  }

  .disclosure[open] .invoker ~ * {
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`;