Skip to content

Commit

Permalink
better styling for deprecated api items (angular#384)
Browse files Browse the repository at this point in the history
* Adds a dotted underline to the `Deprecated` markers. Those can be hovered to see more information about the deprecation / deletion.
* Fixes that the deprecation markers are too big and are not looking good in the API table
* Adds a line through property names that are also deprecated. This makes it clear that this API is deprecated and also looks pretty good.

References angular#9648
  • Loading branch information
devversion authored and jelbourn committed Feb 9, 2018
1 parent 81e8698 commit c2443fc
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 5 deletions.
4 changes: 0 additions & 4 deletions src/app/pages/component-viewer/component-api.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@
line-height: 24px;
}

.docs-api-class-deprecated-marker {
font-weight: bold;
}

.docs-api-property-type {
font-weight: bold;
font-size: 14px;
Expand Down
19 changes: 18 additions & 1 deletion src/styles/_api.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@
}

.docs-api-input-marker,
.docs-api-output-marker {
.docs-api-output-marker,
.docs-api-deprecated-marker {
// Size corresponding to "caption"-style text in the spec.
font-size: 12px;
}
Expand All @@ -67,3 +68,19 @@
font-family: 'Roboto Mono', monospace;
padding: 3px;
}

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

&[title] {
border-bottom: 1px dotted grey;
cursor: help;
}
}

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

0 comments on commit c2443fc

Please sign in to comment.