[ADF-5406] SCSS and HTML template path fixes (#7063)

* remove useless mixin

* fix scss paths

* style fixes

* fix styles

* style fixes

* style fixes

* style fixes

* style fixes

* insights fixes

* css and template path fixes

* bug fixes

demo-shell/src/app/components/about/about.component.ts

@@ -27,7 +27,7 @@ import { AppConfigService } from '@alfresco/adf-core';
 @Component({
     selector: 'app-about-page',
     templateUrl: './about.component.html',
-    styleUrls: ['about.component.scss']
+    styleUrls: ['./about.component.scss']
 })
 export class AboutComponent implements OnInit {
     url = `https://github.com/Alfresco/${name}/commits/${commit}`;

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

@@ -2,7 +2,7 @@
     $primary: map-get($theme, primary);
     $minimumAppWidth: 320px;
 
-    @media screen and ($mat-xsmall) {
+    @media screen and (max-width: 599px) {
         app-search-bar {
             width: 150px;
         }
@@ -46,13 +46,13 @@
         }
     }
 
-    @media screen and ($mat-small) {
+    @media screen and (max-width: 959px) {
         .app-menu {
             padding-top: 0;
         }
     }
 
-    @media screen and ($mat-xsmall) {}
+    @media screen and (max-width: 599px) {}
 
     mat-sidenav-content > div {
         display: flex;

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

@@ -22,8 +22,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    templateUrl: 'app-layout.component.html',
+    templateUrl: './app-layout.component.html',
-    styleUrls: ['app-layout.component.scss'],
     host: {
         'class': 'app-layout'
     },

demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.ts

@@ -34,8 +34,8 @@ import {
 } from '../../../cloud/custom-form-components/custom-editor.component';
 
 @Component({
-    templateUrl: 'cloud-form-demo.component.html',
+    templateUrl: './cloud-form-demo.component.html',
-    styleUrls: ['cloud-form-demo.component.scss'],
+    styleUrls: ['./cloud-form-demo.component.scss'],
     providers: [
         { provide: FormRenderingService, useClass: CloudFormRenderingService }
     ]

demo-shell/src/app/components/aspect-list-sample/aspect-list-sample.component.ts

@@ -20,8 +20,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-expandable-menu',
-    templateUrl: 'aspect-list-sample.component.html',
+    templateUrl: './aspect-list-sample.component.html',
-    styleUrls: ['aspect-list-sample.component.scss']
+    styleUrls: ['./aspect-list-sample.component.scss']
 })
 export class AspectListSampleComponent {
 

demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts

@@ -21,7 +21,7 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
     selector: 'app-cloud-breadcrumbs',
     templateUrl: './cloud-breadcrumb-component.html',
-    styleUrls: ['cloud-breadcrumb-component.scss']
+    styleUrls: ['./cloud-breadcrumb-component.scss']
 })
 export class CloudBreadcrumbsComponent implements OnInit {
     appName: string;

demo-shell/src/app/components/cloud/cloud-filters-demo.component.ts

@@ -24,7 +24,7 @@ import { ProcessFilterCloudModel } from '@alfresco/adf-process-services-cloud';
 @Component({
     selector: 'app-cloud-filters-demo',
     templateUrl: './cloud-filters-demo.component.html',
-    styleUrls: ['cloud-filters-demo.component.scss'],
+    styleUrls: ['./cloud-filters-demo.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class CloudFiltersDemoComponent implements OnInit {

demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts

@@ -23,7 +23,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    templateUrl: 'service-task-list-cloud-demo.component.html'
+    templateUrl: './service-task-list-cloud-demo.component.html'
 })
 export class ServiceTaskListCloudDemoComponent implements OnInit, OnDestroy {
 

demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts

@@ -24,7 +24,6 @@ import { CloudFormRenderingService } from '@alfresco/adf-process-services-cloud'
 
 @Component({
     templateUrl: './start-process-cloud-demo.component.html',
-    styleUrls: ['./start-process-cloud-demo.component.scss'],
     providers: [
         { provide: FormRenderingService, useClass: CloudFormRenderingService }
     ]

demo-shell/src/app/components/cloud/start-task-cloud-demo.component.ts

@@ -21,8 +21,7 @@ import { NotificationService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';
 
 @Component({
-    templateUrl: './start-task-cloud-demo.component.html',
+    templateUrl: './start-task-cloud-demo.component.html'
-    styleUrls: ['./start-task-cloud-demo.component.scss']
 })
 export class StartTaskCloudDemoComponent implements OnInit {
 

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts

@@ -24,8 +24,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    templateUrl: 'tasks-cloud-demo.component.html',
+    templateUrl: './tasks-cloud-demo.component.html'
-    styleUrls: ['tasks-cloud-demo.component.scss']
 })
 export class TasksCloudDemoComponent implements OnInit, OnDestroy {
 

demo-shell/src/app/components/config-editor/config-editor.component.ts

@@ -27,7 +27,7 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-config-editor',
-    templateUrl: 'config-editor.component.html',
+    templateUrl: './config-editor.component.html',
     styleUrls: ['./config-editor.component.scss']
 })
 export class ConfigEditorComponent implements OnDestroy {

demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts

@@ -21,8 +21,7 @@ import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
 
 @Component({
     selector: 'app-confirm-dialog-example',
-    templateUrl: 'confirm-dialog-example.component.html',
+    templateUrl: './confirm-dialog-example.component.html'
-    styleUrls: ['confirm-dialog-example.component.scss']
 })
 export class ConfirmDialogExampleComponent {
 

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -23,8 +23,8 @@ import { PreviewService } from '../../services/preview.service';
 
 @Component({
     selector: 'app-file-view',
-    templateUrl: 'file-view.component.html',
+    templateUrl: './file-view.component.html',
-    styleUrls: ['file-view.component.scss'],
+    styleUrls: ['./file-view.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class FileViewComponent implements OnInit {

demo-shell/src/app/components/files/custom-sources.component.ts

@@ -20,7 +20,7 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';
 
 @Component({
     selector: 'app-custom-sources',
-    templateUrl: 'custom-sources.component.html'
+    templateUrl: './custom-sources.component.html'
 })
 export class CustomSourcesComponent {
 

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

@@ -3,7 +3,7 @@
         margin: 10px !important;
     }
 
-    @media screen and ($mat-xsmall) {
+    @media screen and (max-width: 599px) {
         .app-container {
             margin: 0;
         }

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

@@ -54,7 +54,6 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
 @Component({
     selector: 'app-files-component',
     templateUrl: './files.component.html',
-    styleUrls: ['./files.component.scss'],
     providers: [
         { provide: FormRenderingService, useClass: ProcessFormRenderingService }
     ]

demo-shell/src/app/components/form/form-list.component.ts

@@ -23,8 +23,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-form-list',
-    templateUrl: 'form-list.component.html',
+    templateUrl: './form-list.component.html',
-    styleUrls: ['form-list.component.scss']
+    styleUrls: ['./form-list.component.scss']
 })
 export class FormListComponent implements OnInit, OnDestroy {
 

demo-shell/src/app/components/form/form-loading.component.ts

@@ -29,8 +29,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-form-loading',
-    templateUrl: 'form-loading.component.html',
+    templateUrl: './form-loading.component.html',
-    styleUrls: ['form-loading.component.scss'],
+    styleUrls: ['./form-loading.component.scss'],
     providers: [{ provide: FormService, useClass: FakeFormService }]
 })
 export class FormLoadingComponent implements OnInit, OnDestroy {

demo-shell/src/app/components/form/form.component.ts

@@ -24,8 +24,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-form',
-    templateUrl: 'form.component.html',
+    templateUrl: './form.component.html',
-    styleUrls: ['form.component.scss'],
+    styleUrls: ['./form.component.scss'],
     providers: [
         { provide: FormService, useClass: InMemoryFormService },
         { provide: FormRenderingService, useClass: ProcessFormRenderingService }

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

@@ -26,7 +26,7 @@
         display: none;
     }
 
-    @media screen and ($mat-small) {
+    @media screen and (max-width: 959px) {
         .app-settings, .app-setting-button.mat-fab.mat-accent {
             display: none;
         }

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

@@ -21,8 +21,7 @@ import { LogService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'app-login',
-    templateUrl: './login.component.html',
+    templateUrl: './login.component.html'
-    styleUrls: ['./login.component.scss']
 })
 export class LoginComponent {
 

demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts

@@ -18,7 +18,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-    templateUrl: 'overlay-viewer.component.html'
+    templateUrl: './overlay-viewer.component.html'
 })
 export class OverlayViewerComponent {
 

demo-shell/src/app/components/pipes/pipes.component.ts

@@ -21,7 +21,7 @@ import { AppConfigService } from '@alfresco/adf-core';
 @Component({
     selector: 'app-pipes-page',
     templateUrl: './pipes.component.html',
-    styleUrls: ['pipes.component.scss']
+    styleUrls: ['./pipes.component.scss']
 })
 export class PipesComponent {
 

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

@@ -1,100 +1,97 @@
-@mixin app-process-service-component-theme($theme) {
+.app-no-form-container {
-    .app-no-form-container {
+    text-align: center;
-        text-align: center;
+    font-weight: 600;
-        font-weight: 600;
+    font-size: 18px;
-        font-size: 18px;
+}
+
+.app-grid {
+    .app-grid-item {
+        margin: 4px;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+            0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        padding: 10px;
     }
 
-    .app-grid {
+    .app-list-buttons {
-        .app-grid-item {
+        margin-bottom: 24px;
-            margin: 4px;
+    }
-            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-            0 3px 1px -2px rgba(0, 0, 0, 0.2),
-            0 1px 5px 0 rgba(0, 0, 0, 0.12);
-            padding: 10px;
-        }
 
-        .app-list-buttons {
+    .app-tasks-list.app-small-pagination,
-            margin-bottom: 24px;
+    .app-processes-list.app-small-pagination {
-        }
+        .app-pagination {
+            flex-wrap: wrap;
+            padding-bottom: 24px;
+            padding-top: 8px;
 
-        .app-tasks-list.app-small-pagination,
+            &__range-block.app-pagination__block:first-child {
-        .app-processes-list.app-small-pagination {
+                order: 1;
-            .app-pagination {
+                width: 60%;
-
+                flex: 0 0 auto;
-                flex-wrap: wrap;
+                box-sizing: border-box;
-                padding-bottom: 24px;
+                padding-left: 2px;
-                padding-top: 8px;
+                justify-content: flex-start;
-
-                &__range-block.app-pagination__block:first-child {
-                    order: 1;
-                    width: 60%;
-                    flex: 0 0 auto;
-                    box-sizing: border-box;
-                    padding-left: 2px;
-                    justify-content: flex-start;
-                }
-
-                &__perpage-block {
-                    order: 3;
-                    width: 60%;
-                    box-sizing: border-box;
-                    padding-left: 2px;
-                    justify-content: flex-start;
-                }
-
-                &__actualinfo-block {
-                    order: 2;
-                    width: 40%;
-                    box-sizing: border-box;
-                    padding-right: 2px;
-                    justify-content: flex-end;
-                }
-
-                &__controls-block {
-                    order: 4;
-                    width: 40%;
-                    box-sizing: border-box;
-                    padding-right: 2px;
-                    justify-content: flex-end;
-                }
             }
-        }
 
-        .app-list {
+            &__perpage-block {
-            .app-datatable-list {
+                order: 3;
-                border: none;
+                width: 60%;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
             }
-        }
 
-        mat-slide-toggle {
+            &__actualinfo-block {
-            margin: 10px;
+                order: 2;
-        }
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
 
-        @media screen and ($mat-small) {
+            &__controls-block {
-            container-widget .app-grid-list {
+                order: 4;
-                flex-direction: column;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
             }
         }
     }
 
-    .app-accordion-panel {
+    .app-list {
-        .mat-expansion-panel {
+        .app-datatable-list {
-            background: inherit;
+            border: none;
         }
+    }
 
-        .mat-expansion-panel-header-title, .mat-expansion-panel-header-description {
+    mat-slide-toggle {
-            flex-basis: 0;
+        margin: 10px;
-            align-items: center;
+    }
-        }
 
-        .mat-expansion-panel-header-description {
+    @media screen and (max-width: 959px) {
-            justify-content: space-between;
+        container-widget .app-grid-list {
-            align-items: center;
+            flex-direction: column;
-        }
-
-        .app-accordion-title-padding {
-            padding-left: 20px;
         }
     }
 }
+
+.app-accordion-panel {
+    .mat-expansion-panel {
+        background: inherit;
+    }
+
+    .mat-expansion-panel-header-title,
+    .mat-expansion-panel-header-description {
+        flex-basis: 0;
+        align-items: center;
+    }
+
+    .mat-expansion-panel-header-description {
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .app-accordion-title-padding {
+        padding-left: 20px;
+    }
+}

demo-shell/src/app/components/settings/settings.component.ts

@@ -21,7 +21,7 @@ import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-settings',
-    templateUrl: 'settings.component.html'
+    templateUrl: './settings.component.html'
 })
 export class SettingsComponent {
 

demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts

@@ -20,8 +20,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
     selector: 'app-shared-link-view',
-    templateUrl: 'shared-link-view.component.html',
+    templateUrl: './shared-link-view.component.html',
-    styleUrls: [ 'shared-link-view.component.scss' ],
+    styleUrls: [ './shared-link-view.component.scss' ],
     encapsulation: ViewEncapsulation.None,
     // tslint:disable-next-line:use-host-property-decorator
     host: { 'class': 'app-shared-link-view' }

demo-shell/src/app/components/sites/sites.component.ts

@@ -19,8 +19,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-sites',
-    templateUrl: 'sites.component.html',
+    templateUrl: './sites.component.html'
-    styleUrls: ['sites.component.scss']
 })
 export class SitesComponent {
 

demo-shell/src/app/components/social/social.component.ts

@@ -19,8 +19,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-social',
-    templateUrl: 'social.component.html',
+    templateUrl: './social.component.html',
-    styleUrls: ['social.component.scss']
+    styleUrls: ['./social.component.scss']
 })
 export class SocialComponent {
 

demo-shell/src/app/components/tag/tag.component.ts

@@ -19,8 +19,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-tag',
-    templateUrl: 'tag.component.html',
+    templateUrl: './tag.component.html',
-    styleUrls: ['tag.component.scss']
+    styleUrls: ['./tag.component.scss']
 })
 export class TagComponent {
 

demo-shell/src/app/components/theme-picker/theme-picker.ts

@@ -28,8 +28,8 @@ import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';
 
 @Component({
     selector: 'app-theme-picker',
-    templateUrl: 'theme-picker.html',
+    templateUrl: './theme-picker.html',
-    styleUrls: ['theme-picker.css'],
+    styleUrls: ['./theme-picker.css'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {'aria-hidden': 'true'}
 })

demo-shell/src/app/components/trashcan/trashcan.component.ts

@@ -24,8 +24,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    templateUrl: './trashcan.component.html',
+    templateUrl: './trashcan.component.html'
-    styleUrls: ['trashcan.component.scss']
 })
 export class TrashcanComponent implements OnInit, OnDestroy {
     @ViewChild('documentList', { static: true })

demo-shell/src/app/components/tree-view/tree-view-sample.component.ts

@@ -19,8 +19,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-tree-view',
-    templateUrl: 'tree-view-sample.component.html',
+    templateUrl: './tree-view-sample.component.html',
-    styleUrls: ['tree-view-sample.component.scss']
+    styleUrls: ['./tree-view-sample.component.scss']
 })
 export class TreeViewSampleComponent {
 

demo-shell/src/app/components/webscript/webscript.component.ts

@@ -20,7 +20,7 @@ import { LogService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'app-webscript',
-    templateUrl: 'webscript.component.html'
+    templateUrl: './webscript.component.html'
 })
 export class WebscriptComponent {
 

demo-shell/src/custom-style-dev.scss

@@ -1,7 +1,6 @@
 @import './app/components/app-layout/app-layout.component.scss';
 @import './app/components/files/files.component.scss';
 @import './app/components/login/login.component.scss';
-@import './app/components/process-service/process-service.component.scss';
 
 
 @import '../../lib/content-services/src/lib/styles/index';
@@ -23,7 +22,6 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 @include app-layout-theme($theme);
 @include app-file-component-theme($theme);
 @include app-login-component-theme($theme);
-@include app-process-service-component-theme($theme);
 
 
 @include adf-content-services-theme($theme);

demo-shell/src/custom-style.scss

@@ -1,7 +1,6 @@
 @import './app/components/app-layout/app-layout.component.scss';
 @import './app/components/files/files.component.scss';
 @import './app/components/login/login.component.scss';
-@import './app/components/process-service/process-service.component.scss';
 
 @import '~@alfresco/adf-content-services/theming';
 @import '~@alfresco/adf-process-services/theming';
@@ -22,7 +21,6 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 @include app-layout-theme($theme);
 @include app-file-component-theme($theme);
 @include app-login-component-theme($theme);
-@include app-process-service-component-theme($theme);
 
 @include adf-content-services-theme($theme);
 @include adf-process-services-theme($theme);

lib/cli/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@alfresco/js-api": {
-      "version": "4.4.0-3493",
+      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-4.4.0-3493.tgz",
+      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-4.4.0.tgz",
-      "integrity": "sha512-O8qCJXSeL0S4/3VbCkAwDgeCCr4nQ4WqmpaLIU6YUGvO0AcPLYatKFoEuHlgCyex6gzRaYMQhoi1PhX/7cmQIg==",
+      "integrity": "sha512-TLBXPc01Hi23gOCkkQy2p9lcBZgcCsymOkRPG0exclDaQnpgWBPFn0e+ykm7WA51hHusgZC2sUoZv1Y95nq6MA==",
       "requires": {
         "event-emitter": "^0.3.5",
         "minimatch": "3.0.4",

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss

@@ -1,55 +1,40 @@
-@mixin adf-aspect-list-dialog-theme($theme) {
+.adf {
-    $primary: map-get($theme, primary);
+    &-aspect-list-dialog-title {
-    $accent: map-get($theme, accent);
+        font-size: large;
-    $warn: map-get($theme, warn);
+        font-weight: 200;
-    $foreground: map-get($theme, foreground);
+        margin-top: 0;
-    $background: map-get($theme, background);
-
-
-    .adf {
-
-        &-aspect-list-dialog-title {
-            font-size: large;
-            font-weight: 200;
-            margin-top: 0;
-        }
-
-        &-aspect-list-dialog-description {
-            font-size: small;
-            line-height: normal;
-        }
-
-        &-aspect-list-dialog-information {
-            display: flex;
-            justify-content: space-between;
-            padding-left: 5px;
-            padding-right: 5px;
-            font-size: small;
-        }
-
-        &-aspect-list-dialog {
-            .mat-dialog-actions {
-                justify-content: space-between;
-            }
-        }
-
-        &-aspect-dialog-content {
-            padding-top: 3px;
-
-            .adf-aspect-property-table {
-
-                .mat-cell {
-                    font-size: smaller;
-                }
-
-                .mat-column-name {
-                    width: 30%;
-                }
-            }
-        }
-
-
     }
 
+    &-aspect-list-dialog-description {
+        font-size: small;
+        line-height: normal;
+    }
 
+    &-aspect-list-dialog-information {
+        display: flex;
+        justify-content: space-between;
+        padding-left: 5px;
+        padding-right: 5px;
+        font-size: small;
+    }
+
+    &-aspect-list-dialog {
+        .mat-dialog-actions {
+            justify-content: space-between;
+        }
+    }
+
+    &-aspect-dialog-content {
+        padding-top: 3px;
+
+        .adf-aspect-property-table {
+            .mat-cell {
+                font-size: smaller;
+            }
+
+            .mat-column-name {
+                width: 30%;
+            }
+        }
+    }
 }

lib/content-services/src/lib/aspect-list/aspect-list.component.scss

@@ -1,10 +1,5 @@
 @mixin adf-aspect-list-theme($theme) {
-
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
 
     .adf {
 

lib/content-services/src/lib/aspect-list/aspect-list.component.ts

@@ -25,7 +25,6 @@ import { AspectEntry } from '@alfresco/js-api';
 @Component({
     selector: 'adf-aspect-list',
     templateUrl: './aspect-list.component.html',
-    styleUrls: ['./aspect-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 

lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss

@@ -3,7 +3,6 @@
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
 
     $breadcrumb-chevron-spacer: 2px;
     $breadcrumb-outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;

lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts

@@ -35,7 +35,6 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'adf-breadcrumb',
     templateUrl: './breadcrumb.component.html',
-    styleUrls: ['./breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: {
         'class': 'adf-breadcrumb'

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts

@@ -23,7 +23,6 @@ import { BreadcrumbComponent } from './breadcrumb.component';
 @Component({
     selector: 'adf-dropdown-breadcrumb',
     templateUrl: './dropdown-breadcrumb.component.html',
-    styleUrls: ['./dropdown-breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: {
         'class': 'adf-dropdown-breadcrumb'

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss

@@ -1,6 +1,4 @@
 @mixin adf-content-metadata-card-theme($theme) {
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
     .adf-content-metadata-card {

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts

@@ -22,7 +22,6 @@ import { NodeAspectService } from '../../../aspect-list/node-aspect.service';
 @Component({
     selector: 'adf-content-metadata-card',
     templateUrl: './content-metadata-card.component.html',
-    styleUrls: ['./content-metadata-card.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-content-metadata-card' }
 })

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -36,7 +36,6 @@ import { takeUntil, debounceTime, catchError, map } from 'rxjs/operators';
 @Component({
     selector: 'adf-content-metadata',
     templateUrl: './content-metadata.component.html',
-    styleUrls: ['./content-metadata.component.scss'],
     host: { 'class': 'adf-content-metadata' },
     encapsulation: ViewEncapsulation.None
 })

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss

@@ -1,7 +1,6 @@
 @mixin adf-content-node-selector-theme($theme) {
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
     $content-node-selector-thumbnail-width: 35px !default;
 
     .adf-search-results-label {

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts

@@ -58,7 +58,6 @@ export const defaultValidation = () => true;
 
 @Component({
     selector: 'adf-content-node-selector-panel',
-    styleUrls: ['./content-node-selector-panel.component.scss'],
     templateUrl: './content-node-selector-panel.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-content-node-selector-panel' },

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -27,7 +27,6 @@ import { NodeAction } from '../document-list/models/node-action.enum';
 @Component({
     selector: 'adf-content-node-selector',
     templateUrl: './content-node-selector.component.html',
-    styleUrls: ['./content-node-selector.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class ContentNodeSelectorComponent implements OnInit {

lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.ts

@@ -24,7 +24,6 @@ import { DataRow } from '@alfresco/adf-core';
         <div class="adf-name-location-cell-name adf-datatable-cell-value" [title]="name">{{ name }}</div>
         <div class="adf-name-location-cell-location adf-datatable-cell-value" [title]="path">{{ path }}</div>
     `,
-    styleUrls: ['./name-location-cell.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: { class: 'adf-name-location-cell adf-datatable-content-cell' }

lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts

@@ -45,7 +45,6 @@ type DatePickerType = 'date' | 'time' | 'month' | 'datetime';
 @Component({
     selector: 'adf-share-dialog',
     templateUrl: './content-node-share.dialog.html',
-    styleUrls: ['./content-node-share.dialog.scss'],
     host: { class: 'adf-share-dialog' },
     encapsulation: ViewEncapsulation.None
 })

lib/content-services/src/lib/content-type/content-type-dialog.component.scss

@@ -1,10 +1,5 @@
 @mixin adf-content-type-dialog-theme($theme) {
     $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
 
     .adf {
 

lib/content-services/src/lib/content-type/content-type-dialog.component.ts

@@ -24,7 +24,6 @@ import { ContentTypeService } from './content-type.service';
 @Component({
     selector: 'adf-content-type-dialog',
     templateUrl: './content-type-dialog.component.html',
-    styleUrls: ['./content-type-dialog.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class ContentTypeDialogComponent implements OnInit {

lib/content-services/src/lib/dialogs/folder.dialog.scss

@@ -1,31 +1,31 @@
-.adf-fill-remaining-space {
-    flex: 1 1 auto;
-}
-
-.adf-full-width {
-    width: 100%;
-}
-
-.adf-lock-file-name {
-    .mat-checkbox-layout {
-        width: 100%;
-    }
-
-    .mat-checkbox-label {
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .mat-checkbox-inner-container {
-        margin: auto 8px auto 0;
-    }
-}
-
 @mixin adf-dialog-theme($theme) {
 
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
 
+    .adf-fill-remaining-space {
+        flex: 1 1 auto;
+    }
+
+    .adf-full-width {
+        width: 100%;
+    }
+
+    .adf-lock-file-name {
+        .mat-checkbox-layout {
+            width: 100%;
+        }
+
+        .mat-checkbox-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .mat-checkbox-inner-container {
+            margin: auto 8px auto 0;
+        }
+    }
+
     .adf-dialog-buttons button {
         text-transform: uppercase;
     }

lib/content-services/src/lib/dialogs/folder.dialog.ts

@@ -17,7 +17,7 @@
 
 import { Observable } from 'rxjs';
 
-import { Component, Inject, OnInit, Optional, EventEmitter, Output } from '@angular/core';
+import { Component, Inject, OnInit, Optional, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
@@ -28,8 +28,8 @@ import { forbidEndingDot, forbidOnlySpaces, forbidSpecialCharacters } from './fo
 
 @Component({
     selector: 'adf-folder-dialog',
-    styleUrls: ['./folder.dialog.scss'],
+    templateUrl: './folder.dialog.html',
-    templateUrl: './folder.dialog.html'
+    encapsulation: ViewEncapsulation.None
 })
 export class FolderDialogComponent implements OnInit {
 

lib/content-services/src/lib/dialogs/node-lock.dialog.ts

@@ -17,7 +17,7 @@
 
 import moment from 'moment-es6';
 
-import { Component, Inject, OnInit, Optional } from '@angular/core';
+import { Component, Inject, OnInit, Optional, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
@@ -26,8 +26,8 @@ import { AlfrescoApiService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-node-lock',
-    styleUrls: ['./folder.dialog.scss'],
+    templateUrl: './node-lock.dialog.html',
-    templateUrl: './node-lock.dialog.html'
+    encapsulation: ViewEncapsulation.None
 })
 export class NodeLockDialogComponent implements OnInit {
 

lib/content-services/src/lib/document-list/components/document-list.component.scss

@@ -154,7 +154,7 @@
             word-break: break-all;
             white-space: pre-line;
 
-            @media screen and ($mat-xsmall) {
+            @media screen and (max-width: 599px) {
                 font-size: 48px;
             }
         }
@@ -176,7 +176,7 @@
             object-fit: contain;
             margin-top: 17px;
 
-            @media screen and ($mat-xsmall) {
+            @media screen and (max-width: 599px) {
                 width: 250px;
             }
         }

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -65,7 +65,6 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-document-list',
-    styleUrls: ['./document-list.component.scss'],
     templateUrl: './document-list.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-document-list' }

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts

@@ -24,7 +24,6 @@ import { MemberModel } from '../../models/member.model';
 @Component({
     selector: 'adf-add-permission-dialog',
     templateUrl: './add-permission-dialog.component.html',
-    styleUrls: ['./add-permission-dialog.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class AddPermissionDialogComponent {

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,9 +1,6 @@
 @mixin adf-add-permission-panel-theme($theme) {
-
-    $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
     $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
     $mat-menu-border-radius: 2px !default;
     $search-result-height: calc(100% - 75px);
 

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts

@@ -26,7 +26,6 @@ import { SearchComponent } from '../../../search/components/search.component';
 @Component({
     selector: 'adf-add-permission-panel',
     templateUrl: './add-permission-panel.component.html',
-    styleUrls: ['./add-permission-panel.component.scss'],
     encapsulation: ViewEncapsulation.None,
     providers: [
         { provide: SearchConfigurationService, useClass: SearchPermissionConfigurationService },

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts

@@ -24,7 +24,6 @@ import { RoleModel } from '../../models/role.model';
 @Component({
     selector: 'adf-add-permission',
     templateUrl: './add-permission.component.html',
-    styleUrls: ['./add-permission.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 /*

lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss

@@ -1,36 +1,32 @@
-@mixin adf-permission-container-theme($theme) {
+.adf-datatable-permission {
-    $adf-permission-list-width: 100% !default;
+    display: flex;
+    min-width: 450px;
+    width: 100%;
 
-    .adf-datatable-permission {
+    &.adf-datatable {
-        display: flex;
+        overflow: hidden;
-        min-width: 450px;
-        width: $adf-permission-list-width;
 
-        &.adf-datatable {
+        .adf-delete-permission-column {
-            overflow: hidden;
+            min-width: 80px;
 
-            .adf-delete-permission-column {
+            .adf-cell-value {
-                min-width: 80px;
+                width: 80px;
-
+                padding-right: 10px;
-                .adf-cell-value {
+                place-content: flex-end;
-                    width: 80px;
-                    padding-right: 10px;
-                    place-content: flex-end;
-                }
             }
+        }
 
-            .adf-authorityId-column {
+        .adf-authorityId-column {
-                flex: 40%;
+            flex: 40%;
-            }
+        }
 
-            .adf-authority-icon-column {
+        .adf-authority-icon-column {
-                min-width: 40px;
+            min-width: 40px;
-            }
+        }
 
-            .adf-datatable-selected > svg {
+        .adf-datatable-selected > svg {
-                width: 40px;
+            width: 40px;
-                height: 40px;
+            height: 40px;
-            }
         }
     }
 }

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -1,9 +1,5 @@
 @mixin adf-permission-list-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
 
     .adf {
         &-permission-card {

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts

@@ -24,7 +24,6 @@ import { PermissionListService } from './permission-list.service';
 @Component({
     selector: 'adf-permission-list',
     templateUrl: './permission-list.component.html',
-    styleUrls: ['./permission-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class PermissionListComponent {

lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss

@@ -1,6 +1,5 @@
 @mixin adf-user-icon-column-theme($theme) {
     $primary: map-get($theme, primary);
-    $document-list-selection-color: mat-color($accent) !default;
 
     .adf {
         &-people-initial {
@@ -31,7 +30,7 @@
         &-people-select-icon {
             margin: 0 !important;
             svg {
-                fill: $document-list-selection-color;
+                fill: mat-color($accent);
                 width: 40px;
                 height: 40px;
             }

lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts

@@ -34,7 +34,6 @@ import { NodePermissionService } from '../../services/node-permission.service';
             <mat-icon class="adf-people-select-icon adf-datatable-selected" svgIcon="selected"></mat-icon>
         </div>
     `,
-    styleUrls: ['./user-icon-column.component.scss'],
     host: { class: 'adf-user-icon-column adf-datatable-content-cell' }
 })
 export class UserIconColumnComponent implements OnInit {

lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss

@@ -1,5 +1,4 @@
 @mixin user-name-column-theme($theme) {
-    $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
 
     .adf-user {

lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts

@@ -32,8 +32,7 @@ import { EcmUserModel } from '@alfresco/adf-core';
             </span>
         </div>
     `,
-    host: { class: 'adf-user-name-column adf-datatable-content-cell adf-expand-cell-5 adf-ellipsis-cell' },
+    host: { class: 'adf-user-name-column adf-datatable-content-cell adf-expand-cell-5 adf-ellipsis-cell' }
-    styleUrls: [ './user-name-column.component.scss' ]
 })
 export class UserNameColumnComponent implements OnInit {
     @Input()

lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts

@@ -21,7 +21,6 @@ import { SearchFilterComponent } from '../../components/search-filter/search-fil
 @Component({
     selector: 'adf-search-chip-list',
     templateUrl: './search-chip-list.component.html',
-    styleUrls: ['./search-chip-list.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-chip-list' }
 })

lib/content-services/src/lib/search/components/search-control.component.scss

@@ -1,8 +1,6 @@
 @mixin adf-search-control-theme($theme) {
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
     $mat-menu-border-radius: 2px !default;
     $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
     $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
@@ -29,7 +27,7 @@
             background-color: mat-color($background, card);
             border-radius: $mat-menu-border-radius;
 
-            @media screen and ($mat-small) {
+            @media screen and (max-width: 959px) {
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;

lib/content-services/src/lib/search/components/search-control.component.ts

@@ -27,7 +27,6 @@ import { EmptySearchResultComponent } from './empty-search-result.component';
 @Component({
     selector: 'adf-search-control',
     templateUrl: './search-control.component.html',
-    styleUrls: ['./search-control.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-control' }
 })

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts

@@ -39,7 +39,6 @@ import { MatMenuTrigger } from '@angular/material/menu';
 @Component({
     selector: 'adf-search-filter-container',
     templateUrl: './search-filter-container.component.html',
-    styleUrls: ['./search-filter-container.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class SearchFilterContainerComponent implements OnInit, OnDestroy {

lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts

@@ -35,7 +35,6 @@ export interface SelectedBucket {
 @Component({
     selector: 'adf-search-filter',
     templateUrl: './search-filter.component.html',
-    styleUrls: ['./search-filter.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-filter' }
 })

lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts

@@ -23,7 +23,6 @@ import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token';
 @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' }
 })

lib/content-services/src/lib/search/components/search.component.scss

@@ -1,19 +1,9 @@
-@mixin adf-search-autocomplete-theme($theme) {
+.adf {
-    $primary: map-get($theme, primary);
+    &-search-hide {
-    $accent: map-get($theme, accent);
+        visibility: hidden;
-    $warn: map-get($theme, warn);
+    }
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-    $mat-menu-border-radius: 2px !default;
 
-    .adf {
+    &-search-show {
-
+        visibility: visible;
-        &-search-hide {
-            visibility: hidden;
-        }
-
-        &-search-show {
-            visibility: visible;
-        }
     }
 }

lib/content-services/src/lib/social/like.component.scss

@@ -1,11 +1,3 @@
-@mixin selected {
-    color: #2196f3;
-}
-
-@mixin unselected {
-    color: #808080;
-}
-
 .adf-like-container {
     display: flex;
     overflow: hidden;
@@ -24,17 +16,17 @@
 
     .adf-like-select {
         cursor: pointer;
-        @include selected;
+        color: #2196f3;
         &:hover {
-            @include unselected;
+            color: #808080;
         }
     }
 
     .adf-like-grey {
         cursor: pointer;
-        @include unselected;
+        color: #808080;
         &:hover {
-            @include selected;
+            color: #2196f3;
         }
     }
 

lib/content-services/src/lib/styles/_index.scss

@@ -8,7 +8,6 @@
 @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';
@@ -24,12 +23,9 @@
 @import '../permission-manager/components/add-permission/add-permission.component';
 @import '../permission-manager/components/add-permission/add-permission-dialog.component';
 @import '../permission-manager/components/add-permission/add-permission-panel.component';
-@import '../tree-view/components/tree-view.component';
 @import '../version-manager/version-comparison.component';
 @import '../content-type/content-type-dialog.component';
 @import '../aspect-list/aspect-list.component';
-@import '../aspect-list/aspect-list-dialog.component';
-@import '../permission-manager/components/permission-container/permission-container.component';
 @import '../permission-manager/components/user-icon-column/user-icon-column.component';
 @import '../permission-manager/components/user-name-column/user-name-column.component';
 
@@ -44,24 +40,20 @@
     @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-filter-menu-theme($theme);
     @include adf-dialog-theme($theme);
     @include adf-content-node-selector-dialog-theme($theme);
     @include adf-content-metadata-module-theme($theme);
     @include adf-permission-list-theme($theme);
-    @include adf-permission-container-theme($theme);
     @include adf-user-icon-column-theme($theme);
     @include user-name-column-theme($theme);
     @include adf-add-permission-theme($theme);
     @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);
     @include adf-search-chip-list-theme($theme);
     @include adf-version-comparison-theme($theme);
     @include adf-content-type-dialog-theme($theme);
     @include adf-aspect-list-theme($theme);
-    @include adf-aspect-list-dialog-theme($theme);
 }

lib/content-services/src/lib/tree-view/components/tree-view.component.scss

@@ -1,21 +1,15 @@
-@mixin adf-tree-view-theme($theme) {
+.adf {
-    $primary: map-get($theme, primary);
+    &-tree-view-icon {
-    $foreground: map-get($theme, foreground);
+        color: #d9e022;
-    $background: map-get($theme, background);
+    }
 
-    .adf {
+    &-tree-view-node.mat-tree-node {
-        &-tree-view-icon {
+        min-height: 40px;
-            color: #d9e022;
+        font-size: 12px;
-        }
+        align-items: baseline;
+    }
 
-        &-tree-view-node.mat-tree-node {
+    &-tree-view-label {
-            min-height: 40px;
+        cursor: pointer;
-            font-size: 12px;
-            align-items: baseline;
-        }
-
-        &-tree-view-label {
-            cursor: pointer;
-        }
     }
 }

lib/content-services/src/lib/tree-view/components/tree-view.component.ts

@@ -24,8 +24,8 @@ import { NodeEntry } from '@alfresco/js-api';
 
 @Component({
     selector: 'adf-tree-view-list',
-    templateUrl: 'tree-view.component.html',
+    templateUrl: './tree-view.component.html',
-    styleUrls: ['tree-view.component.scss']
+    styleUrls: ['./tree-view.component.scss']
 })
 
 export class TreeViewComponent implements OnChanges {

lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts

@@ -24,8 +24,7 @@ import { takeUntil, delay } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-file-uploading-dialog',
-    templateUrl: './file-uploading-dialog.component.html',
+    templateUrl: './file-uploading-dialog.component.html'
-    styleUrls: ['./file-uploading-dialog.component.scss']
 })
 export class FileUploadingDialogComponent implements OnInit, OnDestroy {
     /** Dialog direction. Can be 'ltr' or 'rtl. */

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts

@@ -20,8 +20,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'adf-file-uploading-list-row',
-    templateUrl: './file-uploading-list-row.component.html',
+    templateUrl: './file-uploading-list-row.component.html'
-    styleUrls: ['./file-uploading-list-row.component.scss']
 })
 export class FileUploadingListRowComponent {
     @Input()

lib/content-services/src/lib/upload/components/upload-drag-area.component.ts

@@ -25,7 +25,6 @@ import { UploadBase } from './base-upload/upload-base';
 @Component({
     selector: 'adf-upload-drag-area',
     templateUrl: './upload-drag-area.component.html',
-    styleUrls: ['./upload-drag-area.component.scss'],
     host: {'class': 'adf-upload-drag-area'},
     viewProviders: [
         {provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}

lib/content-services/src/lib/version-manager/version-comparison.component.ts

@@ -21,8 +21,7 @@ import { ThumbnailService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-version-comparison',
-    templateUrl: './version-comparison.component.html',
+    templateUrl: './version-comparison.component.html'
-    styleUrls: ['./version-comparison.component.scss']
 })
 export class VersionComparisonComponent {
 

lib/content-services/src/lib/webscript/webscript.component.ts

@@ -40,7 +40,7 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core
  */
 @Component({
     selector: 'adf-webscript-get',
-    templateUrl: 'webscript.component.html'
+    templateUrl: './webscript.component.html'
 })
 export class WebscriptComponent implements OnChanges {
 

lib/core/buttons-menu/buttons-menu.component.scss

@@ -1,32 +1,29 @@
-@mixin adf-buttons-menu-theme($theme) {
+.adf-buttons-menu {
+    margin-right: 10px;
 
-    .adf-buttons-menu {
+    & div {
+        display: flex;
+    }
+
+    &-mobile {
         margin-right: 10px;
+    }
 
-        & div {
+    &-desktop {
-            display: flex;
+        display: flex;
+
+        button {
+            color: black;
+            padding: 0;
         }
 
-        &-mobile {
+        button > span {
-            margin-right: 10px;
+            display: none;
         }
 
-        &-desktop {
+        button > mat-icon.mat-icon.material-icons {
-            display: flex;
+            color: black;
-
+            margin: 0 10px;
-            button {
-                color: black;
-                padding: 0;
-            }
-
-            button > span {
-                display: none;
-            }
-
-            button > mat-icon.mat-icon.material-icons {
-                color: black;
-                margin: 0 10px;
-            }
         }
     }
 }

lib/core/buttons-menu/buttons-menu.component.ts

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
+import { Component, ContentChildren, QueryList, AfterContentInit, ViewEncapsulation } from '@angular/core';
 import { MatMenuItem } from '@angular/material/menu';
 
 @Component({
     selector: 'adf-buttons-action-menu',
     templateUrl: './buttons-menu.component.html',
-    styleUrls: ['./buttons-menu.component.scss']
+    styleUrls: ['./buttons-menu.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 
 export class ButtonsMenuComponent implements  AfterContentInit {

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin adf-card-view-array-item-theme($theme) {
     $foreground: map-get($theme, foreground);
 

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts

@@ -22,8 +22,7 @@ import { BaseCardView } from '../base-card-view';
 
 @Component({
   selector: 'adf-card-view-arrayitem',
-  templateUrl: './card-view-arrayitem.component.html',
+  templateUrl: './card-view-arrayitem.component.html'
-  styleUrls: ['./card-view-arrayitem.component.scss']
 })
 export class CardViewArrayItemComponent extends BaseCardView<CardViewArrayItemModel> {
 

lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.scss

@@ -1,2 +0,0 @@
-.adf {
-}

lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.ts

@@ -23,8 +23,7 @@ import { BaseCardView } from '../base-card-view';
 
 @Component({
     selector: 'adf-card-view-boolitem',
-    templateUrl: './card-view-boolitem.component.html',
+    templateUrl: './card-view-boolitem.component.html'
-    styleUrls: ['./card-view-boolitem.component.scss']
 })
 
 export class CardViewBoolItemComponent extends BaseCardView<CardViewBoolItemModel> {

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -41,8 +41,7 @@ import { TranslationService } from '../../../services/translation.service';
         { provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
     ],
     selector: 'adf-card-view-dateitem',
-    templateUrl: './card-view-dateitem.component.html',
+    templateUrl: './card-view-dateitem.component.html'
-    styleUrls: ['./card-view-dateitem.component.scss']
 })
 export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemModel> implements OnInit, OnDestroy {
 

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts

@@ -24,8 +24,7 @@ import { BaseCardView } from '../base-card-view';
 
 @Component({
     selector: 'adf-card-view-boolitem',
-    templateUrl: './card-view-keyvaluepairsitem.component.html',
+    templateUrl: './card-view-keyvaluepairsitem.component.html'
-    styleUrls: ['./card-view-keyvaluepairsitem.component.scss']
 })
 
 export class CardViewKeyValuePairsItemComponent extends BaseCardView<CardViewKeyValuePairsItemModel> implements OnChanges {

lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts

@@ -24,7 +24,6 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'adf-select-filter-input',
     templateUrl: './select-filter-input.component.html',
-    styleUrls: ['./select-filter-input.component.scss'],
     host: { 'class': 'adf-select-filter-input' },
     encapsulation: ViewEncapsulation.None
 })