Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit c4ad0cc

Browse files
jelbournjelbourn
authored
Clean up markdown and api styles (#145)
* Import the "Roboto Mono" font and use that for code * Replace "typography" styles with specific styles for markdown docs and api docs. * Add common "tables" styles used by both markdown and api docs. * Improve styles for @Input/@output markers * Improve styles for method parameter and return types * Improve styles for method names * Other minor style tweaks (font size, spacing)
1 parent cc41474 commit c4ad0cc

11 files changed

+196
-116
lines changed

‎src/_app-theme.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
@import './app/pages/component-list/component-list-theme';
66
@import './app/pages/component-category-list/component-category-list-theme';
77

8-
@import './styles/typography-theme';
8+
@import './styles/api-theme';
9+
@import './styles/markdown-theme';
10+
@import './styles/tables-theme';
911
@import './app/shared/navbar/navbar-theme';
1012
@import './app/shared/example-viewer/example-viewer-theme';
1113
@import './app/shared/footer/footer-theme';
@@ -36,7 +38,9 @@
3638
color: mat-color($primary, default-contrast);
3739
}
3840

39-
@include docs-site-typography-theme($theme);
41+
@include docs-site-api-theme($theme);
42+
@include docs-site-markdown-theme($theme);
43+
@include docs-site-tables-theme($theme);
4044
@include nav-bar-theme($theme);
4145
@include component-viewer-sidenav-theme($theme);
4246
@include home-page-theme($theme);

‎src/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
sizes="192x192">
1717
<link rel="manifest" href="assets/img/favicons/manifest.json">
1818
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
19+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
1920
</head>
2021

2122
<body class="docs-app-background">

‎src/main.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
@import '~@angular/material/theming';
22
@import './app-theme';
3-
@import './styles/typography';
3+
@import './styles/api';
4+
@import './styles/markdown';
5+
@import './styles/tables';
46

57

68
// Include material core styles.
79
@include mat-core();
8-
@include docs-site-typography();
910

1011

1112
// Define the light theme.

‎src/styles/_api-theme.scss

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import '~@angular/material/theming';
2+
3+
// Mixin to apply theme colors for generated API docs.
4+
@mixin docs-site-api-theme($theme) {
5+
$primary: map-get($theme, primary);
6+
$accent: map-get($theme, accent);
7+
$warn: map-get($theme, warn);
8+
$background: map-get($theme, background);
9+
$foreground: map-get($theme, foreground);
10+
$is-dark-theme: map-get($theme, is-dark);
11+
12+
.docs-api-method-name-cell {
13+
color: mat-color($primary, 800);
14+
}
15+
16+
.docs-api-method-returns-type,
17+
.docs-api-method-parameter-type {
18+
color: mat-color($primary, darker);
19+
}
20+
21+
// Force the top-level API docs header to be hidden, since this is already
22+
// captured in the top nav-bar.
23+
.docs-api-h1 {
24+
display: none !important;
25+
}
26+
}

‎src/styles/_api.scss

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// Styles for API docs generated via dgeni from material2 source JsDocs.
2+
3+
// Top header, e.g., "API documentation for dialog".
4+
.docs-api-h2 {
5+
font-size: 30px;
6+
}
7+
8+
// Section header, e.g. "Services" or "Directives"
9+
.docs-api-h3 {
10+
font-size: 24px;
11+
font-weight: 400;
12+
margin-top: 45px;
13+
}
14+
15+
.docs-api-h4 {
16+
font-size: 18px;
17+
font-weight: 400;
18+
}
19+
20+
.docs-api-class-description {
21+
font-size: 12px;
22+
}
23+
.docs-api-property-name {
24+
margin: 0;
25+
}
26+
27+
.docs-api-method-name-row,
28+
.docs-api-method-parameter-row,
29+
.docs-api-properties-name-cell {
30+
font-family: 'Roboto Mono', monospace;
31+
font-weight: 600;
32+
}
33+
34+
.docs-api-properties-name-cell,
35+
.docs-api-method-parameter-row {
36+
font-size: 14px;
37+
}
38+
39+
.docs-api-method-parameter-type {
40+
font-size: 12px;
41+
}
42+
43+
.docs-api-method-name-cell {
44+
font-weight: 700;
45+
font-size: 18px;
46+
}
47+
48+
.docs-api-method-parameters-header-cell,
49+
.docs-api-method-returns-header-cell {
50+
font-size: 14px;
51+
}
52+
53+
.docs-api-input-marker,
54+
.docs-api-output-marker {
55+
// Size corresponding to "caption"-style text in the spec.
56+
font-size: 12px;
57+
}

