inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improvement/AAE-19176-reapply-selector-changes (#9424)

Browse Source 
* 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
This commit is contained in:
Wojciech Duda 2024-03-12 14:16:17 +01:00 committed by VitoAlbano
parent 297e36ac6b
commit 65a98e7ae6
57 changed files with 366 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss
View File

@ -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;
}
}

2
demo-shell/src/app/components/cloud/cloud-layout.component.scss
View File

@ -1,3 +1,5 @@
@import 'styles/mat-selectors';
.app-cloud-layout-overflow {
overflow: auto;
}

4
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
View File

@ -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;
}

42
lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
View File

@ -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;

2
lib/content-services/src/lib/version-manager/version-list.component.scss
View File

@ -1,4 +1,6 @@
/* stylelint-disable selector-class-pattern */
@import 'styles/mat-selectors';
.adf-version-list {
&-viewport {
height: 100%;

2
lib/core/src/lib/buttons-menu/buttons-menu.component.html
View File

@ -17,4 +17,4 @@
<ng-template #desktop>
<ng-content></ng-content>
</ng-template>
</ng-template>

4
lib/core/src/lib/buttons-menu/buttons-menu.component.scss
View File

@ -1,3 +1,5 @@
@import 'styles/mat-selectors';
.adf-buttons-menu {
margin-right: 10px;
@ -21,7 +23,7 @@
display: none;
}
button > mat-icon.mat-icon.material-icons {
button > #{$material-icons} {
color: black;
margin: 0 10px;
}

9
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
View File

@ -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;
}
}

6
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

@ -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;

10
lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
View File

@ -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;
}
}

5
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
View File

@ -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);
}
}

6
lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
View File

@ -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});

7
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@ -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;
}

30
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

@ -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);
}
}

4
lib/core/src/lib/comments/comments.component.scss
View File

@ -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%;
}
}

1
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@ -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;

4
lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss
View File

@ -1,5 +1,7 @@
@import 'styles/mat-selectors';
.adf-edit-json-dialog {
.mat-mdc-dialog-content {
#{$mat-dialog-content} {
height: 300px;
overflow: hidden;
}

46
lib/core/src/lib/form/components/form-renderer.component.scss
View File

@ -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;

11
lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
View File

@ -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;
}

7
lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
View File

@ -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);
}

16
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
View File

@ -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%;
}
}

21
lib/core/src/lib/form/components/widgets/form.theme.scss
View File

@ -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;
}
}

5
lib/core/src/lib/form/components/widgets/text/text.widget.scss
View File

@ -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;
}
}

4
lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
View File

@ -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;

20
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

@ -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 */

8
lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
View File

@ -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;

3
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
View File

@ -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;

10
lib/core/src/lib/notifications/components/notification-history.component.scss
View File

@ -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;
}
}

10
lib/core/src/lib/search-text/search-text-input.component.scss
View File

@ -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);

4
lib/core/src/lib/snackbar-content/snackbar-content.component.scss
View File

@ -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;

91
lib/core/src/lib/styles/_mat-selectors.scss Normal file
View File

@ -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";

22
lib/core/src/lib/styles/material.theme.scss
View File

@ -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;
}
}
}

2
lib/core/src/lib/templates/empty-content/empty-content.component.scss
View File

@ -1,3 +1,5 @@
@import 'styles/mat-selectors';
.adf-empty-content {
color: var(--adf-theme-foreground-text-color-054);
display: flex;

4
lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss
View File

@ -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;

6
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss
View File

@ -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;

2
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss
View File

@ -1,4 +1,6 @@
/* stylelint-disable scss/at-extend-no-missing-placeholder */
@import 'styles/mat-selectors';
.adf-full-screen {
width: 100%;
height: 100%;

6
lib/core/src/lib/viewer/components/viewer.component.scss
View File

@ -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);
}
}

5
lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
View File

@ -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);
}
}

11
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
View File

@ -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%;
}
}

3
lib/process-services/src/lib/app-list/apps-list.component.scss
View File

@ -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;
}
}

35
lib/process-services/src/lib/form/start-form/start-form.component.scss
View File

@ -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;

4
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss
View File

@ -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;

15
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss
View File

@ -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;
}
}

4
lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss
View File

@ -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;
}
}

4
lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss
View File

@ -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);
}

5
lib/process-services/src/lib/form/widgets/people/people.widget.scss
View File

@ -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;
}
}

4
lib/process-services/src/lib/form/widgets/upload/upload.widget.scss
View File

@ -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;
}
}

4
lib/process-services/src/lib/people/components/people/people.component.scss
View File

@ -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;

2
lib/process-services/src/lib/process-list/components/start-process/start-process.component.html
View File

@ -117,7 +117,7 @@
<mat-spinner class="adf-start-process-loading"></mat-spinner>
</ng-template>
</div>
<div class="mat-content-actions" *ngIf="!hasStartForm()">
<div class="adf-start-process-content-actions" *ngIf="!hasStartForm()">
<button
class="adf-start-process-button"
mat-button

