diff --git a/src/app/pages/component-viewer/_component-viewer-theme.scss b/src/app/pages/component-viewer/_component-viewer-theme.scss
index 7c04869fb..f52df48a6 100644
--- a/src/app/pages/component-viewer/_component-viewer-theme.scss
+++ b/src/app/pages/component-viewer/_component-viewer-theme.scss
@@ -14,6 +14,9 @@
.mat-tab-label:focus {
color: mat-color($foreground, text);
}
+ }
+ .docs-api-h3 {
+ border-bottom: 1px solid mat-color($foreground, divider);
}
}
diff --git a/src/app/pages/component-viewer/component-api.html b/src/app/pages/component-viewer/component-api.html
index 144d2f3f2..841d16d96 100644
--- a/src/app/pages/component-viewer/component-api.html
+++ b/src/app/pages/component-viewer/component-api.html
@@ -3,4 +3,8 @@
+ class="docs-component-view-text-content docs-component-api"
+ (contentLoaded)="toc.updateScrollPosition()">
+
diff --git a/src/app/pages/component-viewer/component-api.scss b/src/app/pages/component-viewer/component-api.scss
index 61a40d7bd..973273a9e 100644
--- a/src/app/pages/component-viewer/component-api.scss
+++ b/src/app/pages/component-viewer/component-api.scss
@@ -1,17 +1,37 @@
.docs-api-class-name {
- margin-top: 24px;
+ margin-top: 28px;
margin-bottom: 0;
- display: inline-block;
+ display: block;
+ font-weight: bold;
+ font-size: 20px;
+ background: none;
+
+ code {
+ background: none;
+ }
}
.docs-api-h3 {
- margin-bottom: 0;
+ font-weight: 300;
+ font-size: 24px;
+ line-height: 32px;
+ margin: 40px 0 20px;
+ padding-bottom: 3px;
}
+.docs-api-method-name-cell,
+.docs-api-method-header,
+.docs-api-method-description-cell,
+.docs-api-property-description,
.docs-api-class-export-label,
.docs-api-directive-selectors,
+.docs-api-class-description,
+.docs-api-class-export-name {
+ font-size: 15px;
+}
+
.docs-api-class-description {
- font-size: 14px;
+ line-height: 24px;
}
.docs-api-class-deprecated-marker {
diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss
index 86897adc2..8f1c7bbc9 100644
--- a/src/app/pages/component-viewer/component-viewer.scss
+++ b/src/app/pages/component-viewer/component-viewer.scss
@@ -40,11 +40,12 @@ app-component-viewer {
.docs-component-view-text-content {
flex-grow: 1;
+ width: 100%;
}
+.docs-component-api,
.docs-component-overview {
width: 80%;
- margin-right: 20px;
@media (max-width: $small-breakpoint-width) {
width: 100%;
diff --git a/src/app/shared/doc-viewer/doc-viewer.ts b/src/app/shared/doc-viewer/doc-viewer.ts
index 1e648f1cd..c76c9e207 100644
--- a/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/src/app/shared/doc-viewer/doc-viewer.ts
@@ -85,12 +85,8 @@ export class DocViewer implements OnDestroy {
Array.prototype.slice.call(exampleElements).forEach((element: Element) => {
let example = element.getAttribute(componentName);
-
- let exampleContainer = document.createElement('div');
- element.appendChild(exampleContainer);
-
let portalHost = new DomPortalHost(
- exampleContainer, this._componentFactoryResolver, this._appRef, this._injector);
+ element, this._componentFactoryResolver, this._appRef, this._injector);
let examplePortal = new ComponentPortal(componentClass, this._viewContainerRef);
let exampleViewer = portalHost.attach(examplePortal);
exampleViewer.instance.example = example;
diff --git a/src/app/shared/table-of-contents/table-of-contents.scss b/src/app/shared/table-of-contents/table-of-contents.scss
index 58c745b6b..cc0f829b6 100644
--- a/src/app/shared/table-of-contents/table-of-contents.scss
+++ b/src/app/shared/table-of-contents/table-of-contents.scss
@@ -1,12 +1,15 @@
:host {
font-size: 13px;
- width: 15%;
+ width: 19%;
position: sticky;
top: 0;
+ padding-left: 20px;
+ box-sizing: border-box;
}
.docs-toc-container {
padding: 5px 0 10px 12px;
+ width: 100%;
}
.docs-toc-heading {
@@ -22,6 +25,9 @@ a {
position: relative;
text-decoration: none;
display: block;
+ text-overflow: ellipsis;
+ width: 100%;
+ overflow: hidden;
}
.docs-level-h4 {
diff --git a/src/styles/_api-theme.scss b/src/styles/_api-theme.scss
index 4d4d2421a..7e39b3078 100644
--- a/src/styles/_api-theme.scss
+++ b/src/styles/_api-theme.scss
@@ -8,7 +8,6 @@
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
- $exportBackgroundOpacity: if($is-dark-theme, 0.06, 0.03);
.docs-api-method-name-cell {
color: mat-color($primary, 800);
@@ -34,6 +33,6 @@
.docs-api-module-import,
.docs-api-class-selector-name,
.docs-api-class-export-name {
- background: rgba(mat-color($foreground, secondary-text), $exportBackgroundOpacity);
+ background: rgba(mat-color($foreground, secondary-text), 0.06);
}
}
diff --git a/src/styles/_api.scss b/src/styles/_api.scss
index 300fabc76..03faf3990 100644
--- a/src/styles/_api.scss
+++ b/src/styles/_api.scss
@@ -61,9 +61,9 @@
font-size: 12px;
}
-.docs-api-class-name,
.docs-api-module-import,
.docs-api-class-selector-name,
.docs-api-class-export-name {
+ font-family: 'Roboto Mono', monospace;
padding: 3px;
}
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
index 6014081dd..76c3de148 100644
--- a/src/styles/_markdown.scss
+++ b/src/styles/_markdown.scss
@@ -64,23 +64,19 @@ pre {
}
.docs-header-link {
- // deduct -30px so the anchor icon will be positioned outside
- // the content and pad it 30px so the header will set inline
- // with the content displayed, absolute position will make
- // it where you can't hover the header
- padding-left: 30px;
- margin-left: -30px;
- position: relative;
+ a {
+ text-decoration: none;
+ // deduct -30px so the anchor icon will be positioned outside the content
+ margin-left: -30px;
+ display: inline-block;
+ vertical-align: middle;
+ }
.material-icons {
- display: none;
+ visibility: hidden;
}
- &:hover {
- .material-icons {
- display: block;
- position: absolute;
- left: 0;
- }
+ &:hover .material-icons {
+ visibility: visible;
}
}
diff --git a/src/styles/_tables-theme.scss b/src/styles/_tables-theme.scss
index 85be809c4..862bcc5ae 100644
--- a/src/styles/_tables-theme.scss
+++ b/src/styles/_tables-theme.scss
@@ -8,7 +8,8 @@
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
-
+ $tableBorderOpacity: if($is-dark-theme, 0.08, 0.03);
+
.docs-api table,
.docs-markdown-table {
color: mat-color($foreground, text);
@@ -21,6 +22,6 @@
.docs-api td,
.docs-markdown-td {
- border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
+ border: 1px solid rgba(mat-color($foreground, secondary-text), $tableBorderOpacity);
}
}