[ACS-6081] Reduce references to internal Angular material CSS classes (#3534)

* [ACS-6081] Reduce references to internal Angular material CSS classes

* [ACS-6081] rollback default scrollable value [ci:force]

* [ACS-6081] linting

* [ACS-6081] fix e2es

* [ACS-6081] cr fix

* [ACS-6081] remove adf-cli logger from e2es

projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html

@@ -1,5 +1,5 @@
-<h2 mat-dialog-title [innerHTML]="title"></h2>
-<div mat-dialog-content>
+<h2 mat-dialog-title [innerHTML]="title" class="app-create-from-template-title"></h2>
+<div mat-dialog-content class="app-create-from-template-content">
   <form [formGroup]="form" novalidate>
     <mat-form-field class="app-create-from-template-field">
       <input
@@ -41,12 +41,12 @@
     </mat-form-field>
   </form>
 </div>
-<div mat-dialog-actions>
+<div mat-dialog-actions class="app-create-from-template-footer">
   <button mat-button mat-dialog-close data-automation-id="create-from-template-dialog-cancel-button">
     {{ 'NODE_FROM_TEMPLATE.CANCEL' | translate }}
   </button>
   <button
-    class="create"
+    class="app-create-from-template-footer-create-button"
     [disabled]="form.invalid"
     mat-button
     (click)="onSubmit()"

projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss

@@ -4,54 +4,56 @@ app-create-from-template-dialog {
   margin-left: -24px;
   margin-right: -24px;
 
-  .mat-dialog-title {
-    margin-left: 24px;
-    margin-right: 24px;
-    font-size: 20px;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.6;
-    letter-spacing: -0.5px;
-    color: var(--theme-text-bold-color);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .app-create-from-template {
+    &-title {
+      margin-left: 24px;
+      margin-right: 24px;
+      font-size: 20px;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.6;
+      letter-spacing: -0.5px;
+      color: var(--theme-text-bold-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
-    .bold {
-      font-weight: 600;
-    }
-  }
-
-  .app-create-from-template-field {
-    width: 100%;
-
-    &:not(:last-of-type) {
-      margin-bottom: 20px;
-    }
-  }
-
-  .mat-dialog-content {
-    margin: 0 2px;
-    overflow: hidden;
-  }
-
-  .mat-dialog-actions {
-    padding: 8px 22px;
-    display: flex;
-    justify-content: flex-end;
-    color: var(--theme-secondary-text-color);
-
-    button {
-      text-transform: uppercase;
-      font-weight: normal;
+      .bold {
+        font-weight: 600;
+      }
     }
 
-    .create[disabled] {
-      opacity: 0.6;
+    &-field {
+      width: 100%;
+
+      &:not(:last-of-type) {
+        margin-bottom: 20px;
+      }
     }
 
-    .create:enabled {
-      color: var(--theme-accent-color);
+    &-content {
+      margin: 0 2px;
+      overflow: hidden;
+    }
+
+    &-footer {
+      padding: 8px 22px;
+      display: flex;
+      justify-content: flex-end;
+      color: var(--theme-secondary-text-color);
+
+      button {
+        text-transform: uppercase;
+        font-weight: normal;
+      }
+
+      &-create-button[disabled] {
+        opacity: 0.6;
+      }
+
+      &-create-button:enabled {
+        color: var(--theme-accent-color);
+      }
     }
   }
 }