[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) {

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

@@ -8,13 +8,6 @@
     margin: 10px 0;
 }
 
-.adf-full-content-toolbar {
+.adf-full-content-toolbar .adf-toolbar-title .adf-breadcrumb {
-    .adf-toolbar-title {
-        display: flex;
-        width: 100%;
-
-        .adf-breadcrumb {
     width: 0;
-        }
-    }
 }

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

@@ -1,7 +1,4 @@
 @mixin adf-file-component-theme($theme) {
-    $foreground: map-get($theme, foreground);
-
-
     .adf-container {
         margin: 10px !important;
     }
@@ -24,26 +21,6 @@
         color: #d50000;
     }
 
-    .adf-not-overlay-viewer {
-        height: 900px;
-    }
-
-    adf-document-list ::ng-deep adf-datatable tr.adf-document-list__create {
-        background: green !important;
-    }
-
-    adf-document-list ::ng-deep adf-datatable tr.adf-document-list__disable {
-        background: red !important;
-    }
-
-    adf-document-list ::ng-deep .adf-datatable-selected > svg {
-        fill: #00bcd4 !important;
-        margin-top: -4px;
-        margin-left: -4px;
-        width: 32px;
-        height: 32px;
-    }
-
     .adf-document-list-container {
         min-height: 400px;
 
@@ -67,13 +44,6 @@
         padding: 16px;
     }
 
-    .adf-files-toolbar {
-        .adf-toolbar-title {
-            display: flex;
-            width: 100%;
-        }
-    }
-
     .adf-manage-versions-sidebar {
         width: 360px !important;
 
@@ -117,117 +87,4 @@
             justify-content: center;
         }
     }