9
lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss
View File

@ -1,4 +1,5 @@
@import 'styles/flex';
@import 'styles/mat-selectors';
.adf {
&-start-process {
@ -11,16 +12,14 @@
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 {
#{$mat-form-field-label} {
color: var(--adf-theme-mat-grey-color-a200-dark);
}
.mat-content-actions {
#{$mat-content-actions} {
text-align: right;
}
.mat-mdc-button {
#{$mat-button} {
text-transform: uppercase !important;
}
}

15
lib/process-services/src/lib/process-user-info/process-user-info.component.scss
View File

@ -1,4 +1,5 @@
@import 'styles/flex';
@import 'styles/mat-selectors';
.adf {
&-userinfo-container {
@ -49,7 +50,7 @@
display: inline-block;
}
&-userinfo-menu_button.mat-mdc-button {
&-userinfo-menu_button#{$mat-button} {
margin-right: 0;
border-radius: 90%;
padding: 0;
@ -57,13 +58,13 @@
height: 40px;
}
&-userinfo-tab .mat-mdc-tab-header {
&-userinfo-tab #{$mat-tab-header} {
align-self: center;
width: 100%;
min-width: 250px;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
&-userinfo-tab .mdc-tab__text-label {
&-userinfo-tab #{$mat-tab-label-text} {
flex: auto;
font-weight: 500;
font-size: var(--theme-body-1-font-size);
@ -81,7 +82,7 @@
box-sizing: border-box;
}
&-userinfo-card.mat-mdc-card {
&-userinfo-card#{$mat-card} {
padding: 0;
}
@ -160,7 +161,7 @@
}
@media only screen and (min-device-width: 480px) {
.mat-mdc-menu-panel.adf-userinfo-menu {
#{$mat-menu-panel}.adf-userinfo-menu {
max-height: 450px;
min-width: 450px;
overflow: auto;
@ -168,6 +169,6 @@
}
}
.mat-mdc-menu-panel.adf-userinfo-menu .mat-mdc-menu-content {
#{$mat-menu-panel}.adf-userinfo-menu #{$mat-menu-content} {
padding: 0;
}

4
lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss
View File

@ -1,5 +1,7 @@
@import 'styles/mat-selectors';
.adf-attach-form {
.mat-mdc-form-field {
#{$mat-form-field} {
width: 100%;
}

4
lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss
View File

@ -1,3 +1,5 @@
@import 'styles/mat-selectors';
:host {
width: 100%;
}
@ -6,7 +8,7 @@
font-weight: bolder;
}
.mat-mdc-form-field {
#{$mat-form-field} {
width: 100%;
}

15
lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss
View File

@ -1,11 +1,12 @@
@import 'styles/flex';
@import 'styles/mat-selectors';
/* stylelint-disable no-descending-specificity */
.adf-new-task-heading {
padding-top: 12px;
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
.mat-mdc-card-title {
#{$mat-card-title} {
font-weight: bold;
font-size: var(--theme-adf-task-title-font-size);
}
@ -68,21 +69,20 @@
}
adf-start-task {
.mat-mdc-button.adf-uppercase {
#{$mat-button}.adf-uppercase {
text-transform: uppercase;
}
people-widget.adf-people-widget-content {
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: -14px;
}
}
.adf-people-widget-content {
.mat-mdc-form-field {
#{$mat-form-field} {
width: 100%;
}
@ -96,7 +96,7 @@ adf-start-task {
}
.adf {
&-start-task-input-container .mat-mdc-text-field-wrapper {
&-start-task-input-container #{$mat-form-field-wrapper} {
padding-top: 8px;
}
@ -136,8 +136,7 @@ adf-start-task {
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(--theme-warn-color);
}

6
lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss
View File

@ -1,4 +1,5 @@
@import 'styles/flex';
@import 'styles/mat-selectors';
adf-task-details {
width: 100%;
@ -75,7 +76,7 @@ adf-task-details {
flex-direction: column;
padding: 20px 0;
.mat-mdc-slide-toggle {
#{$mat-slide-toggle} {
margin-left: auto;
& + div {
@ -88,8 +89,7 @@ adf-task-details {
}
}
/* 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} {
flex-grow: 1;
}
}

7
lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss
View File

@ -1,3 +1,5 @@
@import 'styles/mat-selectors';
.adf-task-form {
&-container {
overflow: hidden;
@ -8,13 +10,12 @@
padding-right: 25px;
padding-bottom: 25px;
& .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;

4
lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.scss
View File

@ -1,3 +1,5 @@
@import 'styles/mat-selectors';
.adf-message-card {
width: 60%;
box-sizing: border-box;
@ -46,7 +48,7 @@
border-radius: 5px;
}
& .mdc-button__label {
& #{$mat-button-label} {
opacity: 0.54;
font-size: var(--theme-button-font-size);
font-weight: bold;