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

@@ -91,23 +91,7 @@
   }
 
   .short-description {
-    margin: 6px 0 0 10px;
-  }
-}
-
-.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;
+    margin-top: 8px;
   }
 
   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,7 +114,6 @@
 }
 
 .api-body {
-
   .class-overview {
     position: relative;
 
@@ -137,10 +122,12 @@
     }
   }
 
-  .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,12 +30,12 @@
       &:hover {
         color: $accentblue;
       }
-
     }
   }
 
-  button.toc-heading,
-  button.toc-more-items {
+  button {
+    &.toc-heading,
+    &.toc-more-items {
       cursor: pointer;
       display: inline-block;
       background: 0;
@@ -51,7 +51,7 @@
       }
     }
 
-  button.toc-heading {
+    &.toc-heading {
       mat-icon.rotating-icon {
         height: 18px;
         width: 18px;
@@ -65,7 +65,7 @@
       }
     }
 
-  button.toc-more-items {
+    &.toc-more-items {
       color: $mediumgray;
       top: 10px;
       position: relative;
@@ -187,6 +187,7 @@
       }
     }
   }
+}
 
 // Alternative TOC View for Smaller Screens
 aio-toc.embedded {

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.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.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.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 %}