inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-40649 Material Design 3 migration (#11286)

Browse Source 
* AAE-38957 Cleanup code from color assignments on Material elements (#11266)

* AAE-38646   cleanup core lib from custom variables (#11259)

* AAE-38646 General cleanup of custom variables from core lib

* AAE-38646 Cleanup some of the remaining variables

* AAE-38646 Last color-mix removal

* AAE-38646 Reduce amount of customizations

* AAE-38646 apply overrides, reduce customization

* AAE-38646 modify remaining styles

* AAE-38646 Fix override assignemnts

* AAE-38646 Address comments, cleanup unused

* AAE-38978 Cleanup process-services-cloud lib from custom css variables (#11295)

* AAE-38978 Cleanup custom variables inside process-services-cloud lib

* AAE-38978 Adjust rich text widget styling

* AAE-38978 Comment fixes

* AAE-38980 Cleanup insights lib from custom css variables (#11314)

* AAE-38980 Cleanup insights lib from custom css variables

* AAE-38980 Removed unnecessarily specific selector

* AAE-38979 Cleanup content-services lib from custom css variables (#11313)

* AAE-38979 Remove/replace variable and hardcoded customizations

* AAE-38979 Cleanup unused @use and @import statements

* AAE-39159 Cleanup process-services lib from custom css variables (#11316)

* AAE-39159 Cleanup process-services lib from custom css variables

* AAE-39159 Fix import and build

* Fix build

* Remove leftover button customization

* fix missing brace

* AAE-39748 Pagination font size match md3

* fix incorrect html templates after rebase

* swap leftover variables

* fix units

* copilot comments

* visual regression result fixes

* CSX-204 Update card view components (#11358)

* CSX-535 Update background color on readonly for card view selectitem (#11799)

* remove invalid color test

* add stylelint rule

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Co-authored-by: Ricardo Dias <ricardo.dias@hyland.com>
This commit is contained in:
Wojciech Duda
2026-05-20 14:19:20 +05:30
committed by Anamika Dey
co-authored by Ehsan Rezaei Ricardo Dias
parent 1f784596bb
commit 2289db1528
236 changed files with 838 additions and 1780 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.stylelintrc.json
+6
View File
@@ -1,6 +1,12 @@
{
"extends": ["stylelint-config-standard-scss"],
"rules": {
"custom-property-pattern": [
"^(mat-sys|mdc)",
{
"message": "Use only Angular Material system variables (--mat-sys-*, --mdc-*)"
}
],
"color-function-notation": "legacy",
"alpha-value-notation": "number",
"color-no-invalid-hex": true,
lib/content-services/project.json
+1 -1
View File
@@ -43,7 +43,7 @@
"options": {
"commands": [
{
"command": "stylelint lib/content-services/**/*.scss --config stylelint-config.json"
"command": "stylelint \"lib/content-services/**/*.scss\" --config .stylelintrc.json"
}
]
}
lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
+1 -7
View File
@@ -9,8 +9,7 @@ adf-aspect-list-dialog {
}
.adf-aspect-list-dialog-title {
font-size: large;
font-weight: 200;
font: var(--mat-sys-headline-medium);
margin-top: 0;
}
@@ -44,11 +43,6 @@ adf-aspect-list-dialog {
margin-bottom: 8px;
.adf-aspect-property-table {
.adf-aspect-property-table-cell {
font-size: smaller;
color: var(--adf-theme-foreground-text-color-087);
}
.adf-aspect-property-table-column {
&-name {
width: 30%;
lib/content-services/src/lib/aspect-list/aspect-list.component.scss
+7 -9
View File
@@ -23,7 +23,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
&-aspect-list-container {
max-height: $dialog-list-height;
overflow: auto;
border: 1px solid var(--adf-theme-foreground-text-color-007);
border: 1px solid var(--mat-sys-outline-variant);
.adf-aspect-list-check-button {
margin-right: 5px;
@@ -35,11 +35,11 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
.adf-accordion-aspect-list-item {
padding-left: 14px;
display: flex;
box-shadow: 0 2px 2px -1px var(--adf-theme-foreground-text-color-007);
box-shadow: var(--mat-sys-level2);
&.adf-hover {
&:hover {
background-color: var(--adf-theme-background-hover-color);
background-color: var(--mat-sys-surface-container);
}
}
}
@@ -47,8 +47,6 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
.adf-accordion-aspect-list-expansion-panel {
margin: 0;
width: 100%;
box-shadow: none;
background: border-box;
#{ms.$mat-checkbox-background} {
height: 16px;
@@ -56,13 +54,13 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
}
&-header {
font-size: smaller;
font: var(--mat-sys-body-small);
padding-left: 0;
height: 48px;
}
&-header-title {
color: var(--theme-secondary-text);
color: var(--mat-sys-on-secondary-container);
}
&-header-description {
@@ -82,8 +80,8 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
.adf-aspect-property-table-column-name,
.adf-aspect-property-table-column-title,
.adf-aspect-property-table-column-data-type {
font-size: 12px;
color: var(--adf-theme-foreground-text-color-064);
font: var(--mat-sys-body-small);
color: var(--mat-sys-on-secondary-container);
}
.adf-aspect-property-table-column {
lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
+10 -22
View File
@@ -1,11 +1,8 @@
.adf-breadcrumb {
display: flex;
flex: 1;
line-height: 24px;
font-size: var(--theme-body-1-font-size);
font-weight: 600;
letter-spacing: -0.2px;
color: var(--adf-theme-foreground-text-color-064);
font: var(--mat-sys-body-medium);
color: var(--mat-sys-on-surface);
overflow: hidden;
&-container {
@@ -35,7 +32,7 @@
margin-right: 5px;
&:focus {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
outline: none;
}
@@ -44,11 +41,11 @@
}
&-arrow {
font-size: var(--theme-adf-icon-1-font-size);
font: var(--mat-sys-body-small);
position: absolute;
left: 4px;
top: 4px;
color: white;
color: var(--mat-sys-on-secondary);
z-index: 2;
}
@@ -70,30 +67,21 @@
padding-right: 2px;
overflow: hidden;
display: flex;
line-height: 33px;
font-size: var(--theme-body-1-font-size);
font-weight: 600;
letter-spacing: -0.2px;
font: var(--mat-sys-body-medium);
text-align: left;
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-secondary-container);
flex: 0 1 auto;
min-width: 35px;
margin-top: auto;
text-overflow: ellipsis;
&:hover,
&.adf-active {
color: var(--adf-theme-foreground-text-color-064);
}
&.adf-active {
color: var(--adf-theme-foreground-text-color-087);
color: var(--mat-sys-on-surface);
}
&-chevron {
opacity: 1;
margin-top: 9px;
font-size: var(--theme-adf-icon-1-font-size);
font: var(--mat-sys-body-small);
}
&-anchor {
@@ -110,7 +98,7 @@
text-align: start;
&:focus {
outline: 1px solid var(--theme-accent-color-a200);
outline: 1px solid var(--mat-sys-outline-variant);
outline-offset: -1px;
}
}
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
+5 -8
View File
@@ -6,11 +6,8 @@ $dropdown-horizontal-offset: 30px;
&-dropdown-breadcrumb {
display: flex;
flex: 1;
line-height: 24px;
font-size: var(--theme-body-1-font-size);
font-weight: 600;
letter-spacing: -0.2px;
color: var(--adf-theme-foreground-text-color-064);
font: var(--mat-sys-body-medium);
color: var(--mat-sys-on-secondary-container);
overflow: hidden;
margin-top: 10px;
@@ -36,7 +33,7 @@ $dropdown-horizontal-offset: 30px;
width: 25px;
&:focus {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
outline: none;
}
}
@@ -61,12 +58,12 @@ $dropdown-horizontal-offset: 30px;
text-overflow: ellipsis;
display: inline-block;
width: 75%;
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
}
&-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
padding: 0 12px;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
}
&-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:first-child {
lib/content-services/src/lib/category/categories-management/categories-management.component.html
+1 -1
View File
@@ -10,7 +10,7 @@
(keyup.enter)="addCategory()"
adf-auto-focus
/>
<mat-error
<mat-error
*ngIf="categoryNameControl.invalid && categoryNameControl.touched"
data-automation-id="categories-error-message">
{{ categoryNameErrorMessageKey | translate }}
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+3 -21
View File
@@ -1,5 +1,3 @@
@use '../../mat-selectors.scss' as ms;
.adf-categories-management {
margin: 5px 0;
@@ -35,23 +33,11 @@
height: 100%;
overflow-wrap: anywhere;
padding: 5px 0;
font-size: 14px;
background-color: inherit;
color: inherit;
&:not(#{ms.$mat-list-item-disabled}):hover {
cursor: pointer;
background: var(--adf-theme-mat-grey-color-a200);
}
& span {
padding: 0;
}
}
.adf-existing-categories-label {
font-size: 10px;
color: var(--theme-secondary-text-color);
font: var(--mat-sys-body-small);
color: var(--mat-sys-on-secondary-container);
margin-bottom: 2px;
}
@@ -64,12 +50,8 @@
min-height: 22vh;
.adf-create-category-label {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
cursor: pointer;
overflow-wrap: anywhere;
}
#{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
opacity: 1;
}
}
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
-9
View File
@@ -10,18 +10,9 @@
&-footer.adf-content-metadata-card-view-footer {
margin: 0;
padding: 8px 12px;
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
display: flex;
place-content: stretch space-between;
align-items: stretch;
max-height: 100%;
button {
color: var(--adf-theme-foreground-text-color-064);
&:hover {
color: var(--adf-theme-foreground-text-color-087);
}
}
}
}
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+3 -7
View File
@@ -37,7 +37,6 @@
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
(click)="saveChanges($event)"
color="primary"
data-automation-id="save-general-info-metadata"
[disabled]="!hasMetadataChanged || invalidProperties.size > 0">
<mat-icon adf-icon="check" />
@@ -92,8 +91,7 @@
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
(click)="saveChanges($event)"
color="primary"
data-automation-id="save-tags-metadata"
data-automation-id="save-tags-metadata"
[disabled]="!hasMetadataChanged">
<mat-icon adf-icon="check" />
</button>
@@ -156,8 +154,7 @@
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
(click)="saveChanges($event)"
color="primary"
data-automation-id="save-categories-metadata"
data-automation-id="save-categories-metadata"
[disabled]="!hasMetadataChanged">
<mat-icon adf-icon="check" />
</button>
@@ -238,8 +235,7 @@
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
(click)="saveChanges($event)"
color="primary"
data-automation-id="save-metadata"
data-automation-id="save-metadata"
[disabled]="!hasMetadataChanged || invalidProperties.size > 0">
<mat-icon adf-icon="check" />
</button>
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+4 -42
View File
@@ -5,42 +5,21 @@ $panel-properties-height: 56px !default;
.adf {
&-metadata-properties {
.adf-content-metadata-panel {
box-shadow: none;
border: 1px solid var(--adf-metadata-property-panel-border-color);
border-radius: 12px;
margin: 12px;
.adf-property-list .adf-property .adf-property-field {
label {
font-size: 19px;
line-height: 24px;
font: var(--mat-sys-headline-small);
}
}
}
.adf-metadata-properties-header {
height: $panel-properties-height;
padding: 0 12px;
border-radius: 12px 12px 0 0;
&.adf-metadata-properties-header-expanded {
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
}
}
.adf-metadata-properties-expansion-panel,
.adf-metadata-categories-header {
display: block;
margin-top: 16px;
}
.adf-metadata-properties-tags,
.adf-metadata-no-item-added {
margin-top: 16px;
}
.adf-edit-icon-buttons {
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-secondary-container);
}
#{ms.$mat-chip} {
@@ -52,13 +31,14 @@ $panel-properties-height: 56px !default;
.mat-mdc-chip-action-label {
overflow: hidden;
}
/* stylelint-enable selector-class-pattern */
}
}
.adf-metadata-no-item-added {
word-break: break-all;
font-size: 15px;
font: var(--mat-sys-body-small);
padding: 0 0 0 12px;
}
@@ -72,23 +52,5 @@ $panel-properties-height: 56px !default;
&-metadata-action-buttons {
display: flex;
justify-content: space-evenly;
&-clear {
color: var(--adf-metadata-action-button-clear-color);
}
}
&-metadata-categories-header {
.adf-categories-button {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
height: $panel-properties-height;
[hidden] {
visibility: hidden;
}
}
}
}
lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss
+11 -29
View File
@@ -1,31 +1,17 @@
@use '../../mat-selectors.scss' as ms;
/* stylelint-disable no-descending-specificity */
$content-node-selector-thumbnail-width: 35px !default;
$content-node-selector-thumbnail-max-width: 40px !default;
h2.adf-search-results-label {
flex: 1;
font-weight: 600;
font-size: var(--theme-body-1-font-size);
font-style: normal;
font-stretch: normal;
line-height: 1.43;
letter-spacing: -0.2px;
color: var(--adf-theme-foreground-text-color-087);
}
#{ms.$mdc-dialog} {
#{ms.$mat-dialog-surface}:is(div) {
padding-bottom: 0;
}
font: var(--mat-sys-body-medium);
}
.adf-content-node-selector-panel {
.adf-toolbar .adf-toolbar-container.adf-toolbar-container-row {
max-height: 48px;
border-bottom-width: 0;
font-size: var(--theme-body-1-font-size);
font-size: var(--mat-sys-body-medium-size);
height: auto;
}
}
@@ -46,14 +32,14 @@ h2.adf-search-results-label {
width: 100%;
margin-bottom: 15px;
.adf-content-node-selector-content-input-icon {
color: var(--adf-theme-foreground-icon-color-054);
.adf-content-node-selector-content-input-icon:is(mat-icon) {
color: var(--mat-sys-on-secondary-container);
}
.adf-content-node-selector-search-clear-button {
.adf-content-node-selector-content-input-icon {
&:hover {
color: var(--adf-theme-foreground-base-color);
color: var(--mat-sys-on-surface);
}
}
}
@@ -74,20 +60,16 @@ h2.adf-search-results-label {
outline: none;
.adf-dropdown-breadcrumb-icon {
color: var(--adf-theme-foreground-base-color-045);
&:hover {
color: var(--adf-theme-foreground-base-color-065);
}
color: var(--mat-sys-on-secondary-container);
}
&:focus .adf-dropdown-breadcrumb-icon {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
.adf-dropdown-breadcrumb-item-chevron {
color: var(--adf-theme-foreground-base-color-045);
color: var(--mat-sys-on-secondary-container);
}
}
@@ -95,7 +77,7 @@ h2.adf-search-results-label {
&-list {
height: 40vh;
overflow: auto;
border: 1px solid var(--adf-theme-foreground-text-color-007);
border: 1px solid var(--mat-sys-outline-variant);
border-top: 0;
position: relative;
@@ -106,7 +88,7 @@ h2.adf-search-results-label {
}
.adf-highlight {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
.adf-datatable-list {
@@ -122,7 +104,7 @@ h2.adf-search-results-label {
}
.adf-datatable-selected > svg {
fill: var(--theme-primary-color);
fill: var(--mat-sys-primary);
}
.adf-no-content-container.adf-datatable-cell {
lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
+2 -44
View File
@@ -46,61 +46,19 @@ adf-content-node-selector {
}
.adf-dropdown-breadcrumb-icon {
color: var(--adf-theme-foreground-base-color-045);
}
#{ms.$mat-dialog-title} {
margin-bottom: 0;
padding: 0;
&::before {
display: none;
}
}
.adf-content-node-selector-dialog-title {
font-size: var(--theme-title-font-size);
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
letter-spacing: -0.5px;
color: var(--adf-theme-foreground-text-color-087);
margin-bottom: 20px;
h2 {
margin: unset;
font-size: unset;
}
color: var(--mat-sys-on-secondary-container);
}
.adf-content-node-selector-dialog-actions {
padding: 8px;
height: 77px;
background-color: var(--theme-background-color);
display: flex;
flex-direction: row;
justify-content: space-between;
color: var(--adf-theme-foreground-text-color);
label {
text-transform: uppercase;
font-weight: normal;
}
.adf-choose-action {
&[disabled] {
color: var(--adf-theme-foreground-secondary-text-color);
}
&:enabled {
color: var(--theme-primary-color);
}
}
}
}
@media screen and (width <= 768px) {
@media screen and (width <=768px) {
.adf-content-node-selector-dialog {
height: 100vh;
}
lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss
+2 -2
View File
@@ -2,7 +2,7 @@
display: grid;
&-location {
color: var(--adf-theme-foreground-text-color-064);
font-size: var(--theme-caption-font-size);
color: var(--mat-sys-on-secondary-container);
font: var(--mat-sys-body-small);
}
}
lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+1 -3
View File
@@ -20,7 +20,6 @@
<mat-slide-toggle
#slideToggleExpirationDate
[disabled]="!canUpdate"
color="primary"
data-automation-id="adf-expire-toggle"
aria-label="{{ 'SHARE.EXPIRES' | translate }}"
[checked]="!!time.value"
@@ -56,7 +55,6 @@
<p class="adf-share-link__info adf-share-link__para">{{ 'SHARE.SHARE-LINK' | translate }}</p>
<div class="adf-share-link--row adf-share-link--sharable-container">
<mat-slide-toggle
color="primary"
data-automation-id="adf-share-toggle"
class="adf-share-link--row__slide-toggle"
aria-label="{{ 'SHARE.TITLE' | translate }}"
@@ -105,7 +103,7 @@
<hr class="adf-share-link__separation-line" aria-hidden="true" />
</mat-dialog-content>
<div class="adf-share-link__actions" mat-dialog-actions>
<button data-automation-id="adf-share-dialog-close" mat-button color="primary" mat-dialog-close>
<button data-automation-id="adf-share-dialog-close" mat-button mat-dialog-close>
{{ 'SHARE.CLOSE' | translate }}
</button>
</div>
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+10 -17
View File
@@ -8,20 +8,15 @@
}
&__dialog-container {
background-color: var(--theme-card-background-color);
background-color: var(--mat-sys-surface);
border-radius: 16px;
}
&__label,
&__title,
&__info {
letter-spacing: -0.4px;
line-height: 2;
font-weight: normal;
font-style: normal;
font-stretch: normal;
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-087);
font: var(--mat-sys-body-medium);
color: var(--mat-sys-on-surface);
}
&__label {
@@ -33,19 +28,19 @@
}
&__public-content {
color: var(--adf-theme-foreground-text-color-064);
font-size: var(--theme-caption-font-size);
color: var(--mat-sys-on-secondary-container);
font: var(--mat-sys-body-small);
}
&__warn {
color: var(--theme-warn-color-a700);
font-size: var(--theme-caption-font-size);
color: var(--mat-sys-error);
font-size: var(--mat-sys-body-small-size);
}
&__border-color {
@include mat.form-field-overrides(
(
outlined-outline-color: var(--theme-warn-color-a700)
outlined-outline-color: var(--mat-sys-warn)
)
);
}
@@ -77,7 +72,7 @@
}
&__separation-line {
border: 1px solid var(--theme-grey-background-color);
border: 1px solid var(--mat-sys-outline-variant);
margin: 8px -24px;
}
@@ -93,7 +88,7 @@
&__heading {
font-weight: 700;
font-size: var(--theme-subheading-2-font-size);
font-size: var(--mat-sys-title-small-size);
}
}
@@ -116,8 +111,6 @@
margin: 8px 0 0;
& > button {
color: var(--adf-theme-foreground-base-color);
background-color: var(--theme-grey-text-background-color);
margin-right: 12px;
}
}
lib/content-services/src/lib/content-type/content-type-dialog.component.scss
+3 -5
View File
@@ -6,14 +6,12 @@
}
&-content-type-dialog-title {
font-size: large;
font-weight: 200;
font: var(--mat-sys-title-large);
margin-top: 0;
}
&-content-type-dialog-description {
font-size: small;
line-height: normal;
font: var(--mat-sys-body-small);
}
&-content-type-table {
@@ -21,6 +19,6 @@
}
&-content-type-dialog-apply-button {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
lib/content-services/src/lib/dialogs/category-selector/category-selector.dialog.html
-1
View File
@@ -19,7 +19,6 @@
<button
(click)="selectCategories()"
[disabled]="!categories.length"
color="primary"
data-automation-id="category-selector-dialog-select-button"
mat-button>
{{ 'NODE_SELECTOR.CHOOSE' | translate }}
lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html
+2 -2
View File
@@ -1,6 +1,6 @@
<h1 matDialogTitle>{{ 'CORE.DIALOG.DOWNLOAD_ZIP.TITLE' | translate }}</h1>
<div mat-dialog-content class="adf-dialog-content">
<mat-progress-bar value="{{ percentageDone }}" color="primary" mode="determinate" />
<mat-progress-bar value="{{ percentageDone }}" mode="determinate" />
<div class="adf-dialog-content-progress-text">
<span class="adf-dialog-content-progress-text-percentage">
{{ percentageDone }}%
@@ -9,7 +9,7 @@
</div>
</div>
<mat-dialog-actions align="end">
<button class="adf-download-zip-dialog-button" mat-button color="primary" id="cancel-button" (click)="cancelDownload()">
<button class="adf-download-zip-dialog-button" mat-button id="cancel-button" (click)="cancelDownload()">
{{ 'CORE.DIALOG.DOWNLOAD_ZIP.ACTIONS.CANCEL' | translate }}
</button>
</mat-dialog-actions>
lib/content-services/src/lib/dialogs/folder/folder.dialog.scss
+1 -11
View File
@@ -1,5 +1,3 @@
@use '../../mat-selectors.scss' as ms;
.adf-folder-dialog {
.adf-folder-dialog-content {
padding: 0;
@@ -27,15 +25,7 @@
text-transform: uppercase;
}
.adf-dialog-action-button:enabled {
color: var(--theme-primary-color);
}
.adf-dialog-action-button:disabled > span {
color: var(--adf-theme-foreground-text-color-064);
}
@media screen and (width <= 380px) {
@media screen and (width <=380px) {
.adf-folder-dialog-title {
margin: 0;
}
lib/content-services/src/lib/dialogs/library/library.dialog.html
-2
View File
@@ -68,7 +68,6 @@
>
@for (option of visibilityOptions; track option.value) {
<mat-radio-button
color="primary"
class="adf-library-dialog-radio-group-button"
[disabled]="option.disabled"
[attr.data-automation-id]="option.value"
@@ -88,7 +87,6 @@
</button>
<button
color="primary"
class="adf-action-button"
mat-button
(click)="submit()"
lib/content-services/src/lib/document-list/components/document-list.component.scss
+15 -39
View File
@@ -3,7 +3,7 @@
.adf-document-list {
min-height: 0;
height: 100%;
background-color: var(--theme-background-color);
background-color: var(--mat-sys-surface);
}
.adf-sticky-document-list {
@@ -13,7 +13,7 @@
.adf-datatable-card {
.adf-datatable-selected > svg {
fill: var(--theme-accent-color);
fill: var(--mat-sys-primary);
width: 30px;
height: 30px;
position: absolute;
@@ -26,7 +26,7 @@
display: inline-table;
& > svg {
fill: var(--theme-accent-color);
fill: var(--mat-sys-primary);
width: 30px;
height: 30px;
}
@@ -55,37 +55,26 @@
}
&--text {
color: var(--adf-theme-foreground-text-color);
font-size: var(--theme-subheading-2-font-size);
color: var(--mat-sys-on-surface);
font-size: var(--mat-sys-title-small-size);
}
}
.adf-document-list__this-space-is-empty {
height: 32px;
opacity: 0.26;
font-size: var(--theme-headline-font-size);
line-height: 1.33;
letter-spacing: -1px;
color: var(--adf-theme-foreground-text-color);
font: var(--mat-sys-display-medium);
}
.adf-document-list__drag-drop {
height: 56px;
opacity: 0.54;
font-size: 56px;
line-height: 1;
letter-spacing: -2px;
color: var(--adf-theme-foreground-text-color);
font: var(--mat-sys-display-medium);
margin-top: 40px;
}
.adf-document-list__any-files-here-to-add {
height: 24px;
opacity: 0.54;
font-size: var(--theme-subheading-2-font-size);
line-height: 1.5;
letter-spacing: -0.4px;
color: var(--adf-theme-foreground-text-color);
font: var(--mat-sys-title-medium);
color: var(--mat-sys-on-surface);
margin-top: 17px;
}
@@ -109,15 +98,11 @@
.adf-empty-list-header {
height: 32px;
opacity: 0.26;
font-size: var(--theme-headline-font-size);
line-height: 1.33;
letter-spacing: -1px;
color: var(--adf-theme-foreground-text-color);
font: var(--mat-sys-display-medium);
}
.adf-documentlist-pagination {
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
.adf-pagination__block {
border-right: none;
@@ -127,33 +112,24 @@
.adf-empty-folder {
&-this-space-is-empty {
height: 32px;
font-size: var(--theme-headline-font-size);
line-height: 1.33;
letter-spacing: -1px;
color: var(--adf-theme-foreground-text-color-064);
font: var(--mat-sys-display-medium);
}
&-drag-drop {
min-height: 56px;
font-size: 53px;
line-height: 1;
letter-spacing: -2px;
color: var(--adf-theme-foreground-text-color);
font: var(--mat-sys-display-medium);
margin-top: 40px;
word-break: break-all;
white-space: pre-line;
@include flex.layout-bp(lt-sm) {
font-size: 48px;
font: var(--mat-sys-display-small);
}
}
&-any-files-here-to-add {
min-height: 24px;
font-size: var(--theme-subheading-2-font-size);
line-height: 1.5;
letter-spacing: -0.4px;
color: var(--adf-theme-foreground-text-color);
font: var(--mat-sys-title-medium);
margin-top: 17px;
word-break: break-all;
white-space: pre-line;
lib/content-services/src/lib/document-list/components/file-auto-download/file-auto-download.component.html
-1
View File
@@ -16,7 +16,6 @@
mat-button
mat-dialog-close
id="downloadButton"
color="primary"
[attr.aria-label]="'ADF-DOCUMENT-LIST.FILE_AUTO_DOWNLOAD_DIALOG.ACTIONS.DOWNLOAD' | translate"
[adfNodeDownload]="node">
{{ 'ADF-DOCUMENT-LIST.FILE_AUTO_DOWNLOAD_DIALOG.ACTIONS.DOWNLOAD' | translate }}
lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.html
+1 -1
View File
@@ -30,6 +30,6 @@
</div>
</section>
<div class="adf-new-version-uploader-dialog-actions" mat-dialog-actions>
<button mat-button color="primary" [mat-dialog-close]="true">{{ 'ADF-NEW-VERSION-UPLOADER.DIALOG_LIST.CLOSE' | translate }}</button>
<button mat-button [mat-dialog-close]="true">{{ 'ADF-NEW-VERSION-UPLOADER.DIALOG_LIST.CLOSE' | translate }}</button>
</div>
</ng-container>
lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss
+2 -9
View File
@@ -11,14 +11,8 @@
.adf-new-version-uploader-dialog-title {
flex: 0 0 auto;
font-size: 20px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
font: var(--mat-sys-title-medium);
margin: 0;
letter-spacing: -0.5px;
color: var(--adf-theme-foreground-text-color-087);
}
section.adf-new-version-uploader-dialog-content {
@@ -34,12 +28,11 @@
padding: 8px 8px 24px 8px;
display: flex;
justify-content: flex-end;
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-secondary-container);
-webkit-font-smoothing: antialiased;
button {
text-transform: uppercase;
font-weight: normal;
}
}
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
+6 -31
View File
@@ -1,23 +1,10 @@
@use '../../../mat-selectors.scss' as ms;
#{ms.$mdc-dialog} {
#{ms.$mat-dialog-surface}:is(div) {
padding-bottom: 0;
}
}
.adf-add-permission-dialog {
.adf-add-permission-dialog-title {
margin-bottom: 28px;
margin-left: 20px;
margin-right: 20px;
font-size: var(--theme-title-font-size);
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
letter-spacing: -0.5px;
color: var(--adf-theme-foreground-text-color-087);
font: var(--mat-sys-title-medium);
color: var(--mat-sys-on-surface);
}
.adf-add-permission-dialog-content {
@@ -30,17 +17,6 @@
&-search-user-button {
width: 100%;
justify-content: unset;
#{ms.$mat-button-label} {
padding-right: 0;
}
#{ms.$mat-icon} {
font-size: 24px;
width: 24px;
height: 24px;
margin-left: 0;
}
}
&-add-member-action {
@@ -59,23 +35,22 @@
.adf-add-permission-dialog-actions {
padding: 0 24px;
background-color: var(--theme-background-color);
background-color: var(--mat-sys-surface);
display: flex;
justify-content: flex-end;
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
button {
text-transform: uppercase;
font-weight: normal;
}
.adf-choose-action {
&[disabled] {
color: var(--adf-theme-foreground-secondary-text-color);
color: var(--mat-sys-on-surface-variant);
}
&:enabled {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
}
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss
+3 -9
View File
@@ -1,5 +1,3 @@
@use '../../../mat-selectors.scss' as ms;
$search-result-height: calc(100% - 60px);
.adf {
@@ -7,11 +5,7 @@ $search-result-height: calc(100% - 60px);
display: flex;
height: $search-result-height;
overflow: auto;
border: 2px solid var(--adf-theme-foreground-text-color-007);
#{ms.$mat-list-item-end} {
display: none;
}
border: 2px solid var(--mat-sys-outline-variant);
&-elements {
width: 100%;
@@ -38,7 +32,7 @@ $search-result-height: calc(100% - 60px);
justify-content: space-around;
height: $search-result-height;
overflow: auto;
border: 2px solid var(--adf-theme-foreground-text-color-007);
border: 2px solid var(--mat-sys-outline-variant);
}
&-permission-no-result {
@@ -62,7 +56,7 @@ $search-result-height: calc(100% - 60px);
}
&:enabled {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
}
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss
-11
View File
@@ -1,11 +0,0 @@
.adf {
&-permission-action {
&[disabled] {
opacity: 0.6;
}
&:enabled {
color: var(--theme-primary-color);
}
}
}
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts
-1
View File
@@ -30,7 +30,6 @@ import { TranslatePipe } from '@ngx-translate/core';
selector: 'adf-add-permission',
imports: [CommonModule, AddPermissionPanelComponent, MatButtonModule, TranslatePipe],
templateUrl: './add-permission.component.html',
styleUrls: ['./add-permission.component.scss'],
encapsulation: ViewEncapsulation.None
})
/*
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
+1 -2
View File
@@ -5,7 +5,7 @@
<ng-container *ngIf="permissionList.error$ | async">
<div class="adf-no-permission__template" id="adf-permission-manager-error">
<mat-icon color="warn" adf-icon="error" />
<mat-icon>error</mat-icon>
<p class="adf-no-permission__template--text">{{ 'PERMISSION_MANAGER.ERROR.NOT-FOUND'| translate }}</p>
</div>
</ng-container>
@@ -25,7 +25,6 @@
*ngIf="updatePermissionsAllowed"
class="adf-inherit-toggle"
title="{{'PERMISSION_MANAGER.LABELS.INHERITED_PERMISSION_TOGGLE' | translate }}"
color="primary"
aria-label="{{'PERMISSION_MANAGER.LABELS.INHERITED_PERMISSION_TOGGLE' | translate}}"
data-automation-id="adf-inherit-toggle-button"
[checked]="model.node.permissions.isInheritanceEnabled"
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
+2 -5
View File
@@ -21,13 +21,10 @@
justify-content: space-between;
align-items: center;
padding: 10px 15px;
border: 1px solid var(--adf-theme-foreground-text-color-007);
border: 1px solid var(--mat-sys-outline-variant);
.adf-permission-visibility-toggle {
.adf-permission-visibility-toggle-icon {
font-size: 24px;
height: 24px;
width: 24px;
margin: 1px 0 0 4px;
}
}
@@ -108,6 +105,6 @@
.adf-pop-over-card {
width: 100%;
overflow: hidden;
box-shadow: 0 8px 9px -5px var(--adf-theme-foreground-divider-color), 0 15px 22px 2px var(--adf-theme-foreground-divider-color);
box-shadow: var(--mat-sys-level2);
}
}
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
+6 -11
View File
@@ -1,27 +1,22 @@
.adf-cell-value {
.adf-people-initial {
background: var(--theme-primary-color);
background: var(--mat-sys-primary);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
color: var(--theme-primary-color-default-contrast);
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
color: var(--mat-sys-on-primary);
font: var(--mat-sys-body-small);
text-transform: uppercase;
}
.adf-group-icon {
height: 20px;
width: 20px;
background: var(--theme-primary-color);
background: var(--mat-sys-primary);
border-radius: 50%;
padding: 10px;
color: var(--theme-primary-color-default-contrast);
font-weight: bolder;
font-size: var(--theme-title-font-size);
color: var(--mat-sys-on-primary);
}
.adf-datatable-selected {
@@ -35,7 +30,7 @@
margin: 0;
svg {
fill: var(--theme-accent-color);
fill: var(--mat-sys-secondary);
width: 40px;
height: 40px;
}
lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss
+2 -6
View File
@@ -1,13 +1,9 @@
.adf-user {
&-name-column {
font-weight: 600;
font-size: var(--theme-body-1-font-size);
font: var(--mat-sys-body-medium);
}
&-email-column {
font-size: var(--theme-body-1-font-size);
letter-spacing: -0.2px;
line-height: 1.43;
color: var(--adf-theme-foreground-text-color);
font: var(--mat-sys-body-medium);
}
}
lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
+1 -1
View File
@@ -14,7 +14,7 @@
</fieldset>
<div class="adf-facet-buttons" *ngIf="options.fitsPage && !settings?.hideDefaultAction">
<button mat-button color="primary" (click)="clear()">
<button mat-button (click)="clear()">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}
</button>
</div>
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
+10 -22
View File
@@ -10,26 +10,14 @@ adf-search-chip-autocomplete-input {
margin-top: 4px;
}
#{ms.$mat-form-text-field-infix} {
border: none;
}
.adf-chip-list#{ms.$mat-form-field} {
#{ms.$mat-form-field-infix} {
padding-top: 14px;
padding-bottom: 14px;
min-height: unset;
}
}
.adf-search-properties-file-input {
margin-left: 3px;
}
.adf-autocomplete-added-option-chips.adf-option-chips {
border: 1px solid var(--theme-text-color);
border: 1px solid var(--mat-sys-on-surface);
border-radius: 10px;
background-color: var(--theme-primary-color-default-contrast);
background-color: var(--mat-sys-on-primary);
height: auto;
word-break: break-word;
padding: 4px 0;
@@ -43,19 +31,19 @@ adf-search-chip-autocomplete-input {
}
.adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {
font-size: 13px;
height: 13px;
width: 13px;
font: var(--mat-sys-body-small);
height: var(--mat-sys-body-small-size);
width: var(--mat-sys-body-small-size);
.adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon {
font-size: 13px;
height: 13px;
width: 13px;
font: var(--mat-sys-body-small);
height: var(--mat-sys-body-small-size);
width: var(--mat-sys-body-small-size);
}
}
}
.adf-search-chip-autocomplete-added-option.adf-autocomplete-added-option {
background: var(--adf-theme-mat-grey-color-a200);
color: var(--adf-theme-primary-300);
background: var(--mat-sys-surface-variant);
color: var(--mat-sys-primary);
}
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html
-1
View File
@@ -2,7 +2,6 @@
<ng-container *ngIf="facetFiltersService.selectedBuckets.length">
<mat-chip-option *ngIf="clearAll && facetFiltersService.selectedBuckets.length > 1"
data-automation-id="reset-filter"
color="primary"
selected
class="adf-search-chip-list-item"
title="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss
+3 -3
View File
@@ -1,9 +1,9 @@
.adf-search-chip-list-item:focus {
color: var(--theme-accent-color-default-contrast);
background-color: var(--theme-accent-color);
color: var(--mat-sys-on-secondary);
background-color: var(--mat-sys-secondary);
.adf-search-chip-list-item-remove {
color: var(--theme-accent-color-default-contrast);
color: var(--mat-sys-on-secondary);
opacity: 1;
}
}
lib/content-services/src/lib/search/components/search-control.component.scss
+4 -5
View File
@@ -18,11 +18,10 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5
max-height: 400px;
margin-left: 45px;
margin-top: -22px;
font-size: var(--theme-subheading-1-font-size);
font: var(--mat-sys-body-large);
z-index: 5;
color: var(--adf-theme-foreground-text-color);
background-color: var(--adf-theme-background-card-color);
border-radius: 2px;
color: var(--mat-sys-on-surface);
background-color: var(--mat-sys-surface);
@include flex.layout-bp(lt-md) {
white-space: nowrap;
@@ -33,7 +32,7 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5
&-search-autocomplete-item {
&:hover {
background-color: var(--adf-theme-background-hover-color);
background-color: var(--mat-sys-surface-container);
opacity: 1;
}
}
lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.html
+2 -2
View File
@@ -10,7 +10,7 @@
(dateChange)="onChangedHandler($event, from)"
data-automation-id="datetime-range-from-input">
<mat-datetimepicker-toggle matSuffix [for]="fromDatetimePicker" data-automation-id="datetime-range-from-date-toggle" />
<mat-datetimepicker #fromDatetimePicker color="accent" type="datetime" />
<mat-datetimepicker #fromDatetimePicker type="datetime" />
<mat-error *ngIf="from.invalid" data-automation-id="datetime-range-from-error">
{{ getFromValidationMessage() | translate: { requiredFormat: datetimePickerFormat } }}
</mat-error>
@@ -28,7 +28,7 @@
(dateChange)="onChangedHandler($event, to)"
data-automation-id="datetime-range-to-input">
<mat-datetimepicker-toggle matSuffix [for]="toDatetimePicker" data-automation-id="datetime-range-to-date-toggle" />
<mat-datetimepicker #toDatetimePicker color="accent" type="datetime" />
<mat-datetimepicker #toDatetimePicker type="datetime" />
<mat-error *ngIf="to.invalid" data-automation-id="datetime-range-to-error">
{{ getToValidationMessage() | translate: { requiredFormat: datetimePickerFormat } }}
</mat-error>
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
+1 -1
View File
@@ -39,7 +39,7 @@
</div>
<div class="adf-facet-buttons" *ngIf="field.buckets.fitsPage && !field.settings?.hideDefaultAction">
<button *ngIf="canResetSelectedBuckets(field)" mat-button color="primary" (click)="resetSelectedBuckets(field)">
<button *ngIf="canResetSelectedBuckets(field)" mat-button (click)="resetSelectedBuckets(field)">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}
</button>
</div>
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
+1 -1
View File
@@ -33,6 +33,6 @@
}
.adf-facet-label {
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-secondary-container);
}
}
lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.html
+2 -2
View File
@@ -8,10 +8,10 @@
(optionsChanged)="onOptionsChange($event)" />
<div class="adf-facet-buttons" *ngIf="!settings?.hideDefaultAction">
<button mat-button color="primary" data-automation-id="adf-search-chip-autocomplete-btn-clear" (click)="reset()">
<button mat-button data-automation-id="adf-search-chip-autocomplete-btn-clear" (click)="reset()">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
</button>
<button mat-button color="primary" data-automation-id="adf-search-chip-autocomplete-btn-apply" (click)="submitValues()">
<button mat-button data-automation-id="adf-search-chip-autocomplete-btn-apply" (click)="submitValues()">
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
</button>
</div>
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html
+1 -1
View File
@@ -40,7 +40,7 @@
<button mat-button class="adf-search-action-button" (click)="onRemove()" id="cancel-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR' | translate }}
</button>
<button mat-flat-button class="adf-search-action-button" color="primary" (click)="onApply()" id="apply-filter-button">
<button mat-flat-button class="adf-search-action-button" (click)="onApply()" id="apply-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.APPLY' | translate }}
</button>
</ng-container>
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
+1 -1
View File
@@ -41,7 +41,7 @@
<button mat-button class="adf-search-action-button" (click)="onRemove()" id="cancel-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR' | translate }}
</button>
<button mat-flat-button class="adf-search-action-button" color="primary" (click)="onApply()" id="apply-filter-button">
<button mat-flat-button class="adf-search-action-button" (click)="onApply()" id="apply-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.APPLY' | translate }}
</button>
</ng-container>
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
+7 -21
View File
@@ -1,5 +1,4 @@
@use '@angular/material' as mat;
@use '../../../mat-selectors.scss' as ms;
.adf-search-filter-chip,
.adf-search-filter-chip-tabbed {
@@ -7,21 +6,22 @@
max-width: 320px;
text-overflow: ellipsis;
overflow: hidden;
background: var(--adf-theme-background-unselected-chip-color);
background: var(--mat-sys-surface-variant);
&.adf-search-toggle-chip {
background: var(--adf-theme-background-card-color);
border: 2px solid var(--theme-primary-color);
background: var(--mat-sys-surface);
border: 2px solid var(--mat-sys-primary);
}
.adf-search-filter-placeholder {
flex: 1 1 auto;
white-space: nowrap;
color: var(--adf-theme-foreground-disabled-text-color);
opacity: 0.38;
color: var(--mat-sys-on-surface);
}
&.adf-search-filter-facet-chip::after {
background: var(--adf-theme-background-unselected-chip-color);
background: var(--mat-sys-surface-variant);
color: unset;
}
@@ -29,11 +29,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 300;
}
.adf-filter-value {
font-weight: 500;
font: var(--mat-sys-body-medium);
}
.adf-search-filter-chip-icon {
@@ -47,16 +46,3 @@
@include mat.elevation(2);
}
}
.adf-search-filter-chip#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} {
margin-top: 0;
margin-bottom: 0;
}
#{ms.$mat-standard-chip} {
-webkit-font-smoothing: unset;
}
#{ms.$mat-evolution-chip-set} {
margin-top: -4px;
}
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
+1 -9
View File
@@ -1,21 +1,13 @@
.adf-search-filter-menu-card {
color: var(--adf-theme-foreground-text-color);
background: var(--adf-theme-background-card-color);
.adf-search-filter-title {
display: flex;
justify-content: space-between;
color: var(--adf-theme-foreground-text-color-064);
align-items: center;
padding: 16px 12px;
height: 32px;
font-size: var(--theme-body-1-font-size);
letter-spacing: 0.15px;
font-weight: bold;
font-style: inherit;
font: var(--mat-sys-body-medium);
&-action {
color: var(--adf-theme-foreground-text-color-087);
float: right;
}
}
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
+1 -1
View File
@@ -66,7 +66,7 @@
<button mat-button class="adf-search-action-button" (click)="onRemove()" id="cancel-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR' | translate }}
</button>
<button mat-flat-button class="adf-search-action-button" color="primary" (click)="onApply()" id="apply-filter-button">
<button mat-flat-button class="adf-search-action-button" (click)="onApply()" id="apply-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.APPLY' | translate }}
</button>
</ng-container>
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
-1
View File
@@ -51,7 +51,6 @@
</button>
<button
mat-button
color="primary"
id="apply-filter-button"
class="adf-filter-apply-button"
[attr.aria-label]="'SEARCH.SEARCH_HEADER.APPLY' | translate"
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss
+6 -19
View File
@@ -1,5 +1,4 @@
@use '@angular/material' as mat;
@use '../../../mat-selectors.scss' as ms;
.adf-filter {
&-button:has(.adf-filter-icon) {
@@ -7,11 +6,10 @@
}
&-icon {
opacity: 1;
color: var(--adf-theme-foreground-icon-color);
color: var(--mat-sys-on-surface);
&-active {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
@@ -25,8 +23,8 @@
&-container {
display: flex;
flex-direction: column;
padding: 0;
color: var(--adf-theme-foreground-text-color-087);
padding: 15.5px 15px 10px;
color: var(--mat-sys-on-surface);
.adf-facet-buttons {
display: none;
@@ -35,16 +33,11 @@
.adf-search-check-list {
padding: 5px 0;
}
input {
background: 2px solid var(--adf-theme-background-card-color);
}
}
&-title {
font-size: 1.1em;
font: var(--mat-sys-body-medium);
padding: 16px 0 0 16px;
color: var(--adf-theme-foreground-text-color-087);
-webkit-font-smoothing: subpixel-antialiased;
float: none;
width: 100%;
@@ -68,19 +61,13 @@
display: flex;
justify-content: flex-end;
padding: 15px;
background-color: var(--adf-theme-background-hover-color);
background-color: var(--mat-sys-surface-container);
> button {
font-size: 0.9em;
height: 36px;
width: auto;
padding-left: 16px;
padding-right: 16px;
-webkit-font-smoothing: subpixel-antialiased;
#{ms.$mat-button-label} {
font-weight: unset;
}
}
}
}
lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
+1 -5
View File
@@ -6,11 +6,7 @@ adf-search-filter-tabbed {
}
.adf-search-tab-label-active {
border-bottom: 1px solid var(--theme-primary-color);
#{ms.$mat-tab-label-text} {
color: var(--adf-theme-foreground-secondary-text-color);
}
border-bottom: 1px solid var(--mat-sys-primary);
}
// The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
lib/content-services/src/lib/search/components/search-filter/search-filter-card/search-filter-card.component.html
+1 -1
View File
@@ -10,7 +10,7 @@
<button mat-button class="adf-search-action-button" (click)="clear()" id="clear-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR' | translate }}
</button>
<button mat-flat-button class="adf-search-action-button" color="primary" (click)="apply()" id="apply-filter-button">
<button mat-flat-button class="adf-search-action-button" (click)="apply()" id="apply-filter-button">
{{ 'SEARCH.FILTER.BUTTONS.APPLY' | translate }}
</button>
</div>
lib/content-services/src/lib/search/components/search-filter/search-filter.component.html
-1
View File
@@ -2,7 +2,6 @@
<button *ngIf="displayResetButton && facetFiltersService.responseFacets"
mat-button
color="primary"
title="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
adf-reset-search>
{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.LABEL' | translate }}
lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
+3 -3
View File
@@ -1,10 +1,10 @@
.adf-search-filter {
.adf-search-filter-header-title {
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-087);
font: var(--mat-sys-body-medium);
color: var(--mat-sys-on-secondary-container);
}
.adf-search-check-list-label {
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-secondary-container);
}
}
lib/content-services/src/lib/search/components/search-form/search-form.component.scss
+3 -8
View File
@@ -1,5 +1,4 @@
@use '@angular/material' as mat;
@use '../../../mat-selectors.scss' as ms;
.adf-search-form {
&.adf-search-form-button {
@@ -20,25 +19,21 @@
&-title {
max-width: 120px;
min-width: 120px;
font-size: var(--theme-body-1-font-size);
line-height: 24px;
font: var(--mat-sys-body-medium);
padding-right: 12px;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
.adf-search-form-icon#{ms.$mat-icon} {
font-size: 24px;
height: 24px;
width: 24px;
.adf-search-form-icon {
border: 2px solid transparent;
border-radius: 6px;
transition: border 500ms ease-out;
}
&-icon-selected {
border-color: var(--theme-accent-color);
border-color: var(--mat-sys-secondary);
}
}
lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss
-10
View File
@@ -7,15 +7,5 @@
&:last-child {
padding: 0;
}
input {
height: 25px;
border: 1px solid var(--adf-theme-mat-grey-color-a400);
border-radius: 5px;
margin-top: 5px;
padding: 5px;
font-size: 14px;
color: var(--adf-theme-foreground-text-color);
}
}
}
lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.html
+2 -2
View File
@@ -30,10 +30,10 @@
<div class="adf-facet-buttons" *ngIf="!settings?.hideDefaultAction">
<button mat-button color="primary" type="button" (click)="clear()" data-automation-id="number-range-btn-clear">
<button mat-button type="button" (click)="clear()" data-automation-id="number-range-btn-clear">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
</button>
<button mat-button color="primary" type="submit" [disabled]="!form.valid" data-automation-id="number-range-btn-apply">
<button mat-button type="submit" [disabled]="!form.valid" data-automation-id="number-range-btn-apply">
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
</button>
</div>
lib/content-services/src/lib/search/components/search-slider/search-slider.component.html
+1 -1
View File
@@ -9,7 +9,7 @@
</mat-slider>
<div class="adf-facet-buttons" *ngIf="!settings?.hideDefaultAction">
<button mat-button color="primary" (click)="clear()" data-automation-id="slider-btn-clear">
<button mat-button (click)="clear()" data-automation-id="slider-btn-clear">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
</button>
</div>
lib/content-services/src/lib/tag/tag-actions/tag-actions.component.html
+1 -1
View File
@@ -29,7 +29,7 @@
</mat-form-field>
</td>
<td>
<button id="add-tag" class="adf-full-width" color="primary" (click)="addTag()" [disabled]="disableAddTag" mat-raised-button>
<button id="add-tag" class="adf-full-width" (click)="addTag()" [disabled]="disableAddTag" mat-raised-button>
{{ 'TAG.BUTTON.ADD' | translate }}
</button>
</td>
lib/content-services/src/lib/tag/tag-actions/tag-actions.component.scss
+1 -1
View File
@@ -9,7 +9,7 @@
}
.adf-tag-actions-delete-text {
font-size: var(--theme-subheading-2-font-size);
font-size: var(--mat-sys-title-small-size);
float: left;
}
lib/content-services/src/lib/tag/tag-list/tag-list.component.scss
+3 -3
View File
@@ -10,11 +10,11 @@
.adf-list-tag {
display: block;
font-size: var(--theme-subheading-2-font-size);
font-size: var(--mat-sys-title-small-size);
.adf-tag-list-chip {
color: var(--theme-primary-color-default-contrast);
background-color: var(--theme-primary-color);
color: var(--mat-sys-on-primary);
background-color: var(--mat-sys-primary);
}
}
}
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
+3 -13
View File
@@ -1,5 +1,3 @@
@use '../../mat-selectors.scss' as ms;
adf-tags-creator {
display: block;
@@ -20,7 +18,7 @@ adf-tags-creator {
}
.adf-create-tag-label {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
cursor: pointer;
margin-top: -1px;
padding-left: 12px;
@@ -45,7 +43,7 @@ adf-tags-creator {
.adf-existing-tags-label {
font-size: 10px;
color: var(--theme-secondary-text-color);
color: var(--mat-sys-on-surface-variant);
padding-left: 12px;
margin-bottom: 2px;
}
@@ -66,11 +64,6 @@ adf-tags-creator {
background-color: inherit;
color: inherit;
&:not(#{ms.$mat-list-item-disabled}):hover {
cursor: pointer;
background: var(--adf-theme-mat-grey-color-a200);
}
& span {
padding: 0;
}
@@ -81,10 +74,6 @@ adf-tags-creator {
overflow: unset;
min-height: 62px;
}
#{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
opacity: 1;
}
}
}
@@ -98,6 +87,7 @@ adf-tags-creator {
word-break: break-all;
}
}
/* stylelint-enable selector-class-pattern */
[hidden] {
lib/content-services/src/lib/tree-view/components/tree-view.component.scss
+2 -2
View File
@@ -1,11 +1,11 @@
.adf {
&-tree-view-icon {
color: #d9e022;
color: var(--mat-sys-primary);
}
&-tree-view-node.adf-tree-view {
min-height: 40px;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
align-items: baseline;
}
lib/content-services/src/lib/tree/components/tree.component.html
+4 -9
View File
@@ -19,8 +19,7 @@
<div class="adf-tree-expand-collapse-container">
<button class="adf-tree-load-more-button" mat-icon-button (click)="loadMoreSubnodes(node)">
<mat-progress-spinner
color="primary"
mode="indeterminate"
mode="indeterminate"
[diameter]="24"
*ngIf="node.isLoading; else loadMoreIcon"
/>
@@ -57,8 +56,7 @@
mat-icon-button
>
<mat-progress-spinner
color="primary"
mode="indeterminate"
mode="indeterminate"
[diameter]="24"
*ngIf="node.isLoading; else expandCollapseIcon"
/>
@@ -69,16 +67,14 @@
</div>
<ng-container *ngIf="selectableNodes">
<mat-checkbox *ngIf="node.hasChildren; else noChildrenNodeCheckbox"
color="primary"
[id]="node.id"
[id]="node.id"
[checked]="descendantsAllSelected(node)"
[indeterminate]="descendantsPartiallySelected(node)"
(change)="onNodeSelected(node)"
data-automation-id="has-children-node-checkbox" />
<ng-template #noChildrenNodeCheckbox>
<mat-checkbox
color="primary"
[id]="node.id"
[id]="node.id"
[checked]="treeNodesSelection.isSelected(node)"
(change)="onNodeSelected(node)"
data-automation-id="no-children-node-checkbox" />
@@ -128,7 +124,6 @@
<ng-template #loadingSpinner>
<div class="adf-tree-loading-spinner-container">
<mat-progress-spinner
color="primary"
mode="indeterminate" />
</div>
</ng-template>
lib/content-services/src/lib/tree/components/tree.component.scss
+7 -7
View File
@@ -24,7 +24,7 @@ $tree-header-font-size: 12px !default;
padding-left: 15px;
padding-right: 15px;
transition-property: background-color;
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
border-bottom: 1px solid var(--mat-sys-outline-variant);
min-height: $tree-row-height;
user-select: none;
@@ -33,7 +33,7 @@ $tree-header-font-size: 12px !default;
}
&:hover {
background-color: var(--adf-theme-background-hover-color);
background-color: var(--mat-sys-surface-container);
.adf-tree-actions {
display: flex;
@@ -41,9 +41,9 @@ $tree-header-font-size: 12px !default;
}
&:focus {
background-color: var(--adf-theme-background-hover-color);
background-color: var(--mat-sys-surface-container);
outline-offset: -1px;
outline: 1px solid var(--theme-accent-color-a200);
outline: 1px solid var(--mat-sys-secondary);
}
.adf-tree-expand-collapse-button,
@@ -55,7 +55,7 @@ $tree-header-font-size: 12px !default;
}
.adf-tree-cell {
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
width: 100%;
.adf-tree-cell-value {
@@ -82,13 +82,13 @@ $tree-header-font-size: 12px !default;
letter-spacing: 0;
min-height: $tree-row-height;
font-size: $tree-header-font-size;
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
box-sizing: border-box;
padding-top: 12px;
&:focus {
outline-offset: -1px;
outline: 1px solid var(--theme-accent-color-a200);
outline: 1px solid var(--mat-sys-primary);
}
}
}
lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html
-3
View File
@@ -79,7 +79,6 @@
<button
id="adf-upload-dialog-cancel-all"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_ALL' | translate"
color="primary"
mat-button
(click)="toggleConfirmation()"
>{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_ALL' | translate }}</button>
@@ -89,7 +88,6 @@
id="adf-upload-dialog-close"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_CLOSE' | translate"
mat-button
color="primary"
(click)="close()"
>{{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}</button>
}
@@ -108,7 +106,6 @@
id="adf-upload-dialog-confirm"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CONTINUE' | translate"
mat-button
color="primary"
(click)="toggleConfirmation()"
>{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}</button>
</footer>
lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss
+6 -12
View File
@@ -1,7 +1,6 @@
/* stylelint-disable no-descending-specificity */
.adf-upload-dialog {
background: var(--adf-theme-background-dialog-color);
color: var(--adf-theme-foreground-text-color-064);
background: var(--mat-sys-surface-container-high);
position: fixed;
bottom: 20px;
width: 40%;
@@ -35,8 +34,6 @@
height: 24px;
width: 24px;
padding: 0;
line-height: 0;
color: var(--adf-theme-foreground-text-color-064);
}
}
@@ -52,8 +49,8 @@
&__content {
overflow: auto;
max-height: 194px;
border-top: 1px solid var(--adf-theme-foreground-text-color-014);
border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
border-top: 1px solid var(--mat-sys-outline-variant);
border-bottom: 1px solid var(--mat-sys-outline-variant);
}
&__confirmation {
@@ -61,10 +58,7 @@
}
&__confirmation--title {
font-size: var(--theme-subheading-2-font-size);
line-height: 1.5;
letter-spacing: -0.4px;
color: var(--adf-theme-foreground-text-color-087);
font: var(--mat-sys-title-small-size);
}
&__confirmation--text {
@@ -93,7 +87,7 @@
right: 25px;
}
@media screen and (width >= 380px) and (width <= 768px) {
@media screen and (width >=380px) and (width <=768px) {
.adf-upload-dialog {
width: 60%;
}
@@ -103,7 +97,7 @@
}
}
@media screen and (width <= 380px) {
@media screen and (width <=380px) {
.adf-upload-dialog {
width: 85%;
}
lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html
+1 -1
View File
@@ -13,7 +13,7 @@
@if (isUploadVersion()) {
<span class="adf-file-uploading-row__version" tabindex="0" >
<mat-chip color="primary"
<mat-chip
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.VERSION' | translate: { version: versionNumber }"
[title]="'version' + versionNumber"
>{{ versionNumber }}</mat-chip>
lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss
+8 -12
View File
@@ -1,8 +1,6 @@
$file-uploading-row-hover-color: #eee !default;
adf-file-uploading-list-row:not(:first-child) {
display: block;
border-top: 1px solid var(--adf-theme-foreground-text-color-014);
border-top: 1px solid var(--mat-sys-outline-variant);
}
.adf-file-uploading-row {
@@ -12,7 +10,7 @@ adf-file-uploading-list-row:not(:first-child) {
cursor: default;
&:hover {
background: $file-uploading-row-hover-color;
background: var(--mat-sys-surface);
}
&__name {
@@ -29,8 +27,7 @@ adf-file-uploading-list-row:not(:first-child) {
min-width: 100px;
display: flex;
justify-content: flex-end;
line-height: 40px;
height: 40px;
font: var(--mat-sys-body-large);
align-items: center;
padding: 0 12px;
}
@@ -39,24 +36,23 @@ adf-file-uploading-list-row:not(:first-child) {
cursor: pointer;
display: flex;
align-items: center;
height: 40px;
line-height: 40px;
font: var(--mat-sys-body-large);
}
&__status--done {
color: var(--theme-accent-color);
color: var(--mat-sys-secondary);
}
&__status--error {
color: var(--theme-warn-color);
color: var(--mat-sys-error);
padding: 0 12px;
}
&__action--cancel {
color: var(--theme-warn-color);
color: var(--mat-sys-error);
}
&__action--remove {
color: var(--theme-warn-color);
color: var(--mat-sys-error);
}
}
lib/content-services/src/lib/upload/components/upload-button.component.scss
+1 -15
View File
@@ -2,9 +2,6 @@
&-upload-button-file-container {
.adf-upload-button-icon {
margin: 0;
font-size: 24px;
width: 24px;
height: 24px;
}
input {
@@ -17,18 +14,7 @@
align-items: center;
cursor: pointer;
padding: 8px 16px;
box-shadow: 0 3px 1px -2px #0003, 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12);
box-shadow: var(--mat-sys-level2);
border-radius: 4px;
&:active {
box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
}
&-upload-button-file-container-upload-single-file[disabled] + &-upload-button-label {
background-color: var(--adf-disabled-button-background);
color: var(--adf-theme-foreground-disabled-text-color);
box-shadow: none;
cursor: default;
}
}
lib/content-services/src/lib/version-manager/version-comparison.component.scss
+1 -1
View File
@@ -17,7 +17,7 @@
}
.adf-version-arrow-icon {
font-size: var(--theme-display-4-font-size);
font-size: var(--mat-sys-display-large-size);
}
.adf-version-comparison-node-name,
lib/content-services/src/lib/version-manager/version-list.component.html
+1 -2
View File
@@ -1,5 +1,4 @@
<mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate"
color="accent" />
<mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate" />
<mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
<cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport" [minBufferPx]="440" [maxBufferPx]="528">
<mat-list-item class="adf-version-list-item"
lib/content-services/src/lib/version-manager/version-list.component.scss
+3 -3
View File
@@ -26,12 +26,12 @@
.adf-version-list-icon {
margin: 0 16px;
color: var(--theme-sidenav-user-menu-color);
color: var(--mat-sys-on-surface);
}
&.adf-version-list-element {
.adf-version-list-item {
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
border-bottom: 1px solid var(--mat-sys-outline-variant);
width: 100%;
height: 88px;
}
@@ -50,7 +50,7 @@
width: auto;
opacity: 0.5;
@media screen and (width <= 629px) {
@media screen and (width <=629px) {
width: 97%;
}
}
lib/content-services/src/lib/version-manager/version-manager.component.html
+1 -1
View File
@@ -22,7 +22,7 @@
<button mat-raised-button
id="adf-show-version-upload-button"
class="adf-version-manager-upload-button"
(click)="toggleNewVersion()" color="primary"
(click)="toggleNewVersion()"
*ngIf="uploadState ==='close'">{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.ADD' | translate }}
</button>
</div>
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss
-1
View File
@@ -1 +0,0 @@
/* stylelint-disable-next-line no-empty-source */
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
-1
View File
@@ -64,7 +64,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
selector: 'adf-alfresco-viewer',
imports: [CommonModule, TranslatePipe, MatButtonModule, IconModule, ...VIEWER_DIRECTIVES, NodeDownloadDirective],
templateUrl: './alfresco-viewer.component.html',
styleUrls: ['./alfresco-viewer.component.scss'],
host: { class: 'adf-alfresco-viewer' },
encapsulation: ViewEncapsulation.None,
providers: [ViewUtilService]
lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html
-1
View File
@@ -11,7 +11,6 @@
<button
mat-icon-button
(click)="toggleCompact()"
color="primary"
[title]="'CORE.BREADCRUMBS.SHOWALL' | translate"
[attr.aria-label]="'CORE.BREADCRUMBS.SHOWALL' | translate"
>
lib/core/project.json
+1 -1
View File
@@ -68,7 +68,7 @@
"options": {
"commands": [
{
"command": "stylelint lib/core/**/*.scss --config stylelint-config.json"
"command": "stylelint \"lib/core/**/*.scss\" --config .stylelintrc.json"
}
]
}
lib/core/src/lib/about/about-package/package-list.component.scss
-10
View File
@@ -1,19 +1,9 @@
.adf-package-list-table {
background: var(--adf-theme-background-card-color);
&__header-row {
min-height: 56px;
}
&__header-cell {
color: var(--adf-theme-foreground-secondary-text-color);
}
&__row {
min-height: 48px;
&-cell {
color: var(--adf-theme-foreground-text-color);
}
}
}
lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss
-2
View File
@@ -1,7 +1,5 @@
.adf-about-server-settings {
&__card {
background: var(--adf-theme-background-card-color);
color: var(--adf-theme-foreground-text-color);
border-radius: 4px;
padding: 16px;
lib/core/src/lib/about/about.component.scss
-4
View File
@@ -1,9 +1,5 @@
.adf-about-panel {
&-header {
height: 48px;
&__title {
color: var(--adf-theme-foreground-text-color);
}
}
}
lib/core/src/lib/avatar/avatar.component.html
+5 -2
View File
@@ -1,7 +1,10 @@
<div class="adf-avatar">
<img (error)="src = ''" *ngIf="src; else initialsTemplate" class="adf-avatar__image" [src]="src" [alt]="initials" [title]="tooltip" />
<img (error)="src = ''" *ngIf="src; else initialsTemplate" class="adf-avatar__image"
[src]="src" [alt]="initials" [title]="tooltip"
[style.width]="size" [style.height]="size" [style.cursor]="cursor" />
</div>
<ng-template #initialsTemplate>
<div class="adf-avatar__image adf-avatar__initials" [title]="tooltip">{{ initials }}</div>
<div class="adf-avatar__image adf-avatar__initials" [title]="tooltip"
[style.width]="size" [style.height]="size" [style.cursor]="cursor">{{ initials }}</div>
</ng-template>
lib/core/src/lib/avatar/avatar.component.scss
+7 -9
View File
@@ -3,18 +3,16 @@
}
.adf-avatar__image {
cursor: var(--adf-avatar-cursor, auto);
cursor: auto;
display: inline-block;
overflow: hidden;
line-height: 1;
border-radius: var(--adf-avatar-border-radius, 50%);
width: var(--adf-avatar-size, 32px);
height: var(--adf-avatar-size, 32px);
color: var(--adf-avatar-color, #333);
background-color: var(--adf-avatar-background-color, #f3f3f3);
box-shadow: 0 0 0 1px var(--adf-avatar-border-color, rgba(31, 35, 40, 0.15));
font-size: var(--adf-avatar-font-size, 14px);
font-weight: var(--adf-avatar-font-weight, 500);
border-radius: 50%;
width: 32px;
height: 32px;
color: var(--mat-sys-on-primary);
background-color: var(--mat-sys-primary);
box-shadow: var(--mat-sys-level2);
text-align: center;
align-content: center;
}
lib/core/src/lib/avatar/avatar.component.ts
+3 -5
View File
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
@@ -35,11 +35,9 @@ export class AvatarComponent {
@Input()
tooltip: string = '';
@HostBinding('style.--adf-avatar-size')
@Input()
size = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-size');
size: string;
@HostBinding('style.--adf-avatar-cursor')
@Input()
cursor = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-cursor');
cursor: string;
}
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
+1 -2
View File
@@ -32,8 +32,7 @@
display: flex;
place-content: center space-between;
align-items: center;
background: var(--adf-theme-background-card-color);
border-color: var(--adf-theme-foreground-divider-color);
border-color: var(--mat-sys-outline-variant);
border-radius: 0;
#{ms.$mat-chip}:hover {
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
-1
View File
@@ -38,7 +38,6 @@
.adf-property-value {
line-height: 20px;
color: var(--adf-metadata-property-panel-title-color);
&.adf-property-value-editable {
display: flex;
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
+1 -6
View File
@@ -6,7 +6,6 @@
}
.adf-select-filter-input {
background: var(--adf-theme-background-card-color);
position: sticky;
top: 0;
left: 0;
@@ -29,10 +28,6 @@
margin-top: 0;
border-radius: 6px;
#{ms.$mat-select-value} {
color: var(--adf-metadata-action-button-clear-color);
}
#{ms.$mat-select-trigger} {
padding-left: 6px;
padding-right: 6px;
@@ -57,6 +52,6 @@
}
.adf-property-readonly-value {
color: var(--adf-metadata-property-panel-label-color);
color: var(--mat-sys-on-surface);
}
}
lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
+5 -14
View File
@@ -1,33 +1,24 @@
@use '../../../../styles/mat-selectors' as ms;
$select-filter-height: 4em !default;
.adf-select-filter-input {
height: $select-filter-height;
display: flex;
padding: 5px 16px 0;
.adf-select-filter-input-container {
width: 100%;
z-index: 100;
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-087);
line-height: 3em;
height: $select-filter-height;
padding: 5px 16px 0;
background: var(--adf-theme-background-card-color);
#{ms.$mat-form-field-wrapper} {
padding-right: 5px;
}
}
#{ms.$mat-form-field} {
width: 100%;
}
.adf-select-filter-clear-button {
padding: 0;
}
}
#{ms.$mat-select-panel}.adf-select-filter {
transform: none;
overflow-x: hidden;
max-height: calc(256px + #{$select-filter-height});
}
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
+1 -21
View File
@@ -23,12 +23,6 @@
height: 30px;
padding: 0;
line-height: 20px;
color: var(--adf-theme-foreground-text-color-025);
&:hover,
&:focus {
color: var(--adf-theme-foreground-text-color);
}
#{ms.$mat-button-touch-target} {
width: 30px;
@@ -59,25 +53,11 @@
cursor: pointer;
width: 100%;
padding: 3px 0 0;
.adf-textitem-action:hover {
color: var(--adf-theme-foreground-text-color);
}
.adf-property-field {
#{ms.$mat-input-element} {
color: var(--theme-primary-color);
cursor: pointer;
}
}
}
.adf-property-value-not-editable {
color: var(--adf-metadata-property-panel-title-color);
}
input.adf-property-value:disabled,
textarea.adf-property-value:disabled {
color: var(--mat-sys-on-surface);
user-select: none;
pointer-events: none;
}
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
+8 -1
View File
@@ -2,9 +2,16 @@
.adf-property-list {
border: unset;
border-color: var(--adf-theme-foreground-divider-color);
border-color: var(--mat-sys-outline);
border-radius: 0;
.adf-property-label {
display: flex;
line-height: 20px;
margin-bottom: 4px;
color: var(--mat-sys-on-surface);
}
.adf-property-container {
margin-bottom: 12px;
}
lib/core/src/lib/comments/comment-list/comment-list.component.scss
+5 -7
View File
@@ -1,5 +1,6 @@
.adf-comment-list {
padding-bottom: 0;
.adf {
&-comment-img-container {
width: 40px;
@@ -10,6 +11,7 @@
}
&-comment-list-item:has(.adf-comment-img-container) {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
white-space: initial;
display: table-row-group;
padding-top: 12px;
@@ -26,10 +28,8 @@
width: 100%;
padding: 2px 10px;
white-space: pre-line;
font-size: var(--theme-body-1-font-size);
letter-spacing: -0.2px;
line-height: 1.43;
color: var(--adf-theme-foreground-text-color);
}
}
}
@@ -37,10 +37,10 @@
&-comment-user-icon {
padding: 10px 5px;
width: 30px;
background-color: var(--theme-primary-color);
color: var(--theme-primary-color-default-contrast);
background-color: var(--mat-sys-primary);
color: var(--mat-sys-on-primary);
border-radius: 50%;
font-size: var(--theme-subheading-2-font-size);
font-size: var(--mat-sys-title-small-size);
text-align: center;
height: 20px;
background-size: cover;
@@ -50,7 +50,6 @@
width: 100%;
padding: 2px 10px;
font-weight: 600;
font-size: var(--theme-body-1-font-size);
}
&-comment-message-time {
@@ -58,7 +57,6 @@
width: 100%;
padding: 2px 10px;
font-size: unset;
color: var(--adf-theme-foreground-text-color);
}
&-people-img {
lib/core/src/lib/comments/comments.component.html
-1
View File
@@ -22,7 +22,6 @@
<button
mat-button
data-automation-id="comments-input-add"
color="primary"
(click)="addComment()"
[disabled]="commentControl.invalid"
>
lib/core/src/lib/comments/comments.component.scss
+1 -1
View File
@@ -24,7 +24,7 @@ adf-comments {
.adf-comments-header {
padding: 10px 0;
font-size: var(--theme-body-1-font-size);
font-size: var(--mat-sys-body-medium-size);
font-weight: 600;
}
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html
-2
View File
@@ -39,7 +39,6 @@
[attr.aria-label]='"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS_VISIBILITY" | translate'>
<div *ngFor="let column of (columnItems | columnsSearchFilter: searchQuery)" class="adf-columns-selector-list-item">
<mat-list-option
color="primary"
class="adf-columns-selector-column-checkbox"
[attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
[selected]="!column.isHidden"
@@ -69,7 +68,6 @@
<button
mat-flat-button
data-automation-id="adf-columns-selector-apply-button"
color="primary"
(click)="apply()">
{{"ADF-DATATABLE.COLUMNS_SELECTOR.APPLY" | translate}}
</button>
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss
+7 -7
View File
@@ -25,7 +25,7 @@ adf-datatable-column-selector {
}
&-header-label {
font-size: var(--theme-body-1-font-size);
font: var(--mat-sys-body-medium);
}
&-list-container {
@@ -40,12 +40,12 @@ adf-datatable-column-selector {
text-overflow: ellipsis;
display: block;
width: 210px;
color: var(--theme-secondary-text);
color: var(--mat-sys-on-secondary-container);
}
&-subtitle {
color: var(--adf-theme-foreground-text-color);
font-size: var(--theme-caption-font-size);
color: var(--mat-sys-on-surface);
font-size: var(--mat-sys-body-small-size);
opacity: 0.6;
display: flex;
column-gap: 3px;
@@ -54,9 +54,9 @@ adf-datatable-column-selector {
&-subtitle-icon {
margin-top: 3px;
height: var(--theme-caption-font-size);
width: var(--theme-caption-font-size);
font-size: var(--theme-caption-font-size);
height: var(--mat-sys-label-medium-size);
width: var(--mat-sys-label-medium-size);
font-size: var(--mat-sys-label-medium-size);
}
&-column-checkbox {
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+31 -44
View File
@@ -3,13 +3,9 @@
@use '../../../styles/mixins' as mixins;
@use '../../../styles/mat-selectors' as ms;
$data-table-header-font-size: var(--theme-caption-font-size) !default;
$data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;
$data-table-row-height: var(--theme-display-3-font-size) !default;
$data-table-column-spacing: 36px !default;
$data-table-column-padding: 18px !default;
$data-table-card-padding: var(--theme-headline-line-height) !default;
$data-table-cell-top: calc($data-table-card-padding / 2);
$data-table-row-height: var(--mat-sys-display-large-size);
$data-table-thumbnail-width: 65px !default;
$data-table-cell-min-width-1: 65px !default;
$data-table-cell-min-width-2: 110px !default;
@@ -46,7 +42,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
&--divider {
padding: 24px 0;
border: 1px solid var(--adf-theme-foreground-text-color-007);
border: 1px solid var(--mat-sys-outline-variant);
}
&:hover {
@@ -56,11 +52,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
&:focus,
&:focus-visible {
opacity: 1;
outline: 2px solid var(--theme-accent-color-a200);
outline: 2px solid var(--mat-sys-primary);
outline-offset: -1px;
.adf-datatable__resize-handle--divider {
border-color: var(--theme-accent-color-a200);
border-color: var(--mat-sys-primary);
}
}
}
@@ -76,8 +72,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
#{ms.$cdk-drag-preview} {
display: flex;
flex-direction: column;
background-color: var(--adf-theme-background-card-color);
border: 1px solid var(--adf-theme-foreground-text-color-007);
background-color: var(--mat-sys-surface);
border: 1px solid var(--mat-sys-outline-variant);
box-sizing: border-box;
overflow-x: auto;
@@ -127,20 +123,20 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
&:not(.adf-datatable-data-loading) {
&:hover,
&:focus {
background-color: var(--adf-theme-background-hover-color);
background-color: var(--mat-sys-surface-container);
}
}
&:focus {
outline-offset: -1px;
outline: 1px solid var(--theme-accent-color-a200);
outline: 1px solid var(--mat-sys-primary);
}
.adf-cell-value,
.adf-datatable-cell-header {
&:focus {
outline-offset: -1px;
outline: 1px solid var(--theme-accent-color-a200);
outline: 1px solid var(--mat-sys-primary);
}
}
}
@@ -152,7 +148,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable-body {
display: flex;
flex-direction: column;
background-color: inherit;
background-color: var(--mat-sys-surface);
width: 100%;
min-width: 100%;
@@ -168,7 +164,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
@include mixins.material-animation-default(0.28s);
transition-property: background-color;
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
border-top: 1px solid var(--mat-sys-surface-container);
min-height: $data-table-row-height;
cursor: pointer;
@@ -176,7 +172,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
&.adf-is-selected,
&.adf-is-selected:hover {
background-color: var(--adf-theme-background-selected-button-color);
background-color: var(--mat-sys-surface-container);
}
&.adf-drag-row {
@@ -184,7 +180,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
&:last-child {
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
border-bottom: 1px solid var(--mat-sys-surface-container);
}
label {
@@ -301,7 +297,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
.adf-datatable-cell {
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
min-height: inherit;
}
@@ -405,10 +401,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-location-cell {
a {
text-decoration: none;
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
&:hover {
color: var(--theme-accent-500);
color: var(--mat-sys-primary);
text-decoration: underline;
}
}
@@ -427,15 +423,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
.adf-is-selected {
background: var(--adf-theme-primary-100);
background: var(--mat-sys-primary-container);
}
.adf-datatable-link {
text-decoration: none;
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
&:hover {
color: var(--theme-accent-500);
color: var(--mat-sys-secondary);
text-decoration: underline;
}
}
@@ -527,13 +523,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
/* stylelint-disable media-feature-range-notation */
/* mobile phone */
@media all and (width <= 768px) {
@media all and (width <=768px) {
.adf-desktop-only.adf-ellipsis-cell {
display: none;
}
}
@media (device-width <= 768px) {
@media (device-width <=768px) {
.adf-desktop-only.adf-ellipsis-cell {
display: none;
}
@@ -551,8 +547,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
line-height: 24px;
letter-spacing: 0;
min-height: $data-table-row-height;
font-size: $data-table-header-font-size;
color: var(--adf-theme-foreground-text-color);
font-size: var(--mat-sys-body-medium-size);
box-sizing: border-box;
&_subtitle {
@@ -569,13 +564,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable__header--sorted-asc,
.adf-datatable__header--sorted-desc {
color: var(--adf-theme-foreground-text-color);
padding-right: 0.25rem;
&::after {
@include mixins.typo-icon;
font-size: $data-table-header-sort-icon-size;
content: '\e5d8';
left: 5px;
right: 5px;
@@ -607,7 +600,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
&--hovered {
background-color: var(--adf-theme-background-hover-color);
border-radius: 6px;
}
}
@@ -634,7 +626,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-drop-header-cell-placeholder {
display: flex;
flex: 1;
background: var(--adf-theme-background-hover-color);
border: dotted 1px rgba(0, 0, 0, 0.25);
min-height: 55px;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
@@ -661,13 +652,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
flex-direction: row;
align-items: center;
box-sizing: unset;
background-color: var(--theme-background-color);
border-top: 2px solid var(--theme-selected-background-color);
border-top: 2px solid var(--mat-sys-primary);
opacity: 1;
&.adf-datatable-cell-header {
border-radius: 6px;
background-color: var(--theme-background-color);
@include mat.elevation-transition;
@include mat.elevation(4);
@@ -693,8 +682,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable-header {
display: block;
margin-right: 0;
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
border-top: 1px solid var(--mat-sys-surface-container);
border-bottom: 1px solid var(--mat-sys-outline-variant);
}
.adf-datatable-body {
@@ -707,15 +696,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-upload__dragging {
& > div {
border-top: 1px dashed var(--theme-accent-color-a200);
border-bottom: 1px dashed var(--theme-accent-color-a200);
border-top: 1px dashed var(--mat-sys-secondary);
border-bottom: 1px dashed var(--mat-sys-secondary);
&:first-child {
border-left: 1px dashed var(--theme-accent-color-a200);
border-left: 1px dashed var(--mat-sys-secondary);
}
&:last-child {
border-right: 1px dashed var(--theme-accent-color-a200);
border-right: 1px dashed var(--mat-sys-secondary);
}
}
}
@@ -730,7 +719,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable-body[role='rowgroup'] {
.adf-datatable-row {
height: 100%;
background-color: var(--adf-theme-background-card-color);
border: none;
&:hover,
@@ -744,7 +732,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable--empty--header-visible {
.adf-datatable-header {
border: 1px solid var(--adf-theme-foreground-text-color-007);
border: 1px solid var(--mat-sys-outline-variant);
}
.adf-datatable-body {
@@ -755,7 +743,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-datatable-row {
height: 100%;
background-color: var(--adf-theme-background-card-color);
border: none;
&:hover,
@@ -767,7 +754,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
}
@media screen and (width <= 380px) {
@media screen and (width <=380px) {
.adf-datatable-header {
max-height: 50%;
}
lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.html
-1
View File
@@ -32,7 +32,6 @@
id="adf-confirm-accept"
class="adf-confirm-dialog-button"
mat-button
color="primary"
data-automation-id="adf-confirm-dialog-confirmation"
[mat-dialog-close]="true"
cdkFocusInitial
lib/core/src/lib/dialogs/dialog/dialog.component.html
-4
View File
@@ -11,7 +11,6 @@
<div class="adf-dialog-title-container" [ngClass]="{ 'adf-centered-title': data.headerIcon }">
<mat-icon
*ngIf="data.headerIcon"
color="primary"
class="adf-dialog-header-icon"
[adf-icon]="data.headerIcon"
/>
@@ -54,7 +53,6 @@
<button
*ngFor="let additionalButton of additionalActionButtons"
mat-button
color="primary"
class="{{ additionalButton.class }}"
(click)="additionalButton.onClick()"
>
@@ -67,7 +65,6 @@
<button
*ngIf="!isCancelButtonHidden"
mat-stroked-button
color="primary"
mat-dialog-close
data-automation-id="adf-dialog-actions-cancel"
>
@@ -76,7 +73,6 @@
<button
mat-flat-button
color="primary"
data-automation-id="adf-dialog-actions-confirm"
[disabled]="isConfirmButtonDisabled$ | async"
(click)="onConfirm()"
lib/core/src/lib/dialogs/dialog/dialog.component.scss
+2 -2
View File
@@ -165,7 +165,7 @@ $dialog-padding: 24px;
left: -$dialog-padding;
display: block;
height: 0;
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
border-bottom: 1px solid var(--mat-sys-outline-variant);
width: calc(100% + $dialog-padding * 2);
}
}
@@ -284,5 +284,5 @@ $dialog-padding: 24px;
}
.adf-additional-actions {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html
+1 -1
View File
@@ -20,7 +20,7 @@
<mat-dialog-actions align="end" class="adf-unsaved-changes-dialog-actions">
<button
data-automation-id="adf-unsaved-changes-dialog-cancel-button"
mat-button
mat-flat-button
[mat-dialog-close]="false"
class="adf-unsaved-changes-dialog-actions-cancel-button">
{{ 'CANCEL' | translate | titlecase }}
lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss
+11 -8
View File
@@ -1,3 +1,5 @@
@use '@angular/material' as mat;
.adf-unsaved-changes-dialog {
.adf-unsaved-changes-dialog {
&-header {
@@ -22,14 +24,9 @@
&-content {
padding: 0 8px 0 0;
overflow: unset;
color: var(--adf-secondary-modal-text-color);
&-checkbox {
margin-top: 20px;
label {
color: var(--adf-secondary-modal-text-color);
}
}
}
@@ -41,13 +38,19 @@
align-items: flex-end;
&-cancel-button {
background-color: var(--adf-secondary-button-background);
margin-right: 4px;
}
&-discard-changes-button {
color: white;
background-color: var(--adf-error-color);
color: var(--mat-sys-on-error);
background-color: var(--mat-sys-error);
@include mat.button-overrides(
(
filled-label-text-color: var(--mat-sys-on-error),
filled-container-color: var(--mat-sys-error)
)
);
}
&-cancel-button,

Some files were not shown because too many files have changed in this diff Show More