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

[ACS-5575] Should use declaration-no-important rule in the stylelint-config.json file to avoid use of !important in ADF (#9302)

Browse Source
This commit is contained in:
jacekpluta
2024-03-11 15:33:09 +01:00
committed by GitHub
parent 6bc532abf2
commit e9dc55bca2
80 changed files with 533 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
position: relative;
line-height: $line-height;
padding: 0 !important;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -61,7 +61,7 @@ $tile-themes: (
flex-flow: row wrap;
display: flex;
&-item {
.adf-app-listgrid-item {
outline: none;
padding: 8px;
box-sizing: border-box;
@@ -97,7 +97,7 @@ $tile-themes: (
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
min-height: 200px;
padding: 0 !important;
padding: 0;
&:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
@@ -107,23 +107,23 @@ $tile-themes: (
transform: scale(1.015);
}
&-logo {
.adf-app-listgrid-item-card-logo {
position: absolute;
right: 20px;
top: 20px;
padding: 16px;
z-index: 9;
&-icon {
.adf-app-listgrid-item-card-logo-icon {
font-size: 70px;
width: 1em !important;
height: 1em !important;
width: 1em;
height: 1em;
}
}
&-title {
.adf-app-listgrid-item-card-title {
padding: 16px;
margin-bottom: 0 !important;
margin-bottom: 0;
z-index: 9999;
h1 {
@@ -138,7 +138,7 @@ $tile-themes: (
}
}
&-subtitle {
.adf-app-listgrid-item-card-subtitle {
color: white;
z-index: 9999;
padding: 16px;
@@ -149,23 +149,20 @@ $tile-themes: (
}
}
&-actions {
padding: 0 16px 16px !important;
&-actions:has(.adf-app-listgrid-item-card-actions-icon) {
padding: 0 16px 16px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
min-height: 48px;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
&-icon {
color: #e9f1f3;
&:last-child {
margin-bottom: 0;
}
&.mat-card-actions {
margin-left: 0;
margin-right: 0;
&:last-child {
margin-bottom: 0 !important;
}
.adf-app-listgrid-item-card-actions-icon {
color: #e9f1f3;
}
}
}

8
lib/process-services/src/lib/attachment/process-attachment-list.component.scss
View File

@@ -1,9 +1,5 @@
@import 'styles/flex';
.adf-data-cell {
cursor: pointer !important;
}
.adf-attachment-list-loading-margin {
margin-left: calc((100% - 100px) / 2);
margin-right: calc((100% - 100px) / 2);
@@ -11,7 +7,7 @@
.adf-empty-list-header {
height: 32px;
opacity: 0.26 !important;
opacity: 0.26;
font-size: var(--theme-headline-font-size);
line-height: 1.33;
letter-spacing: -1px;
@@ -23,7 +19,7 @@
font-size: 56px;
line-height: 1;
letter-spacing: -2px;
margin-top: 40px !important;
margin-top: 40px;
word-break: break-all;
white-space: pre-line;
}

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

@@ -1,9 +1,5 @@
@import 'styles/flex';
adf-datatable .adf-data-cell {
cursor: pointer !important;
}
.adf-attachment-list-loading-margin {
margin-left: calc((100% - 100px) / 2);
margin-right: calc((100% - 100px) / 2);

7
lib/process-services/src/lib/form/start-form.component.html
View File

@@ -1,11 +1,11 @@
<div class="adf-start-form-container" *ngIf="hasForm()">
<mat-card>
<mat-card-header>
<mat-card class="adf-start-form-card">
<mat-card-header class="adf-start-form-header">
<mat-card-title>
<h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-card-content class="adf-start-form-content">
<adf-form-renderer [formDefinition]="form">
</adf-form-renderer>
</mat-card-content>
@@ -15,6 +15,7 @@
<button *ngFor="let outcome of form.outcomes"
mat-button
class="adf-start-form-actions-button"
[attr.data-automation-id]="'adf-form-' + outcome.name | lowercase"
[disabled]="!isOutcomeButtonEnabled(outcome)"
[class.mdl-button--colored]="!outcome.isSystem"

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

@@ -1,106 +1,108 @@
.adf {
&-form-container {
max-width: 100% !important;
max-height: 100% !important;
.adf-form-container {
max-width: 100%;
max-height: 100%;
& .mat-card {
padding: 16px 24px;
overflow: hidden;
}
& .mat-card-header-text {
margin: 0 !important;
}
& .mat-tab-body-content {
overflow: hidden;
}
& .mat-tab-label {
font-size: var(--theme-subheading-2-font-size);
line-height: var(--theme-headline-line-height);
letter-spacing: -0.4px;
text-align: left;
color: var(--adf-theme-foreground-text-color-054);
text-transform: uppercase;
}
& .mat-ink-bar {
height: 4px;
}
& .mat-form-field-wrapper {
margin: 0 12px 0 0;
}
& .mat-card {
padding: 16px 24px;
overflow: hidden;
}
&-form-title {
font-size: var(--theme-title-font-size);
& .mat-card-header-text {
margin: 0;
}
&-form-debug-container {
padding: 10px;
& .mat-tab-body-content {
overflow: hidden;
}
&-form-debug-container .adf-debug-toggle-text {
padding-left: 15px;
cursor: pointer;
}
&-form-debug-container .adf-debug-toggle-text:hover {
font-weight: bold;
}
&-form-reload-button {
position: absolute;
right: 12px;
top: 30px;
}
&-form-validation-button {
position: absolute;
right: 50px;
top: 39px;
color: var(--theme-accent-color);
& .adf-invalid-color {
color: var(--theme-warn-color);
}
}
&-form-hide-button {
display: none !important;
}
&-task-title {
text-align: center;
}
&-label {
width: 32px;
height: 16px;
font-size: var(--theme-caption-font-size);
& .mat-tab-label {
font-size: var(--theme-subheading-2-font-size);
line-height: var(--theme-headline-line-height);
letter-spacing: -0.4px;
text-align: left;
white-space: nowrap;
color: var(--adf-theme-foreground-text-color-054);
text-transform: uppercase;
}
&-form-mat-card-actions {
float: right;
padding-bottom: 25px !important;
padding-right: 25px !important;
& .mat-ink-bar {
height: 4px;
}
& .mat-button {
height: 36px;
border-radius: 5px;
}
& .mat-form-field-wrapper {
margin: 0 12px 0 0;
}
& .mat-button-wrapper {
width: 58px;
height: 20px;
opacity: 0.54;
font-size: var(--theme-body-2-font-size);
font-weight: bold;
.adf-form-container-card {
.adf {
&-form-title {
font-size: var(--theme-title-font-size);
}
&-form-debug-container {
padding: 10px;
}
&-form-debug-container .adf-debug-toggle-text {
padding-left: 15px;
cursor: pointer;
}
&-form-debug-container .adf-debug-toggle-text:hover {
font-weight: bold;
}
&-form-reload-button {
position: absolute;
right: 12px;
top: 30px;
}
&-form-validation-button {
position: absolute;
right: 50px;
top: 39px;
color: var(--theme-accent-color);
& .adf-invalid-color {
color: var(--theme-warn-color);
}
}
&-form-hide-button {
display: none;
}
&-task-title {
text-align: center;
}
&-label {
width: 32px;
height: 16px;
font-size: var(--theme-caption-font-size);
line-height: var(--theme-headline-line-height);
text-align: left;
white-space: nowrap;
}
&-form-mat-card-actions {
float: right;
padding-bottom: 25px;
padding-right: 25px;
& .mat-button {
height: 36px;
border-radius: 5px;
}
& .mat-button-wrapper {
width: 58px;
height: 20px;
opacity: 0.54;
font-size: var(--theme-body-2-font-size);
font-weight: bold;
}
}
}
}
}

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

@@ -3,7 +3,7 @@
width: 100%;
.adf-select {
padding-top: 0 !important;
padding-top: 0;
width: 100%;
}

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

@@ -1,10 +1,10 @@
.adf {
&-filters__entry {
&-filters__entry:has(.adf-filter-action-button) {
padding: 12px 0;
height: 24px;
width: 100%;
cursor: pointer;
font-size: var(--theme-body-1-font-size) !important;
font-size: var(--theme-body-1-font-size);
font-weight: bold;
opacity: 0.54;
@@ -15,7 +15,7 @@
.adf-filter-action-button .adf-filter-action-button__label {
padding-left: 20px;
margin: 0 8px !important;
margin: 0 8px;
}
&.adf-active,

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

@@ -45,12 +45,13 @@
</mat-autocomplete>
<ng-container *ngIf="!isProcessDefinitionsLoading ; else showProcessDefLoadingTemplate">
<button
class="adf-start-process-button"
id="adf-select-process-dropdown"
*ngIf="showSelectProcessDropdown"
mat-icon-button
(click)="displayDropdown($event)"
[disabled]="disableDropdownButton()"
[attr.aria-label]="'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate">
[attr.aria-label]="'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate | uppercase">
<mat-icon>arrow_drop_down</mat-icon>
</button>
</ng-container>
@@ -89,6 +90,7 @@
(outcomeClick)="onOutcomeClick($event)"
[showRefreshButton]="false">
<button
class="adf-start-process-button"
adf-form-custom-button
mat-button
(click)="cancelStartProcess()"
@@ -118,6 +120,7 @@
</div>
<div class="mat-content-actions" *ngIf="!hasStartForm()">
<button
class="adf-start-process-button"
mat-button
*ngIf="!hasStartForm()"
(click)="cancelStartProcess()"
@@ -132,7 +135,7 @@
(click)="startProcess()"
data-automation-id="btn-start"
id="button-start"
class="btn-start">
class="btn-start adf-start-process-button">
{{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
</button>
</div>

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

@@ -18,10 +18,6 @@
.mat-content-actions {
text-align: right;
}
.mat-button {
text-transform: uppercase !important;
}
}
&-title {
@@ -51,14 +47,14 @@
}
&-start-form-container {
.mat-card {
box-shadow: none !important;
padding: 0 !important;
.adf-start-form-card:has(.adf-start-form-header) {
box-shadow: none;
padding: 0;
}
}
&-start-form-actions {
text-align: right !important;
&-start-form-actions:has(.adf-start-form-actions-button) {
text-align: right;
}
&-start-process-definition-container {

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

@@ -147,8 +147,15 @@
text-align: left;
}
&-hide-tab .mat-tab-label-active {
display: none !important;
&-hide-tab.adf-userinfo-tab#tab-group-env {
display: none;
}
&-hide-small.adf-userinfo-profile-initials,
&-hide-small.adf-userinfo-profile-container {
@include layout-bp(lt-md) {
display: none;
}
}
}

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

@@ -71,11 +71,11 @@ adf-start-task {
text-transform: uppercase;
}
people-widget {
people-widget.adf-people-widget-content {
width: 100%;
.mat-form-field-label-wrapper {
top: -14px !important;
top: -14px;
}
}
@@ -130,10 +130,6 @@ adf-start-task {
}
&-invalid {
.mat-form-field-underline {
background-color: #f44336 !important;
}
.adf-file {
border-color: var(--theme-warn-color);
}

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

@@ -1,10 +1,10 @@
.adf {
&-filters__entry {
&-filters__entry:has(.adf-filter-action-button) {
padding: 12px 0;
height: 24px;
width: 100%;
cursor: pointer;
font-size: var(--theme-body-1-font-size) !important;
font-size: var(--theme-body-1-font-size);
font-weight: bold;
opacity: 0.54;
@@ -15,7 +15,7 @@
.adf-filter-action-button .adf-filter-action-button__label {
padding-left: 20px;
margin: 0 8px !important;
margin: 0 8px;
}
&.adf-active,

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

@@ -19,7 +19,7 @@
<mat-card-actions class="adf-no-form-mat-card-actions">
<button mat-button *ngIf="hasAttachFormButton()" id="adf-no-form-attach-form-button" (click)="onShowAttachForm()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
<div>
<div class="adf-no-form-mat-card-actions-container">
<button mat-button *ngIf="hasCancelButton()" id="adf-no-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
<button mat-button *ngIf="hasCompleteButton()" id="adf-no-form-complete-button" color="primary" (click)="onCompleteButtonClick()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
</div>

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

@@ -1,56 +1,56 @@
.adf {
&-message-card {
width: 60%;
box-sizing: border-box;
margin: 16px auto;
.adf-message-card {
width: 60%;
box-sizing: border-box;
margin: 16px auto;
.mat-card-actions {
border-top: solid 1px var(--adf-theme-background-status-bar-color);
}
.adf-no-form-mat-card-actions {
border-top: solid 1px var(--adf-theme-background-status-bar-color);
}
&-no-form-message-container {
height: 256px;
width: 100%;
display: table;
}
&-no-form-message-list {
display: table-cell;
vertical-align: middle;
text-align: center !important;
}
&-no-form-message {
padding-bottom: 10px;
font-size: var(--theme-display-1-font-size);
line-height: 36px;
letter-spacing: -1.3px;
opacity: 0.54;
margin: auto;
width: fit-content !important;
}
&-no-form-submessage {
font-size: var(--theme-subheading-2-font-size);
opacity: 0.54;
margin: auto;
width: fit-content !important;
}
&-no-form-mat-card-actions.mat-card-actions {
display: flex;
justify-content: space-between;
& .mat-button {
text-transform: uppercase;
border-radius: 5px;
.adf {
&-no-form-message-container {
height: 256px;
width: 100%;
display: table;
}
& .mat-button-wrapper {
&-no-form-message-list {
display: table-cell;
vertical-align: middle;
text-align: center;
}
&-no-form-message {
padding-bottom: 10px;
font-size: var(--theme-display-1-font-size);
line-height: 36px;
letter-spacing: -1.3px;
opacity: 0.54;
font-size: var(--theme-button-font-size);
font-weight: bold;
margin: auto;
width: fit-content;
}
&-no-form-submessage {
font-size: var(--theme-subheading-2-font-size);
opacity: 0.54;
margin: auto;
width: fit-content;
}
&-no-form-mat-card-actions:has(.adf-no-form-mat-card-actions-container) {
display: flex;
justify-content: space-between;
& .mat-button {
text-transform: uppercase;
border-radius: 5px;
}
& .mat-button-wrapper {
opacity: 0.54;
font-size: var(--theme-button-font-size);
font-weight: bold;
}
}
}
}