Bump stylelint from 13.13.1 to 14.2.0 (#7431)

* Bump stylelint from 13.13.1 to 14.2.0 Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.13.1 to 14.2.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/13.13.1...14.2.0) --- updated-dependencies: - dependency-name: stylelint dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * upgrade to newest stylelint * fix style issues * fix color function rules to match old Angular * rollback modern color func Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Denys Vuika <denys.vuika@gmail.com>
2025-07-24 17:32:15 +00:00 · 2022-01-05 09:21:09 +00:00
parent cd02fb2040
commit 28bdab1146
165 changed files with 1606 additions and 971 deletions
--- a/lib/core/about/about.component.scss
+++ b/lib/core/about/about.component.scss
@@ -1,5 +1,4 @@
 adf-about {
-
    .adf-about-container {
        margin: 10px 0 5px 2px;
    }
@@ -7,6 +6,4 @@ adf-about {
    header {
        margin: 5px;
    }
-
 }
-
--- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
+++ b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
@@ -8,7 +8,8 @@
        color: var(--adf-card-view-text-color);
    }

-    &-array-item-action:hover, &-array-item-action:focus {
+    &-array-item-action:hover,
+    &-array-item-action:focus {
        color: var(--theme-text-fg-color);
    }

@@ -22,9 +23,6 @@
    &-array-item-more-chip-container {
        &.mat-card {
            box-shadow: none;
-        }
-
-        &.mat-card {
            max-height: 300px;
            overflow-y: auto;
        }
@@ -40,6 +38,7 @@
            padding-top: 6px;
            cursor: pointer;
        }
+
        .mat-chip {
            cursor: pointer;
        }
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .adf {
    &-invisible-date-input {
        height: 2px;
--- a/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
+++ b/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
@@ -34,7 +34,8 @@
                box-shadow: none;
            }

-            .mat-header-row, .mat-row {
+            .mat-header-row,
+            .mat-row {
                padding: 0;
            }
        }
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -170,10 +170,12 @@
        .adf-textitem-edit-icon {
            display: none;
        }
+
        .adf-property-clear-value {
            color: var(--adf-card-view-text-color);
            display: inline;
        }
+
        .adf-property-clear-value:hover {
            color: var(--theme-text-fg-color);
        }
--- a/lib/core/card-view/components/card-view/card-view.component.scss
+++ b/lib/core/card-view/components/card-view/card-view.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .adf-property-list {
    .adf-property {
        margin-bottom: 20px;
@@ -6,6 +7,12 @@
            margin-top: 6px;
        }

+        .adf-property-read-only {
+            .mat-form-field-underline {
+                display: none;
+            }
+        }
+
        .adf-property-field {
            width: 100%;
            margin-bottom: -25px;
@@ -25,12 +32,6 @@
            }
        }

-        .adf-property-read-only {
-            .mat-form-field-underline {
-                display: none;
-            }
-        }
-
        .adf-property-label {
            font-size: 12px;
            color: var(--theme-text-color);
--- a/lib/core/clipboard/clipboard.theme.scss
+++ b/lib/core/clipboard/clipboard.theme.scss
@@ -6,14 +6,14 @@
    padding: 2px 5px;
    border-radius: 5px;
    bottom: 93%;
-    left:0;
+    left: 0;
    z-index: 1001;
    min-height: 20px;
 }

 .adf-sticky-header {
    .adf-copy-tooltip {
-        top:85% !important;
-        bottom:0 !important;
+        top: 85% !important;
+        bottom: 0 !important;
    }
 }
--- a/lib/core/comments/comment-list.component.scss
+++ b/lib/core/comments/comment-list.component.scss
@@ -3,7 +3,6 @@
 }

 .adf {
-
    &-comment-img-container {
        float: left;
        width: 40px;
@@ -25,14 +24,16 @@
        background-position: center;

        &:hover {
-        background: var(--adf-comment-list-primary-color)
-        radial-gradient(circle, transparent 1%, var(--adf-comment-list-primary-color) 1%)
-        center/15000%;
+            background:
+                var(--adf-comment-list-primary-color)
+                radial-gradient(circle, transparent 1%, var(--adf-comment-list-primary-color) 1%)
+                center/15000%;
        }
+
        &:active {
-        background-color: var(--adf-comment-list-ripple-color);
-        background-size: 100%;
-        transition: background 0s;
+            background-color: var(--adf-comment-list-ripple-color);
+            background-size: 100%;
+            transition: background 0s;
        }
    }

@@ -91,5 +92,4 @@
        height: 40px;
        vertical-align: middle;
    }
-
 }
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
@import '~@angular/material/theming';
@import '../../../styles/mixins';

@@ -10,8 +11,8 @@ $data-table-card-padding: 24px !default;
 $data-table-cell-top: $data-table-card-padding / 2;
 $data-table-thumbnail-width: 50px !default;
 $data-table-cell-min-width: 50px !default;
-$data-table-cell-min-width--no-grow: 100px !default;
-$data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
+$data-table-cell-min-width-no-grow: 100px !default;
+$data-table-cell-min-width-file-size: $data-table-cell-min-width !default;

 .adf-datatable {
    overflow-y: scroll;
@@ -28,9 +29,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
    .adf-datatable-body {
        flex-flow: row wrap;
        display: flex;
-
        width: 100%;
-
        justify-content: space-evenly;
        align-content: flex-start;
        align-items: flex-start;
@@ -41,13 +40,10 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
            display: flex;
            flex-direction: column;
            flex: 0 1 24%;
-
            width: 288px !important;
            max-width: 288px !important;
            min-width: 288px !important;
-
            height: 200px;
-
            overflow: hidden !important;
            margin: 6px;
            padding: 15px;
@@ -165,14 +161,12 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        .adf-datatable-checkbox {
            margin: 8px;
        }
-
    }

    .adf-datatable-header {
        margin-right: 18px;
        float: right;
    }
-
 }

 .adf-datatable-list {
@@ -201,7 +195,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        }

        .adf-datatable-center-img-ie {
-            padding:0;
+            padding: 0;
            min-width: 0;
            width: 24px;
            height: 56px;
@@ -221,7 +215,8 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
    }

    .adf-datatable-row {
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
            background-color: var(--theme-bg-hover-color);
        }

