From b2ee4e209150c8735fecec8b3cab7fbdf1f67518 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 5 Feb 2021 12:49:00 +0200
Subject: [PATCH] refactor(docs-infra): merge style rules in `_code.scss`
 (#40704)

This commit cleans up the styles in `_code.scss` by merging together
blocks that target the same elements.

It also normalizes the rules targeting Angular Material tabs to use
consistent selectors and use class names instead of tag names.

PR Close #40704
---
 aio/src/styles/2-modules/_code.scss | 125 +++++++++++++++-------------
 1 file changed, 69 insertions(+), 56 deletions(-)

diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 38dc3c57266..779c3bc44c7 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -1,15 +1,23 @@
 code-example,
 code-tabs {
-    clear: both;
-    display: block;
+  clear: both;
+  display: block;
 
-    ol {
-      list-style: decimal;
-    }
+  code {
+    overflow: auto;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  .mat-card {
+    padding: 0;
+    border-radius: 5px;
+  }
 }
 
 code-example {
-
   &:not(.no-box) {
     background-color: rgba($backgroundgray, 0.2);
     border: 0.5px solid $lightgray;
@@ -22,6 +30,7 @@ code-example {
     pre {
       margin: 0;
     }
+
     code {
       background-color: transparent;
     }
@@ -30,34 +39,44 @@ code-example {
   code {
     overflow: auto;
   }
-}
 
-code-example, code-tabs {
-  .mat-card {
-    padding: 0;
-    border-radius: 5px;
+  // TERMINAL / SHELL TEXT STYLES
+  &.code-shell, &[language=sh], &[language=bash] {
+    background-color: $darkgray;
   }
-  code {
-    overflow: auto;
+
+  header {
+    background-color: $accentblue;
+    border-radius: 5px 5px 0 0;
+    color: $offwhite;
+    @include font-size(16);
+    padding: 8px 16px;
   }
 }
 
 code-tabs {
   margin: 16px 0;
-}
 
-// TERMINAL / SHELL TEXT STYLES
+  .code-tab-group {
+    .mat-tab-label {
+      &:hover {
+        background: rgba(black, 0.04);
+      }
+    }
 
-code-example.code-shell, code-example[language=sh], code-example[language=bash] {
-  background-color: $darkgray;
-}
+    .mat-tab-body {
+      overflow-y: hidden;
 
-code-example header {
-  background-color: $accentblue;
-  border-radius: 5px 5px 0 0;
-  color: $offwhite;
-  @include font-size(16);
-  padding: 8px 16px;
+      .mat-tab-body-content {
+        height: auto;
+        transform: none;
+
+        .fadeIn {
+          animation: opacity 2s ease-in;
+        }
+      }
+    }
+  }
 }
 
 code-example.avoid header,
@@ -73,24 +92,20 @@ code-tabs.avoidFile mat-tab-body {
   border: 0.5px solid $anti-pattern;
 }
 
-code-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {
-  overflow-y: hidden;
-}
-
-code-tabs mat-tab-body-content .fadeIn {
-  animation: opacity 2s ease-in;
-}
-
-aio-code pre {
+aio-code {
+  pre {
     display: flex;
     min-height: 32px;
     margin: 16px 24px;
     white-space: pre-wrap;
     align-items: center;
 
-    code span {
-      @include line-height(24);
+    code {
+      span {
+        @include line-height(24);
+      }
     }
+  }
 }
 
 
@@ -115,30 +130,26 @@ aio-code pre {
   }
 }
 
-.lang-sh .copy-button, .lang-bash .copy-button {
-  color: $mediumgray;
-  &:hover {
-    color: $lightgray;
+.lang-sh, .lang-bash {
+  .copy-button {
+    color: $mediumgray;
+
+    &:hover {
+      color: $lightgray;
+    }
   }
 }
 
-.code-tab-group .mat-tab-label {
-  &:hover {
-    background: rgba(black, 0.04);
+.sidenav-content {
+  code {
+    a {
+      color: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+    }
   }
 }
 
-.code-tab-group .mat-tab-body-content {
-  height: auto;
-  transform: none;
-}
-
-.sidenav-content code a {
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
 /* PRETTY PRINTING STYLES for prettify.js. */
 
 .prettyprint {
@@ -194,8 +205,10 @@ ol.linenums {
 
 /* SHELL / TERMINAL CODE BLOCKS */
 
-code-example.code-shell, code-example[language=sh], code-example[language=bash] {
-  .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
-    color: $codegreen;
+code-example {
+  &.code-shell, &[language=sh], &[language=bash] {
+    .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
+      color: $codegreen;
+    }
   }
 }