docs/src/styles/_api.scss - main - githubmirror/components

docs/src/styles/_api.scss
167 строк4 KB
Ruslan Lekhman
docs: improve properties and methods template (#32071)
02 янв 2026, 11:12
02 янв 2026, 11:12869d4f8
// Styles for API docs generated via dgeni from material2 source JsDocs.

@mixin api-styles {
  .docs-api {
    max-width: 100%;
  }

  .docs-api-method-name-cell,
  .docs-api-method-returns-type,
  .docs-api-method-parameter-type,
  .docs-api a {
    color: var(--mat-sys-primary);
  }

  .docs-api-modifier-method-marker {
    background-color: var(--mat-sys-primary-container);
    color: var(--mat-sys-on-primary-container);
  }

  // Force the top-level API docs header to be hidden, since this is already
  // captured in the top nav-bar.
  .docs-api-h1 {
    display: none !important;
  }

  // Prevent p tags from not breaking, causing x axis overflows.
  .docs-api > p {
    word-break: break-word;
  }

  .docs-api-module {
    display: flex;
    align-items: center;
  }

  .docs-api-module-import {
    margin: 0;
  }

  .docs-api-class-name,
  .docs-api-module-import,
  .docs-api-class-selector-name,
  .docs-api-class-export-name {
    background: color-mix(in srgb, var(--mat-sys-primary-container) 25%, transparent);
  }

  // Top header, e.g., "API documentation for dialog".
  .docs-api-h2 {
    font-size: 30px;
  }

  // Section header, e.g. "Services" or "Directives"
  .docs-api-h3 {
    font-size: 24px;
    font-weight: 400;
    margin-top: 45px;
    border-bottom: 1px solid var(--mat-sys-outline-variant);
  }

  .docs-api-h4 {
    font-size: 18px;
    font-weight: 400;
  }

  .docs-api-class-description {
    font-size: 12px;
  }
  .docs-api-property-name {
    margin: 0;
  }

  .docs-api-method-name-row,
  .docs-api-method-parameter-row,
  .docs-api-properties-name-cell {
    font-family: 'Roboto Mono', monospace;
    font-weight: 600;
  }

  .docs-api-properties-name-cell,
  .docs-api-method-parameter-row {
    font-size: 14px;
  }

  .docs-api-method-parameter-type {
    font-size: 12px;
  }

  .docs-api-class-name,
  .docs-api-module-import {
    display: inline;
  }

  .docs-api-method-name-cell {
    font-weight: 700;
    font-size: 18px;
  }

  .docs-api-method-parameters-header-cell,
  .docs-api-method-returns-header-cell {
    font-size: 14px;
    padding-bottom: 0;
  }

  .docs-api-input-marker,
  .docs-api-output-marker,
  .docs-api-deprecated-marker {
    // Size corresponding to "caption"-style text in the spec.
    font-size: 12px;
  }

  .docs-api-deprecated-marker {
    margin-right: 8px;
  }

  .docs-api-module-import,
  .docs-api-class-selector-name,
  .docs-api-class-export-name {
    font-family: 'Roboto Mono', monospace;
    padding: 3px;
  }

  .docs-api-class-extends-type {
    text-decoration: none;
    border-bottom: 1px dotted;
    color: inherit;
    font-weight: 400;
    font-size: 18px;
  }

  .docs-api-modifier-method-marker {
    display: inline-block;
    vertical-align: baseline;
    padding: 2px 7px;
    margin-right: 12px;
    border-radius: 5px;
    font-size: 13px;
    // stylelint-disable-next-line material/no-prefixes
    user-select: none;
  }

  .docs-api-deprecated-marker,
  .docs-api-class-deprecated-marker,
  .docs-api-interface-deprecated-marker {
    display: inline-block;
    font-weight: bold;
    position: relative;

    // We want to set width and height according to our parent
    // deprecated marker element because the component that presents
    // the tooltip for depcreated message is empty by default and
    // empty element can not be able to show up therefore the tooltip
    // wont show either. This makes sure that our tooltip component
    // is aligned with deprecated marker in position and size.
    & .docs-deprecated-content {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      border-bottom: 1px dotted grey;
      cursor: help;
    }
  }

  .docs-api-deprecated-marker + .docs-api-property-name {
    text-decoration: line-through;
  }
}