-
-    @media all {
-        .adf-isLocked-column {
-            max-width: 30px !important;
-            margin-right: 5px;
-        }
-
-        .adf-folder-image-column {
-            max-width: 28px!important;
-        }
-    }
-
-    @media (max-width: 768px) {
-            .adf-createdOn-column {
-                display: none !important;
-            }
-    }
-
-    @media (max-width: 500px) {
-        .adf-datatable-list {
-            .adf {
-
-                &-display-name-column {
-                    max-width: 50% !important;
-                }
-                &-size-column {
-                    display: none !important;
-                }
-                &-createdBy-column {
-                    max-width: 45% !important;
-                }
-                &-nodeId-column {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    @media (max-width: 600px) {
-        .adf-datatable-list {
-            .adf {
-                &-display-name-column {
-                    max-width: 35%;
-                }
-                &-size-column {
-                    max-width: 8%;
-                }
-                &-createdBy-column {
-                    max-width: 35%;
-                }
-                &-createdOn-column {
-                    max-width: 15%;
-                }
-                &-nodeId-column {
-                    max-width: 10%;
-                }
-                &-isLocked-column {
-                    display: none!important;
-                }
-                &-standard-breadcrumb {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    @media (min-width: 601px) {
-        .adf-datatable-list {
-            .adf {
-
-                &-display-name-column {
-                    max-width: 30%;
-                }
-                &-size-column {
-                    max-width: 10%;
-                }
-                &-createdBy-column {
-                    max-width: 30%;
-                }
-                &-createdOn-column {
-                    max-width: 15%;
-                }
-                &-nodeId-column {
-                    max-width: 12%;
-                }
-                &-alternate-breadcrumb {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    @media (min-width: 1400px) {
-        .adf-datatable-list {
-            .adf {
-                &-display-name-column {
-                    max-width: 40%;
-                }
-                &-size-column {
-                    max-width: 15%;
-                }
-                &-createdBy-column {
-                    max-width: 20%;
-                }
-                &-createdOn-column {
-                    max-width: 20%;
-                }
-                &-nodeId-column {
-                    max-width: 20%;
-                }
-            }
-        }
-    }
 }

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

@@ -4,7 +4,6 @@
         right: 10px;
         top: 10px;
         z-index: 1;
-
     }
 
     .adf-settings {

demo-shell/src/app/components/process-service/process-service.component.html

@@ -34,7 +34,7 @@
                     </mat-accordion>
                 </div>
                 <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px"
-                     [ngClass.gt-md]="{'small-pagination': true}"
+                     [ngClass.gt-md]="{'adf-small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <adf-tasklist
                         [appId]="taskFilter?.appId"

demo-shell/src/app/components/process-service/process-service.component.scss

@@ -6,7 +6,6 @@
     }
 
     .adf-grid {
-
         .adf-grid-item {
             margin: 4px;
             box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -19,10 +18,6 @@
             margin-bottom: 24px;
         }
 
-        .adf-list-buttons-start {
-            width: 100%;
-        }
-
         .adf-tasks-list.adf-small-pagination,
         .adf-processes-list.adf-small-pagination {
             .adf-pagination {
@@ -31,10 +26,6 @@
                 padding-bottom: 24px;
                 padding-top: 8px;
 
-                &__block {
-                    border-right: none;
-                }
-
                 &__range-block.adf-pagination__block:first-child {
                     order: 1;
                     width: 60%;
@@ -74,26 +65,6 @@
             .adf-datatable-list {
                 border: none;
             }
-
-            .adf-datatable tr,
-            .adf-datatable td {
-                height: 36px;
-                font-size: 14px;
-            }
-
-            .adf-datatable td {
-                padding-top: 0;
-                padding-bottom: 0;
-                border-bottom: none;
-            }
-
-            .adf-datatable th {
-                padding-top: 0;
-                padding-bottom: 0;
-                height: 40px;
-                vertical-align: middle;
-                font-size: 14px;
-            }
         }
 
         mat-slide-toggle {
@@ -108,7 +79,6 @@
     }
 
     .adf-accordion-panel {
-
         .mat-expansion-panel {
             background: inherit;
         }

docs/content-services/models/permissions-style.model.md

@@ -49,7 +49,7 @@ this.permissionsStyle.push(new PermissionStyleModel('document-list__create', All
 ```
 
 ```css
-adf-document-list ::ng-deep adf-datatable tr.document-list__create {
+adf-document-list adf-datatable .document-list__create {
     background: green !important;
 }
 ```
@@ -68,7 +68,7 @@ this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', Al
 ```
 
 ```css
-adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
+adf-document-list adf-datatable .document-list__disable {
     background: red !important;
 }
 ```

lib/core/layout/components/header/header.component.scss

@@ -78,7 +78,7 @@
             margin-left: 16px;
         }
 
-        .adf-app-layout-user-profile {
+        .adf-userinfo-container {
             margin-left: 16px;
         }
 
@@ -104,7 +104,7 @@
             margin-right: 16px;
         }
 
-        .adf-app-layout-user-profile {
+        .adf-userinfo-container {
             margin-right: 16px;
         }
 

lib/core/layout/components/layout-container/layout-container.component.scss

@@ -1,11 +1,12 @@
 @mixin adf-layout-container-theme($theme) {
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
+    $adf-layout-container-height: 100% !default;
 
     adf-layout-container {
         display: block;
         width: 100%;
-        height: 100%;
+        height: $adf-layout-container-height;
         overflow: hidden;
     }
 
@@ -51,4 +52,13 @@
         transition-duration: unset !important;
         transition-timing-function: unset !important;
     }
+
+    mat-sidenav-content > div {
+        display: flex;
+        height: $adf-layout-container-height;
+
+        > div {
+            flex: auto;
+        }
+    }
 }

lib/core/toolbar/toolbar.component.scss

@@ -12,6 +12,8 @@
 
         &-title {
             overflow: hidden;
+            display: flex;
+            width: 100%;
         }
 
         .mat-toolbar {

lib/core/viewer/components/viewer.component.scss

@@ -17,6 +17,10 @@
 
         .mat-toolbar {
             color: mat-color($foreground, text, 0.54);
+
+            .adf-toolbar-title {
+                width: auto;
+            }
         }
 
         &-main {