diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss index 8a4ee7467..050a61676 100644 --- a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss +++ b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss @@ -1,11 +1,11 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; .aca-manage-rules { - #{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after { + #{ms.$mat-slide-toggle}:is(mat-slide-toggle) #{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::after { background: var(--mdc-switch-selected-track-color); } - #{$mat-slide-toggle} #{$mat-switch} #{$mat-switch-handle}::before { + #{ms.$mat-slide-toggle} #{ms.$mat-switch} #{ms.$mat-switch-handle}::before { background: var(--mdc-switch-selected-pressed-handle-color); } diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss index 84e12b2e3..492fffebd 100644 --- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss @@ -1,4 +1,4 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../styles/mat-selectors' as ms; /* stylelint-disable selector-class-pattern */ .aca-rule-action-list { @@ -32,7 +32,7 @@ flex: 1; } - #{$mat-text-field-disabled}#{$mat-text-field-filled} { + #{ms.$mat-text-field-disabled}#{ms.$mat-text-field-filled} { background: transparent; } diff --git a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss index 5e9a0ee62..b6464560a 100644 --- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss @@ -1,4 +1,4 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../styles/mat-selectors' as ms; .aca-rule-composite-condition { display: block; @@ -22,8 +22,8 @@ display: flex; gap: 8px; - #{$mat-form-field} { - #{$mat-form-field-infix} { + #{ms.$mat-form-field} { + #{ms.$mat-form-field-infix} { padding-bottom: 4px; } } @@ -38,10 +38,10 @@ flex: 1; } - .aca-rule-composite-condition__boolean-mode-control #{$mat-form-field-wrapper} { + .aca-rule-composite-condition__boolean-mode-control #{ms.$mat-form-field-wrapper} { background-color: unset; - #{$mat-select-disabled} { + #{ms.$mat-select-disabled} { color: var(--adf-theme-foreground-text-color); } } diff --git a/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss index 934f1d275..89ab5cd0e 100644 --- a/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss @@ -1,9 +1,9 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; .aca-edit-rule-dialog-container { --edit-rule-dialog-padding: 8px 20px; - #{$mat-dialog-surface} { + #{ms.$mat-dialog-surface} { padding: 0; } } diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss index 570a06d0d..a025ef38b 100644 --- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss @@ -1,4 +1,4 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; .aca-rule-details { .aca-rule-details__form__triggers { @@ -88,14 +88,14 @@ } &.aca-read-only, - #{$mat-form-field-disabled} { - #{$mat-notched-outline-leading}, - #{$mat-notched-outline-trailing}, - #{$mat-notched-outline-notch} { + #{ms.$mat-form-field-disabled} { + #{ms.$mat-notched-outline-leading}, + #{ms.$mat-notched-outline-trailing}, + #{ms.$mat-notched-outline-notch} { border: none; } - #{$mat-line-ripple} { + #{ms.$mat-line-ripple} { &::before, &::after { display: none; @@ -103,21 +103,21 @@ } *:disabled, - #{$mat-select-disabled} #{$mat-select-value} { + #{ms.$mat-select-disabled} #{ms.$mat-select-value} { color: inherit; } - #{$mat-select-arrow-wrapper} { + #{ms.$mat-select-arrow-wrapper} { display: none; } } - .aca-rule-details__form__row #{$mat-form-field-flex} #{$mat-form-field-infix} { + .aca-rule-details__form__row #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} { padding-bottom: 0.375em; padding-top: 24px; } - .aca-rule-details__form__row aca-rule-action #{$mat-form-field-flex} #{$mat-form-field-infix} { + .aca-rule-details__form__row aca-rule-action #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} { padding-top: 0.1em; padding-bottom: 0.1em; } diff --git a/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss b/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss index 155cbee24..041f79fda 100644 --- a/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss +++ b/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss @@ -1,9 +1,9 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; .aca-rule-set-picker-container { --rule-set-picker-padding: 8px 20px; - #{$mdc-dialog} #{$mat-dialog-surface} { + #{ms.$mdc-dialog} #{ms.$mat-dialog-surface} { padding: 0; } } diff --git a/projects/aca-content/folder-rules/src/styles/mat-selectors.scss b/projects/aca-content/folder-rules/src/styles/mat-selectors.scss new file mode 100644 index 000000000..330630823 --- /dev/null +++ b/projects/aca-content/folder-rules/src/styles/mat-selectors.scss @@ -0,0 +1,27 @@ +$mat-line: '.mat-line'; +$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-line-ripple: '.mdc-line-ripple'; +$mat-select: '.mat-mdc-select'; +$mat-select-value: '.mat-select-value'; +$mat-slide-toggle: '.mat-mdc-slide-toggle'; +$mat-form-field-infix: '.mat-mdc-form-field-infix'; +$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper'; +$mat-dialog-surface: '.mat-mdc-dialog-surface'; +$mdc-dialog: '.mdc-dialog'; +$mat-notched-outline: '.mdc-notched-outline'; +$mat-select-arrow: '.mat-mdc-select-arrow'; +$mat-notched-outline-leading: '.mdc-notched-outline__leading'; +$mat-notched-outline-trailing: '.mdc-notched-outline__trailing'; +$mat-notched-outline-notch: '.mdc-notched-outline__notch'; +$mat-text-field-filled: '.mdc-text-field--filled'; +$mat-text-field-disabled: '.mdc-text-field--disabled'; +$mat-switch: '.mdc-switch'; +$mat-switch-handle: '.mdc-switch__handle'; +$mat-switch-track: '.mdc-switch__track'; +$mat-list-item: '.mdc-list-item'; +$mat-text-field: '.mdc-text-field'; +$mat-form-field-disabled: '.mat-form-field-disabled'; +$mat-select-disabled: '.mat-mdc-select-disabled'; +$mat-select-value: '.mat-mdc-select-value'; diff --git a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss index 4f79f8b4d..dd9eeb1f2 100644 --- a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss +++ b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss @@ -1,11 +1,11 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../ui/mat-selectors' as ms; .aca-bulk-actions-form-field { margin-left: 24px; width: 295px; - #{$mat-form-field-flex}, - #{$mat-select-value} { + #{ms.$mat-form-field-flex}, + #{ms.$mat-select-value} { height: 48px; display: flex; align-items: center; diff --git a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-input/search-ai-input.component.scss b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-input/search-ai-input.component.scss index 0e464ac42..7b655ef0c 100644 --- a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-input/search-ai-input.component.scss +++ b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-input/search-ai-input.component.scss @@ -1,4 +1,4 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../../../ui/mat-selectors' as ms; aca-search-ai-input { width: 100%; @@ -59,7 +59,7 @@ aca-search-ai-input { font-size: 15px; margin-right: 26px; - #{$mat-select-trigger} { + #{ms.$mat-select-trigger} { height: auto; margin-top: 4px; } @@ -92,7 +92,7 @@ aca-search-ai-input { } } -.aca-search-ai-input-agent-select-options.aca-search-ai-input-agent-select-agents#{$mat-select-panel} { +.aca-search-ai-input-agent-select-options.aca-search-ai-input-agent-select-agents#{ms.$mat-select-panel} { margin-top: 9px; .aca-search-ai-input-agent-select-options-option { diff --git a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss index 268fd927c..409be4699 100644 --- a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss +++ b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss @@ -1,4 +1,4 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../../../ui/mat-selectors' as ms; .aca-search-ai-results { aca-page-layout { @@ -118,7 +118,7 @@ margin-right: 2px; } - #{$mat-button-touch-target} { + #{ms.$mat-button-touch-target} { width: 24px; } } diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss index 54a5f96a5..0c3ddeb32 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss @@ -1,4 +1,4 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../ui/mat-selectors' as mat; .aca-sidenav { display: flex; @@ -119,7 +119,7 @@ line-height: 32px; justify-content: start; - #{$mat-button-label} { + #{mat.$mat-button-label} { overflow: hidden; text-overflow: ellipsis; } diff --git a/projects/aca-content/src/lib/testing/app-testing.module.ts b/projects/aca-content/src/lib/testing/app-testing.module.ts index 9a0ef86e0..73274f2b6 100644 --- a/projects/aca-content/src/lib/testing/app-testing.module.ts +++ b/projects/aca-content/src/lib/testing/app-testing.module.ts @@ -39,6 +39,7 @@ import { ContentManagementService } from '../services/content-management.service import { DocumentBasePageService } from '@alfresco/aca-shared'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatDialogModule } from '@angular/material/dialog'; +import { MatIconTestingModule } from '@angular/material/icon/testing'; @NgModule({ imports: [ @@ -58,7 +59,8 @@ import { MatDialogModule } from '@angular/material/dialog'; ), EffectsModule.forRoot([]), MatSnackBarModule, - MatDialogModule + MatDialogModule, + MatIconTestingModule ], exports: [RouterTestingModule, TranslateModule], providers: [ diff --git a/projects/aca-content/src/lib/ui/application.scss b/projects/aca-content/src/lib/ui/application.scss index 31eac5710..bc1a60789 100644 --- a/projects/aca-content/src/lib/ui/application.scss +++ b/projects/aca-content/src/lib/ui/application.scss @@ -1,7 +1,7 @@ /* stylelint-disable scss/no-global-function-names */ @use '@angular/material' as mat; -@import 'mixins'; -@import 'theme'; +@import './mixins'; +@import './theme'; $foreground: map-get($custom-theme, foreground); diff --git a/projects/aca-content/src/lib/ui/mat-selectors.scss b/projects/aca-content/src/lib/ui/mat-selectors.scss new file mode 100644 index 000000000..76117ee42 --- /dev/null +++ b/projects/aca-content/src/lib/ui/mat-selectors.scss @@ -0,0 +1,101 @@ +$mat-icon: '.mat-icon'; +$mat-accent: '.mat-accent'; +$mat-line: '.mat-line'; +$mat-tab-label: '.mat-mdc-tab'; +$mat-tab-label-active: '.mdc-tab--active'; +$mat-tab-label-text: '.mdc-tab__text-label'; +$mat-tab-list: '.mat-mdc-tab-list'; +$mat-tab-header: '.mat-mdc-tab-header'; +$mat-tab-labels: '.mat-mdc-tab-labels'; +$mat-chip: '.mat-mdc-chip'; +$mat-checkbox: '.mat-mdc-checkbox'; +$mat-checkbox-box: '.mdc-checkbox'; +$mat-button: '.mat-mdc-button'; +$mat-button-label: '.mdc-button__label'; +$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-line-ripple: '.mdc-line-ripple'; +$mat-dialog-actions: '.mat-mdc-dialog-actions'; +$mat-dialog-content: '.mat-mdc-dialog-content'; +$mat-button-touch-target: '.mat-mdc-button-touch-target'; +$mat-card: '.mat-mdc-card'; +$mat-list-item-primary-text: '.mdc-list-item__primary-text'; +$mat-select: '.mat-mdc-select'; +$mat-select-value: '.mat-select-value'; +$mat-select-panel: '.mat-mdc-select-panel'; +$mat-expansion-panel: '.mat-expansion-panel'; +$mat-expansion-panel-header: '.mat-expansion-panel-header'; +$mat-calendar: '.mat-calendar'; +$mat-toolbar: '.mat-toolbar'; +$mat-slide-toggle: '.mat-mdc-slide-toggle'; +$mat-form-field-infix: '.mat-mdc-form-field-infix'; +$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper'; +$mat-form-field-error: '.mat-mdc-form-field-error'; +$mat-checkbox-background: '.mdc-checkbox__background'; +$mat-dialog-content: '.mdc-dialog__content'; +$mat-floating-label: '.mdc-floating-label'; +$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper'; +$mat-dialog-title: '.mdc-dialog__title'; +$mat-dialog-surface: '.mat-mdc-dialog-surface'; +$mdc-dialog: '.mdc-dialog'; +$mat-evolution-chip: '.mdc-evolution-chip'; +$mat-standard-chip: '.mat-mdc-standard-chip'; +$mat-evolution-chip-action: '.mdc-evolution-chip__action'; +$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label'; +$mat-notched-outline: '.mdc-notched-outline'; +$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic'; +$mat-select-trigger: '.mat-mdc-select-trigger'; +$mat-select-arrow: '.mat-mdc-select-arrow'; +$mat-notched-outline-leading: '.mdc-notched-outline__leading'; +$mat-notched-outline-trailing: '.mdc-notched-outline__trailing'; +$mat-notched-outline-notch: '.mdc-notched-outline__notch'; +$mat-mdc-button: '.mdc-button'; +$mat-outlined-button: '.mat-mdc-outlined-button'; +$mat-button-base: '.mat-mdc-button-base'; +$mat-button-touch-target: '.mat-mdc-button-touch-target'; +$mat-autocomplete-panel: '.mat-mdc-autocomplete-panel'; +$mat-menu-surface: '.mdc-menu-surface'; +$mat-text-field-filled: '.mdc-text-field--filled'; +$mat-text-field-disabled: '.mdc-text-field--disabled'; +$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper'; +$mat-list-item-disabled: '.mdc-list-item--disabled'; +$mat-primary: '.mat-primary'; +$mat-checkbox-touch-target: '.mat-mdc-checkbox-touch-target'; +$mat-switch: '.mdc-switch'; +$mat-switch-selected: '.mdc-switch--selected'; +$mat-switch-checked: '.mdc-switch--checked'; +$mat-switch-handle-track: '.mdc-switch__handle-track'; +$mat-switch-handle: '.mdc-switch__handle'; +$mat-switch-track: '.mdc-switch__track'; +$mat-switch-icons: '.mdc-switch__icons'; +$mat-switch-unselected: '.mdc-switch--unselected'; +$mat-chip-action: '.mat-mdc-chip-action'; +$mat-chip-graphic: '.mat-mdc-chip-graphic'; +$mat-data-table-row: '.mdc-data-table__row'; +$mat-data-table-cell: '.mdc-data-table__cell'; +$mat-data-table-header-cell: '.mdc-data-table__header-cell'; +$mat-toolbar-single-row: '.mat-toolbar-single-row'; +$mat-toolbar-multiple-row: '.mat-toolbar-multiple-row'; +$mat-unthemed: '.mat-unthemed'; +$mat-calendar-period-button: '.mat-calendar-period-button'; +$mat-radio-button: '.mat-mdc-radio-button'; +$mat-radio: '.mdc-radio'; +$mat-tab-ripple: '.mdc-tab__ripple'; +$mat-tab-disabled: '.mat-mdc-tab-disabled'; +$mat-tab-group: '.mat-mdc-tab-group'; +$mat-tab-group-stretch: '.mat-mdc-tab-group-stretch-tabs'; +$mat-list-item: '.mdc-list-item'; +$mat-menu-item: '.mat-mdc-menu-item'; +$mat-icon-no-color: '.mat-icon-no-color'; +$mat-submenu-icon: '.mat-menu-submenu-icon'; +$mat-mdc-submenu-icon: '.mat-mdc-menu-submenu-icon'; +$mdc-form-field: '.mdc-form-field'; +$mat-divider-horizontal: '.mat-divider-horizontal'; +$mat-accordion: '.mat-accordion'; +$mat-text-field: '.mdc-text-field'; +$mat-form-field-disabled: '.mat-form-field-disabled'; +$mat-select-disabled: '.mat-mdc-select-disabled'; +$mat-select-value: '.mat-mdc-select-value'; +$mat-checkbox-native-control: '.mdc-checkbox__native-control'; +$mat-card-header: '.mat-mdc-card-header'; diff --git a/projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss b/projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss index 96fb98a9c..364be21c7 100644 --- a/projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss +++ b/projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss @@ -1,10 +1,10 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../mat-selectors' as ms; @mixin adf-about-theme($theme) { adf-about { /* custom ADF About Component Theme */ - #{$mat-data-table-header-cell} { + #{ms.$mat-data-table-header-cell} { color: var(--adf-theme-foreground-text-color-054); font-size: 12px; font-weight: 500; @@ -13,12 +13,12 @@ background-color: var(--theme-about-panel-background-color); overflow: auto; - #{$mat-accordion} { + #{ms.$mat-accordion} { box-shadow: none; border: none; &.adf-about-panel { - #{$mat-expansion-panel} { + #{ms.$mat-expansion-panel} { box-shadow: none; border-radius: 12px; margin: 24px; @@ -28,7 +28,7 @@ } } - #{$mat-expansion-panel-header} { + #{ms.$mat-expansion-panel-header} { height: 80px; line-height: 32px; } diff --git a/projects/aca-content/src/lib/ui/overrides/ay11.scss b/projects/aca-content/src/lib/ui/overrides/ay11.scss index 4dad10e42..da719b585 100644 --- a/projects/aca-content/src/lib/ui/overrides/ay11.scss +++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss @@ -1,3 +1,4 @@ +@use '../mixins' as mixins; @import '../colors'; /* stylelint-disable selector-class-pattern */ @@ -7,7 +8,7 @@ .mat-mdc-checkbox, .mat-mdc-raised-button { &:focus-visible { - @include rounded-outline; + @include mixins.rounded-outline; } .mat-ripple, @@ -24,7 +25,7 @@ .mdc-checkbox__native-control:focus-visible { & ~ .mat-mdc-checkbox-ripple { - @include rounded-outline; + @include mixins.rounded-outline; height: 22px; width: 22px; @@ -58,14 +59,14 @@ .mat-mdc-list-base .mat-mdc-list-option { .mdc-list-item__content { - @include rounded-border(transparent); + @include mixins.rounded-border(transparent); } &:focus-visible { background-color: white; .mdc-list-item__content { - @include rounded-border; + @include mixins.rounded-border; } } } @@ -74,12 +75,12 @@ .app-search-button { line-height: 36px; - @include rounded-border(transparent); + @include mixins.rounded-border(transparent); &:focus-visible { outline: none; - @include rounded-border; + @include mixins.rounded-border; } } @@ -89,10 +90,10 @@ display: none; } - @include rounded-border(transparent); + @include mixins.rounded-border(transparent); &:focus-visible { - @include rounded-border; + @include mixins.rounded-border; background-color: white; } @@ -110,7 +111,7 @@ .mat-mdc-option { &.cdk-keyboard-focused { .mat-mdc-option-ripple { - @include rounded-outline; + @include mixins.rounded-outline; } } } @@ -190,10 +191,10 @@ .mat-mdc-button-base.mat-mdc-button { outline: none; - @include rounded-border(transparent); + @include mixins.rounded-border(transparent); &:focus-visible { - @include rounded-border; + @include mixins.rounded-border; background-color: white; } @@ -202,7 +203,7 @@ &.cdk-keyboard-focused:not([aria-disabled='true']) { background-color: white; - @include rounded-border; + @include mixins.rounded-border; } } @@ -234,7 +235,7 @@ &.cdk-keyboard-focused { .mat-icon { - @include rounded-outline; + @include mixins.rounded-outline; } } } diff --git a/projects/aca-content/src/lib/ui/theme.scss b/projects/aca-content/src/lib/ui/theme.scss index f8027b35b..9cf132c5a 100644 --- a/projects/aca-content/src/lib/ui/theme.scss +++ b/projects/aca-content/src/lib/ui/theme.scss @@ -1,8 +1,8 @@ @use '@angular/material' as mat; +@use './mat-selectors' as ms; @import '@alfresco/adf-core/theming'; -@import '@alfresco/adf-core/lib/styles/mat-selectors'; -@import 'custom-theme'; -@import 'variables/variables'; +@import './custom-theme'; +@import './variables/variables'; @include custom-theme($custom-theme); @include mat.core; @@ -21,29 +21,29 @@ mat-toolbar { color: var(--theme-secondary-text); } -#{$mat-text-field-filled}:not(#{$mat-text-field-disabled}) { +#{ms.$mat-text-field-filled}:not(#{ms.$mat-text-field-disabled}) { padding: 0; } -#{$mat-form-field-error-wrapper}:is(div) { +#{ms.$mat-form-field-error-wrapper}:is(div) { padding: 0; font-size: 10px; - #{$mat-form-field-error} { + #{ms.$mat-form-field-error} { position: relative; top: -3px; } } -#{$mat-checkbox} { - #{$mat-checkbox-box}:has(div) { +#{ms.$mat-checkbox} { + #{ms.$mat-checkbox-box}:has(div) { padding-right: 2px; } - #{$mdc-form-field} { + #{ms.$mdc-form-field} { height: auto; - #{$mat-checkbox-box} { + #{ms.$mat-checkbox-box} { padding: 0; margin-right: 2px; @@ -53,7 +53,7 @@ mat-toolbar { position: relative; } - #{$mat-checkbox-background} { + #{ms.$mat-checkbox-background} { top: 1px; left: 0; height: 16px; @@ -62,62 +62,62 @@ mat-toolbar { } } - #{$mat-checkbox-touch-target} { + #{ms.$mat-checkbox-touch-target} { height: 24px; width: 24px; } - #{$mat-checkbox-box}:has(#{$mat-checkbox-native-control}):hover, - #{$mat-checkbox-box}:has(#{$mat-checkbox-native-control}) { - #{$mat-checkbox-native-control}:enabled ~ #{$mat-checkbox-background}:is(div) { + #{ms.$mat-checkbox-box}:has(#{ms.$mat-checkbox-native-control}):hover, + #{ms.$mat-checkbox-box}:has(#{ms.$mat-checkbox-native-control}) { + #{ms.$mat-checkbox-native-control}:enabled ~ #{ms.$mat-checkbox-background}:is(div) { border-color: var(--theme-blue-checkbox-color); background-color: var(--theme-blue-checkbox-color); } } } -#{$mat-switch}:is(button)#{$mat-switch-selected}#{$mat-switch-checked} #{$mat-switch-handle-track} #{$mat-switch-handle}::after { +#{ms.$mat-switch}:is(button)#{ms.$mat-switch-selected}#{ms.$mat-switch-checked} #{ms.$mat-switch-handle-track} #{ms.$mat-switch-handle}::after { background-color: transparent; } -#{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after { +#{ms.$mat-slide-toggle}:is(mat-slide-toggle) #{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::after { background-color: var(--theme-blue-button-color); } mat-slide-toggle { - #{$mat-switch-icons} { + #{ms.$mat-switch-icons} { display: none; } - #{$mat-switch-unselected}#{$mat-switch}:enabled #{$mat-switch-track}::before, - #{$mat-switch-unselected}#{$mat-switch}:enabled:active #{$mat-switch-track}::before, - #{$mat-switch-unselected}#{$mat-switch}:enabled:focus:not(:active) #{$mat-switch-track}::before, - #{$mat-switch-unselected}#{$mat-switch}:enabled:hover:not(:focus:active) #{$mat-switch-track}::before { + #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::before, + #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled:active #{ms.$mat-switch-track}::before, + #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled:focus:not(:active) #{ms.$mat-switch-track}::before, + #{ms.$mat-switch-unselected}#{ms.$mat-switch}:enabled:hover:not(:focus:active) #{ms.$mat-switch-track}::before { background: var(--adf-theme-foreground-disabled-text-color); } } -#{$mat-list-item-primary-text} { +#{ms.$mat-list-item-primary-text} { color: var(--adf-theme-foreground-text-color-087); } -#{$mat-chip}#{$mat-evolution-chip}#{$mat-standard-chip} { +#{ms.$mat-chip}#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} { height: auto; - #{$mat-evolution-chip-text-label} { + #{ms.$mat-evolution-chip-text-label} { white-space: normal; display: flex; } - #{$mat-evolution-chip-action}#{$mat-chip-action} { - #{$mat-evolution-chip-graphic}#{$mat-chip-graphic} { + #{ms.$mat-evolution-chip-action}#{ms.$mat-chip-action} { + #{ms.$mat-evolution-chip-graphic}#{ms.$mat-chip-graphic} { padding: 0; } } } -#{$mdc-dialog} { - #{$mat-dialog-title} { +#{ms.$mdc-dialog} { + #{ms.$mat-dialog-title} { margin-bottom: 20px; padding: 0; @@ -126,43 +126,43 @@ mat-slide-toggle { } } - #{$mat-dialog-actions} { + #{ms.$mat-dialog-actions} { padding: 8px 0; } - #{$mat-slide-toggle} #{$mdc-form-field} { + #{ms.$mat-slide-toggle} #{ms.$mdc-form-field} { width: 36px; } - #{$mat-data-table-row}:last-child #{$mat-data-table-cell} { + #{ms.$mat-data-table-row}:last-child #{ms.$mat-data-table-cell} { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } - #{$mat-dialog-content} { + #{ms.$mat-dialog-content} { padding: 16px 0; color: var(--adf-theme-foreground-text-color-087); --mdc-dialog-supporting-text-color: var(--theme-primary-text); } - #{$mat-dialog-surface} { + #{ms.$mat-dialog-surface} { padding: 24px; - #{$mat-button} { + #{ms.$mat-button} { width: auto; - #{$mat-button-label} { + #{ms.$mat-button-label} { padding: 0 16px; } } } } -#{$mat-floating-label}, -#{$mat-tab-list} #{$mat-tab-labels} #{$mat-tab-label}, -#{$mat-checkbox} label, -mat-toolbar#{$mat-toolbar}#{$mat-toolbar-multiple-row}, -mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} { +#{ms.$mat-floating-label}, +#{ms.$mat-tab-list} #{ms.$mat-tab-labels} #{ms.$mat-tab-label}, +#{ms.$mat-checkbox} label, +mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-multiple-row}, +mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-single-row} { color: var(--theme-secondary-text); opacity: 1; } @@ -186,7 +186,7 @@ mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} { .adf-datatable-row { .adf-datatable-checkbox { - #{$mat-checkbox} label { + #{ms.$mat-checkbox} label { display: none; } } @@ -222,7 +222,7 @@ mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} { } .adf-property-field { - .adf-textitem-edit-icon#{$mat-icon} { + .adf-textitem-edit-icon#{ms.$mat-icon} { color: var(--theme-secondary-text); } } @@ -236,13 +236,13 @@ mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} { } .aca-details-tabs { - #{$mat-tab-label-text} { + #{ms.$mat-tab-label-text} { line-height: 19px; } } mat-snack-bar-container { - #{$mat-button}#{$mat-unthemed} { + #{ms.$mat-button}#{ms.$mat-unthemed} { --mdc-text-button-label-text-color: #fff; } } @@ -267,8 +267,8 @@ mat-snack-bar-container { --mdc-snackbar-container-color: var(--theme-warn-color); } -#{$mat-calendar} { - #{$mat-calendar-period-button}:is(button) { +#{ms.$mat-calendar} { + #{ms.$mat-calendar-period-button}:is(button) { width: unset; height: unset; padding: 0 16px; @@ -276,54 +276,54 @@ mat-snack-bar-container { } } -#{$mat-radio-button} #{$mat-radio}:is(div) { +#{ms.$mat-radio-button} #{ms.$mat-radio}:is(div) { padding: 0 5px 0 0; } -#{$mdc-form-field} > label:is(label) { +#{ms.$mdc-form-field} > label:is(label) { padding-left: 3px; } -#{$mat-tab-ripple} { +#{ms.$mat-tab-ripple} { display: none; } -#{$mat-tab-labels} { +#{ms.$mat-tab-labels} { border-bottom: 1px solid var(--adf-theme-foreground-text-color-014); } -#{$mat-tab-list} { - #{$mat-tab-labels} { - #{$mat-tab-label-active} { +#{ms.$mat-tab-list} { + #{ms.$mat-tab-labels} { + #{ms.$mat-tab-label-active} { color: var($selected-text-color); } } } -#{$mat-tab-label}:not(#{$mat-tab-disabled})#{$mat-tab-label-active} #{$mat-tab-label-text} { +#{ms.$mat-tab-label}:not(#{ms.$mat-tab-disabled})#{ms.$mat-tab-label-active} #{ms.$mat-tab-label-text} { color: var(--theme-tab-active-text-color); } adf-dynamic-component { - mat-icon#{$mat-icon}#{$mat-submenu-icon} { + mat-icon#{ms.$mat-icon}#{ms.$mat-submenu-icon} { color: var(--theme-text-color); } } -#{$mat-menu-item} #{$mat-icon} { - &#{$mat-icon-no-color}, - &#{$mat-mdc-submenu-icon} { +#{ms.$mat-menu-item} #{ms.$mat-icon} { + &#{ms.$mat-icon-no-color}, + &#{ms.$mat-mdc-submenu-icon} { color: var(--theme-text-color); } } -#{$mat-notched-outline-trailing}, -#{$mat-notched-outline-notch}, -#{$mat-notched-outline-leading} { +#{ms.$mat-notched-outline-trailing}, +#{ms.$mat-notched-outline-notch}, +#{ms.$mat-notched-outline-leading} { border-color: var(--adf-theme-foreground-text-color-014); } -#{$mat-menu-surface}#{$mat-autocomplete-panel}:is(div) { +#{ms.$mat-menu-surface}#{ms.$mat-autocomplete-panel}:is(div) { padding: 0; span { @@ -331,14 +331,14 @@ adf-dynamic-component { } } -#{$mat-list-item}#{$mat-list-item-disabled} { - #{$mat-list-item-primary-text}:is(div) { +#{ms.$mat-list-item}#{ms.$mat-list-item-disabled} { + #{ms.$mat-list-item-primary-text}:is(div) { color: unset; } } -#{$mat-tab-group}#{$mat-tab-group-stretch} > #{$mat-tab-header} { - #{$mat-tab-label}:is(div) { +#{ms.$mat-tab-group}#{ms.$mat-tab-group-stretch} > #{ms.$mat-tab-header} { + #{ms.$mat-tab-label}:is(div) { min-width: 160px; } } @@ -349,6 +349,6 @@ adf-dynamic-component { } } -#{$mat-form-field-infix} { +#{ms.$mat-form-field-infix} { min-height: unset; } diff --git a/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss b/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss index 29ec374c6..2d1440fcd 100644 --- a/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss +++ b/projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss @@ -1,4 +1,4 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../styles/mat-selectors' as ms; aca-open-in-app { .aca-open-in-app { @@ -57,7 +57,7 @@ aca-open-in-app { } } - #{$mat-button} { + #{ms.$mat-button} { --mat-mdc-button-persistent-ripple-color: unset; --mat-mdc-button-ripple-color: unset; } diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss index a5dd61b5f..6a3909555 100644 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss +++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss @@ -1,7 +1,7 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; aca-toolbar-action { - #{$mat-mdc-button}#{$mat-button-base}#{$mat-outlined-button}#{$mat-unthemed} { + #{ms.$mat-mdc-button}#{ms.$mat-button-base}#{ms.$mat-outlined-button}#{ms.$mat-unthemed} { --mdc-outlined-button-label-text-color: var(--theme-secondary-text); } } diff --git a/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss b/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss index 925baac92..eb419a8e8 100644 --- a/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss +++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss @@ -1,7 +1,7 @@ -@import '@alfresco/adf-core/lib/styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .app-toolbar-menu-item { - &:last-child > #{$mat-divider-horizontal} { + &:last-child > #{ms.$mat-divider-horizontal} { display: none; } diff --git a/projects/aca-shared/src/lib/styles/mat-selectors.scss b/projects/aca-shared/src/lib/styles/mat-selectors.scss new file mode 100644 index 000000000..bc6f6060a --- /dev/null +++ b/projects/aca-shared/src/lib/styles/mat-selectors.scss @@ -0,0 +1,6 @@ +$mat-button: '.mat-mdc-button'; +$mat-mdc-button: '.mdc-button'; +$mat-outlined-button: '.mat-mdc-outlined-button'; +$mat-button-base: '.mat-mdc-button-base'; +$mat-unthemed: '.mat-unthemed'; +$mat-divider-horizontal: '.mat-divider-horizontal';