From e656cc697748ec8c8ee21336cd91fcab580b0579 Mon Sep 17 00:00:00 2001
From: Suzana Dirla <dirla.silvia.suzana@gmail.com>
Date: Fri, 5 Apr 2019 16:05:21 +0300
Subject: [PATCH] [ADF-4323] Add style fixes from ACA (#4546)

* [ADF-4323] add style fix for adf-search-sorting-picker

- moved from ACA

* [ADF-4323] use Flex Layout's media query mixin

* [ADF-4323] add style fix for adf-pagination

- moved from ACA

* [ADF-4323] add style fix for adf-version-manager

- which fixed issue [ACA-1750]

* [ADF-4323] remove not used property

* [ADF-4323] remove extra bottom-border

* [ADF-4323] upload-drag-area refactor to scss

* [ADF-4323] add style fix for adf file upload

- from ACA

* [ADF-4323] add style fix for adf-info-drawer

- from ACA

* [ADF-4323] add style fix for adf-toolbar

- from ACA

* [ADF-4323] add style fix for adf-sidenav-layout

- from ACA

* [ADF-4323] add style fix for adf-search-filter

- from ACA

* [ADF-4323] add style fix for adf-upload-drag-area

- from ACA

* [ADF-4323] add style fix for adf-info-drawer

- from ACA

* [ADF-4323] move style fix for adf-manage-versions from demo-shell

* [ADF-4323] use Flex Layout's media query mixin

* [ADF-4323] small fix to remove scrolling

* [ADF-4323] add adf-sidenav-layout host element class

* [ADF-4323] change 'inline' class name to 'adf-toolbar--inline'

- css lint was failing because of old naming

* [ADF-4323] set pagination empty state styling

* [ADF-4323] set pagination border to none
---
 .../app/components/files/files.component.scss | 18 ----
 .../trashcan/trashcan.component.html          |  2 +-
 .../search-filter.component.scss              | 89 +++++++++++--------
 .../search-sorting-picker.component.scss      |  9 ++
 .../search-sorting-picker.component.ts        |  1 +
 lib/content-services/styles/_index.scss       |  6 ++
 .../file-uploading-dialog.component.scss      |  2 +-
 .../file-uploading-list-row.component.scss    |  5 +-
 .../components/upload-drag-area.component.css | 15 ----
 .../upload-drag-area.component.scss           | 88 ++++++++++++++++++
 .../components/upload-drag-area.component.ts  |  2 +-
 .../version-manager.component.scss            | 20 ++++-
 .../info-drawer-layout.component.scss         | 28 +++++-
 .../sidenav-layout.component.html             | 44 +++++----
 .../sidenav-layout.component.scss             | 30 +++++--
 .../sidenav-layout.component.ts               | 18 +++-
 lib/core/pagination/pagination.component.scss | 44 ++++-----
 lib/core/styles/_index.scss                   |  2 +
 lib/core/styles/_theming.scss                 |  1 +
 lib/core/toolbar/toolbar.component.scss       | 34 +++++--
 20 files changed, 311 insertions(+), 147 deletions(-)
 create mode 100644 lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.scss
 delete mode 100644 lib/content-services/upload/components/upload-drag-area.component.css
 create mode 100644 lib/content-services/upload/components/upload-drag-area.component.scss

diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss
index 1d7ab7a8a0..ef0dcd4223 100644
--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@@ -76,28 +76,10 @@
 
     .adf-manage-versions-sidebar {
         width: 360px !important;
-        color: rgba(0, 0, 0, 0.87);
-
-        .adf-manage-versions-empty,
-        .adf-manage-versions-no-permission {
-            margin: 44px;
-            color: mat-color($foreground, text, 0.54);
-            text-align: center;
-
-            &-icon {
-                display: block;
-                font-size: 48px;
-                margin: 0 auto 32px;
-            }
-        }
 
         & .adf-info-drawer-layout-header {
             display: none !important;
         }
-
-        & .adf-info-drawer-layout-content {
-            padding: 10px !important;
-        }
     }
 
     .adf-no-result__empty_doc_lib {
diff --git a/demo-shell/src/app/components/trashcan/trashcan.component.html b/demo-shell/src/app/components/trashcan/trashcan.component.html
index 505778b790..66229fb45f 100644
--- a/demo-shell/src/app/components/trashcan/trashcan.component.html
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.html
@@ -3,7 +3,7 @@
         <adf-breadcrumb [root]="'APP_LAYOUT.TRASHCAN' | translate">
         </adf-breadcrumb>
 
-        <adf-toolbar class="inline">
+        <adf-toolbar class="adf-toolbar--inline">
             <button
                 mat-icon-button
                 [adf-delete]="documentList.selection"
diff --git a/lib/content-services/search/components/search-filter/search-filter.component.scss b/lib/content-services/search/components/search-filter/search-filter.component.scss
index 529207b0de..77e11e249b 100644
--- a/lib/content-services/search/components/search-filter/search-filter.component.scss
+++ b/lib/content-services/search/components/search-filter/search-filter.component.scss
@@ -1,53 +1,66 @@
-.adf-search-filter {
+@mixin adf-search-filter-theme($theme) {
+    $foreground: map-get($theme, foreground);
 
-    .adf-checklist {
-        display: flex;
-        flex-direction: column;
+    .adf-search-filter {
 
-        .mat-checkbox-label {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            width: 100%;
-        }
+        .adf-checklist {
+            display: flex;
+            flex-direction: column;
 
-        .mat-checkbox-layout {
-            width: 100%;
-        }
+            .mat-checkbox-label {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                width: 100%;
+            }
 
-        .adf-facet-label {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
+            .mat-checkbox-layout {
+                width: 100%;
+            }
 
-        .mat-checkbox {
-            margin: 5px;
+            .adf-facet-label {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
 
-            &.mat-checkbox-checked .mat-checkbox-label {
-                font-weight: bold;
+            .mat-checkbox {
+                margin: 5px;
+
+                &.mat-checkbox-checked .mat-checkbox-label {
+                    font-weight: bold;
+                }
             }
         }
-    }
 
-    .adf-facet-result-filter {
-        display: flex;
-        flex-direction: column;
+        .adf-facet-result-filter {
+            display: flex;
+            flex-direction: column;
 
-        & > * {
-            width: 100%;
-        }
-    }
-
-    .adf-facet-buttons {
-        text-align: right;
-
-        .mat-button {
-            text-transform: uppercase;
+            & > * {
+                width: 100%;
+            }
         }
 
-        &--topSpace {
-            padding-top: 15px;
+        .adf-facet-buttons {
+            text-align: right;
+
+            .mat-button {
+                text-transform: uppercase;
+            }
+
+            &--topSpace {
+                padding-top: 15px;
+            }
+        }
+
+        .mat-expansion-panel-header-title {
+            font-size: 14px;
+            color: mat-color($foreground, text, 0.87);
+        }
+
+        .mat-checkbox-label,
+        .mat-radio-label {
+            color: mat-color($foreground, text, 0.54);
         }
     }
-
 }
diff --git a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.scss b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.scss
new file mode 100644
index 0000000000..f83b1b64e2
--- /dev/null
+++ b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.scss
@@ -0,0 +1,9 @@
+@mixin adf-search-sorting-picker-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .adf-search-sorting-picker {
+        .mat-icon-button {
+            color: mat-color($foreground, text, 0.54);
+        }
+    }
+}
diff --git a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts
index ec6a990cdf..34e28137c4 100644
--- a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts
+++ b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts
@@ -22,6 +22,7 @@ import { SearchSortingDefinition } from '../../search-sorting-definition.interfa
 @Component({
     selector: 'adf-search-sorting-picker',
     templateUrl: './search-sorting-picker.component.html',
+    styleUrls: ['./search-sorting-picker.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-sorting-picker' }
 })
diff --git a/lib/content-services/styles/_index.scss b/lib/content-services/styles/_index.scss
index 49d259993e..ba1f5c22bb 100644
--- a/lib/content-services/styles/_index.scss
+++ b/lib/content-services/styles/_index.scss
@@ -6,9 +6,12 @@
 
 @import '../upload/components/file-uploading-list-row.component';
 @import '../upload/components/file-uploading-dialog.component';
+@import '../upload/components/upload-drag-area.component';
 
 @import '../search/components/search.component';
 @import '../search/components/search-control.component';
+@import '../search/components/search-sorting-picker/search-sorting-picker.component';
+@import '../search/components/search-filter/search-filter.component';
 
 @import '../dialogs/folder.dialog';
 
@@ -28,8 +31,10 @@
     @include adf-document-list-theme($theme) ;
     @include adf-file-uploading-row-theme($theme);
     @include adf-upload-dialog-theme($theme);
+    @include adf-upload-drag-area-theme($theme);
     @include adf-search-control-theme($theme);
     @include adf-search-autocomplete-theme($theme);
+    @include adf-search-sorting-picker-theme($theme);
     @include adf-dialog-theme($theme);
     @include adf-content-node-selector-dialog-theme($theme) ;
     @include adf-content-metadata-module-theme($theme);
@@ -38,4 +43,5 @@
     @include adf-add-permission-dialog-theme($theme);
     @include adf-add-permission-panel-theme($theme);
     @include adf-tree-view-theme($theme);
+    @include adf-search-filter-theme($theme);
 }
diff --git a/lib/content-services/upload/components/file-uploading-dialog.component.scss b/lib/content-services/upload/components/file-uploading-dialog.component.scss
index c46a5213dc..caf12dbfd1 100644
--- a/lib/content-services/upload/components/file-uploading-dialog.component.scss
+++ b/lib/content-services/upload/components/file-uploading-dialog.component.scss
@@ -1,4 +1,3 @@
-
 @mixin adf-upload-dialog-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -10,6 +9,7 @@
         bottom: 20px;
         width: 40%;
         box-shadow: 1px 5px 15px #888888;
+        z-index: 999;
 
         &--padding {
             padding: 1em;
diff --git a/lib/content-services/upload/components/file-uploading-list-row.component.scss b/lib/content-services/upload/components/file-uploading-list-row.component.scss
index 153dd285c4..7710fb0fe1 100644
--- a/lib/content-services/upload/components/file-uploading-list-row.component.scss
+++ b/lib/content-services/upload/components/file-uploading-list-row.component.scss
@@ -1,4 +1,3 @@
-
 @mixin adf-file-uploading-row-theme($theme) {
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
@@ -32,7 +31,7 @@
         }
 
         &__group, &__block {
-            min-width: 200px;
+            min-width: 100px;
             display: flex;
             justify-content: flex-end;
         }
@@ -72,7 +71,7 @@
         }
 
         &__action--remove {
-            color: mat-color($accent);
+            color: mat-color($warn);
         }
     }
 }
diff --git a/lib/content-services/upload/components/upload-drag-area.component.css b/lib/content-services/upload/components/upload-drag-area.component.css
deleted file mode 100644
index 0febcdc2e2..0000000000
--- a/lib/content-services/upload/components/upload-drag-area.component.css
+++ /dev/null
@@ -1,15 +0,0 @@
-adf-upload-drag-area {
-    overflow: hidden;
-}
-
-.adf-upload-border {
-    vertical-align: middle;
-    text-align: center;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.adf-file-draggable__input-focus {
-    color: #2196f3;
-    border: 1px dashed #2196f3;
-}
diff --git a/lib/content-services/upload/components/upload-drag-area.component.scss b/lib/content-services/upload/components/upload-drag-area.component.scss
new file mode 100644
index 0000000000..2db0052669
--- /dev/null
+++ b/lib/content-services/upload/components/upload-drag-area.component.scss
@@ -0,0 +1,88 @@
+$adf-upload-dragging-color: #2196f3 !default;
+$adf-upload-dragging-border: 1px dashed #2196f3 !default;
+$adf-upload-dragging-background: #e3f2fd !default;
+$adf-upload-dragging-level1-color: #2196f3 !default;
+$adf-upload-dragging-level1-border: 1px dashed #2196f3 !default;
+
+@mixin file-draggable__input-focus($text-color, $border) {
+    color: $text-color;
+    border: $border !important;
+    margin-left: 0 !important;
+}
+
+@mixin adf-upload-drag-area-theme($theme) {
+    adf-upload-drag-area {
+        @include flex-column;
+
+        .adf-upload-border {
+            @include flex-column;
+            vertical-align: unset;
+            text-align: unset;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .adf-file-draggable__input-focus {
+            color: $adf-upload-dragging-color;
+            border: $adf-upload-dragging-border;
+
+            adf-document-list {
+                background: $adf-upload-dragging-background;
+                adf-datatable > table {
+                    background: inherit;
+                }
+            }
+        }
+
+        .adf-upload__dragging {
+            background: $adf-upload-dragging-background;
+            color: $adf-upload-dragging-color;
+        }
+
+        .adf-upload__dragging td {
+            border-top: $adf-upload-dragging-border !important;
+            border-bottom: $adf-upload-dragging-border !important;
+
+            &:first-child {
+                border-left: $adf-upload-dragging-border !important;
+            }
+
+            &:last-child {
+                border-right: $adf-upload-dragging-border !important;
+            }
+        }
+
+        &:first-child {
+            & > div {
+                adf-upload-drag-area {
+                    .adf-file-draggable__input-focus {
+                        @include file-draggable__input-focus(
+                                $adf-upload-dragging-color,
+                                $adf-upload-dragging-border
+                        );
+                    }
+                }
+            }
+
+            .adf-upload-border {
+                vertical-align: inherit !important;
+                text-align: inherit !important;
+            }
+
+            .adf-file-draggable__input-focus {
+                color: $adf-upload-dragging-level1-color !important;
+                border: $adf-upload-dragging-level1-border !important;
+                margin-left: 0 !important;
+
+                adf-upload-drag-area {
+                    & > div {
+                        @include file-draggable__input-focus(
+                                $adf-upload-dragging-color,
+                                $adf-upload-dragging-border
+                        );
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/lib/content-services/upload/components/upload-drag-area.component.ts b/lib/content-services/upload/components/upload-drag-area.component.ts
index ab95aa0a17..a739ddaf28 100644
--- a/lib/content-services/upload/components/upload-drag-area.component.ts
+++ b/lib/content-services/upload/components/upload-drag-area.component.ts
@@ -25,7 +25,7 @@ import { UploadBase } from './base-upload/upload-base';
 @Component({
     selector: 'adf-upload-drag-area',
     templateUrl: './upload-drag-area.component.html',
-    styleUrls: ['./upload-drag-area.component.css'],
+    styleUrls: ['./upload-drag-area.component.scss'],
     host: { 'class': 'adf-upload-drag-area' },
     viewProviders: [
         { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent) }
diff --git a/lib/content-services/version-manager/version-manager.component.scss b/lib/content-services/version-manager/version-manager.component.scss
index fbc12e12e7..29549a5d45 100644
--- a/lib/content-services/version-manager/version-manager.component.scss
+++ b/lib/content-services/version-manager/version-manager.component.scss
@@ -1,3 +1,21 @@
+adf-version-manager {
+    .mat-list .mat-3-line {
+        height: auto !important;
+        width: 100% !important;
+    }
+
+    .mat-list-item-content {
+        padding: 16px 0 !important;
+    }
+}
+
+.adf-version-list-item-comment.mat-line {
+    height: 100%;
+    word-break: break-all;
+    white-space: unset !important;
+    overflow: unset !important;
+}
+
 .adf-button.adf-upload-new-version {
     box-shadow: none;
     width: 100%;
@@ -7,14 +25,12 @@
 }
 
 .adf-new-version-uploader-container {
-    border-bottom: 1px solid #d8d8d8;
     padding: 16px 0;
     width: 100%;
     height: 0%;
 
     float: left;
     position: relative;
-    display: hidden;
 }
 
 .adf-new-version-container {
diff --git a/lib/core/info-drawer/info-drawer-layout.component.scss b/lib/core/info-drawer/info-drawer-layout.component.scss
index 931d462f0c..3b210231b0 100644
--- a/lib/core/info-drawer/info-drawer-layout.component.scss
+++ b/lib/core/info-drawer/info-drawer-layout.component.scss
@@ -5,11 +5,17 @@
     $adf-info-drawer-layout-background-color: mat-color($background, background) !default;
     $adf-info-drawer-layout-title-color: mat-color($foreground, text, 0.54) !default;
     $adf-info-drawer-layout-title-font-size: 20px !default;
+    $adf-info-drawer-icon-size: 48px !default;
 
     .adf {
+        &-info-drawer {
+            @include flex-column;
+        }
+
         &-info-drawer-layout {
+            @include flex-column;
+            overflow: auto;
             width: 100%;
-            display: block;
             background-color: $adf-info-drawer-layout-background-color;
             box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
@@ -61,6 +67,26 @@
                 > *:last-child {
                     margin-bottom: 0;
                 }
+
+                .adf-info-drawer-tabs .mat-tab-body-content {
+                    .adf-manage-versions-empty,
+                    .adf-manage-versions-no-permission {
+                        margin: 0;
+                        padding: $adf-info-drawer-icon-size/2;
+                        color: mat-color($foreground, text, 0.54);
+                        text-align: center;
+                        display: flex;
+                        flex-direction: column;
+
+                        &-icon {
+                            width: $adf-info-drawer-icon-size;
+                            height: $adf-info-drawer-icon-size;
+                            font-size: $adf-info-drawer-icon-size;
+                            margin: 0 auto $adf-info-drawer-icon-size/2;
+                            display: block;
+                        }
+                    }
+                }
             }
         }
     }
diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
index 26909e24f2..294ddb56d1 100644
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
@@ -1,29 +1,27 @@
-<div class="adf-sidenav-layout">
-    <ng-container *ngIf="!isHeaderInside">
-        <ng-container class="adf-sidenav-layout-outer-header"
-                      *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
-    </ng-container>
+<ng-container *ngIf="!isHeaderInside">
+    <ng-container class="adf-sidenav-layout-outer-header"
+                  *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
+</ng-container>
 
-    <adf-layout-container #container
-                          [position]="position"
-                          [sidenavMin]="sidenavMin"
-                          [sidenavMax]="sidenavMax"
-                          [mediaQueryList]="mediaQueryList"
-                          [hideSidenav]="hideSidenav"
-                          [expandedSidenav]="expandedSidenav"
-                          data-automation-id="adf-layout-container"
-                          class="adf-layout__content">
+<adf-layout-container #container
+                      [position]="position"
+                      [sidenavMin]="sidenavMin"
+                      [sidenavMax]="sidenavMax"
+                      [mediaQueryList]="mediaQueryList"
+                      [hideSidenav]="hideSidenav"
+                      [expandedSidenav]="expandedSidenav"
+                      data-automation-id="adf-layout-container"
+                      class="adf-layout__content">
 
-        <ng-container app-layout-navigation
-                      *ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
+    <ng-container app-layout-navigation
+                  *ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
 
-        <ng-container app-layout-content>
-            <ng-container *ngIf="isHeaderInside">
-                <ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
-            </ng-container>
-            <ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
+    <ng-container app-layout-content>
+        <ng-container *ngIf="isHeaderInside">
+            <ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
         </ng-container>
-    </adf-layout-container>
-</div>
+        <ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
+    </ng-container>
+</adf-layout-container>
 
 <ng-template #emptyTemplate></ng-template>
diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
index e5463b5072..14eddefe67 100644
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
@@ -1,18 +1,34 @@
-:host {
-    display: flex;
-    flex: 1;
+@mixin adf-sidenav-layout-theme($theme) {
+    $adf-sidenav-max: 300px !default;
 
     .adf-sidenav-layout {
+        @include flex-column;
         width: 100%;
-        display: flex;
-        flex-direction: column;
 
         .adf-layout__content {
             flex: 1 1 auto;
         }
+
+        router-outlet {
+            flex: 0 0;
+        }
+
+        @include layout-bp(lt-sm) {
+            .mat-drawer {
+                width: calc(-50px + 100vw) !important;
+                max-width: $adf-sidenav-max !important;
+            }
+        }
+
+        .mat-drawer-content {
+            @include flex-column;
+            overflow: auto;
+        }
     }
 
-    router-outlet {
-        flex: 0 0;
+    .mat-drawer-content > div,
+    .mat-drawer-content > div > div {
+        @include flex-column;
+        overflow: auto;
     }
 }
diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
index 2bd7403bd7..006dc56c30 100644
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
@@ -15,7 +15,19 @@
  * limitations under the License.
  */
 
-import { Component, ContentChild, Input, Output, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef, EventEmitter } from '@angular/core';
+import {
+    Component,
+    ContentChild,
+    Input,
+    Output,
+    OnInit,
+    AfterViewInit,
+    ViewChild,
+    OnDestroy,
+    TemplateRef,
+    EventEmitter,
+    ViewEncapsulation
+} from '@angular/core';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
 import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
@@ -25,7 +37,9 @@ import { BehaviorSubject, Observable } from 'rxjs';
 @Component({
     selector: 'adf-sidenav-layout',
     templateUrl: './sidenav-layout.component.html',
-    styleUrls: ['./sidenav-layout.component.scss']
+    styleUrls: ['./sidenav-layout.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-sidenav-layout' }
 })
 export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
 
diff --git a/lib/core/pagination/pagination.component.scss b/lib/core/pagination/pagination.component.scss
index 9bad7b5aa8..b17984b7ab 100644
--- a/lib/core/pagination/pagination.component.scss
+++ b/lib/core/pagination/pagination.component.scss
@@ -1,10 +1,11 @@
-
 @mixin adf-pagination-theme($theme) {
     $foreground: map-get($theme, foreground);
 
-    $adf-pagination--height: 48px;
-    $adf-pagination--icon-button-size: 32px;
-    $adf-pagination--border: 1px solid  mat-color($foreground, text, 0.07);
+    $adf-pagination--height: 48px !default;
+    $adf-pagination--icon-button-size: 32px !default;
+    $adf-pagination--border: none !default;
+    $adf-pagination__empty--height: 48px !default;
+    $adf-pagination__empty--border: none !default;
 
     .adf-pagination {
         display: flex;
@@ -33,42 +34,24 @@
             }
         }
 
-        @media (max-width: 500px) {
-
+        @include layout-bp(lt-sm) {
             & {
                 flex-wrap: wrap;
-                padding-bottom: 24px;
-                padding-top: 8px;
+                padding: 0 16px;
                 justify-content: space-between;
             }
 
-            &__range-block.adf-pagination__block:first-child {
-                order: 1;
-                flex: 0 0 auto;
-                box-sizing: border-box;
-                padding-left: 16px;
-                justify-content: flex-start;
-            }
-
+            &__range-block,
             &__perpage-block {
-                order: 3;
-                box-sizing: border-box;
-                padding-left: 16px;
-                justify-content: flex-start;
+                display: none;
             }
 
             &__actualinfo-block {
-                order: 2;
-                box-sizing: border-box;
-                padding-right: 16px;
-                justify-content: flex-end;
+                border-right: none;
             }
 
             &__controls-block {
-                order: 4;
-                box-sizing: border-box;
-                padding-right: 16px;
-                justify-content: flex-end;
+                padding-right: 0;
             }
         }
 
@@ -96,6 +79,11 @@
             max-height: 250px !important;
         }
 
+        &.adf-pagination__empty {
+            border-top: $adf-pagination__empty--border;
+            height: $adf-pagination__empty--height;
+        }
+
         button[mat-icon-button] {
             width: $adf-pagination--icon-button-size;
             height: $adf-pagination--icon-button-size;
diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss
index ea5ab6b25b..6ac152b51c 100644
--- a/lib/core/styles/_index.scss
+++ b/lib/core/styles/_index.scss
@@ -26,6 +26,7 @@
 @import '../comments/comment-list.component';
 @import '../comments/comments.component';
 @import '../layout/components/layout-container/layout-container.component';
+@import '../layout/components/sidenav-layout/sidenav-layout.component';
 @import '../templates/empty-content/empty-content.component';
 @import '../templates/error-content/error-content.component';
 @import '../buttons-menu/buttons-menu.component';
@@ -64,4 +65,5 @@
     @include adf-header-layout-theme($theme);
     @include adf-login-dialog-theme($theme);
     @include adf-login-dialog-panel-theme($theme);
+    @include adf-sidenav-layout-theme($theme);
 }
diff --git a/lib/core/styles/_theming.scss b/lib/core/styles/_theming.scss
index 3b8f8d15dc..93d62014a9 100644
--- a/lib/core/styles/_theming.scss
+++ b/lib/core/styles/_theming.scss
@@ -1,4 +1,5 @@
 @import '~@angular/material/theming';
+@import '~@angular/flex-layout/mq';
 @import './colors';
 @import './variables';
 @import './mixins';
diff --git a/lib/core/toolbar/toolbar.component.scss b/lib/core/toolbar/toolbar.component.scss
index 4c20304bd3..b5fbd4810d 100644
--- a/lib/core/toolbar/toolbar.component.scss
+++ b/lib/core/toolbar/toolbar.component.scss
@@ -1,14 +1,14 @@
-
 @mixin adf-toolbar-theme($theme) {
     $foreground: map-get($theme, foreground);
-    $adf-toolbar-height: 48px;
-    $adf-toolbar-font-size: 14px;
-
-    .adf-toolbar--spacer {
-        flex: 1 1 auto;
-    }
+    $adf-toolbar-height: 48px !default;
+    $adf-toolbar-single-row-height: 64px !default;
+    $adf-toolbar-font-size: 14px !default;
+    $adf-toolbar-padding: 16px !default;
 
     .adf-toolbar {
+        &--spacer {
+            flex: 1 1 auto;
+        }
 
         &-title {
             overflow: hidden;
@@ -24,6 +24,26 @@
             font-size: $adf-toolbar-font-size;
             white-space: normal;
         }
+
+        .mat-toolbar-single-row {
+            padding: 0 $adf-toolbar-padding;
+            height: $adf-toolbar-single-row-height;
+        }
+
+        &.adf-toolbar--inline {
+            .mat-toolbar {
+                background-color: inherit;
+                border: none !important;
+                padding: 0;
+            }
+        }
     }
 
+    .adf-viewer {
+        .adf-toolbar {
+            .mat-toolbar {
+                color: mat-color($foreground, text, 0.54);
+            }
+        }
+    }
 }