[ACS-8630] - Removing mat-selectors - part II

This commit is contained in:
VitoAlbano
2026-08-03 13:13:48 +01:00
parent 92a31d8c50
commit 8fe0f96720
17 changed files with 42 additions and 172 deletions
@@ -141,10 +141,6 @@ h2.adf-search-results-label {
.adf-datatable-body .adf-datatable-row {
min-height: 40px;
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
padding-top: 15px;
}
&:first-child {
.adf-datatable-cell {
border-top: none;
@@ -163,10 +159,6 @@ h2.adf-search-results-label {
.adf-datatable-list .adf-datatable-body .adf-datatable-row {
min-height: 65px;
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
padding-top: 15px;
}
.adf-name-location-cell-name {
padding: 5px 10px 2px;
}
@@ -7,36 +7,25 @@ $mat-expansion-panel-body: '.mat-expansion-panel-body';
$mat-tab-label-text: '.mdc-tab__text-label';
$mat-tab-header: '.mat-mdc-tab-header';
$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-wrapper: '.mat-mdc-text-field-wrapper';
$mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
$mat-text-field-outlined: '.mdc-text-field--outlined';
$mat-card: '.mat-mdc-card';
$mat-card-content: '.mat-mdc-card-content';
$mat-list-item-primary-text: '.mdc-list-item__primary-text';
$mat-list-item-end: '.mdc-list-item__end';
$mat-select: '.mat-mdc-select';
$mat-menu-panel: '.mat-mdc-menu-panel';
$mat-expansion-panel: '.mat-expansion-panel';
$mat-form-field-infix: '.mat-mdc-form-field-infix';
$mat-form-field-hide-placeholder: '.mat-form-field-hide-placeholder';
$mat-checkbox-background: '.mdc-checkbox__background';
$mat-floating-label: '.mdc-floating-label';
$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
$mat-dialog-title: '.mdc-dialog__title';
$mat-expansion-panel-body: '.mat-expansion-panel-body';
$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-notched-outline: '.mdc-notched-outline';
$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
$mat-select-arrow: '.mat-mdc-select-arrow';
$mat-evolution-chip-set: '.mdc-evolution-chip-set';
$cdk-overlay-pane: '.cdk-overlay-pane';
$mat-list-item-disabled: '.mdc-list-item--disabled';
$mat-switch: '.mdc-switch';
@@ -28,7 +28,7 @@
justify-content: center;
}
&__add-btn#{ms.$mat-button} {
&__add-btn {
margin-bottom: 20px;
}
@@ -77,31 +77,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
box-sizing: border-box;
overflow-x: auto;
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-datatable-center-size-column-ie {
padding-top: 17px;
}
.adf-datatable__actions-cell.adf-datatable-center-actions-column-ie {
padding-top: 7px;
}
.adf-cell-date.adf-datatable-center-date-column-ie {
position: relative;
.adf-datatable-cell-value {
width: 100%;
}
}
.adf-datatable-center-img-ie {
padding: 0;
min-width: 0;
width: 24px;
height: 56px;
}
}
.adf-datatable-header {
display: flex;
flex-direction: column;
@@ -245,13 +220,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
max-width: $data-table-thumbnail-width;
width: $data-table-thumbnail-width;
}
/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-datatable-checkbox {
padding-top: 15px;
}
}
}
.adf-datatable-cell,
@@ -358,10 +326,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable-cell-value {
word-break: break-word;
display: block;
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
padding: 17px 10px 10px;
}
}
}
@@ -464,13 +428,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
overflow: unset;
}
/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-cell-value {
top: 100%;
}
}
/* cell stretching content */
& > div::after {
content: attr(title);
@@ -174,11 +174,12 @@
padding-top: 0;
}
& #{ms.$mat-tab-ink-bar} {
#{ms.$mat-tab-indicator-underline} {
border-top-width: 4px;
}
}
// Tab active-indicator thickness via the public token API.
@include mat.tabs-overrides(
(
active-indicator-height: 4px
)
);
& #{ms.$mat-form-field-wrapper} {
margin: 0 12px 0 0;
@@ -29,7 +29,7 @@
[title]="field.tooltip"
[min]="minDate"
[max]="maxDate">
<mat-datetimepicker-toggle matSuffix [for]="datetimePicker"
<mat-datetimepicker-toggle class="adf-date-time-widget-toggle" matSuffix [for]="datetimePicker"
[disabled]="field.readOnly" />
<mat-datetimepicker #datetimePicker
data-automation-id="adf-date-time-widget-picker"
@@ -25,6 +25,6 @@
@include mixins.adf-error-icon;
}
#{ms.$mat-datetimepicker-toggle} {
.adf-date-time-widget-toggle {
color: var(--mat-sys-on-surface);
}
@@ -1,7 +1,3 @@
/* stylelint-disable no-descending-specificity */
/* stylelint-disable declaration-no-important */
@use '../../../styles/mat-selectors' as ms;
.adf {
&-error-container {
height: 20px;
@@ -32,14 +28,3 @@
}
}
}
/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
adf-form-field {
#{ms.$mat-input-element},
#{ms.$mat-select},
#{ms.$mat-form-field} {
display: block !important;
}
}
}
@@ -23,13 +23,6 @@ adf-layout-container {
margin-right 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-container-full-width {
width: 100%;
}
}
.adf-layout-container {
display: block;
width: 100%;
@@ -13,29 +13,11 @@
justify-content: center;
flex-direction: column;
// IE11 vertical centering
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
& {
display: table;
width: 100%;
height: 100%;
}
}
.adf-ie11FixerParent {
margin: 16px 0;
min-width: 320px;
// IE11 vertical centering
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
display: table-cell;
vertical-align: middle;
width: 100%;
padding-top: 16px;
}
}
// IE11 vertical centering
.adf-ie11FixerChild {
width: 100%;
display: flex;
@@ -2,28 +2,20 @@ $mat-icon: '.mat-icon';
$mat-focused: '.mat-focused';
$mat-line: '.mat-line';
$mat-tab-label: '.mat-mdc-tab';
$mat-tab-label-active: '.mdc-tab--active';
$mat-tab-label-container: '.mat-mdc-tab-label-container';
$mat-tab-label-text: '.mdc-tab__text-label';
$mat-tab-body: '.mat-mdc-tab-body';
$mat-tab-header: '.mat-mdc-tab-header';
$mat-tab-body-content: '.mat-mdc-tab-body-content';
$mat-tab-ink-bar: '.mdc-tab-indicator';
$mat-chip: '.mat-mdc-chip';
$mat-chip-list: '.mat-mdc-chip-list';
$mat-checkbox: '.mat-mdc-checkbox';
$mat-checkbox-label: '.mdc-label';
$mat-button: '.mat-mdc-button';
$mat-button-label: '.mdc-button__label';
$mat-form-field: '.mat-mdc-form-field';
$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
$mat-line-ripple: '.mdc-line-ripple';
$mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
$mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';
$mat-form-field-label: '.mat-mdc-floating-label';
$mat-form-field-invalid: '.mat-form-field-invalid';
$mat-text-field-focused: '.mdc-text-field--focused';
$mat-dialog-container: '.mdc-dialog__container';
$mat-button-touch-target: '.mat-mdc-button-touch-target';
$mat-input-element: '.mat-mdc-input-element';
$mat-card: '.mat-mdc-card';
@@ -39,39 +31,13 @@ $mat-drawer-transition: '.mat-drawer-transition';
$mat-drawer-content: '.mat-drawer-content';
$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-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content';
$mat-list-item-end: '.mdc-list-item__end';
$mat-text-field-no-label: '.mdc-text-field--no-label';
$mat-form-field-infix: '.mat-mdc-form-field-infix';
$mat-dialog-surface: '.mat-mdc-dialog-surface';
$mat-floating-label-required: '.mdc-floating-label--required';
$mat-evolution-chip-action: '.mdc-evolution-chip__action';
$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
$mat-select-trigger: '.mat-mdc-select-trigger';
$mat-button-base: '.mat-mdc-button-base';
$mat-snackbar: '.mdc-snackbar';
$mat-snack-bar-container: '.mat-mdc-snack-bar-container';
$mat-snackbar-label: '.mdc-snackbar__label';
$mat-datetimepicker-dialog: '.mat-datetimepicker-dialog';
$mat-tab-indicator-underline: '.mdc-tab-indicator__content--underline';
$mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix';
$mat-select-value: '.mat-mdc-select-value';
$mat-datetimepicker-calendar: '.mat-datetimepicker-calendar';
$mat-datetimepicker-calendar-header: '.mat-datetimepicker-calendar-header';
$mat-datetimepicker-calendar-table-header: '.mat-datetimepicker-calendar-table-header';
$mat-datetimepicker-calendar-header-year: '.mat-datetimepicker-calendar-header-year';
$mat-datetimepicker-calendar-header-date: '.mat-datetimepicker-calendar-header-date';
$mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-time';
$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
$mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
@@ -16,13 +16,6 @@
max-height: 100%;
max-width: 100%;
}
/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
img {
height: 100%;
}
}
}
&__toolbar {
@@ -1,3 +0,0 @@
/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
$material-icons: '.material-icons';
@@ -1,3 +1,4 @@
@use '@angular/material' as mat;
@use '../../../../mat-selectors' as ms;
.adf-task-form-cloud-container {
@@ -11,14 +12,21 @@
padding-bottom: 25px;
padding-right: 25px;
// Size all action buttons (incl. projected cloud outcome buttons)
// via the public token API; layout below still needs the element selector.
@include mat.button-overrides(
(
text-container-height: 36px,
text-container-shape: 5px
)
);
.adf-task-form-actions-button {
height: 36px;
border-radius: 5px;
}
#{ms.$mat-button} {
height: 36px;
border-radius: 5px;
width: auto;
padding: 0 16px;
margin: 0 8px;
@@ -1,3 +1,4 @@
@use '@angular/material' as mat;
@use '../../styles/mat-selectors' as ms;
.adf-form-container {
@@ -22,9 +23,12 @@
text-transform: uppercase;
}
& #{ms.$mat-tab-ink-bar} {
height: 4px;
}
// Tab active-indicator thickness via the public token API.
@include mat.tabs-overrides(
(
active-indicator-height: 4px
)
);
& #{ms.$mat-form-field-wrapper} {
margin: 0 12px 0 0;
@@ -84,10 +88,13 @@
padding-bottom: 25px;
padding-right: 25px;
& #{ms.$mat-button} {
height: 36px;
border-radius: 5px;
}
// Text buttons (incl. projected custom buttons) sized via public token API.
@include mat.button-overrides(
(
text-container-height: 36px,
text-container-shape: 5px
)
);
& #{ms.$mat-button-label} {
width: 58px;
@@ -4,19 +4,14 @@ $mat-card: '.mat-mdc-card';
$mat-card-header-text: '.mat-mdc-card-header-text';
$mat-card-content: '.mat-mdc-card-content';
$mat-card-header: '.mat-mdc-card-header';
$mat-card-title: '.mat-mdc-card-title';
$mat-tab-body-content: '.mat-mdc-tab-body-content';
$mat-tab-label-text: '.mdc-tab__text-label';
$mat-tab-ink-bar: '.mdc-tab-indicator';
$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
$mat-button: '.mat-mdc-button';
$mat-button-label: '.mdc-button__label';
$mat-input-element: '.mat-mdc-input-element';
$mat-line: '.mat-line';
$mat-select-value-text: '.mat-mdc-select-value-text';
$mat-form-field-label: '.mat-mdc-floating-label';
$mat-form-field: '.mat-mdc-form-field';
$mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
$mat-slide-toggle: '.mat-mdc-slide-toggle';
$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
$mat-dialog-surface: '.mat-mdc-dialog-surface';
@@ -1,3 +1,4 @@
@use '@angular/material' as mat;
@use '../../../styles/mat-selectors' as ms;
.adf-task-form {
@@ -10,10 +11,14 @@
padding-right: 25px;
padding-bottom: 25px;
& #{ms.$mat-button} {
height: 36px;
border-radius: 5px;
}
// Buttons here (incl. any projected/templated ones) are text buttons;
// size them via Material's public token API instead of the internal class.
@include mat.button-overrides(
(
text-container-height: 36px,
text-container-shape: 5px
)
);
& #{ms.$mat-button-label} {
width: 58px;