‎src/styles/_markdown-theme.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import '~@angular/material/theming';
2+
3+
// Mixin to apply theme colors for docs generated from markdown files in the material2 repo.
4+
@mixin docs-site-markdown-theme($theme) {
5+
$primary: map-get($theme, primary);
6+
$accent: map-get($theme, accent);
7+
$warn: map-get($theme, warn);
8+
$background: map-get($theme, background);
9+
$foreground: map-get($theme, foreground);
10+
$is-dark-theme: map-get($theme, is-dark);
11+
12+
.docs-markdown-a {
13+
color: mat-color($primary);
14+
}
15+
}
16+

‎src/styles/_markdown.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Styles for overview and guide docs generated via `marked` from the material2 repo.
2+
3+
.docs-markdown-h1 {
4+
display: inline-block;
5+
font-size: 20px;
6+
font-weight: 400;
7+
padding: 5px;
8+
}
9+
10+
.docs-markdown-h2,
11+
.docs-markdown-h4 {
12+
margin-top: 40px;
13+
}
14+
15+
.docs-markdown-h5 {
16+
font-size: 16px;
17+
}
18+
19+
.docs-markdown-p {
20+
font-size: 16px;
21+
line-height: 28px;
22+
}
23+
24+
.docs-markdown-a {
25+
text-decoration: none;
26+
}
27+
28+
.docs-markdown-td code {
29+
font-size: 12px;
30+
}
31+
32+
code, pre {
33+
font-family: 'Roboto Mono', monospace;
34+
}
35+
36+
pre {
37+
font-size: 12px;
38+
}

‎src/styles/_tables-theme.scss

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import '~@angular/material/theming';
2+
3+
// Mixin to apply theme colors for both generated API docs and markdown docs (guides/overviews).
4+
@mixin docs-site-tables-theme($theme) {
5+
$primary: map-get($theme, primary);
6+
$accent: map-get($theme, accent);
7+
$warn: map-get($theme, warn);
8+
$background: map-get($theme, background);
9+
$foreground: map-get($theme, foreground);
10+
$is-dark-theme: map-get($theme, is-dark);
11+
12+
.docs-api table,
13+
.docs-markdown-table {
14+
color: mat-color($foreground, text);
15+
}
16+
17+
.docs-api th,
18+
.docs-markdown-th {
19+
background: mat-color($background, app-bar);
20+
}
21+
22+
.docs-api td,
23+
.docs-markdown-td {
24+
border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
25+
}
26+
}

‎src/styles/_tables.scss

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.docs-api table,
2+
.docs-markdown-table {
3+
border-collapse: collapse;
4+
border-radius: 2px;
5+
border-spacing: 0;
6+
margin: 0 0 32px 0;
7+
width: 100%;
8+
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
9+
}
10+
11+
.docs-api th,
12+
.docs-markdown-th {
13+
font-weight: 400;
14+
max-width: 100px;
15+
padding: 13px 32px;
16+
text-align: left;
17+
}
18+
19+
.docs-api td,
20+
.docs-markdown-td {
21+
font-weight: 400;
22+
padding: 8px 16px;
23+
}

‎src/styles/_typography-theme.scss

-43
This file was deleted.

‎src/styles/_typography.scss

-69
This file was deleted.

0 commit comments

Comments
 (0)