[ACS-5575] Should use declaration-no-important rule in the stylelint-config.json file to avoid use of !important in ADF (#9302)

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

@@ -1,4 +1,4 @@
 app-cloud-task-filters .app-filters__entry,
 app-cloud-process-filters .app-filters__entry {
-    padding-left: 0 !important;
+    padding-left: 0;
 }

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

@@ -1,5 +1,5 @@
-.app-container {
+.app-container:has(.app-document-list-container) {
-    margin: 10px !important;
+    margin: 10px;
 }
 
 .app-error-message {

docs/user-guide/theming.md

@@ -141,9 +141,6 @@ Any component with the  `add-dark-theme` class will use the dark theme, while ot
 ## Default reusable class
 
 ```css
-.adf-hide-small                 // Display none vieweport <960px
-.adf-hide-xsmall                // Display none vieweport <600px
-
 .accent-color                // Accent color
 .warn-color                  // Warn color
 .primary-contrast-text-color // Default contrast color for primary color

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

@@ -114,9 +114,9 @@ h2.adf-search-results-label {
                     fill: var(--theme-primary-color);
                 }
 
-                .adf-no-content-container {
+                .adf-no-content-container.adf-datatable-cell {
                     text-align: center;
-                    border: none !important;
+                    border: none;
                 }
 
                 .adf-datatable-cell {
@@ -167,8 +167,8 @@ h2.adf-search-results-label {
             }
 
             &-searchLayout {
-                .adf-datatable-list .adf-datatable-row {
+                .adf-datatable-list .adf-datatable-body .adf-datatable-row {
-                    min-height: 65px !important;
+                    min-height: 65px;
 
                     .adf-datatable-cell {
                         .adf-name-location-cell-location {

lib/content-services/src/lib/content-user-info/content-user-info.component.scss

@@ -131,6 +131,13 @@
     &-userinfo-detail {
         text-align: left;
     }
+
+    &-hide-small.adf-userinfo-profile-initials,
+    &-hide-small.adf-userinfo-profile-container {
+        @include layout-bp(lt-md) {
+            display: none;
+        }
+    }
 }
 
 @media only screen and (min-device-width: 480px) {

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

@@ -109,7 +109,7 @@
 
 .adf-empty-list-header {
     height: 32px;
-    opacity: 0.26 !important;
+    opacity: 0.26;
     font-size: var(--theme-headline-font-size);
     line-height: 1.33;
     letter-spacing: -1px;
@@ -179,8 +179,8 @@
 }
 
 .adf-datatable-gallery-thumbnails {
-    .adf-datatable-card .adf-datatable-row {
+    .adf-datatable-card .adf-datatable-row:is(adf-datatable-row) {
-        height: 300px !important;
+        height: 300px;
 
         img {
             height: 130px;

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

@@ -1,5 +1,5 @@
-.adf {
+.adf-cell-value {
-    &-people-initial {
+    .adf-people-initial {
         background: var(--theme-primary-color);
         border-radius: 50%;
         display: flex;
@@ -7,25 +7,32 @@
         align-items: center;
         width: 40px;
         height: 40px;
-        color: var(--theme-primary-color-default-contrast) !important;
+        color: var(--theme-primary-color-default-contrast);
         font-weight: bolder;
         font-size: var(--theme-adf-picture-1-font-size);
         text-transform: uppercase;
     }
 
-    &-group-icon {
+    .adf-group-icon {
-        height: 20px !important;
+        height: 20px;
-        width: 20px !important;
+        width: 20px;
         background: var(--theme-primary-color);
         border-radius: 50%;
         padding: 10px;
-        color: var(--theme-primary-color-default-contrast) !important;
+        color: var(--theme-primary-color-default-contrast);
         font-weight: bolder;
         font-size: var(--theme-title-font-size);
     }
 
-    &-people-select-icon {
+    .adf-datatable-selected {
-        margin: 0 !important;
+        height: 100%;
+        width: 100%;
+        margin-left: -2px;
+        margin-top: 2px;
+    }
+
+    .adf-people-select-icon {
+        margin: 0;
 
         svg {
             fill: var(--theme-accent-color);
@@ -33,11 +40,4 @@
             height: 40px;
         }
     }
-
-    &-datatable-selected {
-        height: 100%;
-        width: 100%;
-        margin-left: -2px;
-        margin-top: 2px;
-    }
 }

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

@@ -12,6 +12,7 @@
             [matTooltip]="getTooltipTranslation(col?.title)">
         <adf-icon value="filter_list"
                   [ngClass]="{ 'adf-icon-active': isActive() || menuTrigger.menuOpen }"
+                  class="adf-filter-icon"
                   matBadge="filter"
                   matBadgeColor="warn"
                   [matBadgeHidden]="!isActive()">

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

@@ -1,20 +1,20 @@
 .adf-filter {
-    &-button {
+    &-button:has(.adf-filter-icon) {
-        margin-left: -7px !important;
+        margin-left: -7px;
 
         .adf-icon {
             opacity: 1;
             color: var(--adf-theme-foreground-icon-color);
 
-            &-active {
+            &.adf-icon-active {
                 color: var(--theme-primary-color);
 
                 span {
-                    border: 2px solid var(--adf-theme-background-card-color) !important;
+                    border: 2px solid var(--adf-theme-background-card-color);
                     width: 10px;
                     height: 10px;
-                    top: -3px !important;
+                    top: -3px;
-                    right: -6px !important;
+                    right: -6px;
                 }
             }
         }
@@ -24,7 +24,7 @@
         display: flex;
         flex-direction: column;
         padding: 15px 15px 10px;
-        color: var(--adf-theme-foreground-text-color-087) !important;
+        color: var(--adf-theme-foreground-text-color-087);
 
         .adf-facet-buttons {
             display: none;
@@ -35,7 +35,7 @@
         }
 
         input {
-            background: 2px solid var(--adf-theme-background-card-color) !important;
+            background: 2px solid var(--adf-theme-background-card-color);
         }
     }
 

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

@@ -5,6 +5,7 @@ adf-search-filter-tabbed {
 
     // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
     // https://github.com/angular/components/issues/27426
+    /* stylelint-disable declaration-no-important */
     .adf-search-tab-content-active {
         & > div {
             visibility: visible !important;

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

@@ -32,9 +32,9 @@ $adf-average-star-color: #808080;
         color: $adf-rated-star-color;
     }
 
-    .adf-grey-star,
+    .adf-colored-star.adf-grey-star,
-    .adf-average-star {
+    .adf-colored-star.adf-average-star {
-        color: $adf-average-star-color !important;
+        color: $adf-average-star-color;
     }
 }
 

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

@@ -72,7 +72,7 @@ $tree-header-font-size: 12px !default;
     min-width: 100%;
     box-sizing: border-box;
 
-    .adf-tree-cell-header {
+    .adf-tree-cell-header:has(.adf-tree-cell-value) {
         cursor: pointer;
         position: relative;
         vertical-align: bottom;
@@ -80,11 +80,11 @@ $tree-header-font-size: 12px !default;
         font-weight: bold;
         line-height: 24px;
         letter-spacing: 0;
-        min-height: $tree-row-height !important;
+        min-height: $tree-row-height;
         font-size: $tree-header-font-size;
         color: var(--adf-theme-foreground-text-color);
         box-sizing: border-box;
-        padding-top: 12px !important;
+        padding-top: 12px;
 
         &:focus {
             outline-offset: -1px;

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

@@ -8,6 +8,7 @@
     <header class="adf-upload-dialog__header">
         <button
             mat-button
+            class="adf-upload-dialog__header-button"
             [attr.data-automation-id]="'adf-upload-dialog__toggle-minimize'"
             [attr.aria-label]="(isDialogMinimized ?
                 'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE':
@@ -16,6 +17,7 @@
             [attr.aria-expanded]="!isDialogMinimized"
             (click)="toggleMinimized()">
             <mat-icon
+                class="adf-upload-dialog__header-button-icon"
                 mat-list-icon
                 title="{{ (isDialogMinimized ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE': 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate }}">
                     {{ isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
@@ -56,6 +58,7 @@
     <section class="adf-upload-dialog__content"
         [class.adf-upload-dialog--padding]="isConfirmation">
         <adf-file-uploading-list
+            class="adf-file-uploading-list"
             [class.adf-upload-dialog--hide]="isConfirmation"
             #uploadList
             [files]="filesUploadingList">

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

@@ -12,8 +12,9 @@
         padding: 1em;
     }
 
-    &--hide {
+    &--hide.adf-upload-dialog__confirmation,
-        display: none !important;
+    &--hide.adf-file-uploading-list {
+        display: none;
     }
 
     &--minimized {
@@ -29,11 +30,11 @@
         display: flex;
         align-items: center;
 
-        button {
+        &-button:is(button) {
             min-width: 0;
             padding: 0;
             line-height: 0;
-            color: var(--adf-theme-foreground-text-color-054) !important;
+            color: var(--adf-theme-foreground-text-color-054);
         }
     }
 

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

@@ -23,11 +23,11 @@ adf-file-uploading-list-row:not(:first-child) {
         padding: 0 1em 0 0.5em;
     }
 
-    &__group,
+    .adf-file-uploading-row__group,
-    &__block,
+    .adf-file-uploading-row__block,
-    &__file-version {
+    .adf-file-uploading-row__file-version {
         min-width: 100px;
-        display: flex !important;
+        display: flex;
         justify-content: flex-end;
         line-height: 40px;
         height: 40px;

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

@@ -1,4 +1,4 @@
-/* stylelint-disable no-descending-specificity */
+/* stylelint-disable declaration-no-important, no-descending-specificity */
 $adf-upload-dragging-color: #2196f3 !default;
 $adf-upload-dragging-border: 1px dashed #2196f3 !default;
 $adf-upload-dragging-background: #e3f2fd !default;

lib/content-services/src/lib/version-manager/version-manager.component.scss

@@ -1,16 +1,16 @@
 adf-version-manager {
-    .adf-version-list .adf-version-list-item {
+    .adf-version-list .adf-version-list-item:has(.adf-version-list-item-line) {
-        height: auto !important;
+        height: auto;
-        width: 100% !important;
+        width: 100%;
-        padding: 16px 0 !important;
+        padding: 16px 0;
     }
 }
 
 .adf-version-list-item-comment.adf-version-list-item-line {
     height: 100%;
     word-break: break-all;
-    white-space: unset !important;
+    white-space: unset;
-    overflow: unset !important;
+    overflow: unset;
 }
 
 .adf-button.adf-upload-new-version {
@@ -21,17 +21,22 @@ adf-version-manager {
     position: relative;
 }
 
-.adf-new-version-uploader-container {
-    padding: 16px 0;
-    width: 100%;
-    height: 0;
-    float: left !important;
-    position: relative;
-}
-
 .adf-new-version-container {
     height: inherit;
     overflow: hidden;
+
+    .adf-new-version-uploader-container {
+        padding: 16px 0;
+        width: 100%;
+        height: 0;
+        float: left;
+        position: relative;
+    }
+
+    .adf-version-list.adf-version-list-element {
+        width: 100%;
+        float: left;
+    }
 }
 
 .adf-version-list-table {
@@ -41,8 +46,3 @@ adf-version-manager {
 .adf-version-upload-table {
     width: 100%;
 }
-
-.adf-version-list {
-    width: 100% !important;
-    float: left !important;
-}

lib/content-services/src/lib/version-manager/version-upload.component.scss

@@ -17,8 +17,8 @@
 .adf-new-version-max-width {
     width: 100%;
     float: right;
-}
 
-.adf-new-version-text-area {
+    .adf-new-version-text-area {
-    resize: none !important;
+        resize: none;
+    }
 }

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

@@ -22,7 +22,7 @@ $select-filter-height: 4em !default;
 }
 
 .mat-select-panel.adf-select-filter {
-    transform: none !important;
+    transform: none;
-    overflow-x: hidden !important;
+    overflow-x: hidden;
     max-height: calc(256px + #{$select-filter-height});
 }

lib/core/src/lib/clipboard/clipboard.theme.scss

@@ -1,7 +1,7 @@
 .adf-copy-tooltip {
     position: absolute;
     background: var(--theme-primary-color);
-    color: var(--theme-primary-color-default-contrast) !important;
+    color: var(--theme-primary-color-default-contrast);
     font-size: var(--theme-caption-font-size);
     padding: 2px 5px;
     border-radius: 5px;
@@ -13,7 +13,7 @@
 
 .adf-sticky-header {
     .adf-copy-tooltip {
-        top: 85% !important;
+        top: 85%;
-        bottom: 0 !important;
+        bottom: 0;
     }
 }

lib/core/src/lib/comments/comment-list/comment-list.component.scss

@@ -1,4 +1,5 @@
-.adf {
+.adf-comment-list {
+    .adf {
         &-comment-img-container {
             width: 40px;
             height: 100%;
@@ -7,13 +8,29 @@
             padding-top: 18px;
         }
 
-    &-comment-list-item {
+        &-comment-list-item:has(.adf-comment-img-container) {
             white-space: initial;
             display: table-row-group;
             padding-top: 12px;
             overflow: hidden;
-        height: 100% !important;
+            height: 100%;
             background-position: center;
+
+            .adf-comment-contents {
+                width: 100%;
+                padding-top: 12px;
+                padding-left: 5px;
+
+                .adf-comment-message {
+                    width: 100%;
+                    padding: 2px 10px;
+                    white-space: pre-line;
+                    font-size: var(--theme-body-1-font-size);
+                    letter-spacing: -0.2px;
+                    line-height: 1.43;
+                    color: var(--adf-theme-foreground-text-color);
+                }
+            }
         }
 
         &-comment-user-icon {
@@ -35,16 +52,6 @@
             font-size: var(--theme-body-1-font-size);
         }
 
-    &-comment-message {
-        width: 100%;
-        padding: 2px 10px;
-        white-space: pre-line !important;
-        font-size: var(--theme-body-1-font-size);
-        letter-spacing: -0.2px;
-        line-height: 1.43;
-        color: var(--adf-theme-foreground-text-color);
-    }
-
         &-comment-message-time {
             margin-top: 5px;
             width: 100%;
@@ -53,16 +60,11 @@
             color: var(--adf-theme-foreground-text-color);
         }
 
-    &-comment-contents {
-        width: 100%;
-        padding-top: 12px;
-        padding-left: 5px;
-    }
-
         &-people-img {
             border-radius: 90%;
             width: 40px;
             height: 40px;
             vertical-align: middle;
         }
+    }
 }

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss

@@ -79,8 +79,8 @@ $adf-columns-selector-space: 12px;
         border: 1px solid var(--theme-background-color);
         background: var(--theme-background-color);
 
-        :focus {
+        &:focus {
-            outline: none !important;
+            outline: none;
         }
     }
 

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -252,7 +252,7 @@
                                     [tooltip]="getCellTooltip(row, col)">
                                 </adf-icon-cell>
                             </div>
-                            <div *ngSwitchCase="'date'" class="adf-cell-value" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
+                            <div *ngSwitchCase="'date'" class="adf-cell-value adf-cell-date" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
                                  [attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') ">
                                 <adf-date-cell class="adf-datatable-center-date-column-ie"
                                     [data]="data"
@@ -401,7 +401,6 @@
         <div *ngIf="!loading && noPermission"
              role="row"
              [class.adf-datatable-row]="display === 'list'"
-             [class.adf-datatable-card-permissions]="display === 'gallery'"
              class="adf-no-permission__row">
             <div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
                 <ng-template *ngIf="noPermissionTemplate"

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -68,11 +68,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             display: flex;
             flex-direction: column;
             flex: 0 1 24%;
-            width: 288px !important;
+            width: 288px;
-            max-width: 288px !important;
+            max-width: 288px;
-            min-width: 288px !important;
+            min-width: 288px;
             height: 200px;
-            overflow: hidden !important;
+            overflow: hidden;
             margin: 6px;
             padding: 15px;
 
@@ -80,8 +80,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             @include mat.overridable-elevation(2);
         }
 
-        .adf-datatable-row-empty-card {
+        .adf-datatable-row.adf-datatable-row-empty-card {
-            height: 0 !important;
+            height: 0;
             padding-top: 0;
             padding-bottom: 0;
             margin-top: 0;
@@ -93,21 +93,12 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             padding-bottom: 31px;
         }
 
-        .adf-datatable-card-permission {
-            width: 100%;
-            min-height: 250px;
-
-            .adf-datatable-cell {
-                height: 240px !important;
-            }
-        }
-
         .adf-datatable-card-loading {
             width: 100%;
             min-height: 250px;
 
             .adf-datatable-cell {
-                height: 240px !important;
+                height: 240px;
             }
         }
 
@@ -116,7 +107,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             min-height: 380px;
 
             .adf-datatable-cell {
-                height: 370px !important;
+                height: 370px;
             }
         }
 
@@ -127,7 +118,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         .adf-datatable-cell {
             text-align: left;
             flex: 0 1 24%;
-            height: 136px !important;
+            height: 136px;
             white-space: normal;
             text-overflow: ellipsis;
             overflow: hidden;
@@ -152,10 +143,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             }
         }
 
-        .adf-datatable__actions-cell {
+        .adf-datatable__actions-cell.adf-datatable-actions-menu {
             position: absolute;
-            height: 42px !important;
+            height: 42px;
-            width: 42px !important;
+            width: 42px;
             right: 0;
             top: 4px;
         }
@@ -210,12 +201,12 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             padding-top: 17px;
         }
 
-        .adf-datatable-center-actions-column-ie {
+        .adf-datatable__actions-cell.adf-datatable-center-actions-column-ie {
-            padding-top: 7px !important;
+            padding-top: 7px;
         }
 
-        .adf-datatable-center-date-column-ie {
+        .adf-cell-date.adf-datatable-center-date-column-ie {
-            position: relative !important;
+            position: relative;
 
             .adf-datatable-cell-value {
                 width: 100%;
@@ -247,10 +238,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         }
     }
 
-    .adf-datatable-cell {
-        color: var(--adf-theme-foreground-text-color);
-    }
-
     .adf-datatable-row {
         &:hover,
         &:focus {
@@ -390,6 +377,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         min-width: $data-table-cell-min-width-2;
     }
 
+    .adf-datatable-cell {
+        color: var(--adf-theme-foreground-text-color);
+        min-height: inherit;
+    }
+
     .adf-datatable-header, .adf-datatable-body {
         .adf-datatable-cell-data {
             flex-grow: 0;
@@ -408,7 +400,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         padding: 0;
         align-items: center;
         display: flex;
-        min-height: inherit;
 
         &:first-child {
             margin-left: 15px;
@@ -426,17 +417,12 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
         .adf-datatable-cell-value {
             word-break: break-word;
-            padding-right: 10px;
             display: block;
 
             @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
                 padding: 17px 10px 10px;
             }
         }
-
-        &--fileSize .adf-datatable-cell-value {
-            padding: 0 10px 0 0;
-        }
     }
 
     .adf-datatable-actions-menu {
@@ -557,9 +543,9 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 
     /* Empty folder */
-    .adf-no-content-container {
+    .adf-no-content-container.adf-datatable-cell {
-        padding: 0 !important;
+        padding: 0;
-        border: none !important;
+        border: none;
         width: 100%;
         justify-content: center;
 
@@ -570,7 +556,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
     /* Loading folder */
     .adf-loading-content-container {
-        padding: 0 !important;
+        padding: 0;
         width: 100%;
 
         & > img {
@@ -584,8 +570,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             background-color: inherit;
         }
 
-        &__cell {
+        &__cell.adf-datatable-cell {
-            padding: 0 !important;
+            padding: 0;
         }
     }
 
@@ -596,14 +582,14 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
     /* mobile phone */
     @media all and (max-width: 768px) {
-        .adf-desktop-only {
+        .adf-desktop-only.adf-ellipsis-cell {
-            display: none !important;
+            display: none;
         }
     }
 
     @media (max-device-width: 768px) {
-        .adf-desktop-only {
+        .adf-desktop-only.adf-ellipsis-cell {
-            display: none !important;
+            display: none;
         }
     }
 }
@@ -618,7 +604,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     font-weight: bold;
     line-height: 24px;
     letter-spacing: 0;
-    min-height: $data-table-row-height !important;
+    min-height: $data-table-row-height;
     font-size: $data-table-header-font-size;
     color: var(--adf-theme-foreground-text-color);
     box-sizing: border-box;
@@ -763,15 +749,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 
 .adf-upload__dragging {
     & > div {
-        border-top: 1px dashed var(--theme-accent-color-a200) !important;
+        border-top: 1px dashed var(--theme-accent-color-a200);
-        border-bottom: 1px dashed var(--theme-accent-color-a200) !important;
+        border-bottom: 1px dashed var(--theme-accent-color-a200);
 
         &:first-child {
             border-left: 1px dashed var(--theme-accent-color-a200);
         }
 
         &:last-child {
-            border-right: 1px dashed var(--theme-accent-color-a200) !important;
+            border-right: 1px dashed var(--theme-accent-color-a200);
         }
     }
 }
@@ -783,11 +769,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     align-items: center;
     height: inherit;
 
-    .adf-datatable-body {
+    .adf-datatable-body[role="rowgroup"] {
         .adf-datatable-row {
             height: 100%;
             background-color: var(--adf-theme-background-card-color);
-            border: none !important;
+            border: none;
 
             &:hover,
             &:focus {
@@ -812,7 +798,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         .adf-datatable-row {
             height: 100%;
             background-color: var(--adf-theme-background-card-color);
-            border: none !important;
+            border: none;
 
             &:hover,
             &:focus {

lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss

@@ -30,5 +30,5 @@ div.adf-tooltip-card {
 }
 
 ::ng-deep .cdk-overlay-connected-position-bounding-box {
-    margin-top: 10px !important;
+    margin-top: 10px;
 }

lib/core/src/lib/form/components/form-renderer.component.html

@@ -57,6 +57,12 @@
                 </section>
             </ng-template>
 
+            <ng-template #columnViewItem let-column="column">
+                <div class="adf-grid-list-column-view-item" *ngFor="let field of column?.fields">
+                    <adf-form-field *ngIf="field" [field]="field"></adf-form-field>
+                </div>
+            </ng-template>
+
         </div>
         <div *ngIf="currentRootElement.type === 'dynamic-table'" class="adf-container-widget" >
            <adf-form-field [field]="currentRootElement"></adf-form-field>

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -68,7 +68,13 @@
             flex-direction: column;
         }
 
-        .adf-grid-list-single-column {
+        .adf-grid-list-single-column-xl {
+            display: none;
+        }
+
+        .adf-grid-list-single-column-s {
+            display: block;
+            /* stylelint-disable-next-line declaration-no-important */
             width: 90% !important;
         }
 
@@ -86,7 +92,7 @@
     }
 
     .mat-input-placeholder {
-        top: 1.8em !important;
+        top: 1.8em;
     }
 
     .mat-focused {
@@ -114,8 +120,8 @@
 
 .adf {
     &-form-container {
-        max-width: 100% !important;
+        max-width: 100%;
-        max-height: 100% !important;
+        max-height: 100%;
 
         & .mat-card {
             padding: 16px 24px;
@@ -123,7 +129,7 @@
         }
 
         & .mat-card-header-text {
-            margin: 0 !important;
+            margin: 0;
         }
 
         & .mat-tab-body-content {
@@ -186,7 +192,7 @@
     }
 
     &-form-hide-button {
-        display: none !important;
+        display: none;
     }
 
     &-task-title {
@@ -202,6 +208,7 @@
         white-space: nowrap;
     }
 
+    /* stylelint-disable declaration-no-important */
     &-form-mat-card-actions {
         float: right;
         padding-bottom: 25px !important;

lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -15,12 +15,6 @@ $adf-inplace-input-padding: 7px;
         padding: $adf-inplace-input-padding;
     }
 
-    &-error {
-        .adf-inplace-input {
-            border: 1px solid var(--theme-warn-color) !important;
-        }
-    }
-
     .adf-inplace-input-mat-form-field {
         width: 100%;
     }
@@ -39,4 +33,10 @@ $adf-inplace-input-padding: 7px;
             background-color: var(--adf-theme-background-hover-color);
         }
     }
+
+    &-error {
+        .adf-inplace-input {
+            border: 1px solid var(--theme-warn-color);
+        }
+    }
 }

lib/core/src/lib/form/components/widgets/form.theme.scss

@@ -39,12 +39,12 @@ ul > li > form-field > .adf-focus {
         }
 
         .mat-form-field-underline {
-            background-color: var(--theme-warn-color) !important;
+            background-color: var(--theme-warn-color);
         }
 
         .mat-select {
-            &-arrow {
+            .mat-select-arrow {
-                color: var(--adf-theme-foreground-secondary-text-color) !important;
+                color: var(--adf-theme-foreground-secondary-text-color);
             }
         }
 
@@ -72,7 +72,7 @@ ul > li > form-field > .adf-focus {
         .mat-input-element,
         .mat-select,
         .mat-form-field {
-            display: block !important;
+            display: block;
         }
     }
 }

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -19,7 +19,7 @@
         </textarea>
     </mat-form-field>
     <div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">
-        <span>{{field?.value?.length || 0}}/{{field.maxLength}}</span>
+        <span class="adf-multiline-word-counter-value">{{field?.value?.length || 0}}/{{field.maxLength}}</span>
     </div>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget class="adf-multiline-required-message" *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}">

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss

@@ -7,9 +7,9 @@
         }
     }
 
-    &-multiline-word-counter {
+    &-multiline-word-counter:has(.adf-multiline-word-counter-value) {
         float: right;
-        margin-top: -20px !important;
+        margin-top: -20px;
         min-height: 24px;
         min-width: 1px;
         font-size: var(--theme-caption-font-size);

lib/core/src/lib/layout/components/header/header.component.scss

@@ -1,7 +1,7 @@
 @import 'styles/flex';
 
 adf-layout-header .adf-toolbar-container-row {
-    color: var(--theme-header-text-color) !important;
+    color: var(--theme-header-text-color);
     background-color: var(--theme-primary-color);
     position: relative;
     padding: 0 24px;

lib/core/src/lib/layout/components/layout-container/layout-container.component.html

@@ -3,9 +3,8 @@
         class="adf-layout-container-sidenav"
         [position]="position"
         [disableClose]="!isMobileScreenSize"
-        [ngClass]="{ 'adf-sidenav--hidden': hideSidenav }"
         [@sidenavAnimation]="sidenavAnimationState"
-        [opened]="!isMobileScreenSize"
+        [opened]="!isMobileScreenSize || !hideSidenav"
         [mode]="isMobileScreenSize ? 'over' : 'side'">
         <ng-content sidenav select="[app-layout-navigation]"></ng-content>
     </mat-sidenav>

lib/core/src/lib/layout/components/layout-container/layout-container.component.scss

@@ -16,13 +16,6 @@ adf-layout-container {
     }
 }
 
-.adf-sidenav--hidden {
-    visibility: hidden !important;
-    width: 0 !important;
-    transform: unset !important;
-    opacity: 0 !important;
-}
-
 .adf-layout-container {
     display: block;
     width: 100%;
@@ -36,7 +29,7 @@ adf-layout-container {
     background-color: var(--theme-background-color);
 }
 
-/* stylelint-disable selector-class-pattern */
+/* stylelint-disable selector-class-pattern declaration-no-important */
 mat-sidenav-content.mat-sidenav-content,
 .mat-drawer-transition .mat-drawer-content {
     margin-left: 0 !important;

lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss

@@ -5,11 +5,11 @@
         & .adf-sidebar-action-menu-button {
             width: 100%;
             display: block;
-            box-shadow: none !important;
+            box-shadow: none;
             height: 37.5px;
             font-weight: bold;
             background-color: var(--theme-primary-color);
-            color: var(--theme-primary-color-default-contrast) !important;
+            color: var(--theme-primary-color-default-contrast);
             border-radius: 4px;
 
         }

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -25,6 +25,7 @@
     }
 
     @include flex.layout-bp(lt-sm) {
+        /* stylelint-disable declaration-no-important */
         .adf-layout-container {
             width: calc(-50px + 100vw) !important;
             max-width: 300px !important;

lib/core/src/lib/login/components/login.component.html

@@ -147,6 +147,7 @@
                                                 <mat-spinner
                                                     id="checking-spinner"
                                                     class="adf-login-checking-spinner"
+                                                    [strokeWidth]="4"
                                                     [diameter]="25">
                                                 </mat-spinner>
                                             </div>

lib/core/src/lib/login/components/login.component.scss

@@ -44,14 +44,6 @@
         align-items: center;
     }
 
-    .adf-show {
-        display: block !important;
-    }
-
-    .adf-hide {
-        display: none !important;
-    }
-
     .adf-icon-inline {
         position: absolute;
         display: block;
@@ -153,10 +145,6 @@
         margin-top: 5px;
     }
 
-    .adf-login-checking-spinner > svg > circle {
-        stroke-width: 16% !important;
-    }
-
     .adf-login-controls {
         padding: 0 0 26px;
         overflow: visible;
@@ -202,7 +190,7 @@
         & input:-webkit-autofill {
             /* stylelint-disable */
             -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
-            -webkit-text-fill-color: var(--adf-theme-foreground-text-color) !important;
+            -webkit-text-fill-color: var(--adf-theme-foreground-text-color);
             /* stylelint-enable */
         }
     }
@@ -240,8 +228,8 @@
         padding-bottom: 18px;
     }
 
-    .adf-login-remember-me {
+    .adf-login-remember-me:has(.adf-login-remember-me-label) {
-        color: var(--adf-theme-foreground-text-color) !important;
+        color: var(--adf-theme-foreground-text-color);
     }
 
     .adf-login-action-container {

lib/core/src/lib/notifications/components/notification-history.component.html

@@ -1,4 +1,4 @@
-<div (keyup)="onKeyPress($event)">
+<div (keyup)="onKeyPress($event)" class="adf-notification-history-container">
     <button mat-button
             [matMenuTriggerFor]="menu"
             [attr.aria-label]="'NOTIFICATIONS.OPEN_HISTORY' | translate"
@@ -45,10 +45,10 @@
                             <mat-icon mat-list-icon
                                       class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
                         </ng-template>
-                        <p class="adf-notification-history-menu-message"
+                        <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
                            *ngFor="let message of notification.messages"
                            mat-line [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
-                        <p class="adf-notification-history-menu-date"
+                        <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
                            mat-line> {{notification.datetime | adfTimeAgo}} </p>
                     </mat-list-item>
                 </ng-container>

lib/core/src/lib/notifications/components/notification-history.component.scss

@@ -11,30 +11,30 @@
         justify-content: space-between;
     }
 
-    &-notification-history-menu {
+    &-notification-history-menu:has(.adf-notification-history-list) {
-        &-item {
+        .adf-notification-history-menu-item {
             cursor: pointer;
         }
 
-        &-item:focus {
+        .adf-notification-history-menu-item:focus {
             outline: none;
             background: var(--adf-theme-background-hover-color);
         }
 
-        &-item:hover {
+        .adf-notification-history-menu-item:hover {
             background-color: var(--adf-theme-background-hover-color);
         }
 
-        &-message,
+        .adf-notification-history-menu-message:is(p),
-        &-no-message {
+        .adf-notification-history-menu-no-message:is(p) {
-            font-size: var(--theme-body-1-font-size) !important;
+            font-size: var(--theme-body-1-font-size);
         }
 
-        &-date {
+        .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
-            font-size: var(--theme-caption-font-size) !important;
+            font-size: var(--theme-caption-font-size);
         }
 
-        &-initiator {
+        .adf-notification-history-menu-initiator {
             margin: 4px;
         }
     }

lib/core/src/lib/search-text/search-text-input.component.scss

@@ -1,5 +1,5 @@
-.adf-search-container {
+.adf-search-container:has(.adf-input-form-field-divider) {
-    overflow: hidden !important;
+    overflow: hidden;
 }
 
 .adf-search-button {

lib/core/src/lib/styles/_default-class.scss

@@ -1,13 +0,0 @@
-@import './flex';
-
-.adf-hide-small {
-    @include layout-bp(lt-md) {
-        display: none !important;
-    }
-}
-
-.adf-hide-xsmall {
-    @include layout-bp(lt-sm) {
-        display: none !important;
-    }
-}

lib/core/src/lib/styles/_index.scss

@@ -3,7 +3,6 @@
 /* stylelint-disable value-list-max-empty-lines */
 /* stylelint-disable scss/no-global-function-names */
 /* stylelint-disable scss/at-import-partial-extension */
-@import './default-class';
 @import '../styles/colors';
 @import '../styles/mixins';
 @import '../form/components/widgets/form.theme';

lib/core/src/lib/styles/material.theme.scss

@@ -26,7 +26,7 @@
             }
 
             .mat-calendar-body-disabled > div {
-                color: var(--adf-theme-foreground-text-color-054) !important;
+                color: var(--adf-theme-foreground-text-color-054);
             }
         }
     }

lib/core/src/lib/templates/empty-content/empty-content.component.scss

@@ -7,12 +7,10 @@
     height: 100%;
     width: 100%;
 
-    &__icon {
+    &__icon > *:first-child {
-        .mat-icon {
         font-size: var(--theme-display-3-font-size);
-            height: var(--theme-display-3-font-size) !important;
+        height: var(--theme-display-3-font-size);
-            width: var(--theme-display-3-font-size) !important;
+        width: var(--theme-display-3-font-size);
-        }
     }
 
     &__title {

lib/core/src/lib/viewer/components/media-player.component.html

@@ -1,4 +1,4 @@
-<video controls [ngClass]="{'adf-audio-file': mimeType && mimeType.startsWith('audio')}">
+<video controls class="adf-video-player" [ngClass]="{'adf-audio-file': mimeType && mimeType.startsWith('audio')}">
     <source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError($event)"/>
     <track *ngFor="let track of tracks" [kind]="track.kind" [label]="track.label" [srclang]="track.srclang" [src]="track.src"/>
 </video>

lib/core/src/lib/viewer/components/media-player.component.scss

@@ -8,7 +8,7 @@
         max-width: 100%;
     }
 
-    video.adf-audio-file::-webkit-media-text-track-container {
+    video.adf-video-player.adf-audio-file::-webkit-media-text-track-container {
-        transform: translateY(-50%) !important;
+        transform: translateY(-50%);
     }
 }

lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss

@@ -184,8 +184,8 @@
         .adf-loadingIcon {
             width: 100px;
             height: 100px;
-            left: 50% !important;
+            left: 50%;
-            top: 50% !important;
+            top: 50%;
 
             margin-top: -50px;
             margin-left: -50px;
@@ -210,7 +210,7 @@
     }
 
     .adf-hidden, [hidden] {
-        display: none !important;
+        display: none;
     }
 }
 

lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss

@@ -18,10 +18,14 @@
     background-color: var(--theme-warn-color);
 }
 
-.adf-edit-report-title {
+.adf-full-width-input {
+    width: 100%;
+
+    .adf-edit-report-title[type='text'] {
         float: left;
-    font-size: var(--theme-title-font-size) !important;
+        font-size: var(--theme-title-font-size);
         padding-top: 19px;
+    }
 }
 
 .adf-report-icon {
@@ -45,10 +49,6 @@
     padding-top: 10px;
 }
 
-.adf-full-width-input {
-    width: 100%;
-}
-
 .adf-is-hide {
     height: 0;
     overflow: hidden;
@@ -59,9 +59,9 @@
     border-bottom: solid 1px var(--adf-theme-foreground-divider-color);
     padding-top: 10px;
 
-    .adf-toolbar-container {
+    .adf-toolbar-container.adf-toolbar-container-row {
-        border: 0 !important;
+        border: 0;
-        padding: 0 !important;
+        padding: 0;
     }
 }
 

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.html

@@ -12,7 +12,7 @@
                 <mat-icon class="adf-app-listgrid-item-card-logo-icon">{{ getIcon() }}</mat-icon>
             </div>
             <div mat-card-title class="adf-app-listgrid-item-card-title">
-                <h1>{{applicationInstance.name}}</h1>
+                <h1 class="adf-app-listgrid-item-card-title-text">{{applicationInstance.name}}</h1>
             </div>
             <mat-card-subtitle class="adf-app-listgrid-item-card-subtitle">
                 <div class="adf-line-clamp">{{applicationInstance.description}}</div>

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss

@@ -2,7 +2,7 @@
 @mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
     position: relative;
     line-height: $line-height;
-    padding: 0 !important;
+    padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
 
@@ -39,7 +39,7 @@ adf-cloud-app-details {
         padding: 8px;
         display: block;
 
-        &-item {
+        .adf-app-listgrid-item {
             outline: none;
             padding: 8px;
             box-sizing: border-box;
@@ -65,7 +65,7 @@ adf-cloud-app-details {
                 flex-direction: column;
                 box-sizing: border-box;
                 display: flex;
-                padding: 0 !important;
+                padding: 0;
                 max-width: unset;
 
                 &:hover {
@@ -84,16 +84,16 @@ adf-cloud-app-details {
                     padding: 16px;
                     z-index: 9;
 
-                    &-icon {
+                    .adf-app-listgrid-item-card-logo-icon {
                         font-size: 70px;
-                        width: 1em !important;
+                        width: 1em;
-                        height: 1em !important;
+                        height: 1em;
                     }
                 }
 
-                &-title {
+                &-title:has(.adf-app-listgrid-item-card-title-text) {
                     padding: 16px;
-                    margin-bottom: 0 !important;
+                    margin-bottom: 0;
                     z-index: 9999;
 
                     h1 {
@@ -108,7 +108,7 @@ adf-cloud-app-details {
                     }
                 }
 
-                &-subtitle {
+                &-subtitle:has(.adf-line-clamp) {
                     color: white;
                     z-index: 9999;
                     padding: 16px;
@@ -120,7 +120,7 @@ adf-cloud-app-details {
                 }
 
                 &-actions {
-                    padding: 0 16px 16px !important;
+                    padding: 0 16px 16px;
                     border-top: 1px solid rgba(0, 0, 0, 0.1);
                     min-height: 48px;
                     box-sizing: border-box;

lib/process-services-cloud/src/lib/form/components/form-cloud.component.html

@@ -62,7 +62,7 @@
                     </h4>
                 </mat-card-title>
             </mat-card-header>
-            <mat-card-content>
+            <mat-card-content class="adf-form-container-card-content">
                 <adf-form-renderer [formDefinition]="form">
                 </adf-form-renderer>
             </mat-card-content>

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html

@@ -1,5 +1,5 @@
-<div class="adf-file-properties-table">
+<div class="adf-file-properties-table-container">
-    <table mat-table [dataSource]="uploadedFiles" class="mat-elevation-z0" *ngIf="hasFile">
+    <table mat-table [dataSource]="uploadedFiles" class="adf-properties-table adf-file-properties-table mat-elevation-z0" *ngIf="hasFile">
         <ng-container matColumnDef="icon">
             <th mat-header-cell *matHeaderCellDef></th>
             <td mat-cell class="adf-file-properties-table-cell" *matCellDef="let element">

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss

@@ -1,5 +1,5 @@
-.adf-file-properties-table {
+.adf-file-properties-table-container {
-    table {
+    .adf-file-properties-table.adf-properties-table table {
         width: 100%;
         border: 1px solid var(--adf-theme-foreground-text-color-007);
         box-shadow: none;
@@ -22,7 +22,7 @@
 
         th {
             font-weight: bold;
-            padding-right: 0 !important;
+            padding-right: 0;
         }
 
         td {
@@ -30,12 +30,12 @@
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            padding-right: 0 !important;
+            padding-right: 0;
         }
 
         td.adf-file-properties-table-cell:first-of-type,
         td.adf-file-properties-table-cell:last-of-type {
-            width: 18% !important;
+            width: 18%;
         }
     }
 }

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss

@@ -4,7 +4,7 @@
         margin-top: 13px;
 
         .adf-select {
-            padding-top: 0 !important;
+            padding-top: 0;
             width: 100%;
         }
 
@@ -16,12 +16,14 @@
             width: 100%;
         }
 
-        &-dropdown-required-message .adf-error-container {
+        &-dropdown-required-message {
-            margin-top: 1px !important;
+            .adf-error-container {
+                margin-top: 1px;
+            }
         }
 
         &-dropdown-failed-message .adf-error-container {
-            margin-top: 1px !important;
+            margin-top: 1px;
         }
     }
 }

lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss

@@ -1,11 +1,4 @@
 .adf {
-    &-group-short-name {
-        background: var(--theme-primary-color);
-        width: 40px;
-        height: 40px;
-        box-shadow: none !important;
-    }
-
     &-cloud-group-list {
         margin: 5px 0;
         padding: 10px 0;
@@ -17,6 +10,10 @@
 
             .adf-group-short-name {
                 margin-right: 20px;
+                background: var(--theme-primary-color);
+                width: 40px;
+                height: 40px;
+                box-shadow: none;
             }
         }
     }
@@ -37,7 +34,7 @@
         }
 
         &-option-not-active:not(&:active) {
-            background: inherit !important;
+            background: inherit;
             color: var(--adf-group-cloud-autosuggest-result-disabled-color);
         }
 

lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss

@@ -2,8 +2,9 @@
     &-people-cloud {
         width: 100%;
 
-        &-option-not-active {
+        &-option-not-active:not(&:active) {
-            background: inherit !important;
+            background: inherit;
+            color: var(--adf-group-cloud-autosuggest-result-disabled-color);
         }
 
         &-title {

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss

@@ -34,14 +34,14 @@
     }
 
     &-form-container {
-        .adf-form-container-card {
+        .adf-form-container-card:has(.adf-form-container-card-content) {
-            box-shadow: none !important;
+            box-shadow: none;
-            padding: 0 !important;
+            padding: 0;
         }
     }
 
     &-start-form-actions {
-        text-align: right !important;
+        text-align: right;
     }
 
     &-loading {

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.scss

@@ -3,6 +3,7 @@
     .editorjs {
         &.readonly {
             .codex-editor__redactor {
+                /* stylelint-disable declaration-no-important */
                 padding-bottom: 0 !important;
             }
         }

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html

@@ -94,7 +94,7 @@
                     type="button"
                     (click)="onCancel()"
                     id="button-cancel">
-                    {{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.ACTION.CANCEL'|translate}}
+                    {{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate | uppercase}}
                 </button>
                 <button
                     color="primary"
@@ -103,7 +103,7 @@
                     mat-button
                     class="adf-cloud-start-task-footer-button"
                     id="button-start">
-                    {{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
+                    {{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.ACTION.START' | translate | uppercase}}
                 </button>
             </div>
         </mat-card-actions>

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss

@@ -52,12 +52,6 @@
 
 adf-cloud-start-task {
     .adf {
-        &-cloud-start-task-footer {
-            .adf-cloud-start-task-footer-button {
-                text-transform: uppercase !important;
-            }
-        }
-
         &-task-name {
             display: flex;
 

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="!loading; else loadingTemplate">
+<div class="adf-task-form-cloud-container" *ngIf="!loading; else loadingTemplate">
     <adf-cloud-form #adfCloudForm *ngIf="hasForm(); else withoutForm"
                     [appName]="appName"
                     [appVersion]="taskDetails.appVersion"

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss

@@ -1,12 +1,12 @@
-.adf-task-form {
+.adf-task-form-cloud-container {
+    .adf-task-form {
         &-container {
             overflow: hidden;
-    }
 
-    &-actions {
+            .adf-task-form-actions:has(button) {
                 float: right;
-        padding-bottom: 25px !important;
+                padding-bottom: 25px;
-        padding-right: 25px !important;
+                padding-right: 25px;
 
                 & .adf-task-form-actions-button {
                     height: 36px;
@@ -21,6 +21,8 @@
                     }
                 }
             }
+        }
+    }
 
     &-cloud-spinner {
         top: 50%;
@@ -30,10 +32,10 @@
 }
 
 adf-cloud-task-form {
-    .adf-task-form-spinner {
+    .adf-task-form-cloud-spinner {
-        display: flex !important;
+        display: flex;
-        justify-content: center !important;
+        justify-content: center;
-        align-items: center !important;
+        align-items: center;
         position: absolute;
         top: 50%;
         left: 50%;

lib/process-services/src/lib/app-list/apps-list.component.scss

@@ -4,7 +4,7 @@
 @mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
     position: relative;
     line-height: $line-height;
-    padding: 0 !important;
+    padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
 
@@ -61,7 +61,7 @@ $tile-themes: (
         flex-flow: row wrap;
         display: flex;
 
-        &-item {
+        .adf-app-listgrid-item {
             outline: none;
             padding: 8px;
             box-sizing: border-box;
@@ -97,7 +97,7 @@ $tile-themes: (
                 transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                 box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
                 min-height: 200px;
-                padding: 0 !important;
+                padding: 0;
 
                 &:hover {
                     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
@@ -107,23 +107,23 @@ $tile-themes: (
                     transform: scale(1.015);
                 }
 
-                &-logo {
+                .adf-app-listgrid-item-card-logo {
                     position: absolute;
                     right: 20px;
                     top: 20px;
                     padding: 16px;
                     z-index: 9;
 
-                    &-icon {
+                    .adf-app-listgrid-item-card-logo-icon {
                         font-size: 70px;
-                        width: 1em !important;
+                        width: 1em;
-                        height: 1em !important;
+                        height: 1em;
                     }
                 }
 
-                &-title {
+                .adf-app-listgrid-item-card-title {
                     padding: 16px;
-                    margin-bottom: 0 !important;
+                    margin-bottom: 0;
                     z-index: 9999;
 
                     h1 {
@@ -138,7 +138,7 @@ $tile-themes: (
                     }
                 }
 
-                &-subtitle {
+                .adf-app-listgrid-item-card-subtitle {
                     color: white;
                     z-index: 9999;
                     padding: 16px;
@@ -149,23 +149,20 @@ $tile-themes: (
                     }
                 }
 
-                &-actions {
+                &-actions:has(.adf-app-listgrid-item-card-actions-icon) {
-                    padding: 0 16px 16px !important;
+                    padding: 0 16px 16px;
                     border-top: 1px solid rgba(0, 0, 0, 0.1);
                     min-height: 48px;
                     box-sizing: border-box;
-
-                    &-icon {
-                        color: #e9f1f3;
-                    }
-
-                    &.mat-card-actions {
                     margin-left: 0;
                     margin-right: 0;
 
                     &:last-child {
-                            margin-bottom: 0 !important;
+                        margin-bottom: 0;
                     }
+
+                    .adf-app-listgrid-item-card-actions-icon {
+                        color: #e9f1f3;
                     }
                 }
             }

lib/process-services/src/lib/attachment/process-attachment-list.component.scss

@@ -1,9 +1,5 @@
 @import 'styles/flex';
 
-.adf-data-cell {
-    cursor: pointer !important;
-}
-
 .adf-attachment-list-loading-margin {
     margin-left: calc((100% - 100px) / 2);
     margin-right: calc((100% - 100px) / 2);
@@ -11,7 +7,7 @@
 
 .adf-empty-list-header {
     height: 32px;
-    opacity: 0.26 !important;
+    opacity: 0.26;
     font-size: var(--theme-headline-font-size);
     line-height: 1.33;
     letter-spacing: -1px;
@@ -23,7 +19,7 @@
     font-size: 56px;
     line-height: 1;
     letter-spacing: -2px;
-    margin-top: 40px !important;
+    margin-top: 40px;
     word-break: break-all;
     white-space: pre-line;
 }

lib/process-services/src/lib/attachment/task-attachment-list.component.scss

@@ -1,9 +1,5 @@
 @import 'styles/flex';
 
-adf-datatable .adf-data-cell {
-    cursor: pointer !important;
-}
-
 .adf-attachment-list-loading-margin {
     margin-left: calc((100% - 100px) / 2);
     margin-right: calc((100% - 100px) / 2);

lib/process-services/src/lib/form/start-form.component.html

@@ -1,11 +1,11 @@
 <div class="adf-start-form-container" *ngIf="hasForm()">
-    <mat-card>
+    <mat-card class="adf-start-form-card">
-        <mat-card-header>
+        <mat-card-header class="adf-start-form-header">
             <mat-card-title>
                 <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
             </mat-card-title>
         </mat-card-header>
-        <mat-card-content>
+        <mat-card-content class="adf-start-form-content">
             <adf-form-renderer [formDefinition]="form">
             </adf-form-renderer>
         </mat-card-content>
@@ -15,6 +15,7 @@
 
             <button *ngFor="let outcome of form.outcomes"
                     mat-button
+                    class="adf-start-form-actions-button"
                     [attr.data-automation-id]="'adf-form-' + outcome.name  | lowercase"
                     [disabled]="!isOutcomeButtonEnabled(outcome)"
                     [class.mdl-button--colored]="!outcome.isSystem"

lib/process-services/src/lib/form/start-form.component.scss

@@ -1,7 +1,6 @@
-.adf {
+.adf-form-container {
-    &-form-container {
+    max-width: 100%;
-        max-width: 100% !important;
+    max-height: 100%;
-        max-height: 100% !important;
 
     & .mat-card {
         padding: 16px 24px;
@@ -9,7 +8,7 @@
     }
 
     & .mat-card-header-text {
-            margin: 0 !important;
+        margin: 0;
     }
 
     & .mat-tab-body-content {
@@ -32,8 +31,9 @@
     & .mat-form-field-wrapper {
         margin: 0 12px 0 0;
     }
-    }
 
+    .adf-form-container-card {
+        .adf {
             &-form-title {
                 font-size: var(--theme-title-font-size);
             }
@@ -69,7 +69,7 @@
             }
 
             &-form-hide-button {
-        display: none !important;
+                display: none;
             }
 
             &-task-title {
@@ -87,8 +87,8 @@
 
             &-form-mat-card-actions {
                 float: right;
-        padding-bottom: 25px !important;
+                padding-bottom: 25px;
-        padding-right: 25px !important;
+                padding-right: 25px;
 
                 & .mat-button {
                     height: 36px;
@@ -103,6 +103,8 @@
                     font-weight: bold;
                 }
             }
+        }
+    }
 }
 
 form-field {

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss

@@ -3,7 +3,7 @@
         width: 100%;
 
         .adf-select {
-            padding-top: 0 !important;
+            padding-top: 0;
             width: 100%;
         }
 

lib/process-services/src/lib/process-list/components/process-filters.component.scss

@@ -1,10 +1,10 @@
 .adf {
-    &-filters__entry {
+    &-filters__entry:has(.adf-filter-action-button) {
         padding: 12px 0;
         height: 24px;
         width: 100%;
         cursor: pointer;
-        font-size: var(--theme-body-1-font-size) !important;
+        font-size: var(--theme-body-1-font-size);
         font-weight: bold;
         opacity: 0.54;
 
@@ -15,7 +15,7 @@
 
         .adf-filter-action-button .adf-filter-action-button__label {
             padding-left: 20px;
-            margin: 0 8px !important;
+            margin: 0 8px;
         }
 
         &.adf-active,

lib/process-services/src/lib/process-list/components/start-process.component.html

@@ -45,12 +45,13 @@
                             </mat-autocomplete>
                             <ng-container *ngIf="!isProcessDefinitionsLoading ; else showProcessDefLoadingTemplate">
                                 <button
+                                    class="adf-start-process-button"
                                     id="adf-select-process-dropdown"
                                     *ngIf="showSelectProcessDropdown"
                                     mat-icon-button
                                     (click)="displayDropdown($event)"
                                     [disabled]="disableDropdownButton()"
-                                    [attr.aria-label]="'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate">
+                                    [attr.aria-label]="'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate | uppercase">
                                     <mat-icon>arrow_drop_down</mat-icon>
                                 </button>
                             </ng-container>
@@ -89,6 +90,7 @@
                                 (outcomeClick)="onOutcomeClick($event)"
                                 [showRefreshButton]="false">
                                 <button
+                                    class="adf-start-process-button"
                                     adf-form-custom-button
                                     mat-button
                                     (click)="cancelStartProcess()"
@@ -118,6 +120,7 @@
             </div>
             <div class="mat-content-actions" *ngIf="!hasStartForm()">
                 <button
+                    class="adf-start-process-button"
                     mat-button
                     *ngIf="!hasStartForm()"
                     (click)="cancelStartProcess()"
@@ -132,7 +135,7 @@
                     (click)="startProcess()"
                     data-automation-id="btn-start"
                     id="button-start"
-                    class="btn-start">
+                    class="btn-start adf-start-process-button">
                     {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
                 </button>
             </div>

lib/process-services/src/lib/process-list/components/start-process.component.scss

@@ -18,10 +18,6 @@
         .mat-content-actions {
             text-align: right;
         }
-
-        .mat-button {
-            text-transform: uppercase !important;
-        }
     }
 
     &-title {
@@ -51,14 +47,14 @@
     }
 
     &-start-form-container {
-        .mat-card {
+        .adf-start-form-card:has(.adf-start-form-header) {
-            box-shadow: none !important;
+            box-shadow: none;
-            padding: 0 !important;
+            padding: 0;
         }
     }
 
-    &-start-form-actions {
+    &-start-form-actions:has(.adf-start-form-actions-button) {
-        text-align: right !important;
+        text-align: right;
     }
 
     &-start-process-definition-container {

lib/process-services/src/lib/process-user-info/process-user-info.component.scss

@@ -147,8 +147,15 @@
         text-align: left;
     }
 
-    &-hide-tab .mat-tab-label-active {
+    &-hide-tab.adf-userinfo-tab#tab-group-env {
-        display: none !important;
+        display: none;
+    }
+
+    &-hide-small.adf-userinfo-profile-initials,
+    &-hide-small.adf-userinfo-profile-container {
+        @include layout-bp(lt-md) {
+            display: none;
+        }
     }
 }
 

lib/process-services/src/lib/task-list/components/start-task.component.scss

@@ -71,11 +71,11 @@ adf-start-task {
         text-transform: uppercase;
     }
 
-    people-widget {
+    people-widget.adf-people-widget-content {
         width: 100%;
 
         .mat-form-field-label-wrapper {
-            top: -14px !important;
+            top: -14px;
         }
     }
 
@@ -130,10 +130,6 @@ adf-start-task {
         }
 
         &-invalid {
-            .mat-form-field-underline {
-                background-color: #f44336 !important;
-            }
-
             .adf-file {
                 border-color: var(--theme-warn-color);
             }

lib/process-services/src/lib/task-list/components/task-filters.component.scss

@@ -1,10 +1,10 @@
 .adf {
-    &-filters__entry {
+    &-filters__entry:has(.adf-filter-action-button) {
         padding: 12px 0;
         height: 24px;
         width: 100%;
         cursor: pointer;
-        font-size: var(--theme-body-1-font-size) !important;
+        font-size: var(--theme-body-1-font-size);
         font-weight: bold;
         opacity: 0.54;
 
@@ -15,7 +15,7 @@
 
         .adf-filter-action-button .adf-filter-action-button__label {
             padding-left: 20px;
-            margin: 0 8px !important;
+            margin: 0 8px;
         }
 
         &.adf-active,

lib/process-services/src/lib/task-list/components/task-standalone.component.html

@@ -19,7 +19,7 @@
 
     <mat-card-actions class="adf-no-form-mat-card-actions">
         <button mat-button *ngIf="hasAttachFormButton()" id="adf-no-form-attach-form-button" (click)="onShowAttachForm()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
-        <div>
+        <div class="adf-no-form-mat-card-actions-container">
             <button mat-button *ngIf="hasCancelButton()" id="adf-no-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
             <button mat-button *ngIf="hasCompleteButton()" id="adf-no-form-complete-button" color="primary" (click)="onCompleteButtonClick()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
         </div>

lib/process-services/src/lib/task-list/components/task-standalone.component.scss

@@ -1,14 +1,13 @@
-.adf {
+.adf-message-card {
-    &-message-card {
     width: 60%;
     box-sizing: border-box;
     margin: 16px auto;
 
-        .mat-card-actions {
+    .adf-no-form-mat-card-actions {
         border-top: solid 1px var(--adf-theme-background-status-bar-color);
     }
-    }
 
+    .adf {
         &-no-form-message-container {
             height: 256px;
             width: 100%;
@@ -18,7 +17,7 @@
         &-no-form-message-list {
             display: table-cell;
             vertical-align: middle;
-        text-align: center !important;
+            text-align: center;
         }
 
         &-no-form-message {
@@ -28,17 +27,17 @@
             letter-spacing: -1.3px;
             opacity: 0.54;
             margin: auto;
-        width: fit-content !important;
+            width: fit-content;
         }
 
         &-no-form-submessage {
             font-size: var(--theme-subheading-2-font-size);
             opacity: 0.54;
             margin: auto;
-        width: fit-content !important;
+            width: fit-content;
         }
 
-    &-no-form-mat-card-actions.mat-card-actions {
+        &-no-form-mat-card-actions:has(.adf-no-form-mat-card-actions-container) {
             display: flex;
             justify-content: space-between;
 
@@ -53,4 +52,5 @@
                 font-weight: bold;
             }
         }
+    }
 }

lib/testing/src/lib/protractor/process-services-cloud/pages/form/widget/attach-file-widget-cloud.page.ts

@@ -24,7 +24,7 @@ import { TestElement } from '../../../../core/test-element';
 export class AttachFileWidgetCloudPage {
 
     widget: ElementFinder;
-    filesListLocator: string = 'div[class="adf-file-properties-table"]';
+    filesListLocator: string = 'div[class="adf-file-properties-table-container"]';
 
     constructor(fieldId: string) {
         this.assignWidget(fieldId);

stylelint-config.json

@@ -37,6 +37,7 @@
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",
     "shorthand-property-no-redundant-values": true,
+    "declaration-no-important": true,
     "property-case": "lower",
     "no-duplicate-at-import-rules": true,
     "declaration-block-no-duplicate-properties": [