[ACS-6140] - Remove references to internal Angular Material CSS classes (#3620)

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html

@@ -6,7 +6,7 @@
     (click)="searchSubmit(searchTerm)"
     [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
   >
-    <mat-icon class="app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+    <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
   <mat-form-field class="app-input-form-field" [floatLabel]="'never'">
     <input
@@ -23,7 +23,7 @@
       autocomplete="off"
     />
     <div matSuffix class="app-suffix-search-icon-wrapper">
-      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>
+      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-search-input-control-icon app-clear-icon">clear</mat-icon>
     </div>
   </mat-form-field>
 </div>

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss

@@ -5,7 +5,7 @@ $top-margin: 12px;
   margin: 14px 1px;
   float: left;
 
-  mat-icon {
+  .app-search-input-control-icon {
     font-size: 24px;
     cursor: pointer;
   }
@@ -24,16 +24,13 @@ $top-margin: 12px;
   box-sizing: border-box;
   margin-bottom: 12px;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .mat-form-field-underline {
     display: none;
   }
 
-  .mat-form-field-label-wrapper {
+  label {
     cursor: text;
-  }
-
-  // fixes pointer event on FF
-  &.app-search-menu-trigger .mat-form-field-label-wrapper {
     pointer-events: auto;
   }
 

projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

@@ -78,24 +78,26 @@ $top-margin: 12px;
   letter-spacing: -0.7px;
   margin-bottom: -8px;
 
+  .app-search-options-checkbox label {
+    max-width: 155px;
+  }
+
   &-checkbox {
     padding: 3px 24px 3px 19px;
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .mat-checkbox-inner-container {
       height: 18px;
       width: 18px;
     }
 
-    .mat-checkbox-label {
+    /* stylelint-disable-next-line no-descending-specificity */
+    label {
       padding: 0 0 0 11px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
-
-  .app-search-options-checkbox label {
-    max-width: 155px;
-  }
 }
 
 .app-search-hint {
@@ -122,17 +124,17 @@ $top-margin: 12px;
   #search-options {
     padding-left: 20px;
 
-    mat-checkbox {
-      padding: 3px 20px 3px 0;
-
-      .mat-checkbox-label {
-        padding: 0;
-      }
-    }
-
     label {
       max-width: 105px;
     }
+
+    .app-search-options-checkbox {
+      padding: 3px 20px 3px 0;
+
+      label {
+        padding: 0;
+      }
+    }
   }
 }
 

projects/aca-content/src/lib/components/search/search-results/search-results.component.scss

@@ -45,10 +45,10 @@ aca-search-results {
             color: var(--theme-search-chip-icon-color);
           }
 
-          mat-icon {
-            color: var(--theme-search-chip-icon-color);
-          }
+        .adf-search-filter-chip-icon {
+          color: var(--theme-search-chip-icon-color);
         }
+      }
 
         .adf-search-filter-placeholder {
           color: var(--theme-selected-text-color);