[ACA-4712] disallow using important for styles (#3368)

* ACA-4712 Added rule to prevent using important for styles

* ACA-4712 Removed important from some global styles and from manage rule component

* ACA-4712 Removed important from rest global and theme styles

* ACA-4712 Removed usages of important from styles for components

.stylelintrc.json

@@ -9,6 +9,7 @@
       {
         "resolveNestedSelectors": true
       }
-    ]
+    ],
+    "declaration-no-important": true
   }
 }

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss

@@ -10,7 +10,6 @@
 
     &__title {
       align-items: center;
-      width: unset !important;
       flex: 1;
     }
 
@@ -89,11 +88,6 @@
               padding: 0 8px;
               min-width: unset;
             }
-
-            .mat-icon {
-              // Something pops out of this button for some reason so this is necessary
-              overflow: hidden !important;
-            }
           }
         }
       }

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

@@ -22,7 +22,7 @@ $top-margin: 12px;
   font-size: 16px;
   padding-left: 15px;
   box-sizing: border-box;
-  margin-bottom: 12px !important;
+  margin-bottom: 12px;
 
   .mat-form-field {
     font-size: 16px;

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

@@ -9,7 +9,10 @@ $top-margin: 12px;
   width: 100%;
   max-width: $search-width;
   height: $search-height + $top-margin;
-  margin: 0 !important;
+
+  &.mat-menu-trigger {
+    margin: 0;
+  }
 
   .app-search-button {
     width: 32px;
@@ -23,9 +26,11 @@ $top-margin: 12px;
     .app-close-icon {
       height: 6px;
 
-      .mat-icon {
-        font-size: 18px !important;
-        line-height: 28px;
+      &.app-suffix-search-icon-wrapper {
+        .mat-icon {
+          font-size: 18px;
+          line-height: 28px;
+        }
       }
     }
 
@@ -70,8 +75,8 @@ mat-checkbox {
   background-color: $search-background;
   border-radius: $search-border-radius;
   height: $search-height;
-  margin-bottom: 0 !important;
-  padding-bottom: 26px !important;
+  margin-bottom: 0;
+  padding-bottom: 26px;
 }
 
 .app-search-control {

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

@@ -16,12 +16,12 @@
 
   .link:hover,
   .aca-location-link .adf-datatable-cell-value:hover {
-    color: var(--theme-primary-color) !important;
+    color: var(--theme-primary-color);
     text-decoration: underline;
   }
 
   .adf-is-selected .link:not(:hover),
   .adf-is-selected .adf-datatable-cell-value:not(:hover) {
-    color: var(--theme-primary-color) !important;
+    color: var(--theme-primary-color);
   }
 }

projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html

@@ -22,7 +22,7 @@
     [acaExpansionPanel]="item"
     [@.disabled]="true"
   >
-    <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" role="group">
+    <mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group">
       <mat-panel-title>
         <div class="item">
           <button

projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@@ -52,7 +52,6 @@
       border-radius: 0;
 
       &-header {
-        height: 32px !important;
         padding: 0 32px 0 0;
         display: flex;
         align-items: center;
@@ -66,7 +65,7 @@
         .mat-button {
           line-height: 32px;
           align-items: center;
-          border: none !important;
+          border: none;
         }
 
         .action-button__label {
@@ -99,7 +98,7 @@
     }
 
     .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
-      background: none !important;
+      background: none;
     }
 
     .item {
@@ -128,7 +127,7 @@
     }
 
     .action-button--active {
-      color: var(--theme-selected-text-color) !important;
+      color: var(--theme-selected-text-color);
       background: var(--theme-selected-background-color);
     }
   }

projects/aca-content/src/lib/components/view-profile/view-profile.component.scss

@@ -83,9 +83,9 @@ app-view-profile {
   }
 
   .app-selected:focus {
-    border: 2px solid var(--theme-blue-button-color) !important;
+    border: 2px solid var(--theme-blue-button-color);
     border-radius: 6px;
-    outline: none !important;
+    outline: none;
     box-shadow: 0 0 2px var(--theme-blue-button-color);
   }
 

projects/aca-content/src/lib/ui/application.scss

@@ -20,10 +20,6 @@ body {
   }
 }
 
-.mat-icon {
-  overflow: unset !important;
-}
-
 [dir='rtl'] .mat-icon {
   transform: scale(-1, 1);
 }

projects/aca-content/src/lib/ui/dynamic-theme/typography.scss

@@ -82,13 +82,13 @@
 @mixin base-font-size($font-size) {
   html,
   body {
-    font-size: $font-size !important;
+    font-size: $font-size;
   }
 }
 
 @mixin base-font-family($font-family) {
   html,
   body {
-    font-family: $font-family !important;
+    font-family: $font-family;
   }
 }

projects/aca-content/src/lib/ui/mixins.scss

@@ -21,6 +21,6 @@
 }
 
 @mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
