mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2026-09-09 18:02:54 +00:00
[ACS-10449] migrate ACA to MD3 (#5199)
* [ACS-10449] replace color usage in templates * [ACS-10449] switch from @import to @use * [ACS-10449] replace MD2 datetimepicker theme * [ACS-10449] replace MD2 apis, replace @imports, use MD3 theme * [ACS-10449] visual regression fixes 1 * [ACS-10449] visual regression fixes 2 * [ACS-10449] visual regression fixes 3 * [ACS-10449] visual regression fixes 4 * [ACS-10449] visual regression fixes 5 * [ACS-10449] visual regression fixes 6 * [ACS-10449] Viewer MD3 fixes * [ACS-10449] Typography MD3 fixes * [ACS-10449] Select, autocomplete background MD3 fix * [ACS-10449] Addressed PR comments * [ACS-10449] Reverted one unwanted change * [ACS-10449] Addressed PR comments * [ACS-10449] Addressed PR comments * [ACS-10449] Removed redundant code * [ACS-10449] Addressed PR comments * [ACS-10449] use variables instead of colors, fix permission components, use overrides * [ACS-10449] revert wrong token usage * [ACS-10449] Addressed PR comments * [ACS-10449] Addressed PR comments * [ACS-10449] Addressed PR comments * [ACS-10449] Toggle MD3 fixes * [ACS-10449] Addressed comments * [ACS-10449] Tabs MD3 fixes * [ACS-10449] Addressed comments * [ACS-10449] Addressed comments * [ACS-10449] MD3 fixes * [ACS-10449] Addressed comments * [ACS-10449] Addressed comments * [ACS-10449] icon, icon button and permission datatable styling refactor * [ACS-10449] revert changes overwriting previous fix, address comment * [ACS-10449] About page, notification history fixes * [ACS-10449] Login page, saved searches fixed * [ACS-10449] Addressed comments * [ACS-10449] Fixed incorrect box shadow for permissions users and groups popup * [ACS-10449] Fixed color for selected selectbox option * [ACS-10449] ADF style fixes refactoring I * [ACS-10449] Simplify styles for selected group and user icons in permissions * [ACS-10449] Create from template dialog title size and buttons layout * [ACS-10449] Fixed uploading file popup * [ACS-10449] Incorrect color of sidenav background * [ACS-10449] ADF style fixes refactoring II * [ACS-10449] Fixed background color for library metadata viewer and buttons hovering * [ACS-10449] Breadcrumb, datatable bg, search filter container fixes * [ACS-10449] User profile button fixes * [ACS-10449] Create from template, copy/move dialog fixes * [ACS-10449] Fixed styles for comments tab * [ACS-10449] Small correction * [ACS-10449] Fixed button styles for linking rules dialog and global change buttons padding * [ACS-10449] fix selected node tick icon color in search results * [ACS-10449] Permission form field fixes * [ACS-10449] Reverted unwanted change * [ACS-10449] Button, create folder rules dialog fixes * [ACS-10449] Fixed styles for version manager dialog * [ACS-10449] Tag creator fixes * [ACS-10449] Fixed styles for docs viewer thumbnails * [ACS-10449] remove redundant metadata styling * [ACS-10449] fix outlined button hover color * [ACS-10449] Categories panel fixes * [ACS-10449] Minor shadow box fix * [ACS-10449] Expansion panel font size fix * [ACS-10449] fix datepicker * [ACS-10449] Fixed icons color after uploding new version of file * [ACS-10449] Fix descending specificity and mixed decls build warnings, remove duplicated styles * [ACS-10449] Fixed container color for outlined cards * [ACS-10449] Badges color fix * [ACS-10449] Configure notification history badge size * [ACS-10449] Fixed viewer toolbar background * [ACS-10449] Use latest ADF version * fix e2e --------- Co-authored-by: g-jaskowski <grzegorz.jaskowski@hyland.com> Co-authored-by: Aleksander Sklorz <Aleksander.Sklorz@hyland.com> Co-authored-by: akashrathod28 <akash.rathod@hyland.com>
This commit is contained in:
Michal Kinas
co-authored by
g-jaskowski
Aleksander Sklorz
akashrathod28
g-jaskowski
Aleksander Sklorz
akashrathod28
parent
a23d808e92
commit
eb7861c93e
@@ -1,6 +1,28 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
app-about-page {
|
||||
adf-about {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
|
||||
@include mat.expansion-overrides(
|
||||
(
|
||||
container-background-color: var(--adf-theme-background-card-color),
|
||||
container-text-size: 14px,
|
||||
container-text-line-height: 24px,
|
||||
container-text-tracking: normal
|
||||
)
|
||||
);
|
||||
@include mat.card-overrides(
|
||||
(
|
||||
outlined-container-color: var(--adf-theme-background-card-color)
|
||||
)
|
||||
);
|
||||
@include mat.table-overrides(
|
||||
(
|
||||
background-color: var(--adf-theme-background-card-color),
|
||||
row-item-outline-color: var(--adf-theme-foreground-divider-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -11,7 +11,7 @@
|
||||
<div class="aca-main-content">
|
||||
|
||||
<ng-container *ngIf="((ruleSetsLoading$ | async) && (inheritedRuleSets$ | async).length === 0) || (actionsLoading$ | async); else onLoaded">
|
||||
<mat-progress-bar color="primary" mode="indeterminate" />
|
||||
<mat-progress-bar mode="indeterminate" />
|
||||
</ng-container>
|
||||
|
||||
<ng-template #onLoaded>
|
||||
@@ -47,7 +47,7 @@
|
||||
<button
|
||||
*ngIf="canEditMainRule"
|
||||
data-automation-id="manage-rules-create-button"
|
||||
mat-flat-button color="primary"
|
||||
mat-flat-button
|
||||
(click)="openCreateUpdateRuleDialog()">
|
||||
{{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.CREATE_RULE' | translate }}
|
||||
</button>
|
||||
|
||||
+58
-11
@@ -2,30 +2,33 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-manage-rules {
|
||||
@include mat.button-overrides(
|
||||
@include mat.progress-bar-overrides(
|
||||
(
|
||||
outlined-outline-color: var(--adf-theme-foreground-text-color-064)
|
||||
active-indicator-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
outlined-outline-color: var(--adf-theme-foreground-text-color-064),
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-label-text-color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
|
||||
#{ms.$mat-slide-toggle}:is(mat-slide-toggle) #{ms.$mat-switch}:enabled #{ms.$mat-switch-track}::after {
|
||||
background: var(--mdc-switch-selected-track-color);
|
||||
}
|
||||
|
||||
#{ms.$mat-slide-toggle} #{ms.$mat-switch} #{ms.$mat-switch-handle}::before {
|
||||
background: var(--mdc-switch-selected-pressed-handle-color);
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
height: 64px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
white-space: normal;
|
||||
background-color: inherit;
|
||||
background-color: var(--theme-background-color);
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
adf-empty-content {
|
||||
background-color: var(--theme-background-color);
|
||||
}
|
||||
|
||||
&__actions-bar {
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
@@ -40,17 +43,53 @@
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
|
||||
mat-icon {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-horizontal-padding: 16px,
|
||||
outlined-horizontal-padding: 16px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
|
||||
@include mat.slide-toggle-overrides(
|
||||
(
|
||||
track-width: 36px,
|
||||
track-height: 20px,
|
||||
track-shape: 10px,
|
||||
label-text-tracking: normal,
|
||||
selected-handle-size: 14px,
|
||||
unselected-handle-size: 14px,
|
||||
pressed-handle-size: 14px,
|
||||
with-icon-handle-size: 14px,
|
||||
unselected-with-icon-handle-horizontal-margin: 0 3px 0 0,
|
||||
selected-with-icon-handle-horizontal-margin: 0 0 0 16px,
|
||||
selected-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-focus-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-hover-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-pressed-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-icon-color: var(--adf-theme-background-card-color),
|
||||
handle-surface-color: var(--adf-theme-background-card-color),
|
||||
unselected-handle-color: var(--adf-theme-foreground-text-color-075),
|
||||
unselected-focus-handle-color: var(--adf-theme-foreground-text-color-087),
|
||||
unselected-hover-handle-color: var(--adf-theme-foreground-text-color-087),
|
||||
unselected-pressed-handle-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&__vertical-divider {
|
||||
@@ -59,6 +98,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.aca-page-layout-header {
|
||||
padding: 12px;
|
||||
|
||||
mat-icon {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(250px, 1fr) 3fr;
|
||||
|
||||
+9
@@ -1,4 +1,5 @@
|
||||
@use '../../styles/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.aca-rule-action-list {
|
||||
@@ -7,6 +8,14 @@
|
||||
.aca-rule-action-list-add-action-button {
|
||||
margin: 4px 0 20px;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-label-text-color: var(--adf-theme-foreground-base-color),
|
||||
filled-container-color: transparent,
|
||||
filled-horizontal-padding: 16px
|
||||
)
|
||||
);
|
||||
|
||||
.aca-rule-action-list-add-action-button-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
+6
@@ -9,10 +9,16 @@
|
||||
gap: 20px;
|
||||
|
||||
adf-card-view {
|
||||
margin-top: 0;
|
||||
|
||||
.adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.adf-card-textitem-field-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.adf-textitem-clickable {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
+8
@@ -1,4 +1,5 @@
|
||||
@use '../../styles/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-rule-composite-condition {
|
||||
display: block;
|
||||
@@ -55,6 +56,13 @@
|
||||
&__actions {
|
||||
padding-left: 8px;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-label-text-color: var(--adf-theme-foreground-base-color),
|
||||
filled-horizontal-padding: 16px
|
||||
)
|
||||
);
|
||||
|
||||
button:not(:disabled) {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
-1
@@ -50,7 +50,6 @@
|
||||
<mat-option disabled *ngIf="showLoadingSpinner; else optionList">
|
||||
<span class="aca-rule-simple-condition__auto-complete-loading-spinner">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate"
|
||||
data-automation-id="auto-complete-loading-spinner"
|
||||
[diameter]="25" />
|
||||
|
||||
+8
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-rule-simple-condition {
|
||||
&__form {
|
||||
display: flex;
|
||||
@@ -21,5 +23,11 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include mat.progress-spinner-overrides(
|
||||
(
|
||||
active-indicator-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -20,5 +20,5 @@
|
||||
|
||||
<mat-dialog-actions align="end" class="aca-edit-rule-dialog__footer">
|
||||
<button mat-flat-button mat-dialog-close>{{ 'ACA_FOLDER_RULES.EDIT_RULE_DIALOG.CANCEL' | translate }}</button>
|
||||
<button mat-flat-button color="primary" [disabled]="!formValid" data-automation-id="edit-rule-dialog-submit" (click)="onSubmit()">{{ submitLabel | translate }}</button>
|
||||
<button mat-flat-button class="aca-edit-rule-dialog__submit-button" [disabled]="!formValid" data-automation-id="edit-rule-dialog-submit" (click)="onSubmit()">{{ submitLabel | translate }}</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use '../styles/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-edit-rule-dialog-container {
|
||||
--edit-rule-dialog-padding: 8px 20px;
|
||||
@@ -53,5 +54,22 @@
|
||||
padding: var(--edit-rule-dialog-padding);
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: transparent,
|
||||
filled-label-text-color: var(--adf-theme-foreground-base-color),
|
||||
filled-horizontal-padding: 16px
|
||||
)
|
||||
);
|
||||
|
||||
.aca-edit-rule-dialog__submit-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-label-text-color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+28
-1
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-rule-list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -5,9 +7,34 @@
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
|
||||
@include mat.slide-toggle-overrides(
|
||||
(
|
||||
track-width: 36px,
|
||||
track-height: 20px,
|
||||
track-shape: 10px,
|
||||
label-text-tracking: normal,
|
||||
selected-handle-size: 14px,
|
||||
unselected-handle-size: 14px,
|
||||
pressed-handle-size: 14px,
|
||||
with-icon-handle-size: 14px,
|
||||
unselected-with-icon-handle-horizontal-margin: 0 3px 0 0,
|
||||
selected-with-icon-handle-horizontal-margin: 0 0 0 16px,
|
||||
selected-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-focus-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-hover-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-pressed-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-icon-color: var(--adf-theme-background-card-color),
|
||||
handle-surface-color: var(--adf-theme-background-card-color),
|
||||
unselected-handle-color: var(--adf-theme-foreground-text-color-075),
|
||||
unselected-focus-handle-color: var(--adf-theme-foreground-text-color-087),
|
||||
unselected-hover-handle-color: var(--adf-theme-foreground-text-color-087),
|
||||
unselected-pressed-handle-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
|
||||
p {
|
||||
margin: 6px 0 0;
|
||||
color: rgba(33, 35, 40, 0.7);
|
||||
color: var(--theme-text-light-color);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
||||
+6
-3
@@ -18,7 +18,7 @@
|
||||
|
||||
<div class="aca-rule-set-picker__content__rule-list" [ngClass]="{ 'aca-justify': rulesLoading$ | async }">
|
||||
<ng-container *ngIf="rulesLoading$ | async; else rulesLoaded">
|
||||
<mat-progress-spinner color="primary" mode="indeterminate" />
|
||||
<mat-progress-spinner mode="indeterminate" />
|
||||
</ng-container>
|
||||
|
||||
<ng-template #rulesLoaded>
|
||||
@@ -43,12 +43,15 @@
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end" class="aca-rule-set-picker__footer">
|
||||
<button mat-flat-button mat-dialog-close>
|
||||
<button
|
||||
mat-button
|
||||
mat-dialog-close>
|
||||
{{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.CANCEL' | translate }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
mat-flat-button color="primary"
|
||||
mat-flat-button
|
||||
class="aca-rule-set-picker__submit-button"
|
||||
[disabled]="!hasOwnedRules || isBusy"
|
||||
(click)="onSubmit()">
|
||||
{{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.SUBMIT' | translate }}
|
||||
|
||||
+16
@@ -1,4 +1,5 @@
|
||||
@use '../styles/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-rule-set-picker-container {
|
||||
--rule-set-picker-padding: 8px 20px;
|
||||
@@ -65,6 +66,12 @@
|
||||
.aca-rule-list-item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@include mat.progress-spinner-overrides(
|
||||
(
|
||||
active-indicator-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,5 +80,14 @@
|
||||
padding: var(--rule-set-picker-padding);
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
|
||||
.aca-rule-set-picker__submit-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-label-text-color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,5 +47,5 @@
|
||||
</aca-page-layout>
|
||||
|
||||
<ng-template #loading>
|
||||
<mat-progress-bar color="primary" mode="indeterminate" />
|
||||
<mat-progress-bar mode="indeterminate" />
|
||||
</ng-template>
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
app-details-manager {
|
||||
@include mat.progress-bar-overrides(
|
||||
(
|
||||
active-indicator-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
|
||||
.aca-details-buttons {
|
||||
display: flex;
|
||||
|
||||
@@ -8,6 +16,7 @@ app-details-manager {
|
||||
margin-top: 12px;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
|
||||
&:focus {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
@@ -27,6 +36,18 @@ app-details-manager {
|
||||
margin-top: 40px;
|
||||
height: calc(100% - 136px);
|
||||
|
||||
@include mat.tabs-overrides(
|
||||
(
|
||||
active-label-text-color: var(--theme-primary-color),
|
||||
active-focus-label-text-color: var(--theme-primary-color),
|
||||
active-hover-label-text-color: var(--theme-primary-color),
|
||||
inactive-label-text-color: var(--adf-theme-foreground-text-color-060),
|
||||
inactive-focus-label-text-color: var(--adf-theme-foreground-text-color-060),
|
||||
inactive-hover-label-text-color: var(--adf-theme-foreground-text-color-060),
|
||||
label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
+8
-1
@@ -1,11 +1,18 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-datatable-cell-badges-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.adf-datatable-cell-badge,
|
||||
* > .adf-datatable-cell-badge {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-secondary-text)
|
||||
)
|
||||
);
|
||||
|
||||
display: flex;
|
||||
color: var(--theme-secondary-text);
|
||||
border-radius: 14px;
|
||||
padding: 8px;
|
||||
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@
|
||||
.aca-locked-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
color: var(--theme-secondary-text-color);
|
||||
max-width: 100%;
|
||||
padding-right: 10px;
|
||||
|
||||
|
||||
+8
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-tags-name-column {
|
||||
display: flex;
|
||||
width: inherit;
|
||||
@@ -5,6 +7,12 @@
|
||||
adf-tag-node-list {
|
||||
width: inherit;
|
||||
|
||||
@include mat.chips-overrides(
|
||||
(
|
||||
label-text-color: var(--adf-theme-foreground-text-color-064)
|
||||
)
|
||||
);
|
||||
|
||||
.adf-dynamic-chip-list-chip {
|
||||
background-color: var(--theme-background-card-colour);
|
||||
border: 1px solid var(--theme-text-color);
|
||||
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
aca-custom-thumbnail-column {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-accent-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
+1
@@ -31,6 +31,7 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
imports: [NgIf, MatIconModule],
|
||||
selector: 'aca-custom-thumbnail-column',
|
||||
templateUrl: './thumbnail-column.component.html',
|
||||
styleUrls: ['./thumbnail-column.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ThumbnailColumnComponent implements OnChanges {
|
||||
|
||||
+14
@@ -1,5 +1,8 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.adf-comments-tab-container {
|
||||
padding: 16px;
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
}
|
||||
|
||||
.adf-comments-form-field {
|
||||
@@ -8,3 +11,14 @@
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-comments-input-form-field {
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
container-height: 53.75px,
|
||||
container-vertical-padding: 14.875px,
|
||||
outlined-label-text-tracking: normal,
|
||||
filled-label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+2
-2
@@ -60,13 +60,13 @@
|
||||
(click)="cancel()">
|
||||
{{ 'LIBRARY.DIALOG.CANCEL' | translate }}
|
||||
</button>
|
||||
<button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
|
||||
<button mat-button class="app-library-metadata-form__primary-action" [disabled]="form.invalid || form.pristine" (click)="update()">
|
||||
{{ 'LIBRARY.DIALOG.UPDATE' | translate }}
|
||||
</button>
|
||||
} @else {
|
||||
<button
|
||||
mat-button
|
||||
color="primary"
|
||||
class="app-library-metadata-form__primary-action"
|
||||
(click)="toggleEdit()"
|
||||
data-automation-id="app-library-metadata-form-edit-button">
|
||||
{{ 'LIBRARY.DIALOG.EDIT' | translate }}
|
||||
|
||||
+18
@@ -1,6 +1,24 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
app-library-metadata-form {
|
||||
.app-library-metadata-form-field {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.app-library-metadata-form__primary-action {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color),
|
||||
text-ripple-color: var(--theme-primary-color),
|
||||
text-state-layer-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@include mat.card-overrides(
|
||||
(
|
||||
elevated-container-shape: 0
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
-1
@@ -51,7 +51,6 @@
|
||||
(keyup.enter)="onSearchSubmit()"/>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="aca-search-ai-asking-button"
|
||||
(click)="onSearchSubmit()"
|
||||
[disabled]="!queryControl.value"
|
||||
|
||||
+8
@@ -1,4 +1,5 @@
|
||||
@use '../../../../ui/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
aca-search-ai-input {
|
||||
width: 100%;
|
||||
@@ -30,6 +31,13 @@ aca-search-ai-input {
|
||||
width: 92px;
|
||||
font-weight: 600;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-label-text-color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
|
||||
&-label {
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
+7
-7
@@ -1,4 +1,4 @@
|
||||
@use '../../../ui/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
aca-search-in-menu {
|
||||
.aca-search-input--search-in-button {
|
||||
@@ -10,12 +10,12 @@ aca-search-in-menu {
|
||||
background-color: var(--theme-dropdown-color);
|
||||
border: none;
|
||||
|
||||
&#{ms.$mat-icon-no-color} {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
outlined-label-text-color: var(--adf-theme-foreground-base-color),
|
||||
outlined-icon-offset: -4px
|
||||
)
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-dropdown-background-hover, rgba(0, 0, 0, 0.04));
|
||||
|
||||
+18
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
$search-height: 48px;
|
||||
$search-border-radius: 4px;
|
||||
|
||||
@@ -9,9 +11,25 @@ $search-border-radius: 4px;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-foreground-text-color)
|
||||
)
|
||||
);
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
container-text-tracking: -0.7px,
|
||||
outlined-input-text-placeholder-color: var(--adf-theme-foreground-text-color-060)
|
||||
)
|
||||
);
|
||||
|
||||
.app-search-input {
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.7px;
|
||||
|
||||
&::placeholder {
|
||||
letter-spacing: -0.7px;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@
|
||||
<div class="aca-main-content">
|
||||
<div class="adf-search-results">
|
||||
<div class="adf-search-results__content">
|
||||
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" />
|
||||
<mat-progress-bar *ngIf="isLoading" mode="indeterminate" />
|
||||
<div class="adf-search-results__content-header aca-content-lib" *ngIf="data?.list.entries.length">
|
||||
<div class="aca-content__side--left">
|
||||
<div class="adf-search-results--info-text" *ngIf="totalResults !== 1">
|
||||
|
||||
+13
-6
@@ -1,15 +1,22 @@
|
||||
@import '../../../ui/mixins';
|
||||
@use '../../../ui/mixins' as mixins;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
aca-search-results {
|
||||
@include mat.progress-bar-overrides(
|
||||
(
|
||||
active-indicator-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
|
||||
.aca-search-results__toolbar-actions {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.adf-search-results {
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
|
||||
&__content {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
|
||||
border-left: 1px solid var(--theme-border-color);
|
||||
}
|
||||
@@ -26,11 +33,11 @@ aca-search-results {
|
||||
&--info-text {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
color: var(--theme-secondary-text-color);
|
||||
}
|
||||
|
||||
.aca-content-lib {
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
|
||||
flex: unset;
|
||||
height: unset;
|
||||
@@ -40,7 +47,7 @@ aca-search-results {
|
||||
background-color: var(--theme-card-background-color);
|
||||
|
||||
&__side--left {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
|
||||
height: unset;
|
||||
}
|
||||
|
||||
+1
-2
@@ -12,7 +12,7 @@
|
||||
<div class="aca-main-content">
|
||||
<div class="adf-search-results">
|
||||
<div class="adf-search-results__content">
|
||||
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite" />
|
||||
<mat-progress-bar *ngIf="isLoading" mode="indeterminate" aria-live="polite" />
|
||||
<div class="adf-search-results__content-header aca-content">
|
||||
<div class="aca-content__filter-set">
|
||||
<p>{{ 'APP.BROWSE.SEARCH.FILTER_SET' | translate }}</p>
|
||||
@@ -198,7 +198,6 @@
|
||||
<button
|
||||
mat-icon-button
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.PREVIEW' | translate }}"
|
||||
color="accent"
|
||||
class="adf-search-results--visibility_button"
|
||||
>
|
||||
<mat-icon>visibility</mat-icon>
|
||||
|
||||
+97
-17
@@ -1,10 +1,43 @@
|
||||
@import '../../../ui/mixins';
|
||||
@use '@angular/material' as mat;
|
||||
@use '../../../ui/mixins' as mixins;
|
||||
|
||||
body:has(aca-search-results) {
|
||||
.cdk-drag-preview .adf-datatable-cell-header-content,
|
||||
.cdk-drag-preview .adf-datatable-cell-header-content--hovered {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cdk-drag-preview.adf-datatable-cell-header {
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
}
|
||||
|
||||
aca-search-results {
|
||||
.aca-content-header {
|
||||
overflow-x: auto;
|
||||
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--theme-foreground-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@include mat.progress-bar-overrides(
|
||||
(
|
||||
active-indicator-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
@include mat.divider-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-divider-color)
|
||||
)
|
||||
);
|
||||
|
||||
.aca-search-results-active-search-ai-input {
|
||||
.aca-header-container,
|
||||
.adf-search-results__content-header.aca-content {
|
||||
@@ -17,7 +50,7 @@ aca-search-results {
|
||||
}
|
||||
|
||||
.adf-search-results {
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
|
||||
&__facets {
|
||||
display: flex;
|
||||
@@ -27,9 +60,21 @@ aca-search-results {
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
|
||||
border-left: 1px solid var(--theme-border-color);
|
||||
|
||||
.adf-datatable-header adf-datatable-row {
|
||||
height: 68px;
|
||||
|
||||
.adf-datatable-cell-header-content {
|
||||
height: 68px;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content-header {
|
||||
@@ -40,16 +85,24 @@ aca-search-results {
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
|
||||
.aca-content__advanced-filters {
|
||||
/* stylelint-disable-next-line */
|
||||
.mat-mdc-chip-action {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.adf-search-form-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-icon-offset: 0
|
||||
)
|
||||
);
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.mdc-evolution-chip__text-label {
|
||||
color: var(--theme-selected-text-color);
|
||||
.adf-search-form-icon {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-content__advanced-filters {
|
||||
mat-chip-set {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.adf-search-filter-chip,
|
||||
@@ -61,6 +114,14 @@ aca-search-results {
|
||||
margin-bottom: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include mat.chips-overrides(
|
||||
(
|
||||
label-text-line-height: 24px,
|
||||
label-text-tracking: normal,
|
||||
label-text-color: var(--theme-selected-text-color)
|
||||
)
|
||||
);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--theme-dropdown-background-hover);
|
||||
@@ -78,6 +139,14 @@ aca-search-results {
|
||||
|
||||
.adf-search-filter-placeholder {
|
||||
color: var(--theme-selected-text-color);
|
||||
letter-spacing: normal;
|
||||
line-height: 24px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.adf-search-filter-ellipsis {
|
||||
letter-spacing: normal;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -85,7 +154,7 @@ aca-search-results {
|
||||
&--info-text {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
color: var(--theme-secondary-text-color);
|
||||
}
|
||||
|
||||
&--embedded_viewer {
|
||||
@@ -120,6 +189,12 @@ aca-search-results {
|
||||
&--visibility_button {
|
||||
margin-right: 8px;
|
||||
cursor: default;
|
||||
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-search-filter {
|
||||
@@ -176,6 +251,15 @@ aca-search-results {
|
||||
margin-right: 2px;
|
||||
line-height: 33px;
|
||||
font-weight: lighter;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-horizontal-padding: 8px,
|
||||
text-with-icon-horizontal-padding: 8px,
|
||||
text-icon-offset: 0,
|
||||
text-disabled-label-text-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&__sort-picker {
|
||||
@@ -184,10 +268,6 @@ aca-search-results {
|
||||
}
|
||||
|
||||
.adf-datatable {
|
||||
aca-search-action-menu button {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.aca-location-link a {
|
||||
font-size: 12px;
|
||||
max-width: 350px;
|
||||
|
||||
-1
@@ -18,7 +18,6 @@
|
||||
id="aca-save-search-delete-dialog-cancel-button">{{ 'CANCEL' | titlecase | translate }}</button>
|
||||
<button mat-flat-button
|
||||
id="aca-save-search-delete-dialog-submit-button"
|
||||
color="primary"
|
||||
[disabled]="isLoading"
|
||||
(click)="onSubmit()">{{ 'DELETE' | titlecase | translate }}</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
+17
@@ -1,4 +1,12 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-saved-search-delete-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
with-actions-content-padding: 20px 24px
|
||||
)
|
||||
);
|
||||
|
||||
.aca-saved-search-delete-dialog__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -11,4 +19,13 @@
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
mat-dialog-actions button[mat-flat-button] {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-label-text-color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
-1
@@ -54,7 +54,6 @@
|
||||
mat-dialog-close> {{ 'CANCEL' | titlecase | translate }} </button>
|
||||
|
||||
<button mat-flat-button
|
||||
color="primary"
|
||||
id="aca-saved-search-edit-dialog-submit-button"
|
||||
(click)="submit()"
|
||||
[disabled]="!form.valid || isLoading">{{ 'SAVE' | titlecase | translate}}</button>
|
||||
|
||||
+11
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-saved-search-edit-dialog {
|
||||
.aca-saved-search-edit-dialog__form-field {
|
||||
width: 100%;
|
||||
@@ -16,4 +18,13 @@
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
mat-dialog-actions button[mat-flat-button] {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-label-text-color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -58,7 +58,7 @@
|
||||
|
||||
<button id="aca-save-search-dialog-save-button"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="aca-save-search-dialog__save-button"
|
||||
(click)="submit()"
|
||||
[disabled]="!form.valid || disableSubmitButton">
|
||||
{{ 'SAVE' | titlecase | translate}}
|
||||
|
||||
+27
@@ -1,9 +1,27 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-save-search-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
with-actions-content-padding: 20px 24px
|
||||
)
|
||||
);
|
||||
|
||||
.aca-save-search-dialog__form-field {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
mat-dialog-content mat-form-field {
|
||||
font-size: 14px;
|
||||
letter-spacing: normal;
|
||||
line-height: 20px;
|
||||
|
||||
mat-label {
|
||||
letter-spacing: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-save-search-dialog__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -16,4 +34,13 @@
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aca-save-search-dialog__save-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-label-text-color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+17
@@ -7,6 +7,8 @@
|
||||
|
||||
.adf-datatable-header {
|
||||
padding: 0 20px;
|
||||
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
.adf-datatable-row {
|
||||
margin-right: 15px;
|
||||
@@ -17,9 +19,16 @@
|
||||
|
||||
.adf-datatable-body {
|
||||
.adf-datatable-row {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
min-height: 56px;
|
||||
border-top: 0;
|
||||
margin: 0 20px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: 0;
|
||||
}
|
||||
@@ -29,5 +38,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-header .adf-datatable-row:hover {
|
||||
background-color: var(--adf-theme-background-hover-color);
|
||||
|
||||
.adf-datatable-cell-header-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
app-expand-menu {
|
||||
@include mat.expansion-overrides(
|
||||
(
|
||||
header-indicator-color: var(--adf-theme-foreground-icon-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -37,6 +37,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
||||
selector: 'app-expand-menu',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
templateUrl: './expand-menu.component.html',
|
||||
styleUrls: ['./expand-menu.component.scss'],
|
||||
host: { class: 'app-expand-menu' }
|
||||
})
|
||||
export class ExpandMenuComponent implements OnInit {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use '../../ui/mat-selectors' as mat;
|
||||
@use '../../ui/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-sidenav {
|
||||
display: flex;
|
||||
@@ -40,13 +41,40 @@
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-notification-history-menu_button {
|
||||
--mat-text-button-icon-offset: 0;
|
||||
--mat-text-button-icon-spacing: 0;
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-with-icon-horizontal-padding: 8px
|
||||
)
|
||||
);
|
||||
|
||||
.adf-notification-history-menu_button-icon {
|
||||
margin: 0;
|
||||
color: var(--adf-theme-foreground-icon-color);
|
||||
|
||||
@include mat.badge-overrides(
|
||||
(
|
||||
background-color: var(--theme-accent-color),
|
||||
container-overlap-offset: -8px
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.aca-toolbar {
|
||||
column-gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aca-sidenav__section {
|
||||
overflow-y: auto;
|
||||
|
||||
#{mat.$mat-expansion-panel-body} {
|
||||
#{ms.$mat-expansion-panel-body} {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -62,10 +90,16 @@
|
||||
align-items: center;
|
||||
border: none;
|
||||
|
||||
span::after {
|
||||
transform: rotate(226deg);
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.mat-expansion-indicator {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&.mat-expanded .mat-expansion-indicator {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
/* stylelint-enable selector-class-pattern */
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -90,6 +124,7 @@
|
||||
|
||||
.aca-action-button__label {
|
||||
color: var(--theme-text-light-color);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
&:hover .aca-action-button__label {
|
||||
@@ -127,7 +162,7 @@
|
||||
line-height: 32px;
|
||||
justify-content: start;
|
||||
|
||||
#{mat.$mat-button-label} {
|
||||
#{ms.$mat-button-label} {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.app-toggle-info-drawer {
|
||||
button:focus {
|
||||
border: 2px solid var(--theme-blue-button-color);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
background-color: var(--theme-selected-background-color);
|
||||
}
|
||||
|
||||
button[aria-expanded='true'] {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
+1
-10
@@ -46,16 +46,7 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
<mat-icon>view_sidebar</mat-icon>
|
||||
</button>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.app-toggle-info-drawer button:focus {
|
||||
border: 2px solid var(--theme-blue-button-color);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
background-color: var(--theme-selected-background-color);
|
||||
}
|
||||
`
|
||||
],
|
||||
styleUrl: './toggle-info-drawer.component.scss',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'app-toggle-info-drawer' }
|
||||
})
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
class="app-general-save-btn"
|
||||
[attr.title]="'APP.TOOLTIPS.SAVE' | translate"
|
||||
[attr.aria-label]="'APP.TOOLTIPS.SAVE' | translate"
|
||||
[disabled]="profileForm.invalid"
|
||||
@@ -168,7 +168,7 @@
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
class="app-general-save-btn"
|
||||
[attr.title]="'APP.TOOLTIPS.SAVE' | translate"
|
||||
[attr.aria-label]="'APP.TOOLTIPS.SAVE' | translate"
|
||||
[disabled]="profileForm.invalid"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
app-view-profile {
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
@@ -48,12 +50,28 @@ app-view-profile {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.app-general-save-btn {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.app-general-edit {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-text-color-064)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.app-general-cancel-btn {
|
||||
color: var(--adf-metadata-action-button-clear-color);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-metadata-action-button-clear-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 10px 20px;
|
||||
letter-spacing: normal;
|
||||
|
||||
.aca-node-info-item {
|
||||
display: flex;
|
||||
@@ -55,6 +56,11 @@
|
||||
&-value {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
|
||||
adf-icon.aca-node-icon,
|
||||
adf-icon.aca-node-icon mat-icon {
|
||||
color: var(--theme-app-blue-folder);
|
||||
}
|
||||
}
|
||||
|
||||
.aca-node-info-location {
|
||||
|
||||
@@ -42,11 +42,15 @@
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions class="app-create-from-template-footer">
|
||||
<button mat-button mat-dialog-close data-automation-id="create-from-template-dialog-cancel-button">
|
||||
<button
|
||||
mat-button
|
||||
mat-dialog-close
|
||||
data-automation-id="create-from-template-dialog-cancel-button"
|
||||
class="app-create-from-template-footer-button">
|
||||
{{ 'NODE_FROM_TEMPLATE.CANCEL' | translate }}
|
||||
</button>
|
||||
<button
|
||||
class="app-create-from-template-footer-create-button"
|
||||
class="app-create-from-template-footer-button app-create-from-template-footer-create-button"
|
||||
[disabled]="form.invalid"
|
||||
mat-button
|
||||
(click)="onSubmit()"
|
||||
|
||||
+52
-51
@@ -1,62 +1,16 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
app-create-from-template-dialog {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
&.app-create-from-template-dialog {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
|
||||
.app-create-from-template {
|
||||
&-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-field {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
|
||||
form:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.app-create-from-template-field {
|
||||
.mdc-floating-label {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error-wrapper {
|
||||
font-size: 10.5px;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
padding: 8px 22px;
|
||||
.app-create-from-template-footer {
|
||||
padding: 8px 0 8px 22px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-secondary-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&-create-button[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -64,6 +18,53 @@ app-create-from-template-dialog {
|
||||
&-create-button:enabled {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
.app-create-from-template-footer-button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
margin-left: 0;
|
||||
padding-right: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-create-from-template {
|
||||
&-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-text-bold-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-field {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
|
||||
form:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.app-create-from-template-field {
|
||||
.mdc-floating-label {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error-wrapper {
|
||||
font-size: 10.5px;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,6 +40,9 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
templateUrl: './create-from-template.dialog.html',
|
||||
styleUrls: ['./create-from-template.dialog.scss'],
|
||||
selector: 'app-create-from-template-dialog',
|
||||
host: {
|
||||
class: 'app-create-from-template-dialog'
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class CreateFromTemplateDialogComponent implements OnInit {
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@use '@angular/material' as mat;
|
||||
@import './mixins';
|
||||
@import './theme';
|
||||
@use './mixins' as mixins;
|
||||
@use './theme';
|
||||
@use './custom-theme' as custom;
|
||||
|
||||
$foreground: map-get($custom-theme, foreground);
|
||||
html {
|
||||
font-family: 'Open Sans', serif;
|
||||
font-size: 16px;
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', serif;
|
||||
color: mat.m2-get-color-from-palette($foreground, text, 0.87);
|
||||
margin: 0;
|
||||
|
||||
& > main {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,7 +36,7 @@ app-about,
|
||||
adf-layout-container,
|
||||
aca-search-results,
|
||||
ng-component {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@@ -56,6 +58,10 @@ ng-component {
|
||||
border-bottom: 1px solid var(--theme-metadata-property-panel-border-color);
|
||||
}
|
||||
|
||||
aca-files aca-page-layout .aca-page-layout-content .aca-sidebar {
|
||||
border-color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
.aca-page-title {
|
||||
cursor: default;
|
||||
font-size: 20px;
|
||||
@@ -74,3 +80,24 @@ ng-component {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-notification-history-mark-as-read {
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-notification-history-menu .adf-notification-history-item-list {
|
||||
.adf-notification-initiator-pic {
|
||||
background: var(--theme-accent-color);
|
||||
color: var(--adf-theme-mat-grey-color-a200);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.adf-notification-history-menu-date {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,48 +1,38 @@
|
||||
/* stylelint-disable value-keyword-case */
|
||||
@use '@angular/material' as mat;
|
||||
@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme' as datetimepicker-theme;
|
||||
@import './overrides/adf-style-fixes.theme';
|
||||
@import './overrides/adf-pagination.theme';
|
||||
@import './overrides/ay11';
|
||||
@import './overrides/adf-about.theme';
|
||||
@import './overrides/adf-variables';
|
||||
@import './colors';
|
||||
@use './overrides/adf-style-fixes.theme' as adf-style-fixes;
|
||||
@use './overrides/adf-pagination.theme' as adf-pagination;
|
||||
@use './overrides/ay11' as ay11;
|
||||
@use './overrides/adf-about.theme' as adf-about;
|
||||
@use './overrides/adf-variables' as adf-variables;
|
||||
@use './overrides/datetimepicker.theme' as datetimepicker-theme;
|
||||
|
||||
$mat-primary-palette: mat.m2-define-palette($aca-primary-blue, A100);
|
||||
$mat-accent-palette: mat.m2-define-palette($aca-accent-green, A200);
|
||||
$mat-warn-palette: mat.m2-define-palette($aca-warn, A100);
|
||||
$app-typography: mat.m2-define-typography-config(
|
||||
$font-family: 'Open Sans',
|
||||
$headline-1: mat.m2-define-typography-level(112px, 112px, 300),
|
||||
$headline-2: mat.m2-define-typography-level(56px, 56px, 400),
|
||||
$headline-3: mat.m2-define-typography-level(45px, 48px, 400),
|
||||
$headline-4: mat.m2-define-typography-level(34px, 40px, 400),
|
||||
$headline-5: mat.m2-define-typography-level(24px, 32px, 400),
|
||||
$headline-6: mat.m2-define-typography-level(20px, 32px, 400),
|
||||
$subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
|
||||
$subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.m2-define-typography-level(14px, 24px, 500),
|
||||
$body-1: mat.m2-define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.m2-define-typography-level(12px, 20px, 400),
|
||||
$button: mat.m2-define-typography-level(14px, 14px, 500)
|
||||
);
|
||||
$custom-theme: mat.m2-define-light-theme(
|
||||
$custom-theme: mat.define-theme(
|
||||
(
|
||||
color: (
|
||||
primary: $mat-primary-palette,
|
||||
accent: $mat-accent-palette,
|
||||
warn: $mat-warn-palette
|
||||
theme-type: light,
|
||||
primary: mat.$azure-palette,
|
||||
tertiary: mat.$green-palette
|
||||
),
|
||||
typography: $app-typography
|
||||
typography: (
|
||||
plain-family: 'Open Sans',
|
||||
brand-family: 'Open Sans'
|
||||
),
|
||||
density: (
|
||||
scale: 0
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
@mixin custom-theme($theme) {
|
||||
@include mat.all-component-themes($theme);
|
||||
@include provide-adf-variables($theme);
|
||||
@include datetimepicker-theme.mat-datetimepicker-theme($theme);
|
||||
@include adf-style-fixes($theme);
|
||||
@include adf-pagination-theme($theme);
|
||||
@include ay11-theme;
|
||||
@include adf-about-theme($theme);
|
||||
}
|
||||
|
||||
@mixin custom-theme-overrides() {
|
||||
@include adf-variables.provide-adf-variables;
|
||||
@include datetimepicker-theme.datetimepicker-theme;
|
||||
@include adf-style-fixes.adf-style-fixes;
|
||||
@include adf-pagination.adf-pagination-theme;
|
||||
@include ay11.ay11-theme;
|
||||
@include adf-about.adf-about-theme;
|
||||
}
|
||||
|
||||
@@ -79,6 +79,9 @@ $mat-toolbar-single-row: '.mat-toolbar-single-row';
|
||||
$mat-toolbar-multiple-row: '.mat-toolbar-multiple-row';
|
||||
$mat-unthemed: '.mat-unthemed';
|
||||
$mat-calendar-period-button: '.mat-calendar-period-button';
|
||||
$mat-calendar-previous-button: '.mat-calendar-previous-button';
|
||||
$mat-calendar-next-button: '.mat-calendar-next-button';
|
||||
$mat-datepicker-toggle-active: '.mat-datepicker-toggle-active';
|
||||
$mat-radio-button: '.mat-mdc-radio-button';
|
||||
$mat-radio: '.mdc-radio';
|
||||
$mat-tab-ripple: '.mdc-tab__ripple';
|
||||
@@ -101,3 +104,17 @@ $mat-checkbox-native-control: '.mdc-checkbox__native-control';
|
||||
$mat-card-header: '.mat-mdc-card-header';
|
||||
$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
|
||||
$mat-expansion-panel-body: '.mat-expansion-panel-body';
|
||||
$mat-expanded: '.mat-expanded';
|
||||
$mat-snackbar: '.mdc-snackbar';
|
||||
$mat-snack-bar-container: '.mat-mdc-snack-bar-container';
|
||||
$mat-snackbar-label: '.mdc-snackbar__label';
|
||||
$mat-datetimepicker-calendar: '.mat-datetimepicker-calendar';
|
||||
$mat-datetimepicker-calendar-header: '.mat-datetimepicker-calendar-header';
|
||||
$mat-datetimepicker-calendar-header-year: '.mat-datetimepicker-calendar-header-year';
|
||||
$mat-datetimepicker-calendar-header-date: '.mat-datetimepicker-calendar-header-date';
|
||||
$mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-time';
|
||||
$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
|
||||
$mat-datetimepicker-calendar-table-header: '.mat-datetimepicker-calendar-table-header';
|
||||
$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
|
||||
$mat-datetimepicker-dialog: '.mat-datetimepicker-dialog';
|
||||
$mat-dialog-container: '.mdc-dialog__container';
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -24,3 +26,74 @@
|
||||
border: $thickness solid $border-color;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin aca-user-icon-column() {
|
||||
adf-user-icon-column {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-primary-color-default-contrast)
|
||||
)
|
||||
);
|
||||
|
||||
.adf-cell-value {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-height: unset;
|
||||
font-size: var(--mat-sys-body-medium-size);
|
||||
letter-spacing: normal;
|
||||
line-height: 20px;
|
||||
|
||||
.adf-people-initial,
|
||||
.adf-group-icon {
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
font-size: 16px;
|
||||
font-weight: var(--theme-font-weight-bold);
|
||||
}
|
||||
|
||||
.adf-group-icon {
|
||||
height: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-people-select-icon {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-accent-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin aca-card-slide-toggle($selected-margin: 0 0 0 15px, $extra-overrides: ()) {
|
||||
@include mat.slide-toggle-overrides(
|
||||
(
|
||||
track-width: 36px,
|
||||
track-height: 20px,
|
||||
track-shape: 10px,
|
||||
selected-handle-size: 14px,
|
||||
unselected-handle-size: 14px,
|
||||
pressed-handle-size: 14px,
|
||||
with-icon-handle-size: 14px,
|
||||
unselected-with-icon-handle-horizontal-margin: 0 3px 0 0,
|
||||
selected-with-icon-handle-horizontal-margin: $selected-margin,
|
||||
selected-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-focus-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-hover-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-pressed-handle-color: var(--adf-theme-background-card-color),
|
||||
selected-icon-color: var(--adf-theme-background-card-color),
|
||||
handle-surface-color: var(--adf-theme-background-card-color),
|
||||
unselected-handle-color: var(--adf-theme-foreground-text-color-075),
|
||||
unselected-focus-handle-color: var(--adf-theme-foreground-text-color-087),
|
||||
unselected-hover-handle-color: var(--adf-theme-foreground-text-color-087),
|
||||
unselected-pressed-handle-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
@include mat.slide-toggle-overrides($extra-overrides);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use '../mat-selectors' as ms;
|
||||
|
||||
@mixin adf-about-theme($theme) {
|
||||
@mixin adf-about-theme() {
|
||||
adf-about {
|
||||
/* custom ADF About Component Theme */
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@mixin adf-pagination-theme($theme) {
|
||||
@mixin adf-pagination-theme() {
|
||||
adf-pagination {
|
||||
&.adf-pagination {
|
||||
height: 32px;
|
||||
@@ -20,6 +22,12 @@
|
||||
}
|
||||
|
||||
.adf-pagination__perpage-block {
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
|
||||
flex: auto;
|
||||
padding-right: 24px;
|
||||
}
|
||||
@@ -29,10 +37,34 @@
|
||||
}
|
||||
|
||||
.adf-pagination__previous-button {
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--adf-theme-foreground-text-color-087),
|
||||
disabled-icon-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: currentColor
|
||||
)
|
||||
);
|
||||
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
|
||||
.adf-pagination__next-button {
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--adf-theme-foreground-text-color-087),
|
||||
disabled-icon-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: currentColor
|
||||
)
|
||||
);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,520 @@
|
||||
@mixin adf-style-fixes($theme) {
|
||||
// add here all ADF style overrides
|
||||
// and create a task to move them to ADF
|
||||
@use '@angular/material' as mat;
|
||||
@use '../mat-selectors' as ms;
|
||||
@use '../mixins' as mixins;
|
||||
|
||||
@mixin adf-style-fixes() {
|
||||
.adf-info-drawer-layout {
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
|
||||
.adf-info-drawer-layout-header {
|
||||
.adf-info-drawer-layout-header-title {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-header-buttons aca-toolbar {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-icon-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-info-drawer-layout-content mat-tab-group.adf-info-drawer-tabs {
|
||||
@include mat.tabs-overrides(
|
||||
(
|
||||
active-label-text-color: var(--theme-primary-color),
|
||||
active-focus-label-text-color: var(--theme-primary-color),
|
||||
active-hover-label-text-color: var(--theme-primary-color),
|
||||
inactive-label-text-color: var(--adf-theme-foreground-text-color-060),
|
||||
inactive-focus-label-text-color: var(--adf-theme-foreground-text-color-060),
|
||||
inactive-hover-label-text-color: var(--adf-theme-foreground-text-color-060),
|
||||
label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
adf-viewer {
|
||||
@include mat.toolbar-overrides(
|
||||
(
|
||||
container-background-color: var(--adf-theme-background-card-color-087)
|
||||
)
|
||||
);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-icon-color)
|
||||
)
|
||||
);
|
||||
|
||||
mat-toolbar {
|
||||
border: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
|
||||
.adf-viewer__display-name {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-choose-action {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color),
|
||||
text-disabled-label-text-color: var(--adf-theme-foreground-text-color-054)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-metadata-properties {
|
||||
@include mat.expansion-overrides(
|
||||
(
|
||||
container-shape: 4px,
|
||||
container-background-color: var(--adf-theme-background-card-color),
|
||||
container-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
container-text-size: var(--mat-sys-body-medium-size),
|
||||
container-text-tracking: normal,
|
||||
container-text-line-height: 24px,
|
||||
container-text-weight: var(--mat-sys-body-large-weight),
|
||||
header-text-line-height: normal,
|
||||
header-text-tracking: normal,
|
||||
header-text-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
|
||||
mat-expansion-panel.adf-content-metadata-panel {
|
||||
border: 1px solid var(--adf-theme-foreground-divider-color);
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
border-radius: 4px !important;
|
||||
box-shadow: none;
|
||||
|
||||
.adf-metadata-properties-header {
|
||||
padding: 0 12px;
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
&.mat-expanded {
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
|
||||
}
|
||||
/* stylelint-enable selector-class-pattern */
|
||||
}
|
||||
|
||||
.adf-metadata-no-item-added {
|
||||
margin-top: 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.adf-edit-icon-buttons {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-text-color-064)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-metadata-action-buttons {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-metadata-action-button-clear-color)
|
||||
)
|
||||
);
|
||||
|
||||
button:last-child {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
|
||||
&[disabled] {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-aspect-list-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
subhead-size: 18px
|
||||
)
|
||||
);
|
||||
|
||||
.adf-accordion-aspect-list-item {
|
||||
@include mat.expansion-overrides(
|
||||
(
|
||||
container-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
container-text-size: var(--mat-sys-body-medium-size),
|
||||
container-text-weight: var(--mat-sys-body-large-weight),
|
||||
container-text-tracking: normal
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
adf-aspect-list-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
with-actions-content-padding: 20px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-add-permission-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
subhead-weight: var(--theme-font-weight-semi-bold),
|
||||
subhead-tracking: -0.5px
|
||||
)
|
||||
);
|
||||
|
||||
.adf-add-permission-dialog-actions {
|
||||
--mat-sys-surface: var(--theme-white-background);
|
||||
}
|
||||
|
||||
// TODO get general designs from Shane and check styling for this part
|
||||
.adf-search-user-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-container-height: 32px
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-permission-search-input {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-text-color-060)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-user-role-column {
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-outline-color: var(--adf-theme-foreground-text-color-060),
|
||||
outlined-hover-outline-color: var(--adf-theme-foreground-text-color-060),
|
||||
outlined-label-text-size: var(--mat-sys-body-medium-size),
|
||||
outlined-label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
@include mat.select-overrides(
|
||||
(
|
||||
enabled-trigger-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
placeholder-text-color: var(--adf-theme-foreground-text-color-060),
|
||||
trigger-text-size: var(--mat-sys-body-medium-size),
|
||||
trigger-text-tracking: normal,
|
||||
trigger-text-line-height: 20px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-datatable-permission.adf-datatable {
|
||||
--mat-sys-surface: var(--theme-white-background);
|
||||
|
||||
height: calc(100% - 16px);
|
||||
|
||||
.adf-sticky-header {
|
||||
border-top: 1px solid var(--mat-sys-outline-variant);
|
||||
}
|
||||
|
||||
.adf-datatable-body adf-datatable-row {
|
||||
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
min-height: 56px;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.aca-user-icon-column;
|
||||
}
|
||||
|
||||
adf-permission-container .adf-datatable-permission.adf-datatable {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-search-show {
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
list-item-label-text-size: var(--mat-sys-body-medium-size),
|
||||
list-item-label-text-tracking: normal,
|
||||
list-item-label-text-line-height: 20px
|
||||
)
|
||||
);
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
mat-list-option .mdc-list-item__end {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-list-option-item {
|
||||
@include mixins.aca-user-icon-column;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-permission-card {
|
||||
--mdc-elevated-card-container-color: var(--adf-theme-background-card-color);
|
||||
|
||||
.adf-local-permission-container .adf-permission-content-header button:disabled {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-permission-visibility-toggle {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-label-text-color: var(--adf-theme-foreground-base-color),
|
||||
filled-container-color: transparent,
|
||||
filled-horizontal-padding: 16px
|
||||
)
|
||||
);
|
||||
|
||||
mat-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-inherit-toggle {
|
||||
@include mixins.aca-card-slide-toggle($selected-margin: 0 0 0 15px);
|
||||
}
|
||||
}
|
||||
|
||||
adf-aspect-list .adf-accordion-aspect-list .adf-accordion-aspect-list-item {
|
||||
--mat-sys-level2: var(--theme-border-color) 0 2px 2px -1px;
|
||||
--mat-sys-on-secondary-container: var(--adf-theme-foreground-text-color-064);
|
||||
|
||||
@include mat.expansion-overrides(
|
||||
(
|
||||
container-shape: 0,
|
||||
header-text-tracking: normal,
|
||||
header-description-color: var(--adf-theme-foreground-icon-color),
|
||||
header-indicator-color: var(--adf-theme-foreground-text-color-054)
|
||||
)
|
||||
);
|
||||
|
||||
mat-expansion-panel {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.adf-aspect-property-table {
|
||||
@include mat.table-overrides(
|
||||
(
|
||||
background-color: var(--adf-theme-background-card-color),
|
||||
row-item-outline-color: var(--adf-theme-foreground-divider-color),
|
||||
header-headline-color: var(--adf-theme-foreground-text-color-064),
|
||||
row-item-label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
header-headline-tracking: normal,
|
||||
row-item-label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
adf-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
supporting-text-tracking: normal
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-card-view {
|
||||
--mat-sys-on-surface: var(--adf-theme-foreground-text-color-087);
|
||||
|
||||
@include mat.chips-overrides(
|
||||
(
|
||||
elevated-container-color: rgb(224.4, 224.4, 224.4),
|
||||
elevated-disabled-container-color: rgb(224.4, 224.4, 224.4),
|
||||
disabled-label-text-color: var(--theme-selected-text-color),
|
||||
disabled-container-opacity: 0.4
|
||||
)
|
||||
);
|
||||
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-form-field-disabled {
|
||||
--mat-sys-on-surface: var(--adf-theme-foreground-text-color-040);
|
||||
}
|
||||
}
|
||||
|
||||
adf-search-chip-autocomplete-input {
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
container-height: 44px,
|
||||
container-vertical-padding: 14px,
|
||||
outlined-outline-color: var(--adf-theme-foreground-disabled-text-color),
|
||||
outlined-hover-outline-color: var(--adf-theme-foreground-disabled-text-color),
|
||||
outlined-label-text-tracking: normal,
|
||||
filled-label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-search-properties,
|
||||
adf-search-date-range,
|
||||
adf-folder-dialog,
|
||||
adf-content-node-selector-panel,
|
||||
adf-add-permission-panel,
|
||||
adf-sites-dropdown {
|
||||
--mat-sys-on-surface: var(--theme-text-color);
|
||||
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-outline-color: var(--adf-theme-foreground-disabled-text-color),
|
||||
outlined-hover-outline-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
@include mat.select-overrides(
|
||||
(
|
||||
trigger-text-size: var(--mat-sys-body-medium-size),
|
||||
trigger-text-tracking: normal,
|
||||
trigger-text-line-height: 20px,
|
||||
placeholder-text-color: var(--adf-theme-foreground-text-color-060)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-content-node-selector-panel {
|
||||
--mat-sys-on-surface: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
.adf-search-logical-filter-container .adf-search-input input {
|
||||
width: 284px;
|
||||
height: 25px;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--adf-theme-mat-grey-color-400);
|
||||
border-radius: 5px;
|
||||
margin: 5px 0 0;
|
||||
font-size: var(--mat-sys-body-medium-size);
|
||||
}
|
||||
|
||||
adf-search-filter-menu-card .adf-search-filter-menu-card .adf-search-filter-title {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
font-weight: var(--theme-font-weight-bold);
|
||||
}
|
||||
|
||||
.adf-filter-fieldset {
|
||||
.adf-filter-title {
|
||||
font-size: 16px;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.adf-filter-apply-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-filter-icon {
|
||||
--mat-sys-on-surface: var(--adf-theme-foreground-icon-color);
|
||||
|
||||
&.adf-filter-icon-active {
|
||||
--mat-sys-primary: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-checklist {
|
||||
@include mat.checkbox-overrides(
|
||||
(
|
||||
label-text-weight: 500,
|
||||
label-text-tracking: normal,
|
||||
label-text-line-height: 24px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.aca-content__advanced-filters adf-search-filter-chips mat-chip-set adf-search-widget-chip mat-chip.adf-search-filter-chip[aria-expanded='true'] {
|
||||
border: 2px solid var(--theme-primary-color);
|
||||
}
|
||||
|
||||
adf-search-filter-tabbed {
|
||||
@include mat.tabs-overrides(
|
||||
(
|
||||
active-indicator-height: 3px,
|
||||
divider-color: var(--adf-theme-foreground-text-color-007),
|
||||
label-text-tracking: normal,
|
||||
label-text-weight: 500,
|
||||
label-text-size: 14px,
|
||||
active-label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
active-hover-label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
active-focus-label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
inactive-label-text-color: var(--adf-theme-foreground-text-color-064),
|
||||
inactive-hover-label-text-color: var(--adf-theme-foreground-text-color-064),
|
||||
inactive-focus-label-text-color: var(--adf-theme-foreground-text-color-064)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-login .adf-login-content .adf-ie11FixerParent .adf-ie11FixerChild mat-card.adf-login-card-wide {
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
box-shadow: var(--theme-box-shadow-dark-color) 0 2px 2px 0;
|
||||
border-color: var(--adf-theme-background-card-color);
|
||||
}
|
||||
|
||||
adf-login .adf-login-content .adf-ie11FixerParent .adf-ie11FixerChild .adf-copyright {
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
}
|
||||
|
||||
adf-login .adf-login__field {
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-outline-color: var(--adf-theme-foreground-disabled-text-color),
|
||||
outlined-hover-outline-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-login .adf-login-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-label-text-weight: var(--theme-font-weight-bold)
|
||||
)
|
||||
);
|
||||
|
||||
box-shadow: var(--theme-box-shadow-first-color) 0 0 0 0;
|
||||
}
|
||||
|
||||
adf-empty-list .adf-empty-list_template .adf-empty-folder {
|
||||
.adf-empty-folder-this-space-is-empty {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
font-size: 24px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.adf-empty-folder-drag-drop {
|
||||
font-size: 53px;
|
||||
line-height: 53px;
|
||||
height: 56px;
|
||||
min-height: 56px;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.adf-empty-folder-any-files-here-to-add {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.4px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-content-node-selector-content-list {
|
||||
.adf-content-selector-modified-cell {
|
||||
@@ -11,4 +525,430 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
adf-datatable {
|
||||
--mat-sys-surface: var(--theme-white-background);
|
||||
}
|
||||
|
||||
.adf-document-list .adf-datatable-list {
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
border: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
border-top: none;
|
||||
|
||||
&.adf-datatable--empty {
|
||||
--mat-sys-surface: var(--theme-white-background);
|
||||
|
||||
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
}
|
||||
|
||||
.adf-datatable-header {
|
||||
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
[data-automation-id='datatable-row-header']:hover {
|
||||
background-color: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
.adf-datatable-row {
|
||||
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
min-height: 56px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--adf-theme-foreground-text-color-007);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
}
|
||||
|
||||
&:has(.adf-no-content-container) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.cdk-drag-preview.adf-datatable-cell-header {
|
||||
background-color: var(--adf-theme-background-card-color);
|
||||
border-top: none;
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
|
||||
.adf-datatable__header--sorted-asc,
|
||||
.adf-datatable__header--sorted-desc {
|
||||
padding-right: 3.5px;
|
||||
line-height: 24px;
|
||||
|
||||
&::after {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-drag-preview .adf-datatable-cell-header-content {
|
||||
background-color: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
.cdk-drag-preview .adf-datatable__resize-handle {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.adf-datatable__resize-handle--divider {
|
||||
border: 1px solid var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
/* stylelint-enable selector-class-pattern */
|
||||
|
||||
.adf-datatable-list .adf-datatable-cell-header {
|
||||
min-height: 56px;
|
||||
font-size: var(--mat-sys-body-small-size);
|
||||
font-weight: bold;
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
|
||||
.adf-datatable__resize-handle {
|
||||
width: 2px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.adf-datatable__resize-handle--divider {
|
||||
border: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
&:hover .adf-datatable-cell-header-content {
|
||||
background-color: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
&:hover > .adf-datatable__resize-handle {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.adf-datatable__resize-handle--divider {
|
||||
border: 1px solid var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-resizable {
|
||||
border-color: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
.adf-datatable__header--sorted-asc,
|
||||
.adf-datatable__header--sorted-desc {
|
||||
padding-right: 3.5px;
|
||||
line-height: 24px;
|
||||
|
||||
&::after {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header-drag-icon {
|
||||
margin-right: -7px;
|
||||
}
|
||||
}
|
||||
|
||||
adf-pagination.adf-pagination {
|
||||
background-color: var(--theme-pagination-background-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
adf-datatable-column-selector {
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-label-text-color: var(--adf-theme-foreground-icon-color),
|
||||
list-item-label-text-size: var(--mat-sys-body-medium-size),
|
||||
list-item-label-text-tracking: normal,
|
||||
list-item-label-text-line-height: 20px
|
||||
)
|
||||
);
|
||||
@include mat.checkbox-overrides(
|
||||
(
|
||||
selected-icon-color: var(--theme-primary-color),
|
||||
selected-hover-icon-color: var(--theme-primary-color),
|
||||
selected-focus-icon-color: var(--theme-primary-color),
|
||||
selected-pressed-icon-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-folder-dialog h2.adf-folder-dialog-title {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
subhead-color: var(--adf-theme-foreground-text-color-087),
|
||||
subhead-size: 20px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-content-node-selector h1.adf-content-node-selector-dialog-title {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
subhead-color: var(--adf-theme-foreground-text-color-087),
|
||||
subhead-size: 20px,
|
||||
subhead-weight: 600,
|
||||
subhead-tracking: -0.5px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-mdc-dialog-container:has(adf-content-node-selector) .mat-mdc-dialog-surface.mdc-dialog__surface {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
adf-content-node-selector .adf-content-node-selector-content-list {
|
||||
border-right: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
border-left: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
|
||||
adf-document-list adf-datatable .adf-datatable-list.adf-datatable--empty {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
adf-content-node-selector-panel adf-toolbar mat-toolbar {
|
||||
--mat-sys-on-secondary-container: var(--adf-theme-foreground-text-color-054);
|
||||
|
||||
@include mat.toolbar-overrides(
|
||||
(
|
||||
container-background-color: var(--theme-gray-background-color),
|
||||
standard-height: 47px
|
||||
)
|
||||
);
|
||||
|
||||
border: 1px solid var(--adf-theme-foreground-text-color-007);
|
||||
|
||||
.adf-toolbar-title {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
line-height: 32px;
|
||||
|
||||
.adf-current-folder {
|
||||
width: unset;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.2px;
|
||||
font-weight: var(--theme-font-weight-semi-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dialog-action-button {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$version-upload-raised-shadow: (
|
||||
var(--theme-box-shadow-first-color) 0 3px 1px -2px,
|
||||
var(--theme-box-shadow-second-color) 0 2px 2px 0,
|
||||
var(--theme-box-shadow-third-color) 0 1px 5px 0
|
||||
);
|
||||
|
||||
.adf-version-upload-buttons {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
protected-container-color: var(--adf-theme-background-card-color),
|
||||
protected-label-text-color: var(--adf-theme-foreground-base-color),
|
||||
protected-container-elevation-shadow: $version-upload-raised-shadow,
|
||||
protected-hover-container-elevation-shadow: $version-upload-raised-shadow,
|
||||
protected-focus-container-elevation-shadow: $version-upload-raised-shadow,
|
||||
protected-pressed-container-elevation-shadow: $version-upload-raised-shadow
|
||||
)
|
||||
);
|
||||
|
||||
.adf-upload-button-label {
|
||||
box-shadow: $version-upload-raised-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
adf-version-upload .adf-new-version-max-width {
|
||||
.adf-version-type-label {
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.adf-new-version-radio-group {
|
||||
@include mat.radio-overrides(
|
||||
(
|
||||
unselected-icon-color: var(--adf-theme-foreground-text-color-054),
|
||||
unselected-hover-icon-color: var(--adf-theme-foreground-text-color-054),
|
||||
unselected-focus-icon-color: var(--adf-theme-foreground-text-color-054),
|
||||
unselected-pressed-icon-color: var(--adf-theme-foreground-text-color-054),
|
||||
label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
label-text-weight: 500,
|
||||
label-text-tracking: normal,
|
||||
label-text-line-height: 24px
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
adf-new-version-uploader-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
subhead-color: var(--adf-theme-foreground-text-color-087),
|
||||
subhead-size: 20px,
|
||||
subhead-weight: var(--theme-font-weight-semi-bold),
|
||||
subhead-tracking: -0.5px,
|
||||
supporting-text-tracking: normal
|
||||
)
|
||||
);
|
||||
|
||||
&.adf-new-version-uploader-dialog {
|
||||
.adf-version-list-icon {
|
||||
color: var(--adf-theme-foreground-base-color-065);
|
||||
}
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color),
|
||||
text-state-layer-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
|
||||
.adf-new-version-uploader-dialog-title {
|
||||
font-weight: var(--theme-font-weight-semi-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
adf-share-dialog {
|
||||
--mat-sys-surface: var(--theme-white-background);
|
||||
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-text-color-060)
|
||||
)
|
||||
);
|
||||
|
||||
.adf-share-link__form {
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-outline-color: var(--adf-theme-foreground-disabled-text-color),
|
||||
outlined-hover-outline-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-share-link__title.adf-share-link__label.adf-share-link__heading {
|
||||
font-size: 16px;
|
||||
font-weight: var(--theme-font-weight-bold);
|
||||
letter-spacing: -0.4px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.adf-share-link__form p.adf-share-link__info.adf-share-link__para {
|
||||
letter-spacing: -0.4px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.adf-share-link__actions {
|
||||
#{ms.$mat-button} {
|
||||
background-color: var(--theme-grey-text-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-share-link__label.adf-sharable-link {
|
||||
letter-spacing: -0.4px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
mat-slide-toggle {
|
||||
@include mixins.aca-card-slide-toggle(
|
||||
$selected-margin: 0 0 0 16px,
|
||||
$extra-overrides: (
|
||||
disabled-unselected-track-outline-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
adf-comments {
|
||||
.adf-comment-list {
|
||||
.adf-comment-img-container {
|
||||
.adf-comment-user-icon {
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-comments-input-actions {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color),
|
||||
text-state-layer-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
adf-category-selector-dialog mat-dialog-actions #{ms.$mat-button}:last-child {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-tags-creator {
|
||||
--mat-sys-primary: var(--theme-primary-color);
|
||||
--mat-sys-on-surface-variant: var(--adf-theme-foreground-text-color-054);
|
||||
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-label-text-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-categories-management {
|
||||
--mat-sys-on-secondary-container: var(--adf-theme-foreground-text-color-054);
|
||||
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-label-text-color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
adf-pdf-viewer {
|
||||
.adf-pdf-viewer__thumbnails {
|
||||
background: var(--theme-gray-panel-background-color);
|
||||
|
||||
.adf-pdf-thumbnails__thumb {
|
||||
&:hover {
|
||||
box-shadow: 0 0 5px 0 var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
border: 2px solid var(--theme-accent-color-a200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app-comments-tab {
|
||||
--mdc-elevated-card-container-elevation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,82 +1,82 @@
|
||||
@use '@alfresco/adf-core/theming' as adf-core;
|
||||
@use '@angular/material' as mat;
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
|
||||
@mixin provide-adf-variables($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
$warn: map-get($theme, warn);
|
||||
$accent: map-get($theme, accent);
|
||||
$primary: map-get($theme, primary);
|
||||
$typography: map-get($theme, typography);
|
||||
@use 'sass:map';
|
||||
@use '../colors' as colors;
|
||||
|
||||
@mixin provide-adf-variables() {
|
||||
// map SCSS variables to expose as CSS variables
|
||||
$defaults: (
|
||||
// theme colors
|
||||
--theme-primary-color: mat.m2-get-color-from-palette($primary),
|
||||
--theme-primary-color-default-contrast: mat.m2-get-color-from-palette($primary, default-contrast),
|
||||
--theme-header-text-color: mat.m2-get-color-from-palette($primary, default-contrast),
|
||||
--adf-theme-primary-50: mat.m2-get-color-from-palette($primary, 50),
|
||||
--adf-theme-primary-100: mat.m2-get-color-from-palette($primary, 100),
|
||||
--adf-theme-primary-300: mat.m2-get-color-from-palette($primary, 300),
|
||||
--adf-theme-primary-900: mat.m2-get-color-from-palette($primary, 900),
|
||||
--theme-warn-color: mat.m2-get-color-from-palette($warn),
|
||||
--theme-warn-color-a700: mat.m2-get-color-from-palette($warn, A700),
|
||||
--theme-warn-color-default-contrast: mat.m2-get-color-from-palette($warn, default-contrast),
|
||||
--theme-accent-color: mat.m2-get-color-from-palette($accent),
|
||||
--theme-accent-color-a200: mat.m2-get-color-from-palette($accent, A200),
|
||||
--theme-accent-color-default-contrast: mat.m2-get-color-from-palette($accent, default-contrast),
|
||||
--theme-accent-500: mat.m2-get-color-from-palette($accent, 500),
|
||||
--adf-theme-foreground-base-color: mat.m2-get-color-from-palette($foreground, base),
|
||||
--adf-theme-foreground-base-color-065: mat.m2-get-color-from-palette($foreground, base, 0.65),
|
||||
--adf-theme-foreground-base-color-045: mat.m2-get-color-from-palette($foreground, base, 0.45),
|
||||
--adf-theme-foreground-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-text),
|
||||
--adf-theme-foreground-divider-color: mat.m2-get-color-from-palette($foreground, divider),
|
||||
--adf-theme-foreground-icon-color: mat.m2-get-color-from-palette($foreground, icon),
|
||||
--adf-theme-foreground-icon-color-054: mat.m2-get-color-from-palette($foreground, icon, 0.54),
|
||||
--adf-theme-foreground-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
|
||||
--adf-theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text),
|
||||
--adf-theme-foreground-text-color-087: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--adf-theme-foreground-text-color-075: mat.m2-get-color-from-palette($foreground, text, 0.75),
|
||||
--adf-theme-foreground-text-color-064: mat.m2-get-color-from-palette($foreground, text, 0.64),
|
||||
--adf-theme-foreground-text-color-054: mat.m2-get-color-from-palette($foreground, text, 0.54),
|
||||
--adf-theme-foreground-text-color-040: mat.m2-get-color-from-palette($foreground, text, 0.4),
|
||||
--adf-theme-foreground-text-color-027: mat.m2-get-color-from-palette($foreground, text, 0.27),
|
||||
--adf-theme-foreground-text-color-025: mat.m2-get-color-from-palette($foreground, text, 0.25),
|
||||
--adf-theme-foreground-text-color-014: mat.m2-get-color-from-palette($foreground, text, 0.14),
|
||||
--adf-theme-foreground-text-color-007: mat.m2-get-color-from-palette($foreground, text, 0.07),
|
||||
--adf-theme-background-card-color: mat.m2-get-color-from-palette($background, card),
|
||||
--adf-theme-background-card-color-087: mat.m2-get-color-from-palette($background, card, 0.87),
|
||||
--theme-background-color: mat.m2-get-color-from-palette($background, background),
|
||||
--adf-theme-background-dialog-color: mat.m2-get-color-from-palette($background, dialog),
|
||||
--adf-theme-background-hover-color: mat.m2-get-color-from-palette($background, hover),
|
||||
--adf-theme-background-selected-button-color: mat.m2-get-color-from-palette($background, selected-button),
|
||||
--adf-theme-background-status-bar-color: mat.m2-get-color-from-palette($background, status-bar),
|
||||
--adf-theme-background-unselected-chip-color: mat.m2-get-color-from-palette($background, unselected-chip),
|
||||
// primary palette colors
|
||||
--theme-primary-color: map.get(colors.$aca-primary-blue, 500),
|
||||
--theme-primary-color-default-contrast: white,
|
||||
--theme-header-text-color: white,
|
||||
--adf-theme-primary-50: map.get(colors.$aca-primary-blue, 50),
|
||||
--adf-theme-primary-100: map.get(colors.$aca-primary-blue, 100),
|
||||
--adf-theme-primary-300: map.get(colors.$aca-primary-blue, 300),
|
||||
--adf-theme-primary-900: map.get(colors.$aca-primary-blue, 900),
|
||||
// warn palette colors
|
||||
--theme-warn-color: map.get(colors.$aca-warn, 500),
|
||||
--theme-warn-color-a700: map.get(colors.$aca-warn, A700),
|
||||
--theme-warn-color-default-contrast: white,
|
||||
// accent palette colors
|
||||
--theme-accent-color: map.get(colors.$aca-accent-green, A200),
|
||||
--theme-accent-color-a200: map.get(colors.$aca-accent-green, A200),
|
||||
--theme-accent-color-default-contrast: white,
|
||||
--theme-accent-300: map.get(colors.$aca-accent-green, 300),
|
||||
--theme-accent-500: map.get(colors.$aca-accent-green, 500),
|
||||
--theme-accent-900: map.get(colors.$aca-accent-green, 900),
|
||||
// foreground colors (MD2 light theme resolved values)
|
||||
--adf-theme-foreground-base-color: black,
|
||||
--adf-theme-foreground-base-color-065: rgba(0, 0, 0, 0.65),
|
||||
--adf-theme-foreground-base-color-045: rgba(0, 0, 0, 0.45),
|
||||
--adf-theme-foreground-disabled-text-color: rgba(0, 0, 0, 0.38),
|
||||
--adf-theme-foreground-divider-color: rgba(0, 0, 0, 0.12),
|
||||
--adf-theme-foreground-icon-color: rgba(0, 0, 0, 0.54),
|
||||
--adf-theme-foreground-icon-color-054: rgba(0, 0, 0, 0.54),
|
||||
--adf-theme-foreground-secondary-text-color: rgba(0, 0, 0, 0.54),
|
||||
--adf-theme-foreground-text-color: rgba(0, 0, 0, 0.87),
|
||||
--adf-theme-foreground-text-color-087: rgba(0, 0, 0, 0.87),
|
||||
--adf-theme-foreground-text-color-075: rgba(0, 0, 0, 0.75),
|
||||
--adf-theme-foreground-text-color-064: rgba(0, 0, 0, 0.64),
|
||||
--adf-theme-foreground-text-color-060: rgba(0, 0, 0, 0.6),
|
||||
--adf-theme-foreground-text-color-054: rgba(0, 0, 0, 0.54),
|
||||
--adf-theme-foreground-text-color-040: rgba(0, 0, 0, 0.4),
|
||||
--adf-theme-foreground-text-color-027: rgba(0, 0, 0, 0.27),
|
||||
--adf-theme-foreground-text-color-025: rgba(0, 0, 0, 0.25),
|
||||
--adf-theme-foreground-text-color-014: rgba(0, 0, 0, 0.14),
|
||||
--adf-theme-foreground-text-color-007: rgba(0, 0, 0, 0.07),
|
||||
// background colors (MD2 light theme resolved values)
|
||||
--adf-theme-background-card-color: white,
|
||||
--adf-theme-background-card-color-087: rgba(255, 255, 255, 0.87),
|
||||
--theme-background-color: #fafafa,
|
||||
--adf-theme-background-dialog-color: white,
|
||||
--adf-theme-background-hover-color: rgba(0, 0, 0, 0.04),
|
||||
--adf-theme-background-selected-button-color: #e0e0e0,
|
||||
--adf-theme-background-status-bar-color: #e0e0e0,
|
||||
--adf-theme-background-unselected-chip-color: #e0e0e0,
|
||||
// typography
|
||||
--theme-font-family: mat.m2-font-family($typography),
|
||||
--theme-font-family: 'Open Sans',
|
||||
--theme-font-weight: normal,
|
||||
--theme-body-1-font-size: mat.m2-font-size($typography, body-2),
|
||||
--theme-body-2-font-size: mat.m2-font-size($typography, subtitle-2),
|
||||
--theme-body-1-line-height: mat.m2-line-height($typography, body-2),
|
||||
--theme-display-1-font-size: mat.m2-font-size($typography, headline-4),
|
||||
--theme-display-3-font-size: mat.m2-font-size($typography, headline-2),
|
||||
--theme-display-4-font-size: mat.m2-font-size($typography, headline-1),
|
||||
--theme-caption-font-size: mat.m2-font-size($typography, caption),
|
||||
--theme-title-font-size: mat.m2-font-size($typography, headline-6),
|
||||
--theme-subheading-1-font-size: mat.m2-font-size($typography, body-1),
|
||||
--theme-subheading-2-font-size: mat.m2-font-size($typography, subtitle-1),
|
||||
--theme-button-font-size: mat.m2-font-size($typography, button),
|
||||
--theme-headline-font-size: mat.m2-font-size($typography, headline-5),
|
||||
--theme-headline-line-height: mat.m2-line-height($typography, headline-5),
|
||||
--theme-body-1-font-size: var(--mat-sys-body-large-size),
|
||||
--theme-body-2-font-size: var(--mat-sys-title-small-size),
|
||||
--theme-body-1-line-height: var(--mat-sys-body-large-line-height),
|
||||
--theme-display-1-font-size: var(--mat-sys-headline-large-size),
|
||||
--theme-display-3-font-size: var(--mat-sys-display-medium-size),
|
||||
--theme-display-4-font-size: var(--mat-sys-display-large-size),
|
||||
--theme-caption-font-size: var(--mat-sys-body-small-size),
|
||||
--theme-title-font-size: var(--mat-sys-headline-small-size),
|
||||
--theme-subheading-1-font-size: var(--mat-sys-body-medium-size),
|
||||
--theme-subheading-2-font-size: var(--mat-sys-title-medium-size),
|
||||
--theme-button-font-size: var(--mat-sys-label-large-size),
|
||||
--theme-headline-font-size: var(--mat-sys-headline-medium-size),
|
||||
--theme-headline-line-height: var(--mat-sys-headline-medium-line-height),
|
||||
--theme-adf-icon-1-font-size: 24px,
|
||||
--theme-adf-picture-1-font-size: 16px,
|
||||
--theme-adf-task-footer-font-size: 12px,
|
||||
--theme-adf-task-title-font-size: 14px,
|
||||
// specific colors
|
||||
--adf-theme-mat-grey-color-a200: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200'),
|
||||
--adf-theme-mat-grey-color-a400: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400'),
|
||||
--adf-theme-mat-grey-color-50: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50),
|
||||
// grey palette colors
|
||||
--adf-theme-mat-grey-color-a200: #eee,
|
||||
--adf-theme-mat-grey-color-a400: #616161,
|
||||
--adf-theme-mat-grey-color-50: #fafafa,
|
||||
--adf-theme-mat-grey-color-400: #bdbdbd,
|
||||
// spacing
|
||||
--adf-theme-spacing: 8px,
|
||||
// components
|
||||
@@ -91,7 +91,8 @@
|
||||
--adf-chip-border-color: #757575,
|
||||
--adf-sidenav-active-text-color: rgba(0, 48, 100, 1),
|
||||
--adf-accessibility-tooltip-background-color: #2f3033,
|
||||
--adf-pdf-viewer-annotation-tooltip-color: rgb(255, 235, 107)
|
||||
--adf-pdf-viewer-annotation-tooltip-color: rgb(255, 235, 107),
|
||||
--theme-form-field-height-default: 56px
|
||||
);
|
||||
|
||||
// propagates SCSS variables into the CSS variables scope
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@use '../mixins' as mixins;
|
||||
@import '../colors';
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@mixin ay11-theme() {
|
||||
@@ -206,7 +205,7 @@
|
||||
}
|
||||
|
||||
.adf-error-snackbar {
|
||||
background-color: #ba1b1b;
|
||||
background-color: var(--adf-error-color);
|
||||
|
||||
.mat-mdc-simple-snack-bar,
|
||||
.mat-mdc-snack-bar-action {
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@use '../mat-selectors' as ms;
|
||||
|
||||
@mixin datetimepicker-theme() {
|
||||
$box-shadow-width: 1px;
|
||||
#{ms.$mat-datetimepicker-calendar} {
|
||||
#{ms.$mat-datetimepicker-calendar-header} {
|
||||
#{ms.$mat-datetimepicker-calendar-header-year} {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#{ms.$mat-datetimepicker-calendar-header-date} {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#{ms.$mat-datetimepicker-calendar-header-time} {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#{ms.$mat-datetimepicker-calendar-content} {
|
||||
#{ms.$mat-datetimepicker-calendar-table-header} th {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
#{ms.$mat-datetimepicker-calendar-body-disabled} > div {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{ms.$mat-datetimepicker-dialog} {
|
||||
#{ms.$mat-dialog-container} {
|
||||
#{ms.$mat-dialog-surface} {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-header {
|
||||
background-color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-body-cell-content {
|
||||
&.mat-datetimepicker-calendar-body-selected {
|
||||
background-color: var(--theme-primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.mat-datetimepicker-calendar-body-disabled > .mat-datetimepicker-calendar-body-selected {
|
||||
background-color: color-mix(in srgb, var(--theme-primary-color) 40%, transparent);
|
||||
}
|
||||
|
||||
&.mat-datetimepicker-calendar-body-today {
|
||||
&:not(.mat-datetimepicker-calendar-body-selected) {
|
||||
border-color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
&.mat-datetimepicker-calendar-body-selected {
|
||||
box-shadow: inset 0 0 0 $box-shadow-width white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datetimepicker-clock-center {
|
||||
background-color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.mat-datetimepicker-clock-hand {
|
||||
background-color: var(--theme-primary-color);
|
||||
|
||||
&::before {
|
||||
background-color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datetimepicker-clock-cell {
|
||||
&.mat-datetimepicker-clock-cell-selected {
|
||||
background-color: color-mix(in srgb, var(--theme-primary-color), white 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,35 +1,330 @@
|
||||
@use '@angular/material' as mat;
|
||||
@use './mat-selectors' as ms;
|
||||
@use '@alfresco/adf-core/theming' as adf-core;
|
||||
@import './custom-theme';
|
||||
@import './variables/variables';
|
||||
@include custom-theme($custom-theme);
|
||||
@use './custom-theme' as custom-theme;
|
||||
@use './variables/variables';
|
||||
|
||||
$default-font-family: 'Open Sans';
|
||||
|
||||
html {
|
||||
@include custom-theme.custom-theme(custom-theme.$custom-theme);
|
||||
}
|
||||
|
||||
@include custom-theme.custom-theme-overrides;
|
||||
/* stylelint-disable-next-line */
|
||||
@include mat.elevation-classes();
|
||||
/* stylelint-disable-next-line */
|
||||
@include mat.app-background();
|
||||
|
||||
:root {
|
||||
--mat-sys-on-surface: var(--adf-theme-foreground-text-color-087);
|
||||
--mdc-filled-text-field-container-color: transparent;
|
||||
--mdc-text-button-label-text-color: inherit;
|
||||
--mat-toolbar-container-text-color: inherit;
|
||||
--mat-form-field-container-height: 47.5px;
|
||||
--mdc-checkbox-selected-icon-color: var(--theme-blue-checkbox-color);
|
||||
--mdc-checkbox-selected-hover-icon-color: var(--theme-blue-checkbox-color);
|
||||
--mdc-checkbox-selected-focus-icon-color: var(--theme-blue-checkbox-color);
|
||||
--mat-dialog-container-max-width: 100%;
|
||||
--mat-sys-display-large-font: #{$default-font-family};
|
||||
--mat-sys-display-large-size: 112px;
|
||||
--mat-sys-display-large-line-height: 112px;
|
||||
--mat-sys-display-large-weight: 300;
|
||||
--mat-sys-display-medium-font: #{$default-font-family};
|
||||
--mat-sys-display-medium-size: 56px;
|
||||
--mat-sys-display-medium-line-height: 56px;
|
||||
--mat-sys-display-medium-weight: 400;
|
||||
--mat-sys-display-small-font: #{$default-font-family};
|
||||
--mat-sys-display-small-size: 45px;
|
||||
--mat-sys-display-small-line-height: 48px;
|
||||
--mat-sys-display-small-weight: 400;
|
||||
--mat-sys-headline-large-font: #{$default-font-family};
|
||||
--mat-sys-headline-large-size: 34px;
|
||||
--mat-sys-headline-large-line-height: 40px;
|
||||
--mat-sys-headline-large-weight: 400;
|
||||
--mat-sys-headline-medium-font: #{$default-font-family};
|
||||
--mat-sys-headline-medium-size: 24px;
|
||||
--mat-sys-headline-medium-line-height: 32px;
|
||||
--mat-sys-headline-medium-weight: 400;
|
||||
--mat-sys-headline-small-font: #{$default-font-family};
|
||||
--mat-sys-headline-small-size: 19px;
|
||||
--mat-sys-headline-small-line-height: 24px;
|
||||
--mat-sys-headline-small-weight: 400;
|
||||
--mat-sys-title-large-font: #{$default-font-family};
|
||||
--mat-sys-title-large-size: 16px;
|
||||
--mat-sys-title-large-line-height: 28px;
|
||||
--mat-sys-title-large-weight: 400;
|
||||
--mat-sys-title-medium-font: #{$default-font-family};
|
||||
--mat-sys-title-medium-size: 20px;
|
||||
--mat-sys-title-medium-line-height: 32px;
|
||||
--mat-sys-title-medium-weight: 400;
|
||||
--mat-sys-title-small-font: #{$default-font-family};
|
||||
--mat-sys-title-small-size: 16px;
|
||||
--mat-sys-title-small-line-height: 24px;
|
||||
--mat-sys-title-small-weight: 500;
|
||||
--mat-sys-body-large-font: #{$default-font-family};
|
||||
--mat-sys-body-large-size: 14px;
|
||||
--mat-sys-body-large-line-height: 24px;
|
||||
--mat-sys-body-large-weight: 500;
|
||||
--mat-sys-body-medium-font: #{$default-font-family};
|
||||
--mat-sys-body-medium-size: 14px;
|
||||
--mat-sys-body-medium-line-height: 20px;
|
||||
--mat-sys-body-medium-weight: 400;
|
||||
--mat-sys-body-small-font: #{$default-font-family};
|
||||
--mat-sys-body-small-size: 12px;
|
||||
--mat-sys-body-small-line-height: 20px;
|
||||
--mat-sys-body-small-weight: 400;
|
||||
--mat-sys-label-large-font: #{$default-font-family};
|
||||
--mat-sys-label-large-size: 14px;
|
||||
--mat-sys-label-large-line-height: 14px;
|
||||
--mat-sys-label-large-weight: 500;
|
||||
--mat-sys-display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
|
||||
var(--mat-sys-display-large-font);
|
||||
--mat-sys-display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height)
|
||||
var(--mat-sys-display-medium-font);
|
||||
--mat-sys-display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
|
||||
var(--mat-sys-display-small-font);
|
||||
--mat-sys-headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height)
|
||||
var(--mat-sys-headline-large-font);
|
||||
--mat-sys-headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height)
|
||||
var(--mat-sys-headline-medium-font);
|
||||
--mat-sys-headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height)
|
||||
var(--mat-sys-headline-small-font);
|
||||
--mat-sys-title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height)
|
||||
var(--mat-sys-title-large-font);
|
||||
--mat-sys-title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
|
||||
var(--mat-sys-title-medium-font);
|
||||
--mat-sys-title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height)
|
||||
var(--mat-sys-title-small-font);
|
||||
--mat-sys-body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height)
|
||||
var(--mat-sys-body-large-font);
|
||||
--mat-sys-body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height)
|
||||
var(--mat-sys-body-medium-font);
|
||||
--mat-sys-body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height)
|
||||
var(--mat-sys-body-small-font);
|
||||
--mat-sys-label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height)
|
||||
var(--mat-sys-label-large-font);
|
||||
--theme-font-weight-semi-bold: 600;
|
||||
--theme-font-weight-bold: 700;
|
||||
--mat-sys-error: var(--theme-warn-color);
|
||||
--mat-sys-on-error: #fff;
|
||||
--mat-option-focus-state-layer-color: white;
|
||||
--mat-sys-outline-variant: var(--theme-grey-background-color);
|
||||
--mat-sys-surface: var(--theme-background-color);
|
||||
--mat-sys-level2: 0 8px 9px -5px var(--adf-theme-foreground-divider-color), 0 15px 22px 2px var(--adf-theme-foreground-divider-color);
|
||||
--mat-select-panel-background-color: var(--adf-theme-background-card-color);
|
||||
--mat-select-container-elevation-shadow:
|
||||
var(--theme-box-shadow-first-color) 0 5px 5px -3px, var(--theme-box-shadow-second-color) 0 8px 10px 1px,
|
||||
var(--theme-box-shadow-third-color) 0 3px 14px 2px;
|
||||
|
||||
@include mat.autocomplete-overrides(
|
||||
(
|
||||
background-color: var(--theme-white-background)
|
||||
)
|
||||
);
|
||||
@include mat.select-overrides(
|
||||
(
|
||||
panel-background-color: var(--theme-white-background),
|
||||
trigger-text-size: var(--mat-sys-body-medium-size)
|
||||
)
|
||||
);
|
||||
@include mat.toolbar-overrides(
|
||||
(
|
||||
container-text-color: inherit
|
||||
)
|
||||
);
|
||||
@include mat.checkbox-overrides(
|
||||
(
|
||||
label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
selected-icon-color: var(--theme-blue-checkbox-color),
|
||||
selected-hover-icon-color: var(--theme-blue-checkbox-color),
|
||||
selected-focus-icon-color: var(--theme-blue-checkbox-color),
|
||||
unselected-icon-color: var(--adf-theme-foreground-icon-color)
|
||||
)
|
||||
);
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
container-max-width: 100%,
|
||||
container-color: var(--adf-theme-background-card-color),
|
||||
container-shape: 4px
|
||||
)
|
||||
);
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
container-height: var(--theme-form-field-height-default),
|
||||
container-vertical-padding: 16px,
|
||||
container-text-size: 14px,
|
||||
container-text-tracking: normal,
|
||||
container-text-line-height: 20px,
|
||||
outlined-label-text-size: 18px,
|
||||
outlined-label-text-populated-size: 18px,
|
||||
outlined-label-text-tracking: normal,
|
||||
outlined-label-text-color: var(--theme-selected-text-color),
|
||||
outlined-hover-label-text-color: var(--adf-theme-foreground-text-color),
|
||||
outlined-input-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
outlined-disabled-input-text-color: var(--adf-theme-foreground-text-color-040),
|
||||
outlined-disabled-label-text-color: var(--adf-theme-foreground-text-color-040),
|
||||
outlined-disabled-outline-color: var(--adf-theme-foreground-text-color-040),
|
||||
filled-label-text-size: 18px,
|
||||
filled-label-text-tracking: normal,
|
||||
subscript-text-tracking: normal,
|
||||
filled-input-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
subscript-text-size: 12px
|
||||
)
|
||||
);
|
||||
@include mat.sidenav-overrides(
|
||||
(
|
||||
container-shape: 0,
|
||||
container-divider-color: var(--adf-theme-foreground-divider-color),
|
||||
content-background-color: var(--theme-sidenav-background-color)
|
||||
)
|
||||
);
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-state-layer-color: var(--adf-theme-foreground-base-color),
|
||||
text-hover-state-layer-opacity: 0.04,
|
||||
filled-disabled-container-color: var(--adf-disabled-button-background),
|
||||
text-label-text-tracking: normal,
|
||||
text-horizontal-padding: 8px,
|
||||
text-with-icon-horizontal-padding: 8px,
|
||||
filled-label-text-tracking: normal,
|
||||
filled-container-color: var(--theme-primary-color),
|
||||
filled-container-shape: 4px,
|
||||
filled-container-height: 36px,
|
||||
filled-horizontal-padding: 8px,
|
||||
outlined-label-text-tracking: normal,
|
||||
outlined-label-text-color: var(--adf-theme-foreground-text-color),
|
||||
outlined-container-shape: 4px,
|
||||
outlined-container-height: 36px,
|
||||
outlined-outline-color: var(--adf-theme-foreground-divider-color),
|
||||
outlined-horizontal-padding: 8px,
|
||||
outlined-state-layer-color: var(--adf-theme-foreground-base-color),
|
||||
outlined-hover-state-layer-opacity: 0.04,
|
||||
protected-label-text-tracking: normal,
|
||||
protected-container-shape: 4px,
|
||||
protected-container-height: 36px,
|
||||
protected-horizontal-padding: 8px,
|
||||
protected-container-color: var(--theme-primary-color),
|
||||
protected-label-text-color: var(--theme-primary-color-default-contrast),
|
||||
protected-state-layer-color: var(--theme-primary-color-default-contrast),
|
||||
protected-hover-state-layer-opacity: 0.04,
|
||||
text-container-shape: 4px,
|
||||
text-container-height: 36px
|
||||
)
|
||||
);
|
||||
@include mat.chips-overrides(
|
||||
(
|
||||
container-shape-radius: 16px,
|
||||
outline-width: 0,
|
||||
outline-color: var(--adf-theme-foreground-disabled-text-color),
|
||||
label-text-line-height: 24px,
|
||||
label-text-color: var(--adf-theme-foreground-text-color-064),
|
||||
with-trailing-icon-trailing-icon-color: var(--adf-theme-foreground-disabled-text-color)
|
||||
)
|
||||
);
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--adf-theme-foreground-icon-color),
|
||||
state-layer-size: 48px
|
||||
)
|
||||
);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-text-color-087)
|
||||
)
|
||||
);
|
||||
@include mat.menu-overrides(
|
||||
(
|
||||
container-color: var(--theme-white-background),
|
||||
container-elevation-shadow: (
|
||||
var(--theme-box-shadow-first-color) 0 5px 5px -3px,
|
||||
var(--theme-box-shadow-second-color) 0 8px 10px 1px,
|
||||
var(--theme-box-shadow-third-color) 0 3px 14px 2px
|
||||
),
|
||||
divider-color: var(--adf-theme-foreground-divider-color),
|
||||
divider-bottom-spacing: 0,
|
||||
divider-top-spacing: 0,
|
||||
item-focus-state-layer-color: var(--adf-theme-background-hover-color),
|
||||
item-hover-state-layer-color: var(--adf-theme-background-hover-color),
|
||||
item-icon-color: var(--adf-theme-foreground-text-color-087),
|
||||
item-label-text-tracking: normal,
|
||||
item-label-text-weight: 400,
|
||||
item-leading-spacing: 16px,
|
||||
item-trailing-spacing: 16px,
|
||||
item-spacing: 16px,
|
||||
item-with-icon-leading-spacing: 16px,
|
||||
item-with-icon-trailing-spacing: 16px
|
||||
)
|
||||
);
|
||||
@include mat.divider-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-divider-color)
|
||||
)
|
||||
);
|
||||
@include mat.option-overrides(
|
||||
(
|
||||
focus-state-layer-color: var(--adf-theme-background-hover-color),
|
||||
hover-state-layer-color: var(--adf-theme-background-hover-color),
|
||||
selected-state-layer-color: var(--adf-theme-background-hover-color),
|
||||
selected-state-label-text-color: var(--theme-primary-color),
|
||||
label-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
label-text-size: 14px,
|
||||
label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
container-elevation-shadow: (
|
||||
var(--theme-box-shadow-first-color) 0 11px 15px -7px,
|
||||
var(--theme-box-shadow-second-color) 0 24px 38px 3px,
|
||||
var(--theme-box-shadow-third-color) 0 9px 46px 8px
|
||||
)
|
||||
)
|
||||
);
|
||||
@include mat.datepicker-overrides(
|
||||
(
|
||||
calendar-container-background-color: var(--theme-white-background),
|
||||
calendar-container-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
calendar-container-shape: 4px,
|
||||
calendar-container-elevation-shadow: (
|
||||
var(--theme-box-shadow-first-color) 0 2px 4px -1px,
|
||||
var(--theme-box-shadow-second-color) 0 4px 5px 0,
|
||||
var(--theme-box-shadow-third-color) 0 1px 10px 0
|
||||
),
|
||||
calendar-text-size: 13px,
|
||||
calendar-header-text-size: 11px,
|
||||
calendar-header-text-weight: 400,
|
||||
calendar-header-text-color: var(--adf-theme-foreground-text-color-064),
|
||||
calendar-header-divider-color: var(--adf-theme-foreground-divider-color),
|
||||
calendar-body-label-text-size: 14px,
|
||||
calendar-body-label-text-color: var(--adf-theme-foreground-text-color-054),
|
||||
calendar-period-button-text-size: 14px,
|
||||
calendar-period-button-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
calendar-period-button-icon-color: var(--adf-theme-foreground-text-color-054),
|
||||
calendar-navigation-button-icon-color: var(--adf-theme-foreground-text-color-054),
|
||||
calendar-date-text-color: var(--adf-theme-foreground-text-color-087),
|
||||
calendar-date-today-outline-color: var(--adf-theme-foreground-text-color-040),
|
||||
calendar-date-today-disabled-state-outline-color: var(--adf-theme-foreground-text-color-014),
|
||||
calendar-date-today-selected-state-outline-color: var(--theme-primary-color-default-contrast),
|
||||
calendar-date-disabled-state-text-color: var(--adf-theme-foreground-text-color-040),
|
||||
calendar-date-selected-state-background-color: var(--theme-primary-color),
|
||||
calendar-date-selected-state-text-color: var(--theme-primary-color-default-contrast),
|
||||
calendar-date-hover-state-background-color: color-mix(in srgb, var(--theme-primary-color) 30%, transparent),
|
||||
calendar-date-focus-state-background-color: color-mix(in srgb, var(--theme-primary-color) 30%, transparent),
|
||||
calendar-date-in-range-state-background-color: color-mix(in srgb, var(--theme-primary-color) 20%, transparent)
|
||||
)
|
||||
);
|
||||
|
||||
#{ms.$mat-calendar-previous-button},
|
||||
#{ms.$mat-calendar-next-button} {
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
state-layer-size: 40px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
#{ms.$mat-datepicker-toggle-active} {
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
icon-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
#{ms.$mat-radio-button} {
|
||||
@include mat.radio-overrides(
|
||||
@@ -136,10 +431,12 @@ mat-slide-toggle {
|
||||
|
||||
#{ms.$mat-chip}#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} {
|
||||
height: auto;
|
||||
align-items: center;
|
||||
|
||||
#{ms.$mat-evolution-chip-text-label} {
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#{ms.$mat-evolution-chip-action}#{ms.$mat-chip-action} {
|
||||
@@ -168,7 +465,7 @@ mat-slide-toggle {
|
||||
}
|
||||
|
||||
#{ms.$mat-data-table-row}:last-child #{ms.$mat-data-table-cell} {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
|
||||
}
|
||||
|
||||
#{ms.$mat-dialog-content} {
|
||||
@@ -200,10 +497,45 @@ mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-single-row} {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.adf-upload-dialog {
|
||||
&__header,
|
||||
&__content {
|
||||
color: var(--theme-secondary-text);
|
||||
adf-file-uploading-dialog {
|
||||
.adf-upload-dialog {
|
||||
background: var(--adf-theme-background-dialog-color);
|
||||
|
||||
&__header,
|
||||
&__content {
|
||||
color: var(--theme-secondary-text);
|
||||
|
||||
.adf-file-uploading-row {
|
||||
&:hover {
|
||||
background: var(--adf-theme-mat-grey-color-a200);
|
||||
}
|
||||
|
||||
&__group,
|
||||
.adf-file-uploading-row__file-version {
|
||||
height: 40px;
|
||||
|
||||
.adf-file-uploading-row__status--done {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-file-uploading-row__status--error {
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-warn-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -264,6 +596,10 @@ mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-single-row} {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
.adf-empty-content {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
.adf-empty-content__icon {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
@@ -274,30 +610,64 @@ mat-toolbar#{ms.$mat-toolbar}#{ms.$mat-toolbar-single-row} {
|
||||
}
|
||||
}
|
||||
|
||||
mat-snack-bar-container {
|
||||
#{ms.$mat-button}#{ms.$mat-unthemed} {
|
||||
--mdc-text-button-label-text-color: var(--theme-white-background);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-warning-snackbar,
|
||||
.adf-info-snackbar,
|
||||
.adf-error-snackbar {
|
||||
--mat-mdc-snack-bar-button-color: var(--theme-white-background);
|
||||
--mdc-snackbar-supporting-text-color: var(--theme-white-background);
|
||||
--mdc-text-button-label-text-color: var(--theme-white-background);
|
||||
@include mat.snack-bar-overrides(
|
||||
(
|
||||
button-color: var(--theme-white-background),
|
||||
supporting-text-color: var(--theme-white-background),
|
||||
container-shape: 4px
|
||||
)
|
||||
);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-white-background)
|
||||
)
|
||||
);
|
||||
|
||||
.adf-snackbar-message-content-action {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-header-text-color)
|
||||
)
|
||||
);
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--theme-header-text-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-warning-snackbar.adf-warning-snackbar,
|
||||
.adf-info-snackbar.adf-info-snackbar,
|
||||
.adf-error-snackbar.adf-error-snackbar {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.adf-warning-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-warning-snackbar-background);
|
||||
@include mat.snack-bar-overrides(
|
||||
(
|
||||
container-color: var(--theme-warning-snackbar-background)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-info-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-info-snackbar-background);
|
||||
@include mat.snack-bar-overrides(
|
||||
(
|
||||
container-color: var(--theme-info-snackbar-background)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-error-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-warn-color);
|
||||
@include mat.snack-bar-overrides(
|
||||
(
|
||||
container-color: var(--theme-warn-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
#{ms.$mat-calendar} {
|
||||
@@ -321,22 +691,6 @@ mat-snack-bar-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#{ms.$mat-tab-labels} {
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
#{ms.$mat-tab-list} {
|
||||
#{ms.$mat-tab-labels} {
|
||||
#{ms.$mat-tab-label-active} {
|
||||
color: var($selected-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{ms.$mat-tab-label}:not(#{ms.$mat-tab-disabled})#{ms.$mat-tab-label-active} #{ms.$mat-tab-label-text} {
|
||||
color: var(--theme-tab-active-text-color);
|
||||
}
|
||||
|
||||
adf-dynamic-component {
|
||||
mat-icon#{ms.$mat-icon}#{ms.$mat-submenu-icon} {
|
||||
color: var(--theme-text-color);
|
||||
@@ -392,3 +746,39 @@ adf-dynamic-component {
|
||||
padding-left: 0 !important;
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
.adf-confirm-dialog {
|
||||
@include mat.dialog-overrides(
|
||||
(
|
||||
with-actions-content-padding: 20px 24px,
|
||||
subhead-size: 20px
|
||||
)
|
||||
);
|
||||
|
||||
.adf-confirm-dialog-button#adf-confirm-accept {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
text-label-text-color: var(--theme-primary-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mat.list-overrides(
|
||||
(
|
||||
list-item-label-text-size: 14px,
|
||||
list-item-label-text-line-height: 20px,
|
||||
list-item-label-text-tracking: normal
|
||||
)
|
||||
);
|
||||
|
||||
#{ms.$mat-button-base} {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@include mat.card-overrides(
|
||||
(
|
||||
elevated-container-color: var(--adf-theme-background-card-color),
|
||||
outlined-container-color: var(--adf-theme-background-card-color)
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@use '@angular/material' as mat;
|
||||
@use 'sass:color';
|
||||
|
||||
$foreground: map-get($custom-theme, foreground);
|
||||
$background: map-get($custom-theme, background);
|
||||
$background-color: mat.m2-get-color-from-palette($background, background);
|
||||
$background-card-color: mat.m2-get-color-from-palette($background, card);
|
||||
$text-color: mat.m2-get-color-from-palette($foreground, text);
|
||||
$secondary-text: mat.m2-get-color-from-palette($foreground, secondary-text);
|
||||
// Resolved from MD2 light theme foreground/background maps
|
||||
$background-color: #fafafa;
|
||||
$background-card-color: white;
|
||||
$text-color: rgba(0, 0, 0, 0.87);
|
||||
$secondary-text: rgba(0, 0, 0, 0.54);
|
||||
$login-button-bg-color: #5654ac;
|
||||
|
||||
// Custom variables - ACA specific styling:
|
||||
@@ -30,8 +27,8 @@ $blue-checkbox-background: rgb(10, 96, 206);
|
||||
$blue-active-table-row: rgb(10, 96, 206, 0.24);
|
||||
$black-heading: #4e4c4c;
|
||||
$light-grey-content: #4b5563;
|
||||
$theme-dropdown-background: darken($background-color, 5%);
|
||||
$theme-dropdown-background-hover: darken($background-color, 10%);
|
||||
$theme-dropdown-background: color.adjust($background-color, $lightness: -5%);
|
||||
$theme-dropdown-background-hover: color.adjust($background-color, $lightness: -10%);
|
||||
$grey-divider: rgba(0, 0, 0, 0.22);
|
||||
$datetimepicker-font-color: rgba(black, 0.87);
|
||||
$datetimepicker-selected-date-background: #2254b2;
|
||||
@@ -41,11 +38,10 @@ $sidenav-background-color: $background-color;
|
||||
$selected-text-color: #212121;
|
||||
$selected-text-background: rgba($selected-text-color, 0.12);
|
||||
$selected-background-color: rgba(31, 116, 219, 0.24);
|
||||
$action-button-text-color: lighten($text-color, 35%);
|
||||
$action-button-text-color: color.adjust($text-color, $lightness: 35%);
|
||||
$page-layout-header-background-color: $background-card-color;
|
||||
$search-chip-icon-color: #757575;
|
||||
$disabled-chip-background-color: #f5f5f5;
|
||||
$contrast-gray: mat.m2-get-color-from-palette($foreground, 'secondary-tex');
|
||||
$search-highlight-background-color: #ffd180;
|
||||
$info-snackbar-background: #1f74db;
|
||||
$warning-snackbar-background: #8c7012;
|
||||
@@ -56,23 +52,29 @@ $light-grey-2: #d9d9d9;
|
||||
$light-grey-3: #dedede;
|
||||
$user-profile-background: #595959;
|
||||
$app-blue-folder: #2a7de1;
|
||||
$box-shadow-first-color: rgba(0, 0, 0, 0.2);
|
||||
$box-shadow-second-color: rgba(0, 0, 0, 0.14);
|
||||
$box-shadow-third-color: rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-dark-color: rgba(0, 0, 0, 0.24);
|
||||
$gray-background-color: #f5f5f5;
|
||||
$gray-panel-background-color: rgba(0, 0, 0, 0.12);
|
||||
|
||||
// CSS Variables
|
||||
$defaults: (
|
||||
--theme-background-color: $background-color,
|
||||
--theme-text-color: mat.m2-get-color-from-palette($foreground, text, 0.54),
|
||||
--theme-sidenav-text-color: mat.m2-get-color-from-palette($foreground, text),
|
||||
--theme-sidenav-hovered-text-color: mat.m2-get-color-from-palette($foreground, text),
|
||||
--theme-tab-active-text-color: mat.m2-get-color-from-palette($foreground, text),
|
||||
--theme-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--theme-title-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--theme-border-color: mat.m2-get-color-from-palette($foreground, text, 0.07),
|
||||
--theme-card-background-color: mat.m2-get-color-from-palette($background, card),
|
||||
--theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text, 0.72),
|
||||
--theme-foreground-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--theme-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
|
||||
--theme-dialog-background-color: mat.m2-get-color-from-palette($background, dialog),
|
||||
--theme-header-text-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--theme-text-color: rgba(0, 0, 0, 0.54),
|
||||
--theme-sidenav-text-color: rgba(0, 0, 0, 0.87),
|
||||
--theme-sidenav-hovered-text-color: rgba(0, 0, 0, 0.87),
|
||||
--theme-tab-active-text-color: rgba(0, 0, 0, 0.87),
|
||||
--theme-text-bold-color: rgba(0, 0, 0, 0.87),
|
||||
--theme-title-color: rgba(0, 0, 0, 0.87),
|
||||
--theme-border-color: rgba(0, 0, 0, 0.07),
|
||||
--theme-card-background-color: white,
|
||||
--theme-foreground-text-color: rgba(0, 0, 0, 0.72),
|
||||
--theme-foreground-text-bold-color: rgba(0, 0, 0, 0.87),
|
||||
--theme-secondary-text-color: rgba(0, 0, 0, 0.54),
|
||||
--theme-dialog-background-color: white,
|
||||
--theme-header-text-color: rgba(0, 0, 0, 0.87),
|
||||
--new-button-font-size: 0.9rem,
|
||||
--theme-grey-text-background-color: $grey-text-background,
|
||||
--theme-grey-background-color: $grey-background,
|
||||
@@ -86,10 +88,10 @@ $defaults: (
|
||||
--theme-dropdown-color: $theme-dropdown-background,
|
||||
--theme-dropdown-background-hover: $theme-dropdown-background-hover,
|
||||
--theme-grey-divider-color: $grey-divider,
|
||||
--theme-pagination-background-color: mat.m2-get-color-from-palette($background, background),
|
||||
--theme-pagination-background-color: #fafafa,
|
||||
--theme-about-panel-border-color: $grey-background,
|
||||
--theme-about-panel-background-color: mat.m2-get-color-from-palette($background, card),
|
||||
--theme-about-panel-title-color: mat.m2-get-color-from-palette($foreground, text),
|
||||
--theme-about-panel-background-color: white,
|
||||
--theme-about-panel-title-color: rgba(0, 0, 0, 0.87),
|
||||
--theme-datetimepicker-font-color: $datetimepicker-font-color,
|
||||
--theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
|
||||
--theme-white-background: $white-background,
|
||||
@@ -112,7 +114,13 @@ $defaults: (
|
||||
--theme-light-grey-3-color: $light-grey-3,
|
||||
--theme-user-profile-background-color: $user-profile-background,
|
||||
--theme-app-blue-folder: $app-blue-folder,
|
||||
--theme-login-button-bg-color: $login-button-bg-color
|
||||
--theme-login-button-bg-color: $login-button-bg-color,
|
||||
--theme-box-shadow-first-color: $box-shadow-first-color,
|
||||
--theme-box-shadow-second-color: $box-shadow-second-color,
|
||||
--theme-box-shadow-third-color: $box-shadow-third-color,
|
||||
--theme-box-shadow-dark-color: $box-shadow-dark-color,
|
||||
--theme-gray-background-color: $gray-background-color,
|
||||
--theme-gray-panel-background-color: $gray-panel-background-color
|
||||
);
|
||||
|
||||
// propagates SCSS variables into the CSS variables scope
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.app-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -17,6 +19,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
.adf-viewer-render {
|
||||
.adf-image-viewer__toolbar {
|
||||
.adf-toolbar-container {
|
||||
box-shadow:
|
||||
0 2px 2px var(--theme-box-shadow-dark-color),
|
||||
0 0 2px var(--theme-box-shadow-third-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar .adf-toolbar-container {
|
||||
--mat-sys-surface: var(--theme-white-background);
|
||||
|
||||
border-width: 0;
|
||||
border-radius: 2px;
|
||||
|
||||
@include mat.toolbar-overrides(
|
||||
(
|
||||
standard-height: 48px,
|
||||
container-text-color: var(--adf-theme-foreground-text-color-064)
|
||||
)
|
||||
);
|
||||
|
||||
.adf-image-viewer__toolbar-page-scale {
|
||||
--mat-sys-outline: var(--adf-theme-foreground-text-color-007);
|
||||
}
|
||||
|
||||
.adf-pdf-viewer__toolbar-page-scale {
|
||||
--mat-sys-body-small-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-alfresco-viewer.aca-right_side--hide .adf-viewer__sidebar__right {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-locked-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -8,6 +10,12 @@
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
min-width: 14px;
|
||||
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-icon-color)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&--label,
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
@import '../../styles/mixins';
|
||||
@use '@angular/material' as mat;
|
||||
@use '../../styles/mixins' as mixins;
|
||||
|
||||
.aca-page-layout {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
|
||||
.aca-content-header {
|
||||
background: var(--theme-page-layout-header-background-color);
|
||||
@@ -10,6 +11,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-icon-color)
|
||||
)
|
||||
);
|
||||
|
||||
&-button {
|
||||
margin-top: -1px;
|
||||
}
|
||||
@@ -25,6 +32,23 @@
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.15px;
|
||||
line-height: 30px;
|
||||
|
||||
@include mat.icon-overrides(
|
||||
(
|
||||
color: var(--adf-theme-foreground-text-color-064)
|
||||
)
|
||||
);
|
||||
|
||||
.adf-breadcrumb-item-anchor {
|
||||
color: var(--adf-theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
.adf-breadcrumb-item-chevron {
|
||||
font-size: var(--mat-sys-headline-medium-size);
|
||||
font-family: var(--mat-icon-font-family, 'Material Icons Outlined');
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-toolbar-action {
|
||||
@@ -35,17 +59,17 @@
|
||||
}
|
||||
|
||||
.aca-page-layout-content {
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
|
||||
border-top: 1px solid var(--theme-metadata-property-panel-border-color);
|
||||
}
|
||||
|
||||
.aca-page-layout-error {
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
}
|
||||
|
||||
.aca-main-content {
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
}
|
||||
|
||||
.aca-scrollable {
|
||||
|
||||
+11
@@ -1,7 +1,18 @@
|
||||
@use '../../../styles/mat-selectors' as ms;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
aca-toolbar-action {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
|
||||
#{ms.$mat-mdc-button}#{ms.$mat-button-base}#{ms.$mat-outlined-button}#{ms.$mat-unthemed} {
|
||||
--mdc-outlined-button-label-text-color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-horizontal-padding: 16px,
|
||||
outlined-horizontal-padding: 16px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user