inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +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 e9a5a2366c
commit d1db2f4c35
57 changed files with 367 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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.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.component.html
View File

@@ -118,7 +118,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.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.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.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.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.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.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;