From 8047cece9c86e79d2e836e0eae7ecceb33ca9596 Mon Sep 17 00:00:00 2001 From: Wojciech Duda <69160975+wojd0@users.noreply.github.com> Date: Tue, 12 Mar 2024 14:16:17 +0100 Subject: [PATCH] Improvement/AAE-19176-reapply-selector-changes (#9424) * AAE-19510 remove selector variable * AAE-19510 poc for card view using variable selectors * AAE-19176 rename mat selectors file * AAE-19176 add missing style imports * AAE-19176 remove remaining mat selectors * AAE-19176 replaced todo material selectors with variables * AAE-19176 changes made in meantime * AAE-19176 conflict fixes --- .../form-demo/cloud-form-demo.component.scss | 4 +- .../cloud/cloud-layout.component.scss | 2 + ...rch-chip-autocomplete-input.component.scss | 4 +- .../search-properties.component.scss | 42 ++++----- .../version-list.component.scss | 2 + .../card-view-arrayitem.component.scss | 9 +- .../card-view-dateitem.component.scss | 6 +- ...card-view-keyvaluepairsitem.component.scss | 10 +- .../card-view-selectitem.component.scss | 5 +- .../select-filter-input.component.scss | 6 +- .../card-view-textitem.component.scss | 7 +- .../card-view/card-view.component.scss | 30 +++--- .../src/lib/comments/comments.component.scss | 4 +- .../datatable/datatable.component.scss | 1 + .../dialogs/edit-json/edit-json.dialog.scss | 4 +- .../components/form-renderer.component.scss | 46 ++++------ .../inplace-form-input.component.scss | 11 +-- .../widgets/amount/amount.widget.scss | 7 +- .../widgets/date-time/date-time.widget.scss | 16 ++-- .../form/components/widgets/form.theme.scss | 21 ++--- .../components/widgets/text/text.widget.scss | 5 +- .../info-drawer-layout.component.scss | 4 +- .../info-drawer/info-drawer.component.scss | 20 ++-- .../layout-container.component.scss | 8 +- .../sidenav-layout.component.scss | 3 +- .../notification-history.component.scss | 10 +- .../search-text-input.component.scss | 10 +- .../snackbar-content.component.scss | 4 +- lib/core/src/lib/styles/_mat-selectors.scss | 91 +++++++++++++++++++ lib/core/src/lib/styles/material.theme.scss | 22 +++-- .../empty-content.component.scss | 2 + .../img-viewer/img-viewer.component.scss | 4 +- .../pdf-viewer/pdf-viewer.component.scss | 6 +- .../viewer-render.component.scss | 2 + .../viewer/components/viewer.component.scss | 6 +- .../buttons-menu/buttons-menu.component.html | 2 +- .../buttons-menu/buttons-menu.component.scss | 5 +- .../form/components/form-cloud.component.scss | 5 +- .../widgets/date/date-cloud.widget.scss | 11 +-- .../src/lib/app-list/apps-list.component.scss | 3 +- .../form/start-form/start-form.component.scss | 35 +++---- .../attach-file-widget-dialog.component.scss | 4 +- .../attach-file-widget.component.scss | 15 ++- .../attach-folder-widget.component.scss | 4 +- .../widgets/dropdown/dropdown.widget.scss | 4 +- .../form/widgets/people/people.widget.scss | 5 +- .../form/widgets/upload/upload.widget.scss | 4 +- .../components/people/people.component.scss | 4 +- .../start-process.component.html | 2 +- .../start-process.component.scss | 9 +- .../process-user-info.component.scss | 15 +-- .../attach-form/attach-form.component.scss | 4 +- .../checklist/checklist.component.scss | 4 +- .../start-task/start-task.component.scss | 15 ++- .../task-details/task-details.component.scss | 6 +- .../task-form/task-form.component.scss | 7 +- .../task-standalone.component.scss | 4 +- 57 files changed, 366 insertions(+), 235 deletions(-) create mode 100644 lib/core/src/lib/styles/_mat-selectors.scss diff --git a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss index 3d9a0ea5fc4..729b370329e 100644 --- a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss +++ b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .app-form-container { padding: 10px; } @@ -31,7 +33,7 @@ } .app-form-editor-buttons { - & > .mat-mdc-raised-button { + & > #{$mat-raised-button} { margin-right: 5px; } } diff --git a/demo-shell/src/app/components/cloud/cloud-layout.component.scss b/demo-shell/src/app/components/cloud/cloud-layout.component.scss index ffe293b04a5..433d0c57565 100644 --- a/demo-shell/src/app/components/cloud/cloud-layout.component.scss +++ b/demo-shell/src/app/components/cloud/cloud-layout.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .app-cloud-layout-overflow { overflow: auto; } diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss index b79a87f9d31..59efb97e0ce 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss @@ -1,10 +1,12 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + adf-search-chip-autocomplete-input { .adf-chip-list { width: 100%; } - .mat-mdc-form-field-infix { + #{$mat-form-field-infix} { border: none; } diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss index 42225e3fc0e..b382eb3ae79 100644 --- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss +++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss @@ -1,4 +1,6 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + adf-search-properties { .adf-search-properties-file-size-label { display: block; @@ -19,14 +21,14 @@ adf-search-properties { .adf-search-properties-file-size-operator, .adf-search-properties-file-size-unit { - .mat-mdc-form-field-infix { + #{$mat-form-field-infix} { border: 1px solid var(--adf-theme-mat-grey-color-a400); border-radius: 5px; padding: 9px; } - &.mat-focused { - .mat-mdc-form-field-infix { + &#{$mat-focused} { + #{$mat-form-field-infix} { outline: 2px auto -webkit-focus-ring-color; } } @@ -39,33 +41,31 @@ adf-search-properties { adf-search-chip-autocomplete-input { display: block; - .mdc-text-field--outlined { - .mdc-text-field--outlined { - &-start, - &-end { - border-top: 1px solid var(--adf-theme-mat-grey-color-a400); - border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400); - } + #{$mat-text-field-outlined} { + &-start, + &-end { + border-top: 1px solid var(--adf-theme-mat-grey-color-a400); + border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400); + } - &-start { - border-left: 1px solid var(--adf-theme-mat-grey-color-a400); - } + &-start { + border-left: 1px solid var(--adf-theme-mat-grey-color-a400); + } - &-end { - border-right: 1px solid var(--adf-theme-mat-grey-color-a400); - } + &-end { + border-right: 1px solid var(--adf-theme-mat-grey-color-a400); } } - .mat-focused { - .mdc-text-field--outlined { + #{$mat-focused} { + #{$mat-text-field-outlined} { outline: 2px auto -webkit-focus-ring-color; } } - .mat-form-field-appearance-outline { - .mdc-text-field--outlined-thick { - .mdc-text-field--outlined { + #{$mat-form-field-appearance-outline} { + #{$mat-text-field-outlined-thick} { + #{$mat-text-field-outlined} { &-start, &-end { border-width: 1px; diff --git a/lib/content-services/src/lib/version-manager/version-list.component.scss b/lib/content-services/src/lib/version-manager/version-list.component.scss index 35d94ae7df8..642e66055e7 100644 --- a/lib/content-services/src/lib/version-manager/version-list.component.scss +++ b/lib/content-services/src/lib/version-manager/version-list.component.scss @@ -1,4 +1,6 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + .adf-version-list { &-viewport { height: 100%; diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss index 5554653b573..7f940c09dbf 100644 --- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf { &-array-item-icon { font-size: var(--theme-subheading-2-font-size); @@ -21,7 +23,7 @@ } &-array-item-more-chip-container { - &.mat-mdc-card { + &#{$mat-card} { box-shadow: none; max-height: 300px; overflow-y: auto; @@ -29,8 +31,7 @@ } &-property-value { - /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */ - .mat-chip-list { + #{$mat-chip-list} { padding-top: 6px; } } @@ -46,7 +47,7 @@ border-color: var(--adf-card-view-array-item-border-color); border-radius: var(--adf-card-view-array-item-border-radius); - .mat-mdc-chip:hover { + #{$mat-chip}:hover { cursor: pointer; } } diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss index 2683836d77d..de7b0680c06 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-card-view-dateitem { .adf-property-value { padding: 6px 0; @@ -43,13 +45,13 @@ justify-content: space-between; padding-bottom: 6px; - button.mat-mdc-icon-button { + button#{$mat-icon-button} { line-height: 20px; height: 20px; width: 20px; } - mat-icon { + #{$mat-icon} { width: 16px; height: 16px; opacity: 0.5; diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss index 5d9414d7f59..ae3a58be839 100644 --- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-card-view-key-value-pairs-item { .adf-property-col-key { width: 50%; @@ -26,19 +28,19 @@ justify-content: center; } - &__add-btn.mat-mdc-button { + &__add-btn#{$mat-button} { margin-bottom: 20px; } &__read-only { padding-bottom: 20px; - .mat-mdc-table { + #{$mat-table} { box-shadow: none; } - .mat-mdc-header-row, - .mat-mdc-row { + #{$mat-header-row}, + #{$mat-row} { padding: 0; } } diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss index d7c7c337cb0..37e524040e9 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-card-view-selectitem { .adf-property-value { width: 100%; @@ -19,8 +21,7 @@ margin-top: 0; border-radius: 6px; - /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */ - .mat-mdc-select-value { + #{$mat-select-value} { color: var(--adf-metadata-action-button-clear-color); } } diff --git 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 index 44f2fa1e2f0..6cad0a356ad 100644 --- 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 @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + $select-filter-height: 4em !default; .adf-select-filter-input { @@ -16,12 +18,12 @@ $select-filter-height: 4em !default; background: var(--adf-theme-background-card-color); } - .mat-mdc-form-field { + #{$mat-form-field} { width: 100%; } } -.mat-mdc-select-panel.adf-select-filter { +#{$mat-select-panel}.adf-select-filter { transform: none !important; overflow-x: hidden !important; max-height: calc(256px + #{$select-filter-height}); diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index 5bc3296677a..e61f87223d2 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-card-view-textitem { .adf-property-field { padding-top: 15px; @@ -32,8 +34,7 @@ } .adf-textitem-chip-list-container { - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-label { + #{$mat-form-field-label} { margin-top: 6px; } } @@ -47,7 +48,7 @@ } .adf-property-field { - .mat-mdc-input-element { + #{$mat-input-element} { color: var(--theme-primary-color); cursor: pointer; } diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss index e4b471239c9..2ecacc95a49 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-property-list { background: var(--adf-card-view-background); border: var(--adf-card-view-border); @@ -27,13 +29,11 @@ .adf-property-field { width: 100%; - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-underline { + #{mat-form-field-underline} { display: none; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-input-element { + #{mat-input-element} { text-overflow: ellipsis; color: var(--adf-metadata-property-panel-title-color); padding: 6px 0; @@ -41,37 +41,33 @@ } .adf-card-view__key-value-pairs__row { - .mat-mdc-input-element { + #{$mat-input-element} { margin-top: 0; padding-left: 12px; } } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-infix { + + #{$mat-form-field-infix} { border-top-width: 0; padding: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-flex { + #{$mat-form-field-flex} { padding-top: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-wrapper { + #{$mat-form-field-wrapper} { padding-bottom: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-label { + #{$mat-form-field-label} { padding: 0; justify-content: center; display: flex; flex-direction: column; height: 20px; - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - &.mat-form-field-empty { + &.adf-property-field-label--empty { transform: translateY(-1.3437em) scale(1); } } @@ -86,7 +82,7 @@ background-color: var(--adf-metadata-buttons-background-color); border-radius: 6px; - &.mat-mdc-input-element { + #{$mat-input-element} { color: var(--adf-metadata-action-button-clear-color); padding: 6px 0 6px 12px; margin: 5px 0 0; @@ -96,7 +92,7 @@ &.adf-property-readonly-value { color: var(--adf-metadata-property-panel-label-color); - &.mat-mdc-input-element { + #{$mat-input-element} { color: var(--adf-metadata-property-panel-label-color); } } diff --git a/lib/core/src/lib/comments/comments.component.scss b/lib/core/src/lib/comments/comments.component.scss index 7e4ba0a115e..630112ef7b7 100644 --- a/lib/core/src/lib/comments/comments.component.scss +++ b/lib/core/src/lib/comments/comments.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + adf-comments { .adf-comments-container { height: 100%; @@ -24,7 +26,7 @@ adf-comments { resize: vertical; } - .mat-mdc-form-field { + #{$mat-form-field} { width: 100%; } } diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss index cc5e3f36f53..b7c10f95c4c 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss @@ -1,6 +1,7 @@ /* stylelint-disable no-descending-specificity */ @use '@angular/material' as mat; @import '../../../styles/mixins'; +@import 'styles/mat-selectors'; $data-table-header-font-size: var(--theme-caption-font-size) !default; $data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default; diff --git a/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss b/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss index cea70c054fb..a383423e9e5 100644 --- a/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss +++ b/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss @@ -1,5 +1,7 @@ +@import 'styles/mat-selectors'; + .adf-edit-json-dialog { - .mat-mdc-dialog-content { + #{$mat-dialog-content} { height: 300px; overflow: hidden; } diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss index 9364b4d3a53..77db5cf081a 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.scss +++ b/lib/core/src/lib/form/components/form-renderer.component.scss @@ -1,5 +1,6 @@ /* stylelint-disable selector-class-pattern */ @import 'styles/flex'; +@import 'styles/mat-selectors'; .adf-hidden { display: none; @@ -83,7 +84,7 @@ } } - .mat-mdc-form-field { + #{$mat-form-field} { width: 100%; } @@ -91,12 +92,11 @@ width: 100%; } - /* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */ - .mat-input-placeholder { - top: 1.8em; + #{mat-input-placeholder} { + top: 1.8em !important; } - .mat-focused { + #{$mat-form-field} { label { transform: scaleX(1); transition: transform 150ms linear; @@ -104,13 +104,12 @@ color: var(--theme-primary-color); } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-prefix { + #{$mat-form-field-prefix} { color: var(--theme-primary-color); } } - .mat-grid-tile { + #{$mat-grid-tile} { overflow: visible; width: 80%; } @@ -125,25 +124,20 @@ max-width: 100%; max-height: 100%; - & .mat-mdc-card { + & #{$mat-card} { padding: 16px 24px; overflow: hidden; } - - /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */ - & .mat-mdc-card-header-text { + + & #{$mat-card-header-text} { margin: 0 !important; } - - /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ - & .mat-tab-body-content { + & #{$mat-tab-body-content} { overflow: hidden; } - - /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ - & .mdc-tab__text-label { + & #{mat-tab-label-text} { font-size: var(--theme-subheading-2-font-size); line-height: var(--theme-headline-line-height); letter-spacing: -0.4px; @@ -152,13 +146,11 @@ text-transform: uppercase; } - & .mat-ink-bar { + & #{$mat-tab-ink-bar} { height: 4px; } - - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - & .mat-mdc-text-field-wrapper { + & #{$mat-form-field-wrapper} { margin: 0 12px 0 0; } } @@ -223,13 +215,12 @@ padding-bottom: 25px !important; padding-right: 25px !important; - & .mat-mdc-button { + & #{$mat-button} { height: 36px; border-radius: 5px; } - /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */ - & .mdc-button__label { + & #{$mat-button-label} { width: 58px; height: 20px; opacity: 0.54; @@ -246,8 +237,7 @@ } } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - &-left-label-input-container .mat-form-field-label-wrapper { + &-left-label-input-container #{$mat-form-field-label} { top: auto; bottom: 0; } @@ -261,7 +251,7 @@ form-field { width: 100%; - .mat-mdc-input-element { + #{$mat-input-element} { font-size: var(--theme-body-2-font-size); padding-top: 8px; line-height: normal; diff --git 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 index 659ed85c538..8da79786c46 100644 --- 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 @@ -1,20 +1,19 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + $adf-inplace-input-padding: 7px; .adf-inplace-input-container { - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-underline { + #{$mat-form-field-underline} { display: none; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-infix { + #{$mat-form-field-infix} { display: flex; border-top: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-label { + #{$mat-form-field-label} { padding: $adf-inplace-input-padding; } diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss index 7711107cc57..54521bf5eea 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss @@ -1,4 +1,7 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + + .adf { &-amount-widget { width: 100%; @@ -12,11 +15,11 @@ &-amount-widget__input { margin-top: -15px; - .mat-focused { + #{$mat-focused} { transition: none; } - &:not(.mat-focused):not(.mat-form-field-invalid) { + &:not(#{$mat-focused}):not(#{$mat-form-field-invalid}) { .adf-amount-widget__prefix-spacing { color: var(--adf-theme-foreground-secondary-text-color); } diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss index c983660144c..61418107601 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss @@ -1,25 +1,23 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + .adf { &-date-time-widget { - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-text-suffix { + #{$mat-form-field-suffix} { top: 26px; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-label-wrapper { + #{$mat-form-field-label} { top: 20px; } } &-left-label-input-datepicker { - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-text-suffix { + #{$mat-form-field-suffix} { top: 0; - } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-infix { + } + #{$mat-form-field-infix} { width: 100%; } } diff --git a/lib/core/src/lib/form/components/widgets/form.theme.scss b/lib/core/src/lib/form/components/widgets/form.theme.scss index 617c61fe09c..6d42172b100 100644 --- a/lib/core/src/lib/form/components/widgets/form.theme.scss +++ b/lib/core/src/lib/form/components/widgets/form.theme.scss @@ -1,4 +1,6 @@ /* stylelint-disable no-descending-specificity */ +@import 'styles/mat-selectors'; + ul > li > form-field > .adf-focus { .adf-label { color: var(--theme-primary-color); @@ -34,17 +36,15 @@ ul > li > form-field > .adf-focus { } &-invalid { - /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */ - .mat-mdc-checkbox { + #{$mat-checkbox} { padding-bottom: 12px; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-underline { - background-color: var(--theme-warn-color); + #{$mat-form-field-underline} { + background-color: var(--theme-warn-color) !important; } - .mat-mdc-select { + #{$mat-select} { &-arrow { color: var(--adf-theme-foreground-secondary-text-color) !important; } @@ -54,8 +54,7 @@ ul > li > form-field > .adf-focus { border-color: var(--theme-warn-color); } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-prefix { + #{$mat-form-field-prefix} { color: var(--adf-theme-foreground-secondary-text-color); } @@ -72,9 +71,9 @@ ul > li > form-field > .adf-focus { /* query for Microsoft IE 11 */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { adf-form-field { - .mat-mdc-input-element, - .mat-mdc-select, - .mat-mdc-form-field { + #{$mat-input-element}, + #{$mat-select}, + #{$mat-form-field} { display: block !important; } } diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.scss b/lib/core/src/lib/form/components/widgets/text/text.widget.scss index 23f4b1660d1..384097a9b5a 100644 --- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss +++ b/lib/core/src/lib/form/components/widgets/text/text.widget.scss @@ -1,10 +1,11 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + .adf { &-text-widget { width: 100%; - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-label-wrapper { + #{$mat-form-field-label} { top: 20px; } } diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss index b6962ff876b..8e8beea2aac 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss @@ -1,4 +1,5 @@ @import '../styles/mixins'; +@import 'styles/mat-selectors'; $adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default; $adf-info-drawer-icon-size: 48px !default; @@ -68,8 +69,7 @@ $adf-info-drawer-icon-size-half: 24px !default; margin-bottom: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ - .adf-info-drawer-tabs .mat-tab-body-content { + .adf-info-drawer-tabs #{$mat-tab-body-content} { .adf-manage-versions-empty, .adf-manage-versions-no-permission { margin: 0; diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.scss b/lib/core/src/lib/info-drawer/info-drawer.component.scss index f57ba728e12..00c6df94504 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf { &-info-drawer { .adf-metadata-properties-panel { @@ -5,8 +7,7 @@ margin: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ - .mdc-tab__text-label { + #{$mat-tab-label-text} { min-width: 0; } @@ -30,36 +31,33 @@ } .adf-info-drawer-tabs { - /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ - & .mat-tab-body-content > * { + & #{$mat-tab-body-content} > * { margin-bottom: 20px; display: block; } - /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ - & .mat-tab-body-content > *:last-child { + & #{$mat-tab-body-content} > *:last-child { margin-bottom: 0; } .mdc-tab__text-label { flex-grow: 1; - .mat-icon + span { + #{$mat-icon} + span { padding-left: 5px; } } - .mat-ink-bar { + #{$mat-tab-ink-bar} { height: 2px; } - .mat-mdc-tab-body { + #{$mat-tab-body} { padding: 10px; overflow-y: hidden; } - /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ - .mat-tab-body-content { + #{$mat-tab-body-content} { /* stylelint-disable */ overflow: auto; /* stylelint-enable */ diff --git 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 index 64a375a4f5a..0fbd5851465 100644 --- 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 @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + adf-layout-container { display: block; width: 100%; @@ -29,9 +31,9 @@ adf-layout-container { background-color: var(--theme-background-color); } -/* stylelint-disable selector-class-pattern declaration-no-important */ -mat-sidenav-content.mat-sidenav-content, -.mat-drawer-transition .mat-drawer-content { +/* stylelint-disable selector-class-pattern */ +#{$mat-sidenav-content}, +#{$mat-drawer-transition} #{$mat-drawer-content} { margin-left: 0 !important; transform: unset !important; transition-property: unset !important; diff --git 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 index c09f22e8982..74642ea88d7 100644 --- 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 @@ -1,5 +1,6 @@ @use '../../../styles/flex' as flex; @import '../../../styles/mixins'; +@import 'styles/mat-selectors'; .adf-sidenav-layout { &-full-space { @@ -25,7 +26,7 @@ } /* stylelint-disable-next-line selector-class-pattern */ - .mat-drawer-content { + #{$mat-drawer-content} { @include flex-column; position: unset; diff --git a/lib/core/src/lib/notifications/components/notification-history.component.scss b/lib/core/src/lib/notifications/components/notification-history.component.scss index dd1757fd6e8..9ebd92af3ae 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.scss +++ b/lib/core/src/lib/notifications/components/notification-history.component.scss @@ -1,5 +1,7 @@ +@import 'styles/mat-selectors'; + .adf { - &-notification-history-menu_button.mat-mdc-button { + &-notification-history-menu_button#{$mat-button} { margin-right: 0; border-radius: 90%; padding: 0; @@ -7,7 +9,7 @@ height: 40px; } - &-notification-history-list .mat-mdc-subheader { + &-notification-history-list #{$mat-subheader} { justify-content: space-between; } @@ -61,11 +63,11 @@ } } -.mat-mdc-menu-panel.adf-notification-history-menu { +#{$mat-menu-panel}.adf-notification-history-menu { min-width: 320px; max-height: 500px; - .mat-mdc-menu-content { + #{$mat-menu-content} { padding: 0; } } diff --git a/lib/core/src/lib/search-text/search-text-input.component.scss b/lib/core/src/lib/search-text/search-text-input.component.scss index bc1a72a1737..2d57d20ce87 100644 --- 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,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-search-container:has(.adf-input-form-field-divider) { overflow: hidden; } @@ -20,14 +22,8 @@ } &-input-form-field-divider { - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-underline { + #{$mat-form-field-underline} { background-color: var(--adf-theme-primary-50); - - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mdc-line-ripple { - background-color: var(--adf-theme-primary-50); - } } font-size: var(--theme-subheading-2-font-size); diff --git a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss index f3260fca7d7..5c509d2dfb9 100644 --- a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss +++ b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + :host { display: flex; align-items: center; @@ -16,7 +18,7 @@ .adf-snackbar-message-content-action { margin-left: 24px; - .mat-mdc-button { + #{$mat-button} { min-width: 0; margin: -8px; diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss new file mode 100644 index 00000000000..7312d238623 --- /dev/null +++ b/lib/core/src/lib/styles/_mat-selectors.scss @@ -0,0 +1,91 @@ +$material-icons: ".material-icons"; +$mat-icon: ".mat-icon"; +$mat-icon-button: ".mat-mdc-icon-button"; +$mat-accent: ".mat-accent"; +$mat-focused: ".mat-focused"; +$mat-line: ".mat-line"; +$mat-tab-label: ".mat-mdc-tab"; +$mat-tab-label-active: ".mdc-tab--active"; +$mat-tab-label-content: ".mdc-tab__content"; +$mat-tab-label-container: ".mat-mdc-tab-label-container"; +$mat-tab-label-text: ".mdc-tab__text-label"; +$mat-tab-list: ".mat-mdc-tab-list"; +$mat-tab-body: ".mat-mdc-tab-body"; +$mat-tab-body-wrapper: ".mat-mdc-tab-body-wrapper"; +$mat-tab-body-content: ".mat-mdc-tab-body-content"; +$mat-tab-header: ".mat-mdc-tab-header"; +$mat-tab-header-pagination: ".mat-mdc-tab-header-pagination"; +$mat-tab-header-pagination-controls-enabled: ".mat-mdc-tab-header-pagination-controls-enabled"; +$mat-tab-labels: ".mat-mdc-tab-labels"; +$mat-tab-ink-bar: ".mdc-tab-indicator"; +$mat-chip: ".mat-mdc-chip"; +$mat-chip-list: ".mat-mdc-chip-list"; +$mat-chip-list-wrapper: ".mat-chip-list-wrapper"; +$mat-checkbox: ".mat-mdc-checkbox"; +$mat-checkbox-frame: ".mdc-checkbox__checkmark"; +$mat-checkbox-label: ".mdc-label"; +$mat-checkbox-checked: ".mat-mdc-checkbox-checked"; +$mat-button: ".mat-mdc-button"; +$mat-button-label: ".mdc-button__label"; +$mat-button-label-text: ".mdc-button__label"; +$mat-button-focus-overlay: ".mat-mdc-focus-indicator"; +$mat-raised-button: ".mat-mdc-raised-button"; +$mat-radio-outer-circle: ".mdc-radio__outer-circle"; +$mat-radio-inner-circle: ".mdc-radio__inner-circle"; +$mat-radio-checked: ".mat-mdc-radio-checked"; +$mat-radio-label-content: ".mdc-label"; +$mat-radio-label: ".mdc -label"; +$mat-progress-bar: ".mat-mdc-progress-bar"; +$mat-progress-bar-buffer: ".mdc-linear-progress__buffer"; +$mat-progress-spinner: ".mat-mdc-progress-spinner"; +$mat-form-field: ".mat-mdc-form-field"; +$mat-form-field-flex: ".mat-mdc-form-field-flex"; +$mat-form-field-wrapper: ".mat-mdc-text-field-wrapper"; +$mat-form-field-underline: ".mdc-line-ripple"; +$mat-form-field-subscript-wrapper: ".mat-mdc-form-field-subscript-wrapper"; +$mat-form-field-prefix: ".mat-mdc-form-field-text-prefix"; +$mat-form-field-suffix: ".mat-mdc-form-field-text-suffix"; +$mat-form-field-infix: ".mat-mdc-form-text-infix"; +$mat-form-field-label: ".mat-mdc-floating-label"; +$mat-form-field-invalid: ".mat-form-field-invalid"; +$mat-form-field-appearance-outline: ".mat-form-field-appearance-outline"; +$mat-text-field-outlined: ".mdc-text-field--outlined"; +$mat-text-field-outlined-thick: ".mdc-text-field--outlined-thick"; +$mat-dialog-actions: ".mat-mdc-dialog-actions"; +$mat-dialog-container: ".mdc-dialog__container"; +$mat-dialog-content: ".mat-mdc-dialog-content"; +$mat-button-toggle: ".mat-button-toggle"; +$mat-button-toggle-checked: ".mat-button-toggle-checked"; +$mat-button-toggle-disabled: ".mat-button-toggle-disabled"; +$mat-button-toggle-focus-overlay: ".mat-button-toggle-focus-overlay"; +$mat-input-element: ".mat-mdc-input-element"; +$mat-card: ".mat-mdc-card"; +$mat-card-actions: ".mat-mdc-card-actions"; +$mat-card-header-text: ".mat-mdc-card-header-text"; +$mat-card-title: ".mat-mdc-card-title"; +$mat-mini-fab: ".mat-mdc-mini-fab"; +$mat-list-item-primary-text: ".mdc-list-item__primary-text"; +$mat-table: ".mat-mdc-table"; +$mat-header-row: ".mat-mdc-header-row"; +$mat-row: ".mat-mdc-row"; +$mat-select: ".mat-mdc-select"; +$mat-select-value: ".mat-select-value"; +$mat-select-value-text: ".mat-mdc-select-value-text"; +$mat-select-panel: ".mat-mdc-select-panel"; +$mat-grid-tile: ".mat-grid-tile"; +$mat-sidenav-content: ".mat-sidenav-content"; +$mat-drawer-transition: ".mat-drawer-transition"; +$mat-drawer-content: ".mat-drawer-content"; +$mat-subheader: ".mat-mdc-subheader"; +$mat-menu-panel: ".mat-mdc-menu-panel"; +$mat-menu-content: ".mat-mdc-menu-content"; +$mat-expansion-panel: ".mat-expansion-panel"; +$mat-expansion-panel-header: ".mat-expansion-panel-header"; +$mat-expanded: ".mat-expanded"; +$mat-calendar: ".mat-calendar"; +$mat-calendar-header: ".mat-calendar-header"; +$mat-calendar-content: ".mat-calendar-content"; +$mat-calendar-table-header: ".mat-calendar-table-header"; +$mat-calendar-body-disabled: ".mat-calendar-body-disabled"; +$mat-toolbar: ".mat-toolbar"; +$mat-slide-toggle: ".mat-mdc-slide-toggle"; diff --git a/lib/core/src/lib/styles/material.theme.scss b/lib/core/src/lib/styles/material.theme.scss index 8658a578e54..accc8cb91db 100644 --- a/lib/core/src/lib/styles/material.theme.scss +++ b/lib/core/src/lib/styles/material.theme.scss @@ -1,16 +1,18 @@ +@import './mat-selectors'; + @mixin adf-material-theme() { - .mat-expansion-panel { - & .mat-expansion-panel-header.cdk-keyboard-focused, - & .mat-expansion-panel-header.cdk-program-focused, - &:not(.mat-expanded) .mat-expansion-panel-header:hover { + #{$mat-expansion-panel} { + & #{$mat-expansion-panel-header}.cdk-keyboard-focused, + & #{$mat-expansion-panel-header}.cdk-program-focused, + &:not(#{$mat-expanded}) #{$mat-expansion-panel-header}:hover { &:not([aria-disabled='true']) { background-color: var(--adf-theme-background-hover-color); } } } - .mat-calendar { - .mat-calendar-header { + #{$mat-calendar} { + #{$mat-calendar-header} { button { color: var(--adf-theme-foreground-text-color-087); @@ -20,13 +22,13 @@ } } - .mat-calendar-content { - .mat-calendar-table-header th { + #{$mat-calendar-content} { + #{$mat-calendar-table-header} th { color: var(--adf-theme-foreground-text-color-054); } - .mat-calendar-body-disabled > div { - color: var(--adf-theme-foreground-text-color-054); + #{$mat-calendar-body-disabled} > div { + color: var(--adf-theme-foreground-text-color-054) !important; } } } diff --git a/lib/core/src/lib/templates/empty-content/empty-content.component.scss b/lib/core/src/lib/templates/empty-content/empty-content.component.scss index 2f015a1609d..eef5b5dde7c 100644 --- a/lib/core/src/lib/templates/empty-content/empty-content.component.scss +++ b/lib/core/src/lib/templates/empty-content/empty-content.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-empty-content { color: var(--adf-theme-foreground-text-color-054); display: flex; diff --git a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss index 079d1bff5d6..1d37215e2da 100644 --- a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-image-viewer { width: 100%; @@ -31,7 +33,7 @@ left: 50%; transform: translateX(-50%); - .adf-toolbar .adf-toolbar-container { + .adf-toolbar #{$mat-toolbar} { max-height: 48px; background-color: var(--adf-theme-background-card-color); border-width: 0; diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss index b9f72a20f62..5e79316f34f 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-pdf-viewer { width: 100%; height: 100%; @@ -77,7 +79,7 @@ max-height: 100px; max-width: 300px; - &-progress-bar { + #{$mat-progress-bar} { max-width: 300px; margin: 0; position: absolute; @@ -96,7 +98,7 @@ left: 50%; transform: translateX(-50%); - .adf-toolbar .adf-toolbar-container { + .adf-toolbar #{$mat-toolbar} { max-height: 48px; background-color: var(--adf-theme-background-card-color); border-width: 0; diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss index 86e1be508c9..c79a8b06695 100644 --- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss +++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss @@ -1,4 +1,6 @@ /* stylelint-disable scss/at-extend-no-missing-placeholder */ +@import 'styles/mat-selectors'; + .adf-full-screen { width: 100%; height: 100%; diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss index 5b86796b06e..54e6aa6fc45 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.scss +++ b/lib/core/src/lib/viewer/components/viewer.component.scss @@ -1,4 +1,6 @@ /* stylelint-disable scss/at-extend-no-missing-placeholder */ +@import 'styles/mat-selectors'; + .adf-full-screen { width: 100%; height: 100%; @@ -10,7 +12,7 @@ width: 100%; height: 100%; - .mat-toolbar { + #{$mat-toolbar} { color: var(--adf-theme-foreground-text-color-054); .adf-toolbar-title { @@ -29,7 +31,7 @@ } &-toolbar { - .mat-toolbar { + #{$mat-toolbar} { background-color: var(--adf-theme-background-card-color-087); } } diff --git a/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.html b/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.html index 6edbf0a2f46..0a16cee0ee3 100644 --- a/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.html +++ b/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.html @@ -17,4 +17,4 @@ - \ No newline at end of file + diff --git a/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss b/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss index 3e5c76bc10e..e1117466457 100644 --- a/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss +++ b/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-buttons-menu { margin-right: 10px; @@ -21,8 +23,7 @@ display: none; } - /* stylelint-disable selector-class-pattern */ - button > .mat-icon { + button > #{$material-icons} { color: black; margin: 0 10px; } diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss index 2f2d1396fc5..678b70b25c6 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss @@ -1,5 +1,7 @@ +@import 'styles/mat-selectors'; /* cspell: disable-next-line */ /* stylelint-disable scss/at-extend-no-missing-placeholder */ + .adf-full-screen { width: 100%; height: 100%; @@ -31,8 +33,7 @@ } &-toolbar { - /* stylelint-disable-next-line selector-class-pattern */ - .mat-toolbar { + #{$mat-toolbar} { background-color: var(--adf-theme-background-card-color-087); } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss index 9fefab32d6d..5fe5ab9fbf3 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss @@ -1,9 +1,10 @@ /* stylelint-disable selector-class-pattern */ +@import 'styles/mat-selectors'; + .adf { // eslint-disable-selector-class-pattern &-date-widget { - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-text-suffix { + #{$mat-form-field-suffix} { top: 26px; } @@ -13,13 +14,11 @@ } &-left-label-input-datepicker { - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-text-suffix { + #{$mat-form-field-suffix} { top: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-mdc-form-field-infix { + #{$mat-form-field-infix} { width: 100%; } } diff --git a/lib/process-services/src/lib/app-list/apps-list.component.scss b/lib/process-services/src/lib/app-list/apps-list.component.scss index 457e4f68694..eec0ce350af 100644 --- a/lib/process-services/src/lib/app-list/apps-list.component.scss +++ b/lib/process-services/src/lib/app-list/apps-list.component.scss @@ -1,4 +1,5 @@ @import 'styles/flex'; +@import 'styles/mat-selectors'; /* stylelint-disable scss/no-global-function-names */ @mixin adf-line-clamp($line-height: 1.25, $lines: 3) { @@ -48,7 +49,7 @@ $tile-themes: ( flex-direction: column; height: 85vh; - .mat-mdc-progress-spinner { + #{$mat-progress-spinner} { margin: 0 auto; } } diff --git a/lib/process-services/src/lib/form/start-form/start-form.component.scss b/lib/process-services/src/lib/form/start-form/start-form.component.scss index 8bf19cef05f..53164ccfc5b 100644 --- a/lib/process-services/src/lib/form/start-form/start-form.component.scss +++ b/lib/process-services/src/lib/form/start-form/start-form.component.scss @@ -1,22 +1,23 @@ +@import 'styles/mat-selectors'; + .adf-form-container { max-width: 100%; max-height: 100%; - & .mat-mdc-card { + & #{$mat-card} { padding: 16px 24px; overflow: hidden; } - & .mat-mdc-card-header-text { + & #{$mat-card-header-text} { margin: 0; } - & .mat-tab-body-content { + & #{$mat-tab-body-content} { overflow: hidden; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - & .mdc-tab__text-label { + & #{$mat-tab-label-text} { font-size: var(--theme-subheading-2-font-size); line-height: var(--theme-headline-line-height); letter-spacing: -0.4px; @@ -25,14 +26,14 @@ text-transform: uppercase; } - & .mat-ink-bar { + & #{$mat-tab-ink-bar} { height: 4px; } - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - & .mat-mdc-text-field-wrapper { + & #{$mat-form-field-wrapper} { margin: 0 12px 0 0; } +} .adf-form-container-card { .adf { @@ -92,27 +93,27 @@ padding-bottom: 25px; padding-right: 25px; - & .mat-mdc-button { + & #{$mat-button} { height: 36px; border-radius: 5px; } - & .mdc-button__label { - width: 58px; - height: 20px; - opacity: 0.54; - font-size: var(--theme-body-2-font-size); - font-weight: bold; - } + & #{$mat-button-label} { + width: 58px; + height: 20px; + opacity: 0.54; + font-size: var(--theme-body-2-font-size); + font-weight: bold; } } } } + form-field { width: 100%; - .mat-mdc-input-element { + #{$mat-input-element} { font-size: var(--theme-body-2-font-size); padding-top: 8px; line-height: normal; diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss index a60effd3f23..b89d90dc515 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss @@ -1,5 +1,7 @@ +@import 'styles/mat-selectors'; + .adf-attach-file-widget-dialog { - .mat-mdc-dialog-actions { + #{$mat-dialog-actions} { background-color: var(--theme-background-color); display: flex; justify-content: flex-end; diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss index 0f5968d65fc..6542d8b7d2f 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss @@ -1,4 +1,5 @@ @import 'styles/flex'; +@import 'styles/mat-selectors'; .adf { &-attach-widget-container { @@ -39,12 +40,11 @@ &-attach-widget-repo-button { padding-left: 10px; - /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */ - .mdc-button__label { + #{$mat-button-label} { display: inline; } - .mat-mdc-mini-fab.mat-accent { + #{$mat-mini-fab}#{$mat-accent} { background-color: inherit; } } @@ -67,18 +67,17 @@ } &-attach-files-row { - .mat-line { + #{$mat-line} { margin-bottom: 0; } - /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */ - .mdc-list-item__primary-text { + #{$mat-list-item-primary-text} { max-width: 200px; } @include layout-bp(lt-md) { - /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */ - .mdc-list-item__primary-text { + + #{$mat-list-item-primary-text} { max-width: 150px; } } diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss index b2165fc946e..a376e31d69d 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf { &-attach-folder-widget-container { margin-bottom: 15px; @@ -26,7 +28,7 @@ &-attach-folder-files-row { padding-left: 8px; - .mat-line { + #{$mat-line} { margin-bottom: 0; } } diff --git a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss index 3ad972de1d3..0446f3e2cea 100644 --- a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss +++ b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf { &-dropdown-widget { width: 100%; @@ -7,7 +9,7 @@ width: 100%; } - .mat-mdc-select-value-text { + #{$mat-select-value-text} { font-size: var(--theme-body-1-font-size); } diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.scss b/lib/process-services/src/lib/form/widgets/people/people.widget.scss index 76b8aae1a9f..e5152172550 100644 --- a/lib/process-services/src/lib/form/widgets/people/people.widget.scss +++ b/lib/process-services/src/lib/form/widgets/people/people.widget.scss @@ -1,9 +1,10 @@ +@import 'styles/mat-selectors'; + .adf { &-people-widget { width: 100%; - /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ - .mat-form-field-label-wrapper { + #{$mat-form-field-label} { top: 10px; } } diff --git a/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss b/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss index f0677cfcc93..c5476f85324 100644 --- a/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss +++ b/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf { &-upload-widget-container { margin-bottom: 15px; @@ -25,7 +27,7 @@ } &-upload-files-row { - .mat-line { + #{$mat-line} { margin-bottom: 0; } } diff --git a/lib/process-services/src/lib/people/components/people/people.component.scss b/lib/process-services/src/lib/people/components/people/people.component.scss index 111bd3e9b04..0b0ad6bed87 100644 --- a/lib/process-services/src/lib/people/components/people/people.component.scss +++ b/lib/process-services/src/lib/people/components/people/people.component.scss @@ -1,3 +1,5 @@ +@import 'styles/mat-selectors'; + .adf-assignment-header { border-bottom: 1px solid var(--adf-theme-foreground-divider-color); padding: 6px 20px; @@ -24,7 +26,7 @@ } } -.adf-assignment-top-container.mat-mdc-card { +.adf-assignment-top-container#{$mat-card} { border-top: 1px solid var(--adf-theme-foreground-divider-color); margin: 0; padding: 0; diff --git a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.html b/lib/process-services/src/lib/process-list/components/start-process/start-process.component.html index 44ca2daac96..3868196ac52 100644 --- a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.html +++ b/lib/process-services/src/lib/process-list/components/start-process/start-process.component.html @@ -117,7 +117,7 @@ -
+