From fae0f1f21323a1e4bc58a5ed652aea0c2c37e969 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 13 Feb 2021 16:01:56 +0200
Subject: [PATCH] fix(docs-infra): fix placement of TOC hover/active markers
 (dots) (#40802)

This commit fixes the placement of the TOC hover/active markers (dots)
so that they are horizontally in the middle of the marker "rail" and
vertically in the middle of the item's first line.

This commit also refactors the `_toc.scss` to be more DRY (wrt styling
the TOC markers/marker rail) and uses Sass variables and mixins to
ensure that the styling is kept up-to-date wrt future typography changes
to TOC items.

Before: ![toc marker before][1]
After: ![toc marker after][2]

[1]: https://user-images.githubusercontent.com/8604205/107270751-03e3f400-6a54-11eb-9d77-5b0a3cfb1c2b.png
[2]: https://user-images.githubusercontent.com/8604205/107270758-047c8a80-6a54-11eb-82c0-98b832c109a3.png

PR Close #40802
---
 aio/src/styles/2-modules/_toc.scss | 56 +++++++++++++++++-------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index 19868d0ed6..2a8463b9c5 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -1,3 +1,20 @@
+$tocItemLineHeight: 24;
+$tocItemTopPadding: 9;
+$tocMarkerRailSize: 1;
+$tocMarkerSize: 6;
+
+@mixin tocMarker($color) {
+  background: $color;
+  border-radius: 50%;
+  content: '';
+  height: #{$tocMarkerSize}px;
+  left: -#{($tocMarkerSize - $tocMarkerRailSize) / 2}px;
+  position: absolute;
+  top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
+  top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
+  width: #{$tocMarkerSize}px;
+}
+
 .toc-container {
   width: 18%;
   position: fixed;
@@ -106,7 +123,8 @@ aio-toc {
 
       li {
         box-sizing: border-box;
-        padding: 9px 0 9px 12px;
+        @include line-height($tocItemLineHeight);
+        padding: #{$tocItemTopPadding}px 0 #{$tocItemTopPadding}px 12px;
         position: relative;
         transition: all 0.3s ease-in-out;
 
@@ -128,7 +146,7 @@ aio-toc {
           color: lighten($darkgray, 10);
           overflow: visible;
           @include font-size(14);
-          @include line-height(24);
+          line-height: inherit;
           display: table-cell;
         }
 
@@ -142,24 +160,17 @@ aio-toc {
           * {
             color: $blue;
             font-weight: 500;
+          }
 
-            &:before {
-              content: '';
-              border-radius: 50%;
-              left: -3px;
-              top: 14px;
-              background: $blue;
-              position: absolute;
-              width: 6px;
-              height: 6px;
-            }
+          a:before {
+            @include tocMarker($blue);
           }
         }
       }
 
       &:not(.embedded) li {
         &:before {
-          border-left: 1px solid $lightgray;
+          border-left: #{$tocMarkerRailSize}px solid $lightgray;
           bottom: 0;
           content: '';
           left: 0;
@@ -168,22 +179,19 @@ aio-toc {
         }
 
         &:first-child:before {
-          top: 15px;
+          top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
+          top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
         }
 
         &:last-child:before {
-          bottom: calc(100% - 15px);
+          bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px + #{$tocMarkerSize / 2}px));
+          bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem + #{$tocMarkerSize / 2}px));
         }
 
-        &:not(.active):hover a:before {
-          content: '';
-          border-radius: 50%;
-          left: -3px;
-          top: 14px;
-          background: $lightgray;
-          position: absolute;
-          width: 6px;
-          height: 6px;
+        &:not(.active):hover {
+          a:before {
+            @include tocMarker($lightgray);
+          }
         }
       }
     }