From 7944ee2c30c1f09219e152a4a1b2c5e51dd2c9c4 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 9 Mar 2021 14:15:14 +0200
Subject: [PATCH] fix(docs-infra): do not underline link icons on hover
 (#41051)

The external links in the docs content and the download links in the
"Press kit" page have icons next to their text (an external link icon
and a download icon respectively).

Previously, when hovering over one of those links, the icons used to get
underlined along with the link text, which was not desirable.

This commit fixes it by changing the mechanics of how these icons are
positioned inside the anchor elements so that only the link text is
underlined on hover.

Before: ![external links on hover before][1]
Before: ![presskit links on hover before][2]
After: ![external links on hover after][3]
After: ![presskit links on hover after][4]

[1]: https://user-images.githubusercontent.com/8604205/109340455-b64bf180-7871-11eb-923b-3113a237b8d8.png
[2]: https://user-images.githubusercontent.com/8604205/109340461-b815b500-7871-11eb-9c9d-91b6ffb17346.png
[3]: https://user-images.githubusercontent.com/8604205/109340458-b77d1e80-7871-11eb-884c-c1093ec83e66.png
[4]: https://user-images.githubusercontent.com/8604205/109340462-b815b500-7871-11eb-8f00-702b2b61f6ac.png

PR Close #41051
---
 aio/src/styles/0-base/_typography.scss  | 35 ++++++++++++-------------
 aio/src/styles/2-modules/_presskit.scss | 14 +++++-----
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 48bc9374ad..200da433c5 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -204,25 +204,24 @@ code {
 // We add the icon to all external links which are identified as absolute links (those that start with `http:` or https:`).
 // For more info see PR #36601.
 @include docs-pages {
-  aio-doc-viewer{
-    a {
-      &[href^="http:"]::after,
-      &[href^="https:"]::after {
-        font-family: "Material Icons";
-        content: "open_in_new";
-        margin-left: 2px;
-        position: relative;
-        @include line-height(24);
-        vertical-align: middle;
-      }
-    }
+  aio-doc-viewer {
+    // The docs-viewer also contain links to GitHub (e.g. the "edit this page" icon) identified with
+    // the `.github-links` class. We don't want to add the external link icon to these links.
+    :not(.github-links) {
+      > a {
+        &[href^="http:"],
+        &[href^="https:"] {
+          display: inline-flex;
+          padding-right: calc(1em + 0.25rem);
+          position: relative;
 
-    // The docs-viewer also contain links to GitHub (e.g. the edit this page icon) identified with `.github-links` class.
-    // We don't want to add the external link icon to these links, so we hide them.
-    .github-links a {
-      &[href^="http:"]::after,
-      &[href^="https:"]::after {
-        display: none;
+          &::after {
+            content: "open_in_new";
+            font-family: "Material Icons";
+            position: absolute;
+            right: 0;
+          }
+        }
       }
     }
   }
diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss
index 6c3b43ec8a..2ac62639ab 100644
--- a/aio/src/styles/2-modules/_presskit.scss
+++ b/aio/src/styles/2-modules/_presskit.scss
@@ -50,14 +50,16 @@
           padding: 0;
 
           a {
-            display: flex;
-            align-items: center;
+            display: inline-flex;
+            padding-right: 3rem;
+            position: relative;
 
-            &:after {
-              font-family: 'Material Icons';
-              content: 'cloud_download';
+            &::after {
+              content: "cloud_download";
+              font-family: "Material Icons";
               @include font-size(24);
-              margin-left: 0.5rem;
+              position: absolute;
+              right: 0;
             }
           }
         }