From 60f6e177b87fe2c68cf8521984b794f7edab0cf4 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 5 Feb 2021 12:49:11 +0200
Subject: [PATCH] refactor(docs-infra): move common `.symbol` styles to
 `_api-symbols.scss` (#40704)

The `.symbol` CSS class (which is primarily used to denote the type of
API symbols - classes, functions, interfaces, etc.) are used in several
places:
- In the API list page (with the corresponding styles defined in
  `_api-list.scss`).
- In search results (with the corresponding styles defined in
  `_errors.scss`).
- In error list page (with the corresponding styles defined in
  `search-results.scss`).
- In the `<aio-select>` component (with the corresponding styles defined
  in `_select-menu.scss`).

Previously, global styles for `.symbol` were defined in `_api-list.scss`
(i.e. the styles from `_api-list.scss` were also applied to `.symbol`
elements in other places/components). Also, some of the SCSS files
mentioned above defined some duplicate styles for `.symbol`.

This commit moves the `.symbol` styles to a new `_api-symbols.scss`
file, which contains common symbol-related styles.

PR Close #40704
---
 aio/src/styles/2-modules/_api-list.scss       | 36 -------------------
 aio/src/styles/2-modules/_api-symbols.scss    | 28 +++++++++++++++
 aio/src/styles/2-modules/_errors.scss         | 10 +++---
 aio/src/styles/2-modules/_modules-dir.scss    |  1 +
 aio/src/styles/2-modules/_search-results.scss |  4 ---
 5 files changed, 33 insertions(+), 46 deletions(-)
 create mode 100644 aio/src/styles/2-modules/_api-symbols.scss

diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index 9dfddd4bec..9c9d75719f 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -45,10 +45,6 @@ aio-api-list {
     @media screen and (max-width: 600px) {
       width: 100%;
     }
-
-    .symbol {
-      margin-right: 8px;
-    }
   }
 
   .form-select-menu,
@@ -104,10 +100,6 @@ aio-api-list {
       text-overflow: ellipsis;
       white-space: nowrap;
 
-      .symbol {
-        margin-right: 8px;
-      }
-
       a {
         color: $blue-grey-600;
         display: inline-block;
@@ -180,34 +172,6 @@ aio-api-list {
   }
 }
 
-/* API SYMBOLS */
-
-/* SYMBOL CLASS */
-
-.symbol {
-  border-radius: 2px;
-  box-shadow: 0 1px 2px rgba($black, .24);
-  color: $white;
-  display: inline-block;
-  @include font-size(10);
-  font-weight: 600;
-  @include line-height(16);
-  text-align: center;
-  width: 16px;
-
-  // SYMBOL TYPES
-  // Symbol mapping variables in *constants*
-  @each $name, $symbol in $api-symbols {
-    &.#{$name} {
-      background: map-get($symbol, background);
-
-      &:before {
-        content: map-get($symbol, content);
-      }
-    }
-  }
-}
-
 .code-anchor {
   cursor: pointer;
   text-decoration: none;
diff --git a/aio/src/styles/2-modules/_api-symbols.scss b/aio/src/styles/2-modules/_api-symbols.scss
new file mode 100644
index 0000000000..04ddf8c63d
--- /dev/null
+++ b/aio/src/styles/2-modules/_api-symbols.scss
@@ -0,0 +1,28 @@
+/* API SYMBOLS */
+
+/* SYMBOL CLASS */
+
+.symbol {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba($black, .24);
+  color: $white;
+  display: inline-block;
+  @include font-size(10);
+  font-weight: 600;
+  @include line-height(16);
+  margin-right: 8px;
+  text-align: center;
+  width: 16px;
+
+  // SYMBOL TYPES
+  // Symbol mapping variables in *constants*
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+
+      &:before {
+        content: map-get($symbol, content);
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_errors.scss b/aio/src/styles/2-modules/_errors.scss
index b2bcac4bee..5446aa0dc5 100644
--- a/aio/src/styles/2-modules/_errors.scss
+++ b/aio/src/styles/2-modules/_errors.scss
@@ -21,8 +21,6 @@
     white-space: nowrap;
 
     .symbol {
-      margin-right: 8px;
-
       &.runtime {
         background: $green-500;
       }
@@ -34,11 +32,11 @@
 
     .symbol.runtime:before {
       content: "R";
-    }  
-    
+    }
+
     .symbol.compiler:before {
       content: "C";
-    }  
+    }
 
     a {
       color: $blue-grey-600;
@@ -70,4 +68,4 @@
     width: 100%;
     height: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index 2ac5ba9151..3fc23113e0 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -5,6 +5,7 @@
    @import 'alert';
    @import 'api-list';
    @import 'api-pages';
+   @import 'api-symbols';
    @import 'buttons';
    @import 'callout';
    @import 'card';
diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
index f6357629e3..45b0c151f5 100644
--- a/aio/src/styles/2-modules/_search-results.scss
+++ b/aio/src/styles/2-modules/_search-results.scss
@@ -51,10 +51,6 @@ aio-search-results {
           &:hover {
             color: $white;
           }
-
-          .symbol {
-            margin-right: 8px;
-          }
         }
 
         &.priority-pages {