fix(aio): improve printing styles (#19651)

printfix

PR Close #19651

aio/src/app/app.component.html

@@ -4,7 +4,7 @@
   <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
 </div>
 
-<mat-toolbar color="primary" class="app-toolbar" [class.transitioning]="isTransitioning">
+<mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
   <mat-toolbar-row class="notification-container">
     <aio-notification
       icon="insert_comment"
@@ -29,6 +29,7 @@
     <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
   </mat-toolbar-row>
 </mat-toolbar>
+
 <aio-search-results #searchResultsView *ngIf="showSearchResults" [searchResults]="searchResults | async" (resultSelected)="hideSearchResults()"></aio-search-results>
 
 <mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
@@ -56,11 +57,11 @@
 
 </mat-sidenav-container>
 
-<div *ngIf="hasFloatingToc" class="toc-container" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
+<div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
   <aio-toc></aio-toc>
 </div>
 
-<footer>
+<footer class="no-print">
   <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>
 </footer>
 

aio/src/app/embedded/code/code.component.ts

@@ -29,7 +29,7 @@ const defaultLineNumsCount = 10; // by default, show linenums over this number
   selector: 'aio-code',
   template: `
     <pre class="prettyprint lang-{{language}}">
-      <button *ngIf="!hideCopy" class="material-icons copy-button"
+      <button *ngIf="!hideCopy" class="material-icons copy-button no-print"
         title="Copy code snippet"
         [attr.aria-label]="ariaLabel"
         (click)="doCopy()">

aio/src/app/layout/toc/toc.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="type !== 'None'" class="toc-inner" [class.collapsed]="isCollapsed">
+<div *ngIf="type !== 'None'" class="toc-inner no-print" [class.collapsed]="isCollapsed">
 
   <div *ngIf="type === 'EmbeddedSimple'" class="toc-heading embedded">
     Contents

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -12,3 +12,4 @@
 @import 'sidenav';
 @import 'table-of-contents';
 @import 'top-menu';
+@import 'print-layout';

aio/src/styles/1-layouts/_print-layout.scss

@@ -0,0 +1,110 @@
+@media print {
+
+    // General Adjustments
+    * {
+        box-shadow: none !important;
+    }
+
+    h1 {
+        height: 40px !important;
+        color: $darkgray !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        page-break-after: avoid;
+    }
+
+    ul, ol, img, code-example, table, tr, .alert, .l-subsection, .feature {
+        page-break-inside: avoid;
+    }   
+
+    table tbody tr:last-child td {
+        border-bottom: 1px solid $lightgray !important;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p {
+        widows: 4;
+    }
+
+    p > code, li > code, table code {
+        color: $blue !important;
+    }
+
+    // No Print Class
+    .no-print {
+        display: none !important;
+    }
+
+    // Custom No Print for Sidenav Menu
+    mat-sidenav.sidenav.mat-sidenav {
+        display: none !important;
+    }
+
+    // Custom No Print Element Adjustments
+    .mat-sidenav-content {
+        margin: 0 !important;
+    }
+
+    mat-sidenav-container.sidenav-container {
+        min-width: 100vw;
+    }
+
+    .sidenav-content {
+        overflow: visible;
+    }
+
+    .filetree {
+        max-width: 100%;
+    }
+
+    aio-code code {
+        border: none !important;
+    }
+
+    code-example {
+        pre.lang-bash code span {
+            color: $mediumgray !important;
+        }
+
+        pre.lang-sh code span {
+            color: $darkgray !important;
+        }
+
+        header {
+            border: 0.5px solid $lightgray;
+            color: $darkgray;
+        }
+    }
+
+    .content code { 
+        border: 0.5px solid $lightgray;
+    }
+
+    .mat-tab-labels {
+        div.mat-tab-label {
+            &:not(.mat-tab-label-active) span {
+                font-style: italic;
+            }
+
+            &.mat-tab-label-active span {
+                font-weight: bold;
+            }
+        }
+    }
+
+    .api-header label { 
+        color: $darkgray !important;
+        font-weight: bold !important;
+        margin: 2px !important;
+        padding: 0 !important;
+        display: block !important;
+    }
+
+    .feature-section img {
+        max-width: 70px !important;
+    }
+}

aio/src/styles/2-modules/_code.scss

@@ -85,7 +85,6 @@ aio-code pre {
 
 
 .copy-button {
-  display: inline-block;
   position: absolute;
   top: -8px;
   right: -32px;