inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-3590] Fix contrast issues, add missing focus indicators (#2673)

Browse Source 
* [ACS-3590] Fix contrast issues, add missing focus indicators

* [ACS-3590] Add css color variables
This commit is contained in:
MichalKinas 2022-10-03 14:15:37 +02:00 committed by GitHub
parent 958134e22d
commit bbfe5da8a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 199 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/src/app/components/search/search-results/search-results.component.scss
View File

@ -1,5 +1,8 @@
@import 'mixins';
$adf-chip-background: #efefef;
$contrast-gray: #646569;
.adf-search-results {
@include flex-row;
@ -21,6 +24,16 @@
flex-direction: row;
align-items: center;
border-bottom: 1px solid #eee;
.adf-search-filter-chip {
&.mat-chip {
background-color: $adf-chip-background;
color: $contrast-gray;
}
.adf-search-filter-placeholder {
color: $contrast-gray;
}
}
}
&--info-text {

196
app/src/app/ui/theme.scss
View File

@ -6,18 +6,194 @@
@include custom-theme($custom-theme);
// fixes [ACA-2069]
$primary: map-get($custom-theme, primary);
.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) {
.mat-slide-toggle-thumb,
.mat-slide-toggle-ripple .mat-ripple-element {
background-color: mat.get-color-from-palette($primary);
}
.mat-slide-toggle-bar {
background-color: mat.get-color-from-palette($primary, 0.54);
}
$focus-color: #1f74db;
$contrast-gray: #646569;
@mixin rounded-border($border-color, $thickness: 2px, $radius: 4px) {
border: $thickness solid $border-color;
border-radius: $radius;
}
.mat-toolbar {
color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
}
.adf-name-location-cell-location {
color: $contrast-gray !important;
}
.mat-form-field-label, .mat-tab-label, .mat-checkbox-label, .mat-toolbar {
color: $contrast-gray !important;
opacity: 1 !important;
}
.mat-tab-label-active {
color: #212121 !important;
}
.adf-upload-dialog {
&__header, &__content {
color: $contrast-gray;
}
}
.adf-version-list-item {
&-comment, &-date {
color: $contrast-gray;
opacity: 1 !important;
}
}
.mat-chip.mat-standard-chip {
background-color: #efefef;
color: $contrast-gray;
}
.adf-textitem-edit-icon.mat-icon {
color: $contrast-gray !important;
}
.adf-property-field.adf-card-textitem-field:hover .adf-property-clear-value {
color: $contrast-gray !important;
}
.mat-icon-button, .mat-button, .mat-checkbox {
&:focus {
@include rounded-border($focus-color);
}
.mat-ripple-element {
display: none;
}
&.cdk-focused {
.mat-button-focus-overlay {
display: none;
}
.mat-checkbox-ripple {
@include rounded-border($focus-color);
height: 22px;
width: 22px;
left: calc(50% - 13px);
top: calc(50% - 13px);
}
}
}
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg {
fill: #1f74db !important;
}
.mat-list-base .mat-list-option:focus {
background-color: white;
.mat-list-item-content {
border: 2px solid #1f74db;
}
}
.mat-menu-item {
&:focus {
@include rounded-border($focus-color);
background-color: white;
}
&.cdk-keyboard-focused:not([disabled]) {
background-color: white;
}
&.cdk-focused {
.mat-menu-ripple {
display: none;
}
}
}
.mat-option {
&.cdk-focused {
.mat-option-ripple {
@include rounded-border($focus-color);
}
}
}
.mat-slide-toggle {
.mat-slide-toggle-thumb {
width: 15px;
height: 15px;
transform: translate(20%, 50%);
background-color: #484a4d;
}
.mat-slide-toggle-bar {
border-radius: 15px;
height: 20px;
}
.mat-slide-toggle-thumb-container {
top: -5px;
}
&.mat-primary.mat-checked:not(.mat-disabled) {
.mat-slide-toggle-bar {
background-color: $focus-color;
}
.mat-slide-toggle-thumb {
background-color: white;
}
}
.mat-slide-toggle-ripple {
display: none;
}
&.cdk-focused {
.mat-slide-toggle-bar {
border: 2px solid $focus-color;
}
}
}
.mat-stroked-button, .mat-flat-button {
&.cdk-focused {
.mat-button-ripple.mat-ripple {
border: 2px solid $focus-color;
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
}
}
}
.mat-option {
&.cdk-focused {
.mat-option-ripple {
@include rounded-border($focus-color);
}
}
}
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
background-color: white !important;
border: 2px solid $focus-color;
}
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
background-color: #2254b2;
}
.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]) {
background-color: white;
border: 2px solid $focus-color;
}
.adf-error-snackbar {
background-color: #ba1b1b;
.mat-simple-snackbar, .mat-simple-snackbar-action {
color: white;
}
}
.adf-info-snackbar {
background-color: $focus-color;
.mat-simple-snackbar, .mat-simple-snackbar-action {
color: white;
}
}