From 419b153b17707c67172d149579b219a05ef9dc1e Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Mon, 9 Dec 2019 15:57:37 +0200
Subject: [PATCH] fix(docs-infra): fix styling of embedded Table-of-Contents
 (#34312)

This commit fixes the following issues:
- Align text content with caret icon in embedded ToC header.
- Fix display of expand/collapse button at the bottom of embeded ToC.

These were accidentally broken in #32124, while fixing another
ToC-related issue. Some CSS rules in `_toc.scss` (e.g. those for
`.mat-icon` and `ul.toc-list`) were correctly moved out of the
`.toc-inner > button` block, but others (e.g. `&.toc-heading` and
`&.toc-more-items`) should not have been moved outside the
`.toc-inner > button` block.

_Before:_
![toc-styles before](https://user-images.githubusercontent.com/8604205/70441952-00df2380-1a9e-11ea-8fc7-d141cc8c9045.png)

_After:_
![toc-styles after](https://user-images.githubusercontent.com/8604205/70441953-0177ba00-1a9e-11ea-8af8-d497977009ae.png)

Closes #34300

PR Close #34312
---
 aio/src/styles/2-modules/_toc.scss | 54 +++++++++++++++---------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index c4e6b0b0b6..20fed744e9 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -50,37 +50,37 @@
         background: $lightgray;
       }
     }
-  }
 
-  &.toc-heading {
-    mat-icon.rotating-icon {
-      height: 18px;
-      width: 18px;
+    &.toc-heading {
+      mat-icon.rotating-icon {
+        height: 18px;
+        width: 18px;
+        position: relative;
+        left: -4px;
+        top: 5px;
+      }
+
+      &:hover:not(.embedded) {
+        color: $accentblue;
+      }
+    }
+
+    &.toc-more-items {
+      color: $mediumgray;
+      top: 10px;
       position: relative;
-      left: -4px;
-      top: 5px;
-    }
 
-    &:hover:not(.embedded) {
-      color: $accentblue;
-    }
-  }
+      &:hover {
+        color: $accentblue;
+      }
 
-  &.toc-more-items {
-    color: $mediumgray;
-    top: 10px;
-    position: relative;
+      &::after {
+        content: 'expand_less';
+      }
 
-    &:hover {
-      color: $accentblue;
-    }
-
-    &::after {
-      content: 'expand_less';
-    }
-
-    &.collapsed::after {
-      content: 'more_horiz';
+      &.collapsed::after {
+        content: 'more_horiz';
+      }
     }
   }
 
@@ -98,7 +98,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0 8px 0 0;
-    
+
     @media (max-width: 800px) {
       width: auto;
     }