fix(docs-infra): ui polish (#31013)

- Change margin to the header so that the the label aligns with the header
- Make code in API pages pre-wrap so that you can see the actual text on the screen - helps with issue #27296
- Modified text to be title case in label API to be consistent with rest of app labels
- Removed unused table of contents SCSS file
- TOC SCSS file reorg cleanup
- Soften headers font-weight in API pages
- Make linenums ordered list inside code examples always show as numbers

PR Close #31013

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -9,5 +9,4 @@
 @import 'marketing-layout';
 @import 'not-found';
 @import 'sidenav';
-@import 'table-of-contents';
 @import 'top-menu';

aio/src/styles/1-layouts/_table-of-contents.scss

@@ -1,10 +0,0 @@
-nav#main-table-of-contents {
-    width: 200px;
-    height: 900px;
-    position: fixed;
-    right: 0;
-    top: 50px;
-    bottom: 100px;
-    margin-left: 32px;
-    background-color: $blue;
-}

aio/src/styles/2-modules/_api-pages.scss

@@ -2,112 +2,96 @@
   max-width: 1200px;
 
   table {
-      margin: 12px 0 24px;
+    margin: 12px 0 24px;
 
-      th {
+    th {
-          text-transform: none;
+        text-transform: none;
-          @include font-size(16);
+        @include font-size(16);
-          font-weight: bold;
+        font-weight: bold;
+    }
+
+    tr {
+        border-bottom: 1px solid $lightgray;
+    }
+
+    td {
+      vertical-align: middle;
+    }
+
+    // This is overriding a style here:
+    // https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
+    tbody > tr > td tr td:first-child {
+      @media screen and (max-width: 480px) {
+        background-color: inherit;
       }
+    }
+
+    hr {
+      margin: 16px 0;
+    }
+
+    tr:last-child {
+      border-bottom: none;
+    }
+
+    &.item-table {
+      td {
+        padding: 32px;
+      }
+    }
+
+    &.list-table {
+      td {
+        padding: 16px 24px;
+      }
+    }
+
+    .short-description {
+      margin-left: 0;
+    }
+
+    &.parameters-table {
+      margin-top: 0;
+      @include font-size(14);
+      box-shadow: none;
 
       tr {
-          border-bottom: 1px solid $lightgray;
+        @media screen and (max-width: 480px) {
+          display: flex;
+          flex-direction: column;
+        }
+
+        td:first-child {
+          font-weight: 600;
+          padding-left: 16px;
+          width: 20%;
+        }
       }
 
       td {
-          vertical-align: middle;
+        padding: 8px 8px 8px 0;
+        border: 0;
+        vertical-align: top;
       }
+    }
 
-      // This is overriding a style here:
+    &.property-table {
-      // https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
+      td {
-      tbody > tr > td tr td:first-child {
+        vertical-align: top;
-        @media screen and (max-width: 480px) {
-          background-color: inherit;
-        }
-      }
-
-      hr {
-          margin: 16px 0;
-      }
-
-      tr:last-child {
-          border-bottom: none;
-      }
-
-      &.item-table {
-          td {
-              padding: 32px;
-          }
-      }
-
-      &.list-table {
-          td {
-              padding: 16px 24px;
-          }
-      }
-
-      .short-description {
-          margin-left: 0;
-      }
-
-      &.parameters-table {
-        margin-top: 0;
-        @include font-size(14);
-        box-shadow: none;
-
-        tr {
-          @media screen and (max-width: 480px) {
-            display: flex;
-            flex-direction: column;
-          }
-
-          td:first-child {
-            font-weight: 600;
-            padding-left: 16px;
-            width: 20%;
-          }
-        }
-
-        td {
-          padding: 8px 8px 8px 0;
-          border: 0;
-          vertical-align: top;
-        }
-      }
-
-      &.property-table {
-        td {
-          vertical-align: top;
-        }
       }
+    }
   }
 
   .class-overview {
     position: relative;
 
     code-example {
-        clear: left;
+      clear: left;
     }
   }
 
   .short-description {
-    margin: 6px 0 0 10px;
+    margin-top: 8px;
-  }
-}
-
-.breadcrumb-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.api-header {
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-    align-items: flex-start;
   }
 
   h1 {
@@ -117,10 +101,12 @@
 
 .github-links {
   float: right;
+
   .material-icons {
     border-radius: 4px;
     padding: 4px;
     @include font-size(20);
+
     &:hover {
       background-color: $mist;
     }
@@ -128,19 +114,20 @@
 }
 
 .api-body {
-
   .class-overview {
     position: relative;
 
     code-example {
-        clear: left;
+      clear: left;
     }
   }
 
-  .method-table, .option-table, .list-table {
+  .method-table,
+  .option-table,
+  .list-table {
     td > code {
       background-color: inherit;
-      white-space: pre;
+      white-space: pre-wrap;
     }
 
     .with-github-links {
@@ -161,7 +148,7 @@
 
     h3 {
       margin: 6px 0;
-      font-weight: bold;
+      font-weight: 500;
       clear: left;
     }
 
@@ -172,10 +159,9 @@
     }
   }
 
-
   .api-heading {
-    padding: 5px 0;
     @include font-size(14);
+    margin: 16px;
   }
 
   .parameters-table {
@@ -244,7 +230,9 @@
   }
 
 
-  .from-constructor, .read-only-property, .write-only-property {
+  .from-constructor,
+  .read-only-property,
+  .write-only-property {
     @include font-size(12);
     font-weight: 600;
     @include letter-spacing(0.5);
@@ -259,7 +247,8 @@
     padding: 0;
   }
 
-  .selector-list, .inherited-members-list {
+  .selector-list,
+  .inherited-members-list {
     ul {
       padding: 0;
       li {
@@ -270,7 +259,8 @@
   }
 
   .selector-list {
-    li, a {
+    li,
+    a {
       font-weight: bold;
       i {
         font-weight: normal;
@@ -279,6 +269,39 @@
   }
 }
 
+.breadcrumb-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.api-header {
+  display: flex;
+  align-items: center;
+  margin-top: -4px;
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  h1 {
+    margin: 0;
+  }
+}
+
+.github-links {
+  float: right;
+  .material-icons {
+    border-radius: 4px;
+    padding: 4px;
+    font-size: 20px;
+    &:hover {
+      background-color: $mist;
+    }
+  }
+}
+
 .deprecated-api-item {
   text-decoration: line-through;
 }

aio/src/styles/2-modules/_code.scss

@@ -1,6 +1,11 @@
-code-example, code-tabs {
+code-example,
+code-tabs {
     clear: both;
     display: block;
+
+    ol {
+      list-style: decimal;
+    }
 }
 
 code-example {

aio/src/styles/2-modules/_toc.scss

@@ -30,159 +30,160 @@
       &:hover {
         color: $accentblue;
       }
-
     }
   }
 
-  button.toc-heading,
+  button {
-  button.toc-more-items {
+    &.toc-heading,
-    cursor: pointer;
+    &.toc-more-items {
-    display: inline-block;
+      cursor: pointer;
-    background: 0;
+      display: inline-block;
-    background-color: transparent;
+      background: 0;
-    border: none;
+      background-color: transparent;
-    box-shadow: none;
+      border: none;
-    padding: 0;
+      box-shadow: none;
-    text-align: start;
+      padding: 0;
+      text-align: start;
 
-    &.embedded:focus {
+      &.embedded:focus {
-      outline: none;
+        outline: none;
-      background: $lightgray;
-    }
-  }
-
-  button.toc-heading {
-    mat-icon.rotating-icon {
-      height: 18px;
-      width: 18px;
-      position: relative;
-      left: -4px;
-      top: 5px;
-    }
-
-    &:hover:not(.embedded) {
-      color: $accentblue;
-    }
-  }
-
-  button.toc-more-items {
-    color: $mediumgray;
-    top: 10px;
-    position: relative;
-
-    &:hover {
-      color: $accentblue;
-    }
-
-    &::after {
-      content: 'expand_less';
-    }
-
-    &.collapsed::after {
-      content: 'more_horiz';
-    }
-  }
-
-  .mat-icon {
-    &.collapsed {
-      @include rotate(0deg);
-    }
-
-    &:not(.collapsed) {
-      @include rotate(90deg);
-    }
-  }
-
-  ul.toc-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0 8px 0 0;
-
-    @media (max-width: 800px) {
-      width: auto;
-    }
-
-    li {
-      box-sizing: border-box;
-      @include font-size(12);
-      @include line-height(16);
-      padding: 3px 0 3px 12px;
-      position: relative;
-      transition: all 0.3s ease-in-out;
-
-      &.h1:after {
-        content: '';
-        display: block;
-        height: 1px;
-        width: 40%;
-        margin: 7px 0 4px 0;
         background: $lightgray;
-        clear: both;
+      }
+    }
+
+    &.toc-heading {
+      mat-icon.rotating-icon {
+        height: 18px;
+        width: 18px;
+        position: relative;
+        left: -4px;
+        top: 5px;
       }
 
-      &.h3 {
+      &:hover:not(.embedded) {
-        padding-left: 24px;
+        color: $accentblue;
       }
+    }
 
-      a {
+    &.toc-more-items {
-        color: lighten($darkgray, 10);
+      color: $mediumgray;
-        overflow: visible;
+      top: 10px;
-        @include font-size(12);
+      position: relative;
-        display: table-cell;
-      }
 
       &:hover {
-        * {
+        color: $accentblue;
-          color: $accentblue;
-        }
       }
 
-      &.active {
+      &::after {
-        * {
+        content: 'expand_less';
-          color: $blue;
+      }
-          font-weight: 500;
 
-          &:before {
+      &.collapsed::after {
-            content: '';
+        content: 'more_horiz';
-            border-radius: 50%;
+      }
-            left: -3px;
+    }
-            top: 12px;
+
-            background: $blue;
+    .mat-icon {
-            position: absolute;
+      &.collapsed {
-            width: 6px;
+        @include rotate(0deg);
-            height: 6px;
+      }
+
+      &:not(.collapsed) {
+        @include rotate(90deg);
+      }
+    }
+
+    ul.toc-list {
+      list-style-type: none;
+      margin: 0;
+      padding: 0 8px 0 0;
+
+      @media (max-width: 800px) {
+        width: auto;
+      }
+
+      li {
+        box-sizing: border-box;
+        @include font-size(12);
+        @include line-height(16);
+        padding: 3px 0 3px 12px;
+        position: relative;
+        transition: all 0.3s ease-in-out;
+
+        &.h1:after {
+          content: '';
+          display: block;
+          height: 1px;
+          width: 40%;
+          margin: 7px 0 4px 0;
+          background: $lightgray;
+          clear: both;
+        }
+
+        &.h3 {
+          padding-left: 24px;
+        }
+
+        a {
+          color: lighten($darkgray, 10);
+          overflow: visible;
+          @include font-size(12);
+          display: table-cell;
+        }
+
+        &:hover {
+          * {
+            color: $accentblue;
+          }
+        }
+
+        &.active {
+          * {
+            color: $blue;
+            font-weight: 500;
+
+            &:before {
+              content: '';
+              border-radius: 50%;
+              left: -3px;
+              top: 12px;
+              background: $blue;
+              position: absolute;
+              width: 6px;
+              height: 6px;
+            }
           }
         }
       }
-    }
 
-    &:not(.embedded) li {
+      &:not(.embedded) li {
-      &:before {
+        &:before {
-        border-left: 1px solid $lightgray;
+          border-left: 1px solid $lightgray;
-        bottom: 0;
+          bottom: 0;
-        content: '';
+          content: '';
-        left: 0;
+          left: 0;
-        position: absolute;
+          position: absolute;
-        top: 0;
+          top: 0;
-      }
+        }
 
-      &:first-child:before {
+        &:first-child:before {
-        top: 13px;
+          top: 13px;
-      }
+        }
 
-      &:last-child:before {
+        &:last-child:before {
-        bottom: calc(100% - 14px);
+          bottom: calc(100% - 14px);
-      }
+        }
 
-      &:not(.active):hover a:before {
+        &:not(.active):hover a:before {
-        content: '';
+          content: '';
-        border-radius: 50%;
+          border-radius: 50%;
-        left: -3px;
+          left: -3px;
-        top: 12px;
+          top: 12px;
-        background: $lightgray;
+          background: $lightgray;
-        position: absolute;
+          position: absolute;
-        width: 6px;
+          width: 6px;
-        height: 6px;
+          height: 6px;
+        }
       }
     }
   }

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -208,9 +208,9 @@
           <code>{$ renderMemberSyntax(property) $}</code>
         </td>
         <td>
-          {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
+          {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-Only</span>{% endif %}
-          {%- if property.isSetAccessor and not property.isGetAccessor %}<span class='write-only-property'>Write-only.</span>{% endif %}
+          {%- if property.isSetAccessor and not property.isGetAccessor %}<span class='write-only-property'>Write-Only</span>{% endif %}
-          {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in constructor.</span>{% endif %}
+          {% if property.constructorParamDoc %} <span class='from-constructor'>Declared in Constructor</span>{% endif %}
           {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}
           {$ (property.description or property.constructorParamDoc.description) | marked $}
           {%- if property.see.length %}