Skip to content

Commit a28ed98

Browse files
MeAkibMeAkib
committed
docs: move header link icon to the right to align with Angular style
1 parent 0c41bc7 commit a28ed98

8 files changed

Lines changed: 26 additions & 26 deletions

File tree

‎docs/src/styles/_markdown.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,24 @@
88
color: var(--mat-sys-primary);
99
}
1010

11+
h1,
12+
h2,
13+
h3 {
14+
font-weight: 400;
15+
margin: 32px 0 16px;
16+
}
17+
1118
h1 {
1219
display: inline-block;
1320
font-size: 32px;
14-
font-weight: 400;
15-
margin: 32px 0 16px;
1621
}
1722

1823
h2 {
1924
font-size: 28px;
20-
margin: 32px 0 16px;
21-
font-weight: 400;
2225
}
2326

2427
h3 {
2528
font-size: 24px;
26-
margin: 32px 0 16px;
27-
font-weight: 400;
2829
}
2930

3031
h4 {
@@ -92,11 +93,10 @@
9293

9394
.docs-header-link {
9495
header-link {
95-
// deduct -30px so the anchor icon will be positioned outside the content
96-
margin-left: -30px;
97-
// Slight margin to try and center the icon better.
98-
margin-top: 2px;
99-
display: inline-block;
96+
// Slight margin so the anchor icon isn't flush against the heading text.
97+
margin-left: 8px;
98+
display: inline-flex;
99+
align-items: center;
100100
vertical-align: middle;
101101

102102
// stylelint-disable-next-line material/no-prefixes

‎tools/dgeni/templates/class.template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{% import "macros.html" as macros %}
22

33
<h4 id="{$ class.name $}" class="docs-header-link docs-api-h4 docs-api-class-name">
4-
<span header-link="{$ class.name $}"></span>
54
<code>{$ class.name $}</code>
65
{% if class.extendedDoc %}
76
<span class="docs-api-class-extends-clauses">
@@ -11,6 +10,7 @@ <h4 id="{$ class.name $}" class="docs-header-link docs-api-h4 docs-api-class-nam
1110
</a>
1211
</span>
1312
{% endif %}
13+
<span header-link="{$ class.name $}"></span>
1414
</h4>
1515

1616
{%- if class.description -%}

‎tools/dgeni/templates/constant.template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% import "macros.html" as macros %}
22

33
<h4 id="{$ constant.name $}" class="docs-header-link docs-api-h4 docs-api-constant-name">
4-
<span header-link="{$ constant.name $}"></span>
54
<code>{$ constant.name $}</code>
5+
<span header-link="{$ constant.name $}"></span>
66
</h4>
77

88
{%- if constant.isDeprecated -%}

‎tools/dgeni/templates/entry-point.template.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ <h2>
5252

5353
{%- if doc.services.length -%}
5454
<h3 id="{$ doc.name $}-services" class="docs-header-link docs-api-h3">
55-
<span header-link="services"></span>
5655
Services
56+
<span header-link="services"></span>
5757
</h3>
5858
{% for service in doc.services %}
5959
{$ class(service) $}
@@ -62,8 +62,8 @@ <h3 id="{$ doc.name $}-services" class="docs-header-link docs-api-h3">
6262

6363
{%- if doc.components.length -%}
6464
<h3 id="{$ doc.name $}-components" class="docs-header-link docs-api-h3">
65-
<span header-link="components"></span>
6665
Components
66+
<span header-link="components"></span>
6767
</h3>
6868
{% for component in doc.components %}
6969
{$ class(component) $}
@@ -72,8 +72,8 @@ <h3 id="{$ doc.name $}-components" class="docs-header-link docs-api-h3">
7272

7373
{%- if doc.directives.length -%}
7474
<h3 id="{$ doc.name $}-directives" class="docs-header-link docs-api-h3">
75-
<span header-link="directives"></span>
7675
Directives
76+
<span header-link="directives"></span>
7777
</h3>
7878
{% for directive in doc.directives %}
7979
{$ class(directive) $}
@@ -82,8 +82,8 @@ <h3 id="{$ doc.name $}-directives" class="docs-header-link docs-api-h3">
8282

8383
{%- if doc.classes.length -%}
8484
<h3 id="{$ doc.name $}-classes" class="docs-header-link docs-api-h3">
85-
<span header-link="classes"></span>
8685
Classes
86+
<span header-link="classes"></span>
8787
</h3>
8888
{% for other in doc.classes %}
8989
{$ class(other) $}
@@ -92,8 +92,8 @@ <h3 id="{$ doc.name $}-classes" class="docs-header-link docs-api-h3">
9292

9393
{%- if doc.interfaces.length -%}
9494
<h3 id="{$ doc.name $}-interfaces" class="docs-header-link docs-api-h3">
95-
<span header-link="interfaces"></span>
9695
Interfaces
96+
<span header-link="interfaces"></span>
9797
</h3>
9898
{% for item in doc.interfaces %}
9999
{$ interface(item) $}
@@ -102,8 +102,8 @@ <h3 id="{$ doc.name $}-interfaces" class="docs-header-link docs-api-h3">
102102

103103
{%- if doc.functions.length -%}
104104
<h3 id="{$ doc.name $}-functions" class="docs-header-link docs-api-h3">
105-
<span header-link="functions"></span>
106105
Functions
106+
<span header-link="functions"></span>
107107
</h3>
108108
{% for item in doc.functions %}
109109
{#
@@ -116,8 +116,8 @@ <h3 id="{$ doc.name $}-functions" class="docs-header-link docs-api-h3">
116116

117117
{%- if doc.typeAliases.length -%}
118118
<h3 id="{$ doc.name $}-type_aliases" class="docs-header-link docs-api-h3">
119-
<span header-link="type_aliases"></span>
120119
Type aliases
120+
<span header-link="type_aliases"></span>
121121
</h3>
122122
{% for item in doc.typeAliases %}
123123
{$ typeAlias(item) $}
@@ -126,8 +126,8 @@ <h3 id="{$ doc.name $}-type_aliases" class="docs-header-link docs-api-h3">
126126

127127
{%- if doc.constants.length -%}
128128
<h3 id="{$ doc.name $}-constants" class="docs-header-link docs-api-h3">
129-
<span header-link="constants"></span>
130129
Constants
130+
<span header-link="constants"></span>
131131
</h3>
132132
{% for item in doc.constants %}
133133
{$ constant(item) $}

‎tools/dgeni/templates/interface.template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% import "macros.html" as macros %}
22

33
<h4 id="{$ interface.name $}" class="docs-header-link docs-api-h4 docs-api-interface-name">
4-
<span header-link="{$ interface.name $}"></span>
54
<code>{$ interface.name $}</code>
5+
<span header-link="{$ interface.name $}"></span>
66
</h4>
77

88
{%- if interface.description -%}

‎tools/dgeni/templates/type-alias.template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% import "macros.html" as macros %}
22

33
<h4 id="{$ alias.name $}" class="docs-header-link docs-api-h4 docs-api-type-alias-name">
4-
<span header-link="{$ alias.name $}"></span>
54
<code>{$ alias.name $}</code>
5+
<span header-link="{$ alias.name $}"></span>
66
</h4>
77

88
{%- if alias.isDeprecated -%}

‎tools/markdown-to-html/docs-marked-renderer.mts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export class DocsMarkdownRenderer extends Renderer {
3838
this._seenIds.add(headingId);
3939
return `
4040
<h${depth} id="${headingId}" class="docs-header-link">
41-
<span header-link="${headingId}"></span>
4241
${content}
42+
<span header-link="${headingId}"></span>
4343
</h${depth}>
4444
`;
4545
}

‎tools/markdown-to-html/docs-marked-renderer.spec.mts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ describe('DocsMarkdownRenderer', () => {
2424
`
2525
<div class="docs-markdown">
2626
<h3 id="header-3" class="docs-header-link">
27-
<span header-link="header-3"></span>
2827
header 3
28+
<span header-link="header-3"></span>
2929
</h3>
3030
</div>
3131
`,
@@ -35,8 +35,8 @@ describe('DocsMarkdownRenderer', () => {
3535
`
3636
<div class="docs-markdown">
3737
<h4 id="header-4" class="docs-header-link">
38-
<span header-link="header-4"></span>
3938
header 4
39+
<span header-link="header-4"></span>
4040
</h4>
4141
</div>
4242
`,

0 commit comments

Comments
 (0)