mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-12 17:04:46 +00:00
AAE-34494 break dependency on ADF mat selectors (#4536)
This commit is contained in:
Denys Vuika
GitHub
parent
680b11ba2e
commit
6928d8de13
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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';
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
101
projects/aca-content/src/lib/ui/mat-selectors.scss
Normal file
101
projects/aca-content/src/lib/ui/mat-selectors.scss
Normal file
@ -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';
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
6
projects/aca-shared/src/lib/styles/mat-selectors.scss
Normal file
6
projects/aca-shared/src/lib/styles/mat-selectors.scss
Normal file
@ -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';
|
||||
Loading…
x
Reference in New Issue
Block a user