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-04-22 10:02:17 +01:00
committed by GitHub
co-authored by Ehsan Rezaei Ricardo Dias
parent 423c646bac
commit 64826c3a99
236 changed files with 838 additions and 1780 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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,
lib/core/src/lib/directives/tooltip-card/tooltip-card.component.scss
+3 -9
View File
@@ -7,20 +7,18 @@
div.adf-tooltip-card {
@include mat.elevation(8);
background-color: var(--adf-theme-background-card-color);
border: 1px solid var(--theme-primary-color);
border: 1px solid var(--mat-sys-primary);
padding: 12px;
border-radius: 6px;
p,
div {
font-size: var(--theme-caption-font-size);
color: var(--adf-theme-foreground-text-color-075);
font-size: var(--mat-sys-body-small-size);
margin: 0;
}
hr {
border: 1px solid var(--theme-primary-color);
border: 1px solid var(--mat-sys-primary);
margin: 6px 0;
}
@@ -28,7 +26,3 @@ div.adf-tooltip-card {
border-radius: 6px;
}
}
::ng-deep .cdk-overlay-connected-position-bounding-box {
margin-top: 10px;
}
lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
-4
View File
@@ -62,10 +62,6 @@
#{ms.$mat-evolution-chip-action} {
padding: 2px 12px;
#{ms.$mat-evolution-chip-text-label} {
color: var(--adf-theme-foreground-text-color-064);
}
}
}
}
lib/core/src/lib/form/components/form-renderer.component.scss
+3 -30
View File
@@ -142,25 +142,6 @@
top: 1.8em;
}
#{ms.$mat-focused} {
width: 100%;
#{ms.$mat-text-field-focused} {
label {
color: var(--theme-primary-color);
}
}
label {
transition: transform 150ms linear;
background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
}
#{ms.$mat-form-field-prefix} {
color: var(--theme-primary-color);
}
}
#{ms.$mat-grid-tile} {
overflow: visible;
width: 80%;
@@ -192,8 +173,6 @@
}
& #{mat-tab-label-text} {
font-size: var(--theme-subheading-2-font-size);
line-height: var(--theme-headline-line-height);
letter-spacing: -0.4px;
text-align: left;
color: rgba(0, 0, 0, 0.54);
@@ -212,7 +191,7 @@
}
&-form-title {
font-size: var(--theme-title-font-size);
font-size: var(--mat-sys-title-medium-size);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -228,10 +207,10 @@
position: absolute;
right: 50px;
top: 39px;
color: var(--theme-accent-color);
color: var(--mat-sys-secondary);
& .adf-invalid-color {
color: var(--theme-warn-color);
color: var(--mat-sys-error);
}
}
@@ -294,10 +273,4 @@
form-field {
width: 100%;
#{ms.$mat-input-element} {
font-size: var(--theme-body-2-font-size);
padding-top: 8px;
line-height: normal;
}
}
lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
-19
View File
@@ -4,16 +4,6 @@
$adf-inplace-input-padding: 7px;
.adf-inplace-input-container {
&-error {
.adf-inplace-input {
border: 1px solid var(--theme-warn-color);
}
}
#{ms.$mat-line-ripple} {
display: none;
}
#{ms.$mat-form-text-field-infix} {
display: flex;
border-top: 0;
@@ -31,14 +21,5 @@ $adf-inplace-input-padding: 7px;
padding: $adf-inplace-input-padding;
border: 1px solid transparent;
border-radius: 4px;
&:focus {
border: 1px solid var(--theme-primary-color);
}
&:hover:not(:focus) {
border: 1px solid var(--adf-theme-background-hover-color);
background-color: var(--adf-theme-background-hover-color);
}
}
}
lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
+2 -4
View File
@@ -20,10 +20,8 @@
transition: none;
}
&:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
.adf-amount-widget__prefix-spacing {
color: var(--adf-theme-foreground-secondary-text-color);
}
.adf-input {
margin-top: 3px;
}
}
}
lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
-1
View File
@@ -2,7 +2,6 @@
[class.adf-invalid]="!field.isValid && isTouched()" class="adf-checkbox-widget-container"
>
<mat-checkbox [id]="field.id"
color="primary"
class="adf-checkbox"
[required]="isRequired()"
[disabled]="field.readOnly || readOnly"
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
+1 -1
View File
@@ -24,5 +24,5 @@
}
#{ms.$mat-datetimepicker-toggle} {
color: var(--adf-theme-foreground-icon-color);
color: var(--mat-sys-on-surface);
}
lib/core/src/lib/form/components/widgets/display-text/display-text.widget.scss
-3
View File
@@ -1,8 +1,5 @@
.adf-display-text-widget {
white-space: pre-wrap;
font-size: var(--adf-readonly-text-font-size, var(--adf-form-label-font-size, var(--theme-body-1-font-size)));
font-weight: var(--adf-readonly-text-font-weight, var(--adf-form-label-font-weight, var(--theme-font-weight)));
color: var(--adf-readonly-text-color, var(--adf-form-label-color, var(--theme-text-color)));
line-height: normal;
word-break: break-word;
position: relative;
lib/core/src/lib/form/components/widgets/form.theme.scss
+6 -42
View File
@@ -2,12 +2,6 @@
/* stylelint-disable declaration-no-important */
@use '../../../styles/mat-selectors' as ms;
ul > li > form-field > .adf-focus {
.adf-label {
color: var(--theme-primary-color);
}
}
.adf {
&-error-container {
height: 20px;
@@ -17,55 +11,25 @@ ul > li > form-field > .adf-focus {
&-error-text {
padding: 1px;
height: 16px;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
line-height: 1.33;
color: var(--theme-warn-color);
color: var(--mat-sys-error);
}
&-error-icon {
font-size: var(--theme-adf-icon-1-font-size);
color: var(--theme-warn-color);
}
&-label {
color: var(--adf-theme-foreground-secondary-text-color);
font-size: var(--mat-sys-label-large-size);
color: var(--mat-sys-error);
}
&-asterisk {
padding-left: 2px;
color: var(--theme-warn-color);
color: var(--mat-sys-error);
}
&-invalid {
#{ms.$mat-checkbox} {
padding-bottom: 12px;
}
#{ms.$mat-line-ripple} {
background-color: var(--theme-warn-color) !important;
}
#{ms.$mat-select} {
&-arrow {
color: var(--adf-theme-foreground-secondary-text-color) !important;
}
}
.adf-file {
border-color: var(--theme-warn-color);
border-color: var(--mat-sys-error);
}
#{ms.$mat-form-field-prefix} {
color: var(--adf-theme-foreground-secondary-text-color);
}
.adf-input {
border-color: var(--theme-warn-color);
}
}
&-left-label {
color: var(--adf-theme-foreground-secondary-text-color);
}
}
lib/core/src/lib/form/components/widgets/header/header.widget.scss
+2 -4
View File
@@ -1,11 +1,9 @@
.adf-container-widget-header__text {
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
border-bottom: 1px solid var(--mat-sys-outline-variant);
padding-bottom: 10px;
cursor: default;
user-select: none;
font-size: var(--adf-header-font-size);
font-weight: var(--adf-header-font-weight);
color: var(--adf-header-color);
font-size: var(--mat-sys-title-small-size);
line-height: normal;
&.adf-collapsible {
lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.scss
+1 -1
View File
@@ -3,6 +3,6 @@
border-top: 0.8438em solid transparent;
a {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+1 -1
View File
@@ -15,7 +15,7 @@
margin-top: -20px;
min-height: 24px;
min-width: 1px;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
line-height: 14px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
lib/core/src/lib/form/components/widgets/repeat/repeat.widget.scss
+3 -5
View File
@@ -1,12 +1,10 @@
.adf-container-widget {
&-repeat__text {
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
border-bottom: 1px solid var(--mat-sys-outline-variant);
padding-bottom: 10px;
cursor: default;
user-select: none;
font-size: var(--adf-header-font-size);
font-weight: var(--adf-header-font-weight);
color: var(--adf-header-color);
font-size: var(--mat-sys-title-small-size);
line-height: normal;
}
@@ -15,7 +13,7 @@
}
&-row-limit {
color: rgba(0, 0, 0, 0.67);
color: var(--mat-sys-on-surface-variant);
font-size: 12px;
}
}
lib/core/src/lib/header/header.component.html
+2 -1
View File
@@ -24,7 +24,8 @@
</ng-container>
<ng-template #toolbarTitleContent>
<img *ngIf="logoSrc" [src]="logoSrc" [alt]="logoAlt" class="adf-toolbar-logo"/>
<img *ngIf="logoSrc" [src]="logoSrc" [alt]="logoAlt" class="adf-toolbar-logo"
[style.height]="logoHeight" [style.width]="logoWidth" />
<span *ngIf="variant==='extended'">{{ title }}</span>
</ng-template>
lib/core/src/lib/header/header.component.scss
+12 -12
View File
@@ -1,31 +1,31 @@
.adf-header {
display: flex;
flex-direction: column;
width: var(--adf-header-width, 100%);
height: var(--adf-header-height, 100%);
width: 100%;
height: 100%;
.adf-toolbar {
width: var(--adf-toolbar-width, 100%);
height: var(--adf-toolbar-height, 100%);
width: 100%;
height: 100%;
.adf-toolbar-title {
width: var(--adf-toolbar-title-width, 100%);
width: 100%;
align-items: center;
font-size: var(--adf-toolbar-title-font-size, 16px);
font-weight: var(--adf-toolbar-title-font-weight, 500);
color: var(--adf-toolbar-title-color, #000);
gap: var(--adf-toolbar-title-gap, 25px);
font-size: var(--mat-sys-title-medium-size);
font-weight: var(--mat-sys-title-medium-weight);
color: var(--mat-sys-on-surface);
gap: 25px;
}
.adf-toolbar-logo {
height: var(--adf-header-logo-height, 36px);
width: var(--adf-header-logo-width, --adf-header-logo-height);
height: 36px;
width: 36px;
}
.adf-toolbar-actions > * {
display: flex;
align-items: center;
gap: var(--adf-toolbar-actions-gap, 10px);
gap: 10px;
}
.adf-toolbar-container.adf-toolbar-container-row {
lib/core/src/lib/header/header.component.ts
+4 -6
View File
@@ -40,9 +40,9 @@ export class HeaderComponent {
return this.variant === 'extended' ? '100%' : 'auto';
}
@HostBinding('style.--adf-header-height')
@HostBinding('style.height')
@Input()
headerHeight = getComputedStyle(document.documentElement).getPropertyValue('--adf-header-height');
headerHeight: string;
@Input()
logoSrc: string;
@@ -50,13 +50,11 @@ export class HeaderComponent {
@Input()
logoAlt: string;
@HostBinding('style.--adf-header-logo-height')
@Input()
logoHeight = getComputedStyle(document.documentElement).getPropertyValue('--adf-header-logo-height');
logoHeight: string;
@HostBinding('style.--adf-header-logo-width')
@Input()
logoWidth = getComputedStyle(document.documentElement).getPropertyValue('--adf-header-logo-width');
logoWidth: string;
@Input()
title: string;
lib/core/src/lib/header/navbar/navbar-item.component.html
+1 -1
View File
@@ -1,7 +1,7 @@
<button *ngIf="routerLink; else noRouterLink" class="adf-navbar-item-btn"
[routerLink]="routerLink"
routerLinkActive="adf-navbar-item-active"
mat-button>{{ label }}
mat-flat-button>{{ label }}
</button>
<ng-template #noRouterLink>
<button class="adf-navbar-item-btn" mat-button>
lib/core/src/lib/header/navbar/navbar-item.component.scss
+3 -11
View File
@@ -1,19 +1,11 @@
.adf-navbar-item {
.adf-navbar-item-btn {
height: var(--adf-navbar-btn-height, 100%);
background-color: var(--adf-navbar-btn-background-color, inherit);
font-size: var(--adf-navbar-btn-font-size, 16px);
font-weight: var(--adf-navbar-btn-font-weight, 500);
color: var(--adf-navbar-btn-color, #000);
opacity: var(--adf-navbar-btn-opacity, 0.48);
height: 100%;
box-sizing: border-box;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
}
.adf-navbar-item-active {
border-radius: var(--adf-navbar-selected-btn-border-radius, 0);
opacity: var(--adf-navbar-selected-btn-opacity, 1);
border-bottom: var(--adf-navbar-selected-btn-border-bottom, 3px solid black);
border-radius: 0;
opacity: 1;
}
}
lib/core/src/lib/identity-user-info/identity-user-info.component.scss
+4 -4
View File
@@ -20,14 +20,14 @@
}
&-userinfo-pic {
background: var(--adf-theme-primary-300);
background: var(--mat-sys-primary);
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100px;
text-align: center;
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
font-size: var(--mat-sys-title-large-size);
text-transform: uppercase;
vertical-align: middle;
line-height: 40px;
@@ -75,7 +75,7 @@
}
&-userinfo-profile-picture {
background: var(--adf-theme-primary-300);
background: var(--mat-sys-primary);
background-size: cover;
border-radius: 50%;
height: 80px;
@@ -91,7 +91,7 @@
}
}
@media only screen and (device-width >= 480px) {
@media only screen and (device-width >=480px) {
.adf-identity-userinfo-menu.adf-userinfo-menu {
max-height: 450px;
min-width: 450px;
lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
+1 -5
View File
@@ -1,7 +1,7 @@
@use '../styles/mixins' as mixins;
@use '../styles/mat-selectors' as ms;
$adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default;
$adf-info-drawer-layout-title-font-size: var(--mat-sys-title-medium-size) !default;
$adf-info-drawer-icon-size: 48px !default;
$adf-info-drawer-icon-size-half: 24px !default;
@@ -15,7 +15,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
overflow: auto;
width: 100%;
background-color: var(--theme-card-background-color);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
& #{ms.$mat-tab-label-text} {
@@ -51,14 +50,12 @@ $adf-info-drawer-icon-size-half: 24px !default;
letter-spacing: 0.15px;
text-align: left;
align-items: center;
color: var(--adf-theme-foreground-text-color-064);
overflow: hidden;
& > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--adf-metadata-property-panel-title-color);
}
}
}
@@ -80,7 +77,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
.adf-manage-versions-no-permission {
margin: 0;
padding: $adf-info-drawer-icon-size-half;
color: var(--adf-theme-foreground-text-color-064);
text-align: center;
display: flex;
flex-direction: column;
lib/core/src/lib/info-drawer/info-drawer.component.scss
+2 -22
View File
@@ -65,13 +65,7 @@
/* stylelint-disable-next-line no-descending-specificity */
.adf-info-drawer-tabs {
#{ms.$mat-tab-label-container} {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
div[role='tab'].adf-info-drawer-tab {
color: var(--theme-accent-color);
background-color: var(--adf-theme-background-card-color);
border-bottom: unset;
opacity: 1;
@@ -84,32 +78,18 @@
}
&:focus-visible {
outline: 2px solid var(--theme-blue-button-color);
outline: 2px solid var(--mat-sys-primary);
border-radius: 4px;
outline-offset: -2px;
}
&--active {
color: var(--theme-primary-color);
background-color: var(--adf-theme-background-card-color);
color: var(--mat-sys-primary);
border-bottom: 1px solid unset;
&:focus {
color: var(--adf-theme-foreground-text-color);
border-bottom: unset;
}
}
&:hover:not([class*='--disabled'], [class*='--active']) {
color: var(--theme-accent-color);
background-color: var(--adf-theme-background-card-color);
border-bottom: unset;
}
&--disabled {
color: var(--adf-info-drawer-tab-disabled-color);
background-color: var(--adf-info-drawer-tab-disabled-background);
border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
}
}
}
lib/core/src/lib/layout/components/header/header.component.scss
+3 -3
View File
@@ -1,7 +1,7 @@
@use '../../../styles/flex' as flex;
adf-layout-header .adf-toolbar-container-row {
color: var(--theme-header-text-color);
color: var(--mat-sys-on-primary);
position: relative;
padding: 0 24px;
@@ -36,14 +36,14 @@ adf-layout-header .adf-toolbar-container-row {
margin: 0 5px;
& > div {
background-color: var(--adf-theme-background-card-color);
background-color: var(--mat-sys-surface);
}
}
.adf-header-delimiter {
height: 24px;
width: 2px;
background-color: var(--theme-primary-color-default-contrast);
background-color: var(--mat-sys-on-primary);
}
.adf-userinfo-container {
lib/core/src/lib/layout/components/header/header.component.spec.ts
+1 -1
View File
@@ -239,7 +239,7 @@ describe('HeaderLayoutComponent', () => {
@Component({
selector: 'adf-test-layout-header',
imports: [HeaderLayoutComponent],
template: ` <adf-layout-header title="test" color="primary">
template: ` <adf-layout-header title="test">
<p>Test text</p>
<p></p>
</adf-layout-header>`
lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
+1 -3
View File
@@ -8,9 +8,7 @@ adf-layout-container {
.adf-layout-container-sidenav {
overflow: hidden;
border-right: 1px solid var(--adf-theme-foreground-text-color-007);
background-color: var(--theme-background-color);
color: var(--adf-theme-foreground-text-color);
border-right: 1px solid var(--mat-sys-outline-variant);
}
}
lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="adf-sidebar-action-menu">
<button *ngIf="isExpanded()" mat-raised-button class="adf-sidebar-action-menu-button" data-automation-id="create-button" [matMenuTriggerFor]="adfSidebarMenu">
<button *ngIf="isExpanded()" mat-flat-button class="adf-sidebar-action-menu-button" data-automation-id="create-button" [matMenuTriggerFor]="adfSidebarMenu">
<span *ngIf="title" class="adf-sidebar-action-menu-text">{{ title }}</span>
<ng-content select="[adf-sidebar-menu-title-icon], [sidebar-menu-title-icon]" />
</button>
lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
+2 -7
View File
@@ -8,8 +8,6 @@
box-shadow: none;
height: 37.5px;
font-weight: bold;
background-color: var(--theme-primary-color);
color: var(--theme-primary-color-default-contrast);
border-radius: 4px;
}
@@ -22,11 +20,11 @@
&-sidebar-action-menu-icon {
margin: 18px 0 0 20px;
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-surface);
cursor: pointer;
&:hover {
color: var(--theme-primary-color);
color: var(--mat-sys-primary);
}
}
@@ -35,14 +33,11 @@
letter-spacing: -0.4px;
button {
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-087);
text-align: left;
line-height: 1.5;
letter-spacing: -0.4px;
&:hover {
color: var(--theme-primary-color);
opacity: inherit;
}
}
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
-1
View File
@@ -1,4 +1,3 @@
@use '../../../styles/flex' as flex;
@use '../../../styles/mixins' as mixins;
@use '../../../styles/mat-selectors' as ms;
lib/core/src/lib/login/components/login.component.html
+4 -9
View File
@@ -51,8 +51,7 @@
[ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
<mat-form-field
class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
floatPlaceholder="never">
<input
matInput
type="text"
@@ -81,9 +80,7 @@
<div class="adf-login__field">
<mat-form-field
class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary"
>
floatPlaceholder="never">
<input
matInput
placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
@@ -126,7 +123,6 @@
id="login-button"
class="adf-login-button"
mat-raised-button
color="accent"
[class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
[class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button"
@@ -164,8 +160,7 @@
<div *ngIf="showRememberMe" class="adf-login__remember-me">
<mat-checkbox
id="adf-login-remember"
color="primary"
class="adf-login-remember-me"
class="adf-login-remember-me"
[checked]="rememberMe"
(change)="rememberMe = !rememberMe">
<div class="adf-login-remember-me-label">
@@ -181,7 +176,7 @@
id="login-button-sso"
[attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
class="adf-login-button"
mat-raised-button color="primary"
mat-raised-button
data-automation-id="login-button-sso">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.SSO' | translate }}</span>
</button>
lib/core/src/lib/login/components/login/login.component.html
+50 -78
View File
@@ -3,23 +3,17 @@
<div class="adf-ie11FixerChild">
<mat-card class="adf-login-card-wide">
<form id="adf-login-form"
[formGroup]="form"
autocomplete="off"
(submit)="onSubmit(form.value)">
<form id="adf-login-form" [formGroup]="form" autocomplete="off"
(submit)="onSubmit(form.value)">
<mat-card-header class="adf-login-card-header-text">
<mat-card-title>
<div class="adf-alfresco-logo">
<!--HEADER TEMPLATE-->
<ng-template *ngIf="headerTemplate"
ngFor
[ngForOf]="[data]"
[ngForTemplate]="headerTemplate" />
<img *ngIf="!headerTemplate"
id="adf-login-img-logo"
class="adf-img-logo"
[src]="logoImageUrl"
alt="{{ 'LOGIN.LOGO' | translate }}">
<ng-template *ngIf="headerTemplate" ngFor [ngForOf]="[data]"
[ngForTemplate]="headerTemplate" />
<img *ngIf="!headerTemplate" id="adf-login-img-logo"
class="adf-img-logo" [src]="logoImageUrl"
alt="{{ 'LOGIN.LOGO' | translate }}">
</div>
</mat-card-title>
</mat-card-header>
@@ -28,10 +22,8 @@
<!--ERRORS AREA-->
<div class="adf-error-container">
<div *ngIf="isError"
id="login-error"
data-automation-id="login-error"
class="adf-error adf-error-message">
<div *ngIf="isError" id="login-error" data-automation-id="login-error"
class="adf-error adf-error-message">
<mat-icon class="adf-error-icon" adf-icon="warning" />
<span class="adf-login-error-message">
{{ errorMsg | translate }}
@@ -43,28 +35,21 @@
<!--USERNAME FIELD-->
<div class="adf-login__field adf-login-container"
[ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
[ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
<mat-form-field class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
floatPlaceholder="never">
<mat-label class="adf-login-form-input-label">
{{'LOGIN.LABEL.USERNAME' | translate }}
</mat-label>
<input matInput
type="text"
class="adf-login-input"
formControlName="username"
id="username"
data-automation-id="username"
autocapitalize="none"
(blur)="trimUsername($event)">
<input matInput type="text" class="adf-login-input"
formControlName="username" id="username"
data-automation-id="username" autocapitalize="none"
(blur)="trimUsername($event)">
</mat-form-field>
<span *ngIf="formError['username']"
class="adf-login-validation"
for="username">
<span id="username-error"
class="adf-login-error"
data-automation-id="username-error">
<span *ngIf="formError['username']" class="adf-login-validation"
for="username">
<span id="username-error" class="adf-login-error"
data-automation-id="username-error">
{{ formError['username'] | translate }}
</span>
</span>
@@ -73,8 +58,7 @@
<!--PASSWORD FIELD-->
<div class="adf-login__field">
<mat-form-field class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
floatPlaceholder="never">
<mat-label class="adf-login-form-input-label">
{{'LOGIN.LABEL.PASSWORD' | translate }}
</mat-label>
@@ -94,12 +78,10 @@
<mat-icon class="adf-login-form-password-icon adf-login-password-icon" [adf-icon]="isPasswordShow ? 'visibility' : 'visibility_off'" />
</button>
</mat-form-field>
<span class="adf-login-validation"
for="password"
*ngIf="formError['password']">
<span id="password-required"
class="adf-login-error"
data-automation-id="password-required">
<span class="adf-login-validation" for="password"
*ngIf="formError['password']">
<span id="password-required" class="adf-login-error"
data-automation-id="password-required">
{{ formError['password'] | translate }}
</span>
</span>
@@ -109,34 +91,29 @@
<ng-content />
<br>
<button type="submit"
id="login-button"
class="adf-login-button"
mat-raised-button
color="accent"
[class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
[class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button"
[disabled]="!form.valid"
[attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
<button type="submit" id="login-button" class="adf-login-button"
mat-flat-button
[class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
[class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button" [disabled]="!form.valid"
[attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
<span *ngIf="actualLoginStep === LoginSteps.Landing"
class="adf-login-button-label">
class="adf-login-button-label">
{{ 'LOGIN.BUTTON.LOGIN' | translate }}
</span>
<div *ngIf="actualLoginStep === LoginSteps.Checking"
class="adf-interactive-login-label">
class="adf-interactive-login-label">
<span class="adf-login-button-label">
{{ 'LOGIN.BUTTON.CHECKING' | translate }}
</span>
<div class="adf-login-spinner-container">
<mat-spinner id="checking-spinner"
class="adf-login-checking-spinner"
[strokeWidth]="4"
[diameter]="25" />
class="adf-login-checking-spinner" [strokeWidth]="4"
[diameter]="25" />
</div>
</div>
<div *ngIf="actualLoginStep === LoginSteps.Welcome"
class="adf-interactive-login-label">
class="adf-interactive-login-label">
<span class="adf-login-button-label">
{{ 'LOGIN.BUTTON.WELCOME' | translate }}
</span>
@@ -144,11 +121,8 @@
</div>
</button>
<div *ngIf="showRememberMe" class="adf-login__remember-me">
<mat-checkbox id="adf-login-remember"
color="primary"
class="adf-login-remember-me"
[checked]="rememberMe"
(change)="rememberMe = !rememberMe">
<mat-checkbox id="adf-login-remember" class="adf-login-remember-me"
[checked]="rememberMe" (change)="rememberMe = !rememberMe">
<div class="adf-login-remember-me-label">
{{ 'LOGIN.LABEL.REMEMBER' | translate }}
</div>
@@ -156,15 +130,12 @@
</div>
</div>
<div *ngIf="ssoLogin">
<button type="button"
(click)="implicitLogin()"
id="login-button-sso"
[attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
class="adf-login-button"
mat-raised-button color="primary"
data-automation-id="login-button-sso">
<button type="button" (click)="implicitLogin()" id="login-button-sso"
[attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
class="adf-login-button" mat-flat-button
data-automation-id="login-button-sso">
<span class="adf-login-button-label">
{{ 'LOGIN.BUTTON.SSO' | translate }}
{{ 'LOGIN.BUTTON.SSO' | translate }}
</span>
</button>
</div>
@@ -174,16 +145,17 @@
<div class="adf-login-action-container">
<!--FOOTER TEMPLATE-->
<ng-template *ngIf="footerTemplate"
ngFor
[ngForOf]="[data]"
[ngForTemplate]="footerTemplate" />
<div class="adf-login-action" *ngIf="!footerTemplate && showLoginActions">
<ng-template *ngIf="footerTemplate" ngFor [ngForOf]="[data]"
[ngForTemplate]="footerTemplate" />
<div class="adf-login-action"
*ngIf="!footerTemplate && showLoginActions">
<div id="adf-login-action-left" class="adf-login-action-left">
<a href="{{ needHelpLink }}">{{ 'LOGIN.ACTION.HELP' | translate }}</a>
<a href="{{ needHelpLink }}">{{ 'LOGIN.ACTION.HELP' | translate
}}</a>
</div>
<div id="adf-login-action-right" class="adf-login-action-right">
<a href="{{ registerLink }}">{{ 'LOGIN.ACTION.REGISTER' | translate }}</a>
<a href="{{ registerLink }}">{{ 'LOGIN.ACTION.REGISTER' |
translate }}</a>
</div>
</div>
</div>
lib/core/src/lib/login/components/login/login.component.scss
+15 -63
View File
@@ -1,5 +1,4 @@
@use '../../../styles/mixins' as mixins;
@use '../../../styles/mat-selectors' as ms;
.adf-login {
@include mixins.flex-column;
@@ -56,17 +55,14 @@
.adf-login-card-wide {
border-radius: 8px;
background-color: var(--adf-theme-background-dialog-color);
box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.24),
0 0 2px 0 rgba(0, 0, 0, 0.12);
box-shadow: var(--mat-sys-level2);
width: 450px;
min-width: 320px;
padding: 21px 64px 34px;
box-sizing: border-box;
}
@media screen and (width <= 482px) {
@media screen and (width <=482px) {
.adf-login-card-wide {
width: calc(100% - 32px);
}
@@ -80,10 +76,10 @@
display: flex;
flex-direction: row;
justify-content: flex-start;
color: var(--theme-warn-color);
color: var(--mat-sys-error);
padding: 0;
margin-bottom: 4px;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
}
.adf-error-message .adf-error-icon {
@@ -114,30 +110,6 @@
.adf-login-button {
width: 100%;
height: 36px;
line-height: normal;
box-shadow: none;
&:not(:disabled) {
background-color: var(--theme-login-button-bg-color);
}
}
.adf-login-button-label {
color: var(--theme-accent-color-default-contrast);
font-weight: bolder;
}
.adf-login-button.adf-isChecking {
background-color: #e0f7fa;
}
.adf-login-button.adf-isChecking .adf-login-button-label {
color: var(--theme-primary-color);
}
.adf-login-button.adf-isWelcome {
background-color: var(--theme-primary-color);
color: var(--theme-primary-color-default-contrast);
}
.adf-login-button.adf-isWelcome .adf-welcome-icon {
@@ -170,30 +142,30 @@
.adf-is-active {
background-color: transparent;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
font-weight: normal;
line-height: 1.33;
color: var(--theme-warn-color);
color: var(--mat-sys-error);
}
.adf-copyright {
min-width: 320px;
text-align: center;
padding: 16px 0;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
opacity: 0.54;
}
.adf-login-input:is(input) {
font-size: var(--theme-subheading-2-font-size);
font-size: var(--mat-sys-title-small-size);
}
.adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
display: flex;
justify-content: center;
align-items: center;
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-login-controls:has(div) {
@@ -209,39 +181,19 @@
.adf-login__field {
display: block;
padding-bottom: 16px;
font-size: var(--theme-subheading-2-font-size);
#{ms.$mat-form-field-infix} {
.adf-login-form-input-label {
font-size: var(--theme-subheading-2-font-size);
}
#{ms.$mat-floating-label-required} {
&::after {
font-size: var(--theme-subheading-2-font-size);
}
}
}
& input:-webkit-autofill {
/* stylelint-disable */
-webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
-webkit-text-fill-color: var(--adf-theme-foreground-text-color);
/* stylelint-enable */
}
}
}
.adf-login-validation {
background-color: transparent;
color: var(--theme-warn-color);
font-size: var(--theme-caption-font-size);
color: var(--mat-sys-error);
font-size: var(--mat-sys-body-small-size);
}
.adf-login-error {
color: var(--theme-warn-color);
color: var(--mat-sys-error);
position: absolute;
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
margin-top: -12px;
display: block;
}
@@ -259,7 +211,7 @@
}
.adf-login-remember-me:has(.adf-login-remember-me-label) {
color: var(--adf-theme-foreground-text-color);
color: var(--mat-sys-on-surface);
}
.adf-login-action-container {
lib/core/src/lib/notifications/components/notification-history.component.scss
+3 -17
View File
@@ -20,7 +20,6 @@ $notification-item-height: 72px;
font-size: 24px;
height: 24px;
width: 24px;
color: var(--theme-text-color);
}
}
@@ -80,31 +79,19 @@ $notification-item-height: 72px;
p {
line-height: normal;
margin: 0;
color: var(--theme-sidenav-user-menu-color);
}
}
}
}
}
.adf-notification-history-menu-item:focus {
outline: none;
background: var(--adf-theme-background-hover-color);
}
.adf-notification-history-menu-item:hover {
background-color: var(--adf-theme-background-hover-color);
}
.adf-notification-history-menu-message:is(p) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--theme-body-1-font-size);
}
.adf-notification-history-item-list .adf-notification-history-menu-no-message-text {
color: var(--theme-sidenav-user-menu-color);
margin: 0;
padding: 12px 16px;
opacity: inherit;
@@ -117,7 +104,7 @@ $notification-item-height: 72px;
}
.adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
font-size: var(--theme-caption-font-size);
font-size: var(--mat-sys-body-small-size);
text-indent: 3px;
}
@@ -128,17 +115,16 @@ $notification-item-height: 72px;
&-notification-initiator-pic {
min-width: 40px;
background: var(--theme-accent-color);
background: var(--mat-sys-secondary);
display: inline-block;
height: 40px;
border-radius: 100px;
text-align: center;
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
font-size: var(--mat-sys-title-large-size);
text-transform: uppercase;
vertical-align: middle;
line-height: 40px;
color: var(--adf-theme-mat-grey-color-a200);
}
&-notification-history-load-more {
lib/core/src/lib/pagination/pagination.component.scss
+1 -7
View File
@@ -5,11 +5,10 @@ $adf-pagination-border: none !default;
$adf-pagination-line-height: 20px;
.adf-pagination {
font: var(--mat-sys-body-small);
display: flex;
border-top: $adf-pagination-border;
height: $adf-pagination-height;
line-height: $adf-pagination-line-height;
color: var(--adf-theme-foreground-text-color);
&__block {
display: flex;
@@ -56,11 +55,6 @@ $adf-pagination-line-height: 20px;
&__current-page {
margin-right: 5px;
&,
& + button {
color: var(--adf-theme-foreground-text-color);
}
& + button {
margin-left: -10px;
}
lib/core/src/lib/search-text/search-text-input.component.scss
+1 -6
View File
@@ -12,14 +12,9 @@
&-search-fixed-text {
line-height: normal;
}
&-clear-search-button {
font-size: var(--theme-button-font-size);
cursor: pointer;
}
}
.adf-highlight {
color: var(--adf-theme-primary-900);
color: var(--mat-sys-primary);
}
}
lib/core/src/lib/styles/_globals.scss
+3 -32
View File
@@ -6,30 +6,7 @@
& #{ms.$mat-expansion-panel-header}.cdk-program-focused,
&:not(#{ms.$mat-expanded}) #{ms.$mat-expansion-panel-header}:hover {
&:not([aria-disabled='true']) {
background-color: var(--adf-theme-background-hover-color);
}
}
}
#{ms.$mat-calendar} {
#{ms.$mat-calendar-header} {
button {
color: var(--adf-theme-foreground-text-color-087);
&:disabled {
color: var(--adf-theme-foreground-text-color-064);
}
}
}
#{ms.$mat-calendar-content} {
#{ms.$mat-calendar-table-header} th {
color: var(--adf-theme-foreground-text-color-064);
}
#{ms.$mat-calendar-body-disabled} > div {
/* stylelint-disable-next-line declaration-no-important */
color: var(--adf-theme-foreground-text-color-064) !important;
background-color: var(--mat-sys-surface-container);
}
}
}
@@ -51,11 +28,11 @@
#{ms.$mat-datetimepicker-calendar-content} {
#{ms.$mat-datetimepicker-calendar-table-header} th {
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-surface);
}
#{ms.$mat-datetimepicker-calendar-body-disabled} > div {
color: var(--adf-theme-foreground-text-color-064);
color: var(--mat-sys-on-surface);
}
}
}
@@ -70,12 +47,6 @@
}
}
#{ms.$mat-input-element} {
&:focus::placeholder {
color: var(--theme-primary-color);
}
}
#{ms.$mat-datetimepicker-dialog} {
#{ms.$mat-dialog-container} {
#{ms.$mat-dialog-surface} {
lib/core/src/lib/styles/_mixins.scss
+1 -1
View File
@@ -14,7 +14,7 @@
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: var(--theme-headline-font-size);
font-size: var(--mat-sys-headline-small-size);
line-height: 1;
letter-spacing: normal;
text-transform: none;
lib/core/src/lib/templates/empty-content/empty-content.component.scss
+4 -3
View File
@@ -1,5 +1,4 @@
.adf-empty-content {
color: var(--adf-theme-foreground-text-color-064);
display: flex;
flex-direction: column;
align-items: center;
@@ -8,11 +7,14 @@
width: 100%;
&__icon > *:first-child {
font-size: var(--mat-sys-display-medium-size);
height: var(--mat-sys-display-medium-size);
width: var(--mat-sys-display-medium-size);
opacity: 0.6;
}
&__title {
font-size: var(--theme-adf-task-title-font-size);
font-size: var(--mat-sys-title-large-size);
font-weight: 600;
line-height: 0;
white-space: normal;
@@ -22,7 +24,6 @@
&__subtitle,
&__text {
font-size: var(--theme-body-1-font-size);
font-weight: 300;
line-height: inherit;
white-space: normal;
lib/core/src/lib/templates/error-content/error-content.component.scss
+2 -3
View File
@@ -1,7 +1,6 @@
@use '../../styles/flex' as flex;
.adf-error-content {
color: var(--adf-theme-foreground-text-color-064);
display: flex;
flex-direction: column;
align-items: center;
@@ -49,11 +48,11 @@
}
&-title {
font-size: var(--theme-headline-font-size);
font-size: var(--mat-sys-headline-small-size);
}
&-description {
font-size: var(--theme-subheading-2-font-size);
font-size: var(--mat-sys-title-small-size);
}
}
}
lib/core/src/lib/toolbar/toolbar.component.scss
+4 -3
View File
@@ -1,4 +1,8 @@
.adf-toolbar {
.adf-toolbar-container {
font: var(--mat-sys-body-medium);
}
&--spacer {
flex: 1 1 auto;
}
@@ -10,10 +14,7 @@
}
.adf-toolbar-container.adf-toolbar-container-row {
border: 1px solid var(--adf-theme-foreground-text-color-007);
color: var(--adf-theme-foreground-text-color-064);
height: 64px;
font-size: var(--theme-body-1-font-size);
white-space: normal;
padding: 0 16px;
}
lib/core/src/lib/viewer/components/download-prompt-dialog/download-prompt-dialog.component.html
-1
View File
@@ -15,7 +15,6 @@
<button
mat-button
id="waitButton"
color="primary"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.WAIT' | translate"
[mat-dialog-close]="DownloadPromptActions.WAIT">
{{ 'ADF_VIEWER.ACTIONS.WAIT' | translate }}
lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss
+3 -14
View File
@@ -1,12 +1,10 @@
@use '../../../styles/mat-selectors' as ms;
.adf-image-viewer {
width: 100%;
.adf-image-container {
&:focus {
outline-offset: -1px;
outline: 1px solid var(--theme-accent-color-a200);
outline: 1px solid var(--mat-sys-primary);
}
display: flex;
@@ -33,15 +31,6 @@
left: 50%;
transform: translateX(-50%);
.adf-toolbar #{ms.$mat-toolbar} {
max-height: 48px;
background-color: var(--adf-theme-background-card-color);
border-width: 0;
border-radius: 2px;
/* stylelint-disable-next-line */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}
.adf-main-toolbar {
display: inline-block;
}
@@ -55,8 +44,8 @@
cursor: default;
width: 79px;
height: 24px;
font-size: var(--theme-body-1-font-size);
border: 1px solid var(--adf-theme-foreground-text-color-007);
font-size: var(--mat-sys-body-medium-size);
border: 1px solid var(--mat-sys-outline);
text-align: center;
line-height: 24px;
margin-left: 4px;
lib/core/src/lib/viewer/components/pdf-viewer-password-dialog/pdf-viewer-password-dialog.scss
-4
View File
@@ -9,7 +9,3 @@
.adf-dialog-buttons button {
text-transform: uppercase;
}
.adf-dialog-action-button:enabled {
color: var(--theme-primary-color);
}
lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.scss
+3 -3
View File
@@ -16,15 +16,15 @@
cursor: pointer;
display: block;
width: 91px;
background: var(--theme-background-color);
background: var(--mat-sys-surface);
margin-bottom: 15px;
}
&__thumb:hover {
box-shadow: 0 0 5px 0 var(--adf-theme-foreground-text-color-087);
box-shadow: var(--mat-sys-level2);
}
&__thumb--selected {
border: 2px solid var(--theme-accent-color-a200);
border: 2px solid var(--mat-sys-primary);
}
}
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer-host.component.scss
+2 -2
View File
@@ -186,8 +186,8 @@
}
.adf-pdf-viewer-annotation-tooltip.popup {
outline-color: var(--adf-pdf-viewer-annotation-tooltip-color);
background-color: color-mix(in srgb, var(--adf-pdf-viewer-annotation-tooltip-color) 30%, var(--theme-primary-color-default-contrast));
outline-color: var(--mat-sys-primary);
background-color: color-mix(in srgb, var(--mat-sys-primary) 30%, var(--mat-sys-on-primary));
margin-left: 40px;
width: max-content;
max-width: 300px;
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss
+9 -12
View File
@@ -15,7 +15,7 @@
position: relative;
height: 100%;
width: 190px;
background-color: rgba(0, 0, 0, 0.12);
background-color: var(--mat-sys-surface-container-low);
display: flex;
flex-direction: column;
padding: 0;
@@ -24,7 +24,7 @@
display: flex;
flex-direction: column;
flex: 1;
background: #e6e6e6;
background: var(--mat-sys-surface-container);
}
.adf-info-drawer-layout-header {
@@ -59,7 +59,6 @@
justify-content: flex-end;
align-items: flex-end;
display: flex;
color: var(--adf-theme-foreground-text-color-064);
}
}
@@ -100,7 +99,7 @@
.adf-toolbar #{ms.$mat-toolbar} {
max-height: 48px;
background-color: var(--adf-theme-background-card-color);
background-color: var(--mat-sys-surface);
border-width: 0;
border-radius: 2px;
box-shadow:
@@ -112,21 +111,19 @@
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
font-size: var(--theme-body-1-font-size);
& > input {
border: 1px solid var(--adf-theme-foreground-text-color-007);
background-color: var(--adf-theme-background-card-color);
border: 1px solid var(--mat-sys-outline-variant);
background-color: var(--mat-sys-surface);
color: inherit;
font-size: var(--theme-body-1-font-size);
padding: 5px;
height: 24px;
line-height: 24px;
text-align: right;
width: 33px;
margin-right: 4px;
margin: 0 5px;
outline-width: 1px;
outline-color: gray;
outline-color: var(--mat-sys-surface-container);
}
}
@@ -134,8 +131,8 @@
cursor: default;
width: 79px;
height: 24px;
font-size: var(--theme-body-1-font-size);
border: 1px solid var(--adf-theme-foreground-text-color-007);
font-size: var(--mat-sys-body-small-size);
border: 1px solid var(--mat-sys-outline-variant);
text-align: center;
line-height: 24px;
margin-left: 4px;
lib/core/src/lib/viewer/components/txt-viewer/txt-viewer.component.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.adf-txt-viewer {
background-color: var(--theme-background-color);
background-color: var(--mat-sys-surface);
overflow: auto;
height: 100%;
width: 100%;
lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.scss
-1
View File
@@ -5,5 +5,4 @@
flex: 1;
flex-direction: column;
justify-content: center;
color: var(--adf-theme-foreground-text-color);
}
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss
+2 -2
View File
@@ -3,7 +3,7 @@
.adf-full-screen {
width: 100%;
height: 100%;
background-color: var(--adf-theme-background-card-color);
background-color: var(--mat-sys-surface);
}
.adf-viewer-render-main-loader {
@@ -36,7 +36,7 @@
position: relative;
overflow: hidden;
z-index: 1;
background-color: var(--theme-background-color);
background-color: var(--mat-sys-surface);
display: flex;
flex-flow: row wrap;
flex: 1;
lib/core/src/lib/viewer/components/viewer.component.scss
+11 -23
View File
@@ -1,10 +1,9 @@
/* stylelint-disable scss/at-extend-no-missing-placeholder */
@use '../../styles/mat-selectors' as ms;
.adf-full-screen {
width: 100%;
height: 100%;
background-color: var(--adf-theme-background-card-color);
background-color: var(--mat-sys-surface);
}
.adf-viewer {
@@ -12,12 +11,8 @@
width: 100%;
height: 100%;
#{ms.$mat-toolbar} {
color: var(--adf-theme-foreground-text-color-064);
.adf-toolbar-title {
width: auto;
}
.adf-toolbar-title {
width: auto;
}
&-main {
@@ -32,12 +27,6 @@
margin-right: 4px;
}
&-toolbar {
#{ms.$mat-toolbar} {
background-color: var(--adf-theme-background-card-color-087);
}
}
&__file-title {
text-align: center;
flex: 1 1 auto;
@@ -48,17 +37,16 @@
flex-direction: row;
align-items: center;
@media screen and (width <= 1450px) {
@media screen and (width <=1450px) {
left: 30%;
}
}
&__title-display-name-container,
&__display-name {
font-size: var(--theme-subheading-2-font-size);
font-size: var(--mat-sys-title-small-size);
line-height: 1.5;
vertical-align: middle;
color: var(--adf-theme-foreground-text-color);
white-space: nowrap;
}
@@ -70,7 +58,7 @@
}
&__display-name-value {
font-size: var(--theme-body-1-font-size);
font-size: var(--mat-sys-body-medium-size);
}
&-container {
@@ -80,7 +68,7 @@
position: relative;
overflow: hidden;
z-index: 1;
background-color: var(--theme-background-color);
background-color: var(--mat-sys-surface);
display: flex;
flex-direction: row;
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
@@ -139,17 +127,17 @@
width: 350px;
display: block;
padding: 0;
background-color: var(--theme-background-color);
box-shadow: 0 2px 4px 0 var(--adf-theme-foreground-text-color-027);
background-color: var(--mat-sys-surface);
box-shadow: var(--mat-sys-level2);
overflow: auto;
&__right {
border-left: 1px solid var(--adf-theme-foreground-text-color-007);
border-left: 1px solid var(--mat-sys-outline);
order: 4;
}
&__left {
border-right: 1px solid var(--adf-theme-foreground-text-color-007);
border-right: 1px solid var(--mat-sys-outline);
order: 1;
}
}