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

2025-07-24 17:32:15 +00:00 · 2024-03-11 15:33:09 +01:00
parent 6bc532abf2
commit e9dc55bca2
80 changed files with 533 additions and 565 deletions
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
+++ b/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;
-    overflow-x: hidden !important;
+    transform: none;
+    overflow-x: hidden;
    max-height: calc(256px + #{$select-filter-height});
 }
--- a/lib/core/src/lib/clipboard/clipboard.theme.scss
+++ b/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;
-        bottom: 0 !important;
+        top: 85%;
+        bottom: 0;
    }
 }
--- a/lib/core/src/lib/comments/comment-list/comment-list.component.scss
+++ b/lib/core/src/lib/comments/comment-list/comment-list.component.scss
@@ -1,68 +1,70 @@
-.adf {
-    &-comment-img-container {
-        width: 40px;
-        height: 100%;
-        display: flex;
-        align-self: flex-start;
-        padding-top: 18px;
-    }
+.adf-comment-list {
+    .adf {
+        &-comment-img-container {
+            width: 40px;
+            height: 100%;
+            display: flex;
+            align-self: flex-start;
+            padding-top: 18px;
+        }

-    &-comment-list-item {
-        white-space: initial;
-        display: table-row-group;
-        padding-top: 12px;
-        overflow: hidden;
-        height: 100% !important;
-        background-position: center;
-    }
+        &-comment-list-item:has(.adf-comment-img-container) {
+            white-space: initial;
+            display: table-row-group;
+            padding-top: 12px;
+            overflow: hidden;
+            height: 100%;
+            background-position: center;

-    &-comment-user-icon {
-        padding: 10px 5px;
-        width: 30px;
-        background-color: var(--theme-primary-color);
-        color: var(--theme-primary-color-default-contrast);
-        border-radius: 50%;
-        font-size: var(--theme-subheading-2-font-size);
-        text-align: center;
-        height: 20px;
-        background-size: cover;
-    }
+            .adf-comment-contents {
+                width: 100%;
+                padding-top: 12px;
+                padding-left: 5px;

-    &-comment-user-name {
-        width: 100%;
-        padding: 2px 10px;
-        font-weight: 600;
-        font-size: var(--theme-body-1-font-size);
-    }
+                .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-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-user-icon {
+            padding: 10px 5px;
+            width: 30px;
+            background-color: var(--theme-primary-color);
+            color: var(--theme-primary-color-default-contrast);
+            border-radius: 50%;
+            font-size: var(--theme-subheading-2-font-size);
+            text-align: center;
+            height: 20px;
+            background-size: cover;
+        }

-    &-comment-message-time {
-        margin-top: 5px;
-        width: 100%;
-        padding: 2px 10px;
-        font-size: var(--theme-caption-font-size);
-        color: var(--adf-theme-foreground-text-color);
-    }
+        &-comment-user-name {
+            width: 100%;
+            padding: 2px 10px;
+            font-weight: 600;
+            font-size: var(--theme-body-1-font-size);
+        }

-    &-comment-contents {
-        width: 100%;
-        padding-top: 12px;
-        padding-left: 5px;
-    }
+        &-comment-message-time {
+            margin-top: 5px;
+            width: 100%;
+            padding: 2px 10px;
+            font-size: var(--theme-caption-font-size);
+            color: var(--adf-theme-foreground-text-color);
+        }

-    &-people-img {
-        border-radius: 90%;
-        width: 40px;
-        height: 40px;
-        vertical-align: middle;
+        &-people-img {
+            border-radius: 90%;
+            width: 40px;
+            height: 40px;
+            vertical-align: middle;
+        }
    }
 }
--- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss
+++ b/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 {
-            outline: none !important;
+        &:focus {
+            outline: none;
        }
    }

--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/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"
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/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;
-            max-width: 288px !important;
-            min-width: 288px !important;
+            width: 288px;
+            max-width: 288px;
+            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 {
-            height: 0 !important;
+        .adf-datatable-row.adf-datatable-row-empty-card {
+            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;
-            width: 42px !important;
+            height: 42px;
+            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 {
-            padding-top: 7px !important;
+        .adf-datatable__actions-cell.adf-datatable-center-actions-column-ie {
+            padding-top: 7px;
        }

-        .adf-datatable-center-date-column-ie {
-            position: relative !important;
+        .adf-cell-date.adf-datatable-center-date-column-ie {
+            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 {
-        padding: 0 !important;
-        border: none !important;
+    .adf-no-content-container.adf-datatable-cell {
+        padding: 0;
+        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 {
-            padding: 0 !important;
+        &__cell.adf-datatable-cell {
+            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 {
-            display: none !important;
+        .adf-desktop-only.adf-ellipsis-cell {
+            display: none;
        }
    }

    @media (max-device-width: 768px) {
-        .adf-desktop-only {
-            display: none !important;
+        .adf-desktop-only.adf-ellipsis-cell {
+            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-bottom: 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);

        &: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 {
--- a/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss
+++ b/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;
 }
--- a/lib/core/src/lib/form/components/form-renderer.component.html
+++ b/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>
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/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-height: 100% !important;
+        max-width: 100%;
+        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;
--- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
+++ b/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);
+        }
+    }
 }
--- a/lib/core/src/lib/form/components/widgets/form.theme.scss
+++ b/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 {
-                color: var(--adf-theme-foreground-secondary-text-color) !important;
+            .mat-select-arrow {
+                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;
        }
    }
 }
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/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 }}">
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/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);
--- a/lib/core/src/lib/layout/components/header/header.component.scss
+++ b/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;
--- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.html
+++ b/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>
--- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
+++ b/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;
--- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
+++ b/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;

        }
--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
+++ b/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;
--- a/lib/core/src/lib/login/components/login.component.html
+++ b/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>
--- a/lib/core/src/lib/login/components/login.component.scss
+++ b/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 {
-        color: var(--adf-theme-foreground-text-color) !important;
+    .adf-login-remember-me:has(.adf-login-remember-me-label) {
+        color: var(--adf-theme-foreground-text-color);
    }

    .adf-login-action-container {
--- a/lib/core/src/lib/notifications/components/notification-history.component.html
+++ b/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>
--- a/lib/core/src/lib/notifications/components/notification-history.component.scss
+++ b/lib/core/src/lib/notifications/components/notification-history.component.scss
@@ -11,30 +11,30 @@
        justify-content: space-between;
    }

-    &-notification-history-menu {
-        &-item {
+    &-notification-history-menu:has(.adf-notification-history-list) {
+        .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,
-        &-no-message {
-            font-size: var(--theme-body-1-font-size) !important;
+        .adf-notification-history-menu-message:is(p),
+        .adf-notification-history-menu-no-message:is(p) {
+            font-size: var(--theme-body-1-font-size);
        }

-        &-date {
-            font-size: var(--theme-caption-font-size) !important;
+        .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
+            font-size: var(--theme-caption-font-size);
        }

-        &-initiator {
+        .adf-notification-history-menu-initiator {
            margin: 4px;
        }
    }
--- a/lib/core/src/lib/search-text/search-text-input.component.scss
+++ b/lib/core/src/lib/search-text/search-text-input.component.scss
@@ -1,5 +1,5 @@
-.adf-search-container {
-    overflow: hidden !important;
+.adf-search-container:has(.adf-input-form-field-divider) {
+    overflow: hidden;
 }

 .adf-search-button {
--- a/lib/core/src/lib/styles/_default-class.scss
+++ b/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;
-    }
-}
--- a/lib/core/src/lib/styles/_index.scss
+++ b/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';
--- a/lib/core/src/lib/styles/material.theme.scss
+++ b/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);
            }
        }
    }
--- a/lib/core/src/lib/templates/empty-content/empty-content.component.scss
+++ b/lib/core/src/lib/templates/empty-content/empty-content.component.scss
@@ -7,12 +7,10 @@
    height: 100%;
    width: 100%;

-    &__icon {
-        .mat-icon {
-            font-size: var(--theme-display-3-font-size);
-            height: var(--theme-display-3-font-size) !important;
-            width: var(--theme-display-3-font-size) !important;
-        }
+    &__icon > *:first-child {
+        font-size: var(--theme-display-3-font-size);
+        height: var(--theme-display-3-font-size);
+        width: var(--theme-display-3-font-size);
    }

    &__title {
--- a/lib/core/src/lib/viewer/components/media-player.component.html
+++ b/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>
--- a/lib/core/src/lib/viewer/components/media-player.component.scss
+++ b/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 {
-        transform: translateY(-50%) !important;
+    video.adf-video-player.adf-audio-file::-webkit-media-text-track-container {
+        transform: translateY(-50%);
    }
 }
--- a/lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss
+++ b/lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss
@@ -184,8 +184,8 @@
        .adf-loadingIcon {
            width: 100px;
            height: 100px;
-            left: 50% !important;
-            top: 50% !important;
+            left: 50%;
+            top: 50%;

            margin-top: -50px;
            margin-left: -50px;
@@ -210,7 +210,7 @@
    }

    .adf-hidden, [hidden] {
-        display: none !important;
+        display: none;
    }
 }