@@ -230,7 +225,8 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
            outline: 1px solid var(--theme-accent-color-a200);
        }

-        .adf-cell-value, .adf-datatable-cell-header {
+        .adf-cell-value,
+        .adf-datatable-cell-header {
            &:focus {
                outline-offset: -1px;
                outline: 1px solid var(--theme-accent-color-a200);
@@ -247,6 +243,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;

        .adf-datatable-row {
            @include material-animation-default(0.28s);
+
            transition-property: background-color;
            border-top: 1px solid var(--theme-border-color);
            min-height: $data-table-row-height;
@@ -254,7 +251,8 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;

            @include adf-no-select;

-            &.adf-is-selected, &.adf-is-selected:hover {
+            &.adf-is-selected,
+            &.adf-is-selected:hover {
                background-color: var(--theme-selected-button-bg-color);
            }

@@ -264,6 +262,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        }
    }

+    /* stylelint-disable-next-line no-duplicate-selectors */
    .adf-datatable-row {
        display: flex;
        align-items: center;
@@ -275,7 +274,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
            width: $data-table-thumbnail-width;
        }

-        /* query for Microsoft IE 11*/
+        /* query for Microsoft IE 11 */
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            .adf-datatable-checkbox {
                padding-top: 15px;
@@ -283,7 +282,8 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        }
    }

-    .adf-datatable-cell, .adf-datatable-cell-header {
+    .adf-datatable-cell,
+    .adf-datatable-cell-header {
        text-align: left;
        box-sizing: border-box;
        min-width: $data-table-cell-min-width;
@@ -311,12 +311,13 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        }

        &--fileSize {
-            min-width: $data-table-cell-min-width--fileSize;
+            min-width: $data-table-cell-min-width-file-size;
        }
    }

    .adf-datatable-cell-header {
        @include adf-no-select;
+
        cursor: pointer;
        position: relative;
        vertical-align: bottom;
@@ -333,9 +334,11 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;

        &.adf-sortable {
            @include adf-no-select;
+
            &:hover {
                cursor: pointer;
            }
+
            display: flex;
            align-items: center;
        }
@@ -343,8 +346,10 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        &.adf-datatable__header--sorted-asc,
        &.adf-datatable__header--sorted-desc {
            color: var(--theme-text-fg-color);
+
            &::before {
                @include typo-icon;
+
                font-size: $data-table-header-sort-icon-size;
                content: '\e5d8';
                left: 5px;
@@ -353,9 +358,11 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
                vertical-align: sub;
            }
        }
+
        &.adf-datatable__header--sorted-desc::before {
            content: '\e5db';
        }
+
        &.adf-datatable-cell--fileSize.adf-datatable__header--sorted-asc::before,
        &.adf-datatable-cell--fileSize.adf-datatable__header--sorted-desc::before {
            left: -3px;
@@ -368,32 +375,40 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        }
    }

-    .adf-datatable-cell-header.adf-expand-cell-1, .adf-datatable-cell.adf-expand-cell-1 {
+    .adf-datatable-cell-header.adf-expand-cell-1,
+    .adf-datatable-cell.adf-expand-cell-1 {
        flex-grow: 1;
    }

-    .adf-datatable-cell-header.adf-expand-cell-2, .adf-datatable-cell.adf-expand-cell-2 {
+    .adf-datatable-cell-header.adf-expand-cell-2,
+    .adf-datatable-cell.adf-expand-cell-2 {
        flex-grow: 2;
    }

-    .adf-datatable-cell-header.adf-expand-cell-3, .adf-datatable-cell.adf-expand-cell-3 {
+    .adf-datatable-cell-header.adf-expand-cell-3,
+    .adf-datatable-cell.adf-expand-cell-3 {
        flex-grow: 3;
    }

-    .adf-datatable-cell-header.adf-expand-cell-4, .adf-datatable-cell.adf-expand-cell-4 {
+    .adf-datatable-cell-header.adf-expand-cell-4,
+    .adf-datatable-cell.adf-expand-cell-4 {
        flex-grow: 4;
    }

-    .adf-datatable-cell-header.adf-expand-cell-5, .adf-datatable-cell.adf-expand-cell-5 {
+    .adf-datatable-cell-header.adf-expand-cell-5,
+    .adf-datatable-cell.adf-expand-cell-5 {
        flex-grow: 5;
    }

-    .adf-datatable-cell-header.adf-no-grow-cell, .adf-datatable-cell.adf-no-grow-cell {
+    .adf-datatable-cell-header.adf-no-grow-cell,
+    .adf-datatable-cell.adf-no-grow-cell {
        flex-grow: 0;
-        min-width: $data-table-cell-min-width--no-grow;
+        min-width: $data-table-cell-min-width-no-grow;
    }

-    .adf-datatable-cell, .adf-datatable-cell-header {
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    .adf-datatable-cell,
+    .adf-datatable-cell-header {
        flex: 1;
        padding: 0;
        align-items: center;
@@ -413,11 +428,11 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
            padding: 10px;
            display: block;

-            @media screen and (-ms-high-contrast: active),
-            screen and (-ms-high-contrast: none) {
+            @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;
        }
@@ -431,7 +446,8 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        width: 100%;
    }

-    .adf-datatable__actions-cell, .adf-datatable-cell--image {
+    .adf-datatable__actions-cell,
+    .adf-datatable-cell--image {
        max-width: $data-table-thumbnail-width;
        display: flex;
    }
@@ -490,6 +506,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        }
    }

+    /* stylelint-disable-next-line no-duplicate-selectors */
    .adf-datatable-cell,
    .adf-datatable-cell-header {
        .adf-datatable-link .adf-datatable-cell-value {
@@ -515,12 +532,13 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
                text-overflow: ellipsis;
            }
        }
+
        .adf-datatable-content-cell {
            overflow: unset;
            position: absolute;
        }

-        /* query for Microsoft IE 11*/
+        /* query for Microsoft IE 11 */
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            .adf-cell-value {
                top: 100%;
@@ -569,7 +587,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
        }
    }

-        /* Utils */
+    /* Utils */
    .adf-hidden {
        display: none;
    }
@@ -586,7 +604,6 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
            display: none !important;
        }
    }
-
 }

 /* [Accessibility] Material checkbox labels */
@@ -637,6 +654,7 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;

 .adf-datatable--empty {
    @include flex-column;
+
    justify-content: center;
    align-items: center;
    height: inherit;
@@ -647,7 +665,8 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
            background-color: var(--theme-card-bg-color);
            border: none !important;

-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                background-color: unset;
                cursor: default;
            }
@@ -656,13 +675,13 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
 }

 .adf-datatable--empty--header-visible {
-
    .adf-datatable-header {
        border: 1px solid var(--theme-border-color);
    }

    .adf-datatable-body {
        @include flex-column;
+
        justify-content: center;
        align-items: center;

@@ -671,7 +690,8 @@ $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
            background-color: var(--theme-card-bg-color);
            border: none !important;

-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                background-color: unset;
                cursor: default;
            }
--- a/lib/core/dialogs/edit-json/edit-json.dialog.scss
+++ b/lib/core/dialogs/edit-json/edit-json.dialog.scss
@@ -3,17 +3,17 @@
        height: 300px;
        overflow: hidden;
    }
+
    textarea {
        &:focus {
            outline: none;
        }
+
        resize: none;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
-        box-sizing: border-box;         /* For IE and modern versions of Chrome */
-        -moz-box-sizing: border-box;    /* For Firefox                          */
-        -webkit-box-sizing: border-box; /* For Safari                           */
+        box-sizing: border-box;
    }
 }
--- a/lib/core/directives/tooltip-card/tooltip-card.component.scss
+++ b/lib/core/directives/tooltip-card/tooltip-card.component.scss
@@ -6,12 +6,14 @@

 div.adf-tooltip-card {
    @include mat-elevation(8);
+
    background-color: var(--theme-card-bg-color);
    border: 1px solid var(--theme-primary-color);
    padding: 12px;
    border-radius: 6px;

-    p, div {
+    p,
+    div {
        font-size: var(--theme-caption-font-size);
        color: var(--adf-tooltip-card-color);
        margin: 0;
--- a/lib/core/form/components/form-renderer.component.scss
+++ b/lib/core/form/components/form-renderer.component.scss
@@ -32,7 +32,6 @@
        & .mat-form-field-wrapper {
            margin: 0 12px 0 0;
        }
-
    }

    &-form-title {
@@ -69,7 +68,7 @@

        & .adf-invalid-color {
            color: var(--theme-warn-color);
-            }
+        }
    }

    &-form-hide-button {
@@ -97,7 +96,6 @@
        & .mat-button {
            height: 36px;
            border-radius: 5px;
-
        }

        & .mat-button-wrapper {
--- a/lib/core/form/components/widgets/container/container.widget.scss
+++ b/lib/core/form/components/widgets/container/container.widget.scss
@@ -7,14 +7,7 @@
    padding-bottom: 10px;
    cursor: default;
    user-select: none;
-    -webkit-user-select: none;
-    /* Chrome/Safari/Opera */
-    -moz-user-select: none;
-    /* Firefox */
-    -ms-user-select: none;
-    /* IE/Edge */
-    -webkit-touch-callout: none;
-    /* iOS Safari */
+
    &.adf-collapsible {
        cursor: pointer;
    }
@@ -90,7 +83,6 @@ container-widget {
    }

    .mat-focused {
-
        label {
            transform: scaleX(1);
            transition: transform 150ms linear;
@@ -111,5 +103,4 @@ container-widget {
    adf-form-field {
        width: 100%;
    }
-
 }
--- a/lib/core/form/components/widgets/content/content.widget.scss
+++ b/lib/core/form/components/widgets/content/content.widget.scss
@@ -3,8 +3,8 @@
        width: 100%;
        height: 100%;
        border: 1px solid rgba(117, 117, 117, 0.57);
-        box-shadow: 1px 1px 2px #dddddd;
-        background-color: #ffffff;
+        box-shadow: 1px 1px 2px #ddd;
+        background-color: #fff;
    }

    &-content-widget-preview-text {
--- a/lib/core/form/components/widgets/date-time/date-time.widget.scss
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.scss
@@ -3,9 +3,9 @@
        .mat-form-field-suffix {
            top: 26px;
        }
+
        .mat-form-field-label-wrapper {
            top: 20px;
        }
    }
 }
-
--- a/lib/core/form/components/widgets/date/date.widget.scss
+++ b/lib/core/form/components/widgets/date/date.widget.scss
@@ -3,6 +3,7 @@
        .mat-form-field-suffix {
            top: 26px;
        }
+
        .mat-form-field-label-wrapper {
            top: 20px;
        }
--- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
+++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
@@ -1,10 +1,11 @@
+/* stylelint-disable no-descending-specificity */
@import '~@angular/material/theming';
@import '../../../../styles/mixins';

 $dynamic-table-font-size: 14px !default;
 $dynamic-table-header-font-size: 12px !default;
 $dynamic-table-header-sort-icon-size: 16px !default;
-$dynamic-table-hover-color: #eeeeee !default;
+$dynamic-table-hover-color: #eee !default;
 $dynamic-table-selection-color: #e0f7fa !default;
 $dynamic-table-row-height: 56px !default;
 $dynamic-table-column-spacing: 36px !default;
@@ -19,7 +20,6 @@ dynamic-table-widget .adf-label {
 }

 .adf {
-
    &-dynamic-table-scrolling {
        overflow: auto;
    }
@@ -43,14 +43,17 @@ dynamic-table-widget .adf-label {
            tr {
                position: relative;
                height: $dynamic-table-row-height;
+
                @include material-animation-default(0.28s);
+
                transition-property: background-color;

                &:hover {
                    background-color: $dynamic-table-hover-color;
                }

-                &.adf-is-selected, &.adf-is-selected:hover {
+                &.adf-is-selected,
+                &.adf-is-selected:hover {
                    background-color: $dynamic-table-selection-color;
                }

@@ -61,7 +64,8 @@ dynamic-table-widget .adf-label {
            }
        }

-        td, th {
+        td,
+        th {
            padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
            text-align: center;

@@ -85,11 +89,13 @@ dynamic-table-widget .adf-label {
            box-sizing: border-box;

            @include adf-no-select;
+
            cursor: default;
        }

        th {
            @include adf-no-select;
+
            cursor: pointer;
            position: relative;
            vertical-align: bottom;
@@ -105,6 +111,7 @@ dynamic-table-widget .adf-label {

            &.adf-sortable {
                @include adf-no-select;
+
                &:hover {
                    cursor: pointer;
                }
@@ -113,20 +120,25 @@ dynamic-table-widget .adf-label {
            &.adf-dynamic-table__header--sorted-asc,
            &.adf-dynamic-table__header--sorted-desc {
                color: var(--theme-text-fg-color);
+
                &::before {
                    @include typo-icon;
+
                    font-size: $dynamic-table-header-sort-icon-size;
                    content: '\e5d8';
                    margin-right: 5px;
                    vertical-align: sub;
                }
+
                &:hover {
                    cursor: pointer;
+
                    &::before {
                        color: var(--theme-disabled-text-color);
                    }
                }
            }
+
            &.adf-dynamic-table__header--sorted-desc::before {
                content: '\e5db';
            }
--- a/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.scss
+++ b/lib/core/form/components/widgets/dynamic-table/editors/amount/amount.editor.scss
@@ -1,4 +1,3 @@
-
 .adf {
    &-text-editor {
        width: 100%;
--- a/lib/core/form/components/widgets/dynamic-table/editors/boolean/boolean.editor.scss
+++ b/lib/core/form/components/widgets/dynamic-table/editors/boolean/boolean.editor.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-checkbox-label {
        position: relative;
        cursor: pointer;
@@ -7,5 +6,4 @@
        line-height: 24px;
        margin: 0;
    }
-
 }
--- a/lib/core/form/components/widgets/dynamic-table/editors/text/text.editor.scss
+++ b/lib/core/form/components/widgets/dynamic-table/editors/text/text.editor.scss
@@ -1,4 +1,3 @@
-
 .adf {
    &-text-editor {
        width: 100%;
--- a/lib/core/form/components/widgets/error/error.component.scss
+++ b/lib/core/form/components/widgets/error/error.component.scss
@@ -1,4 +1,3 @@
 .adf-error-text {
    width: 85%;
 }
-
--- a/lib/core/form/components/widgets/form.theme.scss
+++ b/lib/core/form/components/widgets/form.theme.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 ul > li > form-field > .adf-focus {
    .adf-label {
        color: var(--theme-primary-color);
@@ -5,7 +6,6 @@ ul > li > form-field > .adf-focus {
 }

 .adf {
-
    &-error-text-container {
        height: 20px;
        margin-top: -12px;
@@ -27,31 +27,30 @@ ul > li > form-field > .adf-focus {
    }

    &-label {
-        color: rgb(186, 186, 186);;
+        color: rgb(186, 186, 186);
    }

    &-invalid {
-
        .mat-form-field-underline {
            background-color: #f44336 !important;
        }

        .mat-checkbox {
            color: var(--theme-warn-color);
+
            .mat-checkbox-frame {
                border-color: var(--theme-warn-color);
            }
        }

        .mat-select {
-
            &-value {
                color: var(--theme-warn-color);
            }
+
            &-arrow {
                color: var(--theme-warn-color);
            }
-
        }

        .adf-file {
@@ -68,6 +67,7 @@ ul > li > form-field > .adf-focus {

        .adf-label {
            color: var(--theme-warn-color);
+
            &::after {
                background-color: var(--theme-warn-color);
            }
@@ -75,11 +75,12 @@ ul > li > form-field > .adf-focus {
    }
 }

-
-/* query for Microsoft IE 11*/
+/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    adf-form-field {
-        .mat-input-element, .mat-select, .mat-form-field {
+        .mat-input-element,
+        .mat-select,
+        .mat-form-field {
            display: block !important;
        }
    }
--- a/lib/core/form/components/widgets/functional-group/functional-group.widget.scss
+++ b/lib/core/form/components/widgets/functional-group/functional-group.widget.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-group-widget {
        width: 100%;
    }
--- a/lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss
+++ b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss
@@ -1,6 +1,6 @@
 .adf-hyperlink-widget {
    padding: 0.4375em 0;
-    border-top: 0.84375em solid transparent;
+    border-top: 0.8438em solid transparent;

    a {
        color: var(--theme-primary-color);
--- a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.scss
@@ -1,7 +1,7 @@
 .adf {
-
    &-multiline-text-widget {
        width: 100%;
+
        .mat-form-field-label-wrapper {
            top: 20px;
        }
@@ -26,5 +26,4 @@
    &-multiline-required-message {
        display: flex;
    }
-
 }
--- a/lib/core/form/components/widgets/number/number.widget.scss
+++ b/lib/core/form/components/widgets/number/number.widget.scss
@@ -1,6 +1,7 @@
 .adf {
    &-number-widget {
        width: 100%;
+
        .mat-form-field-label-wrapper {
            top: 20px;
        }
--- a/lib/core/form/components/widgets/people/people.widget.scss
+++ b/lib/core/form/components/widgets/people/people.widget.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-people-widget {
        width: 100%;

--- a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.scss
+++ b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-radio-button-container {
        margin-bottom: 15px;
        display: flex;
@@ -16,5 +15,4 @@
    &-radio-button {
        margin: 5px;
    }
-
- }
+}
--- a/lib/core/form/components/widgets/text/text.widget.scss
+++ b/lib/core/form/components/widgets/text/text.widget.scss
@@ -1,6 +1,7 @@
 .adf {
    &-text-widget {
        width: 100%;
+
        .mat-form-field-label-wrapper {
            top: 20px;
        }
--- a/lib/core/form/components/widgets/typeahead/typeahead.widget.scss
+++ b/lib/core/form/components/widgets/typeahead/typeahead.widget.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-typeahead-widget-container {
        position: relative;
        display: block;
--- a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.scss
+++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.scss
@@ -1,9 +1,8 @@
 .adf {
-
    &-upload-folder-widget {
        width: 100%;
        word-break: break-all;
        padding: 0.4375em 0;
-        border-top: 0.84375em solid transparent;
+        border-top: 0.8438em solid transparent;
    }
 }
--- a/lib/core/form/components/widgets/upload/upload.widget.scss
+++ b/lib/core/form/components/widgets/upload/upload.widget.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-upload-widget-container {
        margin-bottom: 15px;

@@ -12,7 +11,7 @@
        width: 100%;
        word-break: break-all;
        padding: 0.4375em 0;
-        border-top: 0.84375em solid transparent;
+        border-top: 0.8438em solid transparent;
    }

    &-upload-widget__icon {
@@ -30,5 +29,4 @@
            margin-bottom: 0;
        }
    }
-
 }
--- a/lib/core/icon/icon.component.scss
+++ b/lib/core/icon/icon.component.scss
@@ -1,4 +1,4 @@
 .adf-icon {
-  display: inline-flex;
-  vertical-align: middle;
+    display: inline-flex;
+    vertical-align: middle;
 }
--- a/lib/core/info-drawer/info-drawer-layout.component.scss
+++ b/lib/core/info-drawer/info-drawer-layout.component.scss
@@ -10,6 +10,7 @@ $adf-info-drawer-icon-size: 48px !default;

    &-info-drawer-layout {
        @include flex-column;
+
        overflow: auto;
        width: 100%;
        background-color: var(--theme-background-color);
@@ -34,7 +35,8 @@ $adf-info-drawer-icon-size: 48px !default;
            margin-bottom: 40px;

            &-buttons {
-                padding-right:18px;
+                padding-right: 18px;
+
                mat-icon {
                    cursor: pointer;
                }
@@ -73,7 +75,7 @@ $adf-info-drawer-icon-size: 48px !default;
                .adf-manage-versions-empty,
                .adf-manage-versions-no-permission {
                    margin: 0;
-                    padding: $adf-info-drawer-icon-size/2;
+                    padding: $adf-info-drawer-icon-size / 2;
                    color: var(--theme-text-color);
                    text-align: center;
                    display: flex;
@@ -83,7 +85,7 @@ $adf-info-drawer-icon-size: 48px !default;
                        width: $adf-info-drawer-icon-size;
                        height: $adf-info-drawer-icon-size;
                        font-size: $adf-info-drawer-icon-size;
-                        margin: 0 auto $adf-info-drawer-icon-size/2;
+                        margin: 0 auto $adf-info-drawer-icon-size / 2;
                        display: block;
                    }
                }
--- a/lib/core/info-drawer/info-drawer.component.scss
+++ b/lib/core/info-drawer/info-drawer.component.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-info-drawer {
        display: block;

@@ -8,7 +7,6 @@
        }

        & &-layout {
-
            &-content {
                padding: 0;

--- a/lib/core/layout/components/header/header.component.scss
+++ b/lib/core/layout/components/header/header.component.scss
@@ -1,4 +1,3 @@
-
 adf-layout-header .mat-toolbar-single-row {
    color: var(--adf-header-text-color) !important;
    background-color: var(--adf-header-background-color);
--- a/lib/core/layout/components/layout-container/layout-container.component.scss
+++ b/lib/core/layout/components/layout-container/layout-container.component.scss
@@ -8,14 +8,14 @@ adf-layout-container {
 .adf-container-full-width {
    width: inherit;
 }
-/* query for Microsoft IE 11*/
+
+/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .adf-container-full-width {
        width: 100%;
    }
 }

-
 .adf-sidenav--hidden {
    visibility: hidden !important;
    width: 0 !important;
--- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
+++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss
@@ -11,26 +11,31 @@
            background-color: var(--theme-primary-color);
            color: var(--theme-primary-color-default-contrast) !important;
            border-radius: 4px;
+
            & mat-icon {
                width: 24px;
                height: 25px;
                color: var(--theme-primary-color-default-contrast) !important;
            }
        }
+
        &-text {
            width: 100%;
            height: 20px;
            text-align: left;
        }
    }
+
    &-sidebar-action-menu-icon {
        margin: 18px 0 0 20px;
        color: var(--theme-text-color);
        cursor: pointer;
+
        &:hover {
            color: var(--theme-primary-color);
        }
    }
+
    &-sidebar-action-menu-options {
        text-align: left;
        letter-spacing: -0.4px;
@@ -42,11 +47,13 @@
            line-height: 1.5;
            letter-spacing: -0.4px;
        }
+
        .mat-menu-item:hover {
            color: var(--theme-primary-color);
            opacity: inherit;
        }
    }
+
    &-sidebar-action-menu-panel {
        margin-top: 7.5px;
        border-radius: 2px;
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
@@ -2,7 +2,6 @@
@import '../../../styles/mixins';

 .adf-sidenav-layout {
-
    &-full-space {
        display: flex;
        flex-direction: column;
@@ -14,6 +13,7 @@
    }

    @include flex-column;
+
    width: 100%;

    .adf-layout__content {
@@ -33,6 +33,7 @@

    .mat-drawer-content {
        @include flex-column;
+
        position: unset;
        overflow: auto;
    }
--- a/lib/core/login/components/login.component.scss
+++ b/lib/core/login/components/login.component.scss
@@ -83,10 +83,8 @@

    .adf-error-message {
        display: flex;
-        box-orient: horizontal;
        flex-direction: row;
        justify-content: flex-start;
-
        color: var(--theme-warn-color);
        padding: 0;
        margin-bottom: 4px;
@@ -144,20 +142,8 @@
    }

    .adf-interactive-login-label {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
        display: flex;
-
-        -webkit-box-orient: horizontal;
-        -moz-box-orient: horizontal;
-        box-orient: horizontal;
        flex-direction: row;
-
-        -webkit-box-pack: center;
-        -moz-box-pack: center;
-        box-pack: center;
        justify-content: center;
    }

@@ -168,7 +154,6 @@

    .adf-login-checking-spinner > svg > circle {
        stroke-width: 16% !important;
-
    }

    .adf-login-controls {
@@ -179,24 +164,13 @@

    .adf-login-action {
        margin-top: 20px;
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
        display: flex;
-
-        -webkit-box-orient: horizontal;
-        -moz-box-orient: horizontal;
-        box-orient: horizontal;
        flex-direction: row;
-
-        -webkit-box-pack: space-between;
-        -moz-box-pack: space-between;
-        box-pack: space-between;
        justify-content: space-between;
    }

-    .adf-login-action-left a, .adf-login-action-right a {
+    .adf-login-action-left a,
+    .adf-login-action-right a {
        text-decoration: none;
    }

@@ -226,8 +200,10 @@
    }

    .adf-login__field input:-webkit-autofill {
+        /* stylelint-disable */
        -webkit-box-shadow: 0 0 0 1000px var(--theme-dialog-bg-color) inset;
        -webkit-text-fill-color: var(--theme-text-fg-color) !important;
+        /* stylelint-enable */
    }

    .adf-login-validation {
--- a/lib/core/notifications/components/notification-history.component.scss
+++ b/lib/core/notifications/components/notification-history.component.scss
@@ -25,7 +25,8 @@
            background-color: var(--theme-bg-hover-color);
        }

-        &-message, &-no-message {
+        &-message,
+        &-no-message {
            font-size: 13px !important;
        }

@@ -36,7 +37,6 @@
        &-initiator {
            margin: 4px;
        }
-
    }

    &-notification-initiator-pic {
--- a/lib/core/pagination/pagination.component.scss
+++ b/lib/core/pagination/pagination.component.scss
@@ -1,15 +1,15 @@
@import '~@angular/flex-layout/mq';

-$adf-pagination--height: 48px !default;
-$adf-pagination--icon-button-size: 32px !default;
-$adf-pagination--border: none !default;
-$adf-pagination__empty--height: 48px !default;
-$adf-pagination__empty--border: none !default;
+$adf-pagination-height: 48px !default;
+$adf-pagination-icon-button-size: 32px !default;
+$adf-pagination-border: none !default;
+$adf-pagination-empty-height: 48px !default;
+$adf-pagination-empty-border: none !default;

 .adf-pagination {
    display: flex;
-    border-top: $adf-pagination--border;
-    height: $adf-pagination--height;
+    border-top: $adf-pagination-border;
+    height: $adf-pagination-height;
    line-height: 20px;
    color: var(--theme-text-fg-color);

@@ -17,7 +17,7 @@ $adf-pagination__empty--border: none !default;
        display: flex;
        align-items: center;
        padding: 0 8px;
-        border-right: $adf-pagination--border;
+        border-right: $adf-pagination-border;

        &:first-child {
            flex: 1 1 auto;
@@ -54,10 +54,12 @@ $adf-pagination__empty--border: none !default;
        margin-left: 10px;
    }

-    &__max-items, &__current-page {
+    &__max-items,
+    &__current-page {
        margin-right: 5px;

-        &, & + button {
+        &,
+        & + button {
            color: var(--theme-text-fg-color);
        }

@@ -66,7 +68,8 @@ $adf-pagination__empty--border: none !default;
        }
    }

-    &__previous-button, &__next-button {
+    &__previous-button,
+    &__next-button {
        margin: 0 5px;
    }

@@ -75,13 +78,13 @@ $adf-pagination__empty--border: none !default;
    }

    &.adf-pagination__empty {
-        border-top: $adf-pagination__empty--border;
-        height: $adf-pagination__empty--height;
+        border-top: $adf-pagination-empty-border;
+        height: $adf-pagination-empty-height;
    }

    button[mat-icon-button] {
-        width: $adf-pagination--icon-button-size;
-        height: $adf-pagination--icon-button-size;
-        line-height: $adf-pagination--icon-button-size;
+        width: $adf-pagination-icon-button-size;
+        height: $adf-pagination-icon-button-size;
+        line-height: $adf-pagination-icon-button-size;
    }
 }
--- a/lib/core/search-text/search-text-input.component.scss
+++ b/lib/core/search-text/search-text-input.component.scss
@@ -15,7 +15,6 @@
 }

 .adf {
-
    &-search-fixed-text {
        line-height: normal;
    }
@@ -23,10 +22,12 @@
    &-input-form-field-divider {
        .mat-form-field-underline {
            background-color: var(--adf-search-input-bg-color);
+
            .mat-form-field-ripple {
                background-color: var(--adf-search-input-bg-color);
            }
        }
+
        font-size: 16px;
    }
 }
--- a/lib/core/styles/_colors.scss
+++ b/lib/core/styles/_colors.scss
@@ -1,4 +1,4 @@
-
+/* stylelint-disable */
 // Accent color palette
 $black-87-opacity: rgba(black, 0.87);
 $white-87-opacity: rgba(white, 0.87);
@@ -237,3 +237,4 @@ $alfresco-accent-orange: (
        A700: black,
    )
 );
+/* stylelint-enable */
--- a/lib/core/styles/_index.scss
+++ b/lib/core/styles/_index.scss
@@ -1,10 +1,14 @@
+/* stylelint-disable value-keyword-case */
+/* 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 './theming';
@import '../form/components/widgets/form.theme';
@import '../clipboard/clipboard.theme';
@import './snackbar.theme';
@import './material.theme';
-@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
+@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';

@mixin alfresco-material-theme($theme) {
    @include adf-core-theme($theme);
@@ -98,11 +102,11 @@
    // propagates SCSS variables into the CSS variables scope
    :root {
        @each $name, $value in $defaults {
-        #{$name}: #{$value};
+            #{$name}: #{$value};
        }
    }

    @include mat-datetimepicker-theme($theme);
-    @include adf-snackbar-theme();
-    @include adf-material-theme();
+    @include adf-snackbar-theme;
+    @include adf-material-theme;
 }
--- a/lib/core/styles/_mixins.scss
+++ b/lib/core/styles/_mixins.scss
@@ -1,9 +1,12 @@
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
@mixin adf-no-select {
+    /* stylelint-disable */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
+    /* stylelint-enable */
    user-select: none;
 }

@@ -18,8 +21,6 @@
    display: inline-block;
    word-wrap: normal;
    font-feature-settings: 'liga';
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
 }

@mixin material-animation-default($duration: 0.2s) {
--- a/lib/core/styles/material.theme.scss
+++ b/lib/core/styles/material.theme.scss
@@ -1,5 +1,4 @@
@mixin adf-material-theme() {
-
    .mat-expansion-panel {
        & .mat-expansion-panel-header.cdk-keyboard-focused,
        & .mat-expansion-panel-header.cdk-program-focused,
@@ -20,6 +19,7 @@
                }
            }
        }
+
        .mat-calendar-content {
            .mat-calendar-table-header th {
                color: var(--theme-text-color);
--- a/lib/core/styles/prebuilt/adf-blue-orange.scss
+++ b/lib/core/styles/prebuilt/adf-blue-orange.scss
@@ -1,17 +1,18 @@
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($alfresco-ecm-blue);
-$accent:  mat-palette($alfresco-accent-orange);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($alfresco-accent-orange);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-blue-purple.scss
+++ b/lib/core/styles/prebuilt/adf-blue-purple.scss
@@ -1,17 +1,18 @@
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($mat-pink, 700, 500, 900);
-$accent:  mat-palette($alfresco-accent-purple);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($alfresco-accent-purple);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-cyan-orange.scss
+++ b/lib/core/styles/prebuilt/adf-cyan-orange.scss
@@ -1,17 +1,18 @@
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($alfresco-ecm-cyan);
-$accent:  mat-palette($alfresco-accent-orange);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($alfresco-accent-orange);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-cyan-purple.scss
+++ b/lib/core/styles/prebuilt/adf-cyan-purple.scss
@@ -1,17 +1,18 @@
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($alfresco-ecm-cyan);
-$accent:  mat-palette($alfresco-accent-purple);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($alfresco-accent-purple);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-green-orange.scss
+++ b/lib/core/styles/prebuilt/adf-green-orange.scss
@@ -1,17 +1,18 @@
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($alfresco-bpm-green);
-$accent:  mat-palette($alfresco-accent-orange);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($alfresco-accent-orange);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-green-purple.scss
+++ b/lib/core/styles/prebuilt/adf-green-purple.scss
@@ -1,17 +1,18 @@
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($alfresco-bpm-green);
-$accent:  mat-palette($alfresco-accent-purple);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($alfresco-accent-purple);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-indigo-pink.scss
+++ b/lib/core/styles/prebuilt/adf-indigo-pink.scss
@@ -1,17 +1,19 @@
+/* stylelint-disable value-keyword-case */
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($mat-indigo);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-light-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($mat-pink, A200, A100, A400);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-light-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-pink-bluegrey.scss
+++ b/lib/core/styles/prebuilt/adf-pink-bluegrey.scss
@@ -1,17 +1,19 @@
+/* stylelint-disable value-keyword-case */
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($mat-pink, 700, 500, 900);
-$accent:  mat-palette($mat-blue-grey, A200, A100, A400);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-dark-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($mat-blue-grey, A200, A100, A400);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-dark-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/styles/prebuilt/adf-purple-green.scss
+++ b/lib/core/styles/prebuilt/adf-purple-green.scss
@@ -1,17 +1,19 @@
+/* stylelint-disable value-keyword-case */
@import '../theming';
@import './all-theme';
-
@include mat-core($alfresco-typography);

 $primary: mat-palette($mat-purple, 700, 500, 800);
-$accent:  mat-palette($mat-green, A200, A100, A400);
-$warn:    mat-palette($alfresco-warn);
-$theme:   mat-dark-theme((
-    color: (
-        primary: $primary,
-        accent: $accent,
+$accent: mat-palette($mat-green, A200, A100, A400);
+$warn: mat-palette($alfresco-warn);
+$theme: mat-dark-theme(
+    (
+        color: (
+            primary: $primary,
+            accent: $accent,
+        )
    )
-));
+);

@include angular-material-theme($theme);
@include alfresco-material-theme($theme);
--- a/lib/core/templates/error-content/error-content.component.scss
+++ b/lib/core/templates/error-content/error-content.component.scss
@@ -4,7 +4,6 @@
    flex-direction: column;
    align-items: center;

-
    &-code {
        font-size: 110px;
        font-weight: 300;
@@ -39,7 +38,6 @@

@media screen and (max-width: 959px) {
    .adf-error-content {
-
        &-code {
            margin-top: 100px;
            font-size: 50px;
--- a/lib/core/userinfo/components/user-info.component.scss
+++ b/lib/core/userinfo/components/user-info.component.scss
@@ -1,5 +1,4 @@
 .adf {
-
    &-userinfo-container {
        display: flex;
        align-items: center;
@@ -91,8 +90,6 @@
        line-height: 18px;
        overflow: hidden;
        padding: 32px;
-        -webkit-column-count: 2;
-        -moz-column-count: 2;
        column-count: 2;
        display: flex;
        justify-content: space-between;
@@ -147,7 +144,7 @@
    &-userinfo-profile-initials {
        text-transform: uppercase;
        background-size: cover;
-        background: var(--adf-user-info-color);
+        background-color: var(--adf-user-info-color);
        border-radius: 50%;
        height: 80px;
        width: 80px;
@@ -175,7 +172,6 @@
    &-hide-tab .mat-tab-label-active {
        display: none !important;
    }
-
 }

@media only screen and (min-device-width: 480px) {
@@ -190,4 +186,3 @@
 .mat-menu-panel.adf-userinfo-menu .mat-menu-content {
    padding: 0;
 }
-
--- a/lib/core/viewer/components/img-viewer.component.scss
+++ b/lib/core/viewer/components/img-viewer.component.scss
@@ -6,15 +6,18 @@
            outline-offset: -1px;
            outline: 1px solid var(--theme-accent-color-a200);
        }
+
        display: flex;
        height: 90vh;
        align-items: center;
        justify-content: center;
+
        img {
            max-height: 100%;
            max-width: 100%;
        }
-        /* query for Microsoft IE 11*/
+
+        /* query for Microsoft IE 11 */
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            img {
                height: 100%;
@@ -25,7 +28,6 @@
    &__toolbar {
        position: absolute;
        bottom: 5px;
-
        left: 50%;
        transform: translateX(-50%);

@@ -34,6 +36,7 @@
            background-color: var(--theme-card-bg-color);
            border-width: 0;
            border-radius: 2px;
+            /* stylelint-disable-next-line */
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
        }

@@ -45,6 +48,5 @@
            display: inline-block;
            margin-left: 10px;
        }
-
    }
 }
--- a/lib/core/viewer/components/media-player.component.scss
+++ b/lib/core/viewer/components/media-player.component.scss
@@ -9,7 +9,6 @@
    }

    video.adf-audio-file::-webkit-media-text-track-container {
-        -webkit-transform: translateY(-50%) !important;
        transform: translateY(-50%) !important;
    }
 }
--- a/lib/core/viewer/components/pdf-viewer.component.scss
+++ b/lib/core/viewer/components/pdf-viewer.component.scss
@@ -9,15 +9,9 @@
    margin: 0;

    .adf-loader-container {
-        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-        display: -webkit-flex;     /* NEW - Chrome */
-        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-        -webkit-box-flex-direction: row;
-        -moz-box-flex-direction: row;
-        -webkit-flex-direction: row;
+        display: flex;
        flex-direction: row;
-        height:100%;
+        height: 100%;
    }

    &__thumbnails {
@@ -55,14 +49,13 @@

    .adf-loader-item {
        margin: auto;
-        max-height:100px;
-        max-width:300px;
+        max-height: 100px;
+        max-width: 300px;
    }

    &__toolbar {
        position: absolute;
        bottom: 5px;
-
        left: 50%;
        transform: translateX(-50%);

@@ -71,7 +64,7 @@
            background-color: var(--theme-card-bg-color);
            border-width: 0;
            border-radius: 2px;
-            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 20.4), 0 0 2px 0 rgba(0, 0, 0, 0.12);
        }

        &-page-selector {
--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable scss/at-extend-no-missing-placeholder */
 .adf-full-screen {
    width: 100%;
    height: 100%;
@@ -5,7 +6,6 @@
 }

 .adf-viewer {
-
    position: absolute;
    width: 100%;
    height: 100%;
@@ -46,7 +46,6 @@
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
-
        max-width: 400px;
        text-overflow: ellipsis;
        overflow: hidden;
@@ -58,14 +57,15 @@
    &-container {
        .adf-viewer-layout-content {
            @extend .adf-full-screen;
+
            position: relative;
            overflow-y: hidden;
            overflow-x: hidden;
            z-index: 1;
            background-color: var(--theme-background-color);
-
            display: flex;
            flex-direction: row;
+            /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
            flex-wrap: wrap;
            flex: 1;

@@ -90,6 +90,7 @@

        .adf-viewer-content {
            @extend .adf-full-screen;
+
            flex: 1;

            & > div {