-  border: $thickness solid $border-color !important;
+  border: $thickness solid $border-color;
   border-radius: $radius;
 }

projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss

@@ -5,21 +5,23 @@
     background-color: var(--theme-about-panel-background-color);
     overflow: auto;
 
-    mat-accordion {
-      box-shadow: none !important;
-      border: none !important;
-    }
+    .mat-accordion {
+      box-shadow: none;
+      border: none;
 
-    mat-expansion-panel {
-      box-shadow: none !important;
-      border-radius: 12px !important;
-      margin: 24px !important;
-      width: 95%;
-      border: 1px solid var(--theme-about-panel-border-color);
+      &.adf-about-panel {
+        .mat-expansion-panel {
+          box-shadow: none;
+          border-radius: 12px;
+          margin: 24px;
+          width: 95%;
+          border: 1px solid var(--theme-about-panel-border-color);
+        }
+      }
     }
 
-    mat-expansion-panel-header {
-      height: 80px !important;
+    .mat-expansion-panel-header {
+      height: 80px;
       line-height: 32px;
     }
 

projects/aca-content/src/lib/ui/overrides/adf-pagination.theme.scss

@@ -1,45 +1,47 @@
 @mixin adf-pagination-theme($theme) {
-  .adf-pagination__block {
-    flex: none !important;
-    padding: 0 !important;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 24px;
-    letter-spacing: 0.25px;
-  }
-
-  .adf-pagination {
-    height: 32px !important;
-    line-height: 24px !important;
-    padding: 16px 0;
-  }
-
-  .adf-pagination__range-block {
-    padding: 0 24px !important;
-  }
-
-  .adf-pagination__perpage-block {
-    flex: auto !important;
-    padding-right: 24px !important;
-  }
-
-  .adf-pagination__actualinfo-block {
-    padding-right: 12px !important;
-
-    .mat-menu-trigger {
-      display: none !important;
+  adf-pagination {
+    &.adf-pagination {
+      height: 32px;
+      line-height: 24px;
+      padding: 16px 0;
+
+      .adf-pagination__block {
+        flex: none;
+        padding: 0;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        letter-spacing: 0.25px;
+
+        &.adf-pagination__range-block {
+          padding: 0 24px;
+        }
+      }
+
+      .adf-pagination__perpage-block {
+        flex: auto;
+        padding-right: 24px;
+      }
+
+      .adf-pagination__actualinfo-block {
+        padding-right: 12px;
+
+        .mat-menu-trigger {
+          display: none;
+        }
+      }
+
+      .adf-pagination__previous-button {
+        margin: 0 12px 0 0;
+      }
+
+      .adf-pagination__next-button {
+        margin: 0;
+      }
+
+      .adf-pagination__controls-block {
+        padding-right: 24px;
+      }
     }
   }
-
-  .adf-pagination__previous-button {
-    margin: 0 12px 0 0 !important;
-  }
-
-  .adf-pagination__next-button {
-    margin: 0 !important;
-  }
-
-  .adf-pagination__controls-block {
-    padding-right: 24px !important;
-  }
 }

projects/aca-content/src/lib/ui/overrides/adf-style-fixes.theme.scss

@@ -11,8 +11,4 @@
       display: none;
     }
   }
-
-  adf-share-dialog .mat-form-field-label-wrapper label {
-    display: none !important;
-  }
 }