fix(aio): tidy up API doc styles (#24000)

* Code anchors should inherit the font size from their container
* Table headings should align with content

PR Close #24000

aio/src/styles/1-layouts/_api-page.scss

@@ -1,79 +0,0 @@
-.api-section {
-    position: relative;
-
-    pre {
-        white-space: pre-wrap;
-    }
-
-    table.api-table {
-        min-width: 680px;
-
-        thead th {
-            color: white;
-            font-size: 16px;
-            background-color: $blue;
-            border-radius: 4px 4px 0 0;
-            text-transform: none;
-            padding: 8px 24px;
-        }
-
-        tbody {
-            pre {
-                white-space: normal;
-                margin: 4px;
-                padding: 4px 16px;
-            }
-
-            td, th {
-                padding: 0;
-            }
-
-            th {
-                max-width: 150px;
-            }
-        }
-
-    }
-}
-
-.api-body {
-
-    max-width: 1200px;
-
-    table {
-
-        th {
-            text-transform: none;
-            font-size: 16px;
-            font-weight: bold;
-        }
-
-        tr {
-            border-bottom: 1px solid $lightgray;
-        }
-
-        td {
-            vertical-align: middle;
-        }
-
-        hr {
-            margin: 16px 0;
-        }
-
-        tr:last-child {
-            border-bottom: none;
-        }
-
-        &.item-table {
-            td {
-                padding: 32px;
-            }
-        }
-
-        &.list-table {
-            td {
-                padding: 16px 24px;
-            }
-        }
-    }
-}

aio/src/styles/1-layouts/_api-pages.scss

@@ -0,0 +1,41 @@
+.api-body {
+
+    max-width: 1200px;
+
+    table {
+
+        th {
+            text-transform: none;
+            font-size: 16px;
+            font-weight: bold;
+        }
+
+        tr {
+            border-bottom: 1px solid $lightgray;
+        }
+
+        td {
+            vertical-align: middle;
+        }
+
+        hr {
+            margin: 16px 0;
+        }
+
+        tr:last-child {
+            border-bottom: none;
+        }
+
+        &.item-table {
+            td {
+                padding: 32px;
+            }
+        }
+
+        &.list-table {
+            td {
+                padding: 16px 24px;
+            }
+        }
+    }
+}

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

@@ -2,7 +2,7 @@
    LAYOUT STYLES
    ============================== */
 
-@import 'api-page';
+@import 'api-pages';
 @import 'content-layout';
 @import 'doc-viewer';
 @import 'footer';

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

@@ -280,6 +280,7 @@ p {
 .code-anchor {
   cursor: pointer;
   text-decoration: none;
+  font-size: inherit;
 
   &:hover {
     text-decoration: underline;

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

@@ -31,6 +31,10 @@
   }
 
   .method-table, .option-table {
+    th {
+      padding: 8px 16px;
+    }
+
     h3 {
       margin: 6px 0;
       font-weight: bold;
@@ -87,10 +91,6 @@
     }
 }
 
-  .api-section aio-code {
-    background-color: rgba(241, 241, 241, 0.2);
-  }
-
   .from-constructor, .read-only-property {
     font-style: italic;
     color: $blue;