[ADF-4402] Move component related styles from demo-shell to ADF components (#4808)

* [ADF-4402] remove styling of non-existent items

* [ADF-4402] remove not needed style - bcs overwritten by style from core

* [ADF-4559] remove demo-shell only class from core styling

- use class name from core component for styling

* [ADF-4402] remove not used styling code

- .adf-app-layout-toolbar no longer exists, so no need keep its style

* [ADF-4402] move style from demo-shell to core

- same style was needed in ACA, so probably should be best in core ADF

* [ADF-4402] remove not used styling code

* [ADF-4402] move adf-toolbar-title style from demo-shell to core

* [ADF-4402] remove not used styling code

* [ADF-4402] use existing css class

* [ADF-4402] remove style already set from pagination component

* [ADF-4402] remove not used styling code

* [ADF-4402] viewer toolbar width

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -14,7 +14,7 @@
 
                 <div class="adf-header-delimiexpandedSidenavter"></div>
 
-                <adf-userinfo class="adf-app-layout-user-profile" [menuPositionX]="'before'" [menuPositionY]="'above'">
+                <adf-userinfo [menuPositionX]="'before'" [menuPositionY]="'above'">
                 </adf-userinfo>
 
                 <app-theme-picker></app-theme-picker>

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -1,9 +1,6 @@
 @mixin adf-app-layout-theme($theme) {
     $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
     $minimumAppWidth: 320px;
-    $toolbarHeight: 64px;
 
     @media screen and ($mat-xsmall) {
         app-search-bar {
@@ -17,24 +14,12 @@
         }
     }
 
-    .adf-app-layout-toolbar {
-        z-index: 998;
-        position: relative;
-        overflow: visible !important;
-    }
-
     .adf-app-layout {
         display: flex;
         flex: 1;
         min-width: $minimumAppWidth;
         height: 100%;
 
-        .adf-nav-container {
-            display: block;
-            min-width: $minimumAppWidth;
-            height: 100%;
-        }
-
         .adf-sidenav-link--active {
             color: mat-color($primary);
         }
@@ -52,34 +37,9 @@
             height: 40px;
         }
 
-        &-user-profile {
-            margin-right: 10px;
-        }
-
         &-menu-spacer {
             flex: 1 1 auto;
         }
-
-        &-toolbar {
-            height: $toolbarHeight;
-            line-height: $toolbarHeight;
-            overflow: hidden;
-
-            mat-toolbar-row {
-                height: $toolbarHeight;
-                align-items: stretch;
-                justify-content: space-between;
-            }
-
-            .adf-toolbar-link {
-                min-width: 0;
-                line-height: $toolbarHeight;
-
-                &.adf-active {
-                    background-color: rgba(0, 0, 0, 0.12);
-                }
-            }
-        }
     }
 
     @media screen and ($mat-small) {