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

docs/src/styles/_tables.scss
102 строки2 KB
Ruslan Lekhman
docs: improve properties and methods template (#32071)
02 янв 2026, 11:12
02 янв 2026, 11:12869d4f8
@use './constants';

@mixin table-styles {
  .docs-api table,
  .docs-markdown > table {
    color: var(--mat-sys-on-surface);
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 32px;
    width: 100%;
  }

  // Styles specific only to the table inside markdown.
  .docs-markdown > table {
    font-size: 14px;

    // Code tends to wrap inside tables which doesn't look great with the background color.
    code {
      background: transparent;
      padding: 0;
    }
  }

  .docs-api th,
  .docs-markdown > table th {
    max-width: 100px;
    padding: 14px 16px;
    text-align: left;
    font-weight: 500;
  }

  .docs-api td,
  .docs-markdown > table td {
    font-weight: 400;
    padding: 8px 16px;

    @media (max-width: constants.$extra-small-breakpoint-width) {
      &.docs-api-properties-name-cell,
      &.docs-api-method-parameter-cell,
      &.docs-api-method-returns-type-cell,
      &.docs-api-method-description-cell {
        min-width: 80px;
        word-break: break-word;
      }
    }
  }

  .docs-api tr,
  .docs-markdown > table tr {
    border-bottom: 1px solid var(--mat-sys-outline-variant);
    height: 56px;
  }

  .docs-api-method-card,
  .docs-api-properties-card {
    background-color: var(--mat-sys-surface-container-lowest);
    border: solid 1px var(--mat-sys-outline-variant);
    border-radius: 12px;
    margin: 0 0 32px;
  }

  .docs-api-method-table,
  .docs-api-properties-table {
    margin: 0 !important;
  }

  .docs-api-method-table tr {
    border-bottom: 0;

    th.docs-api-method-name-cell .docs-api-method-parameter-name {
      color: var(--mat-sys-on-surface);
    }
  }

  .docs-api-properties-table {
    .docs-api-properties-row:last-of-type {
      border-bottom: 0;
    }

    .docs-api-property-type {
      color: var(--mat-sys-primary);
    }
  }


  @media (max-width: constants.$small-breakpoint-width) {
    .docs-api table,
    .docs-markdown > table {
      margin: 0 0 32px;
    }

    .docs-api th,
    .docs-markdown > table th {
      padding: 6px 16px;
    }

    .docs-api td,
    .docs-markdown > table td {
      padding: 4px 8px;
    }
  }
}