refactor(docs-infra): create external-link-with-icon mixin (#46482)

create external-link-with-icon mixin in order to reduce scss code duplication PR Close #46482
angular · Jun 24, 2022 · f930fc2 · f930fc2
1 parent 0c66032
commit f930fc2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 25 deletions.
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
@@ -208,16 +208,7 @@ code {
       > a {
         &[href^="http:"],
         &[href^="https:"] {
-          display: inline-flex;
-          padding-right: calc(1em + 0.25rem);
-          position: relative;
-
-          &::after {
-            content: "\e89e"; // codepoint for "open_in_new"
-            font-family: "Material Icons";
-            position: absolute;
-            right: 0;
-          }
+          @include mixins.external-link-with-icon();
         }
       }
     }

diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav.scss b/aio/src/styles/1-layouts/sidenav/_sidenav.scss
@@ -95,14 +95,7 @@ aio-nav-menu {
       &[href^="http:"],
       &[href^="https:"] {
         .vertical-menu-item-text {
-          display: inline-flex;
-          align-items: center;
-          &::after {
-            content: "\e89e"; // codepoint for "open_in_new"
-            margin-left: 0.3rem;
-            line-height: normal;
-            font-family: "Material Icons";
-          }
+          @include mixins.external-link-with-icon();
         }
       }
     }

diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss
@@ -137,13 +137,7 @@ mat-toolbar.app-toolbar {
           &[href^="http:"],
           &[href^="https:"] {
             .nav-link-inner {
-              display: inline-flex;
-              align-items: center;
-              &::after {
-                content: "\e89e"; // codepoint for "open_in_new"
-                margin-left: 0.3rem;
-                font-family: "Material Icons";
-              }
+              @include mixins.external-link-with-icon();
             }
           }
 

diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
@@ -194,3 +194,18 @@
     }
   }
 }
+
+@mixin external-link-with-icon() {
+  display: inline-flex;
+  align-items: center;
+
+  &::after {
+    content: "\e89e"; // codepoint for "open_in_new"
+    font-family: "Material Icons";
+    margin-left: 0.3rem;
+    // Note: float: right is used so that the icon doesn't inherit text underlines
+    float: right;
+    display: flex;
+    align-items: center;
+  }
+}