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

docs/src/styles/_markdown.scss
149 строк3 KB
Kristiyan Kostadinov
build: fix lint failure (#32353)
15 ноя 2025, 00:43
15 ноя 2025, 00:43fce007b
// Styles for overview and guide docs generated via `marked` from the material2 repo.

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

    a:not(.mat-mdc-button-base) {
      color: var(--mat-sys-primary);
    }

    h1 {
      display: inline-block;
      font-size: 32px;
      font-weight: 400;
      margin: 32px 0 16px;
    }

    h2 {
      font-size: 28px;
      margin: 32px 0 16px;
      font-weight: 400;
    }

    h3 {
      font-size: 24px;
      margin: 32px 0 16px;
      font-weight: 400;
    }

    h4 {
      font-size: 22px;
      margin: 24px 0 12px;
      font-weight: 400;
    }

    // stylelint-disable-next-line selector-class-pattern
    h3 .material-icons, h4 .material-icons {
      color: var(--mat-sys-on-surface);
    }

    h5 {
      font-size: 18px;
      margin: 20px 0 10px;
      font-weight: 400;
    }

    p,
    ul,
    ol {
      font-size: 16px;
      line-height: 28px;
    }

    p {
      margin: 0 0 1em;

      // In case the docs generator produces an empty paragraph.
      &:empty {
        display: none;
      }
    }

    a {
      text-decoration: none;
    }

    strong {
      font-weight: 700;
    }

    pre {
      display: block;
      margin: 24px auto;
      overflow-x: auto;
      padding: 20px;
      white-space: pre-wrap;

      border: solid 1px var(--mat-sys-outline-variant);
      border-radius: 12px;

      code {
        background: transparent;
        padding: 0;
        font-size: 100%;
      }
    }

    code {
      background: color-mix(in srgb, var(--mat-sys-primary-container) 25%, transparent);
      padding: 3px;
    }
  }

  .docs-header-link {
    header-link {
      // deduct -30px so the anchor icon will be positioned outside the content
      margin-left: -30px;
      // Slight margin to try and center the icon better.
      margin-top: 2px;
      display: inline-block;
      vertical-align: middle;

      // stylelint-disable-next-line material/no-prefixes
      user-select: none;

      a {
        display: inline-flex;
        text-decoration: none;
      }
    }

    // stylelint-disable-next-line selector-class-pattern
    .material-icons {
      visibility: hidden;
    }

    // stylelint-disable-next-line selector-class-pattern
    &:hover .material-icons {
      visibility: visible;
    }
  }

  summary {
    cursor: pointer;
    padding: 8px;

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
        transparent
      );
    }
    &:focus {
      background-color: color-mix(
        in srgb,
        var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
        transparent
      );
    }
    &:active {
      background-color: color-mix(
        in srgb,
        var(--mat-sys-on-surface) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
        transparent
      );
    }
  }
}