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-4013] Fix pagination focus styling (#2793)

Browse Source 
* [ACS-4013] Fix pagination focus styling

* [ACS-4013] Missing style remove

* [ACS-4013] Moved pagination styling to proper place, make focus color var global

* [ACS-4013] CR fixes
This commit is contained in:
MichalKinas 2022-11-18 14:28:59 +01:00 committed by GitHub
parent 39f5904da8
commit ed22d2d32f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/app/ui/mixins.scss
View File

@ -14,3 +14,8 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
border: $thickness solid $border-color;
border-radius: $radius;
}

17
app/src/app/ui/overrides/adf-pagination.theme.scss
View File

@ -14,6 +14,22 @@
line-height: 24px !important; line-height: 24px !important;
padding: 16px 0; padding: 16px 0;
background: var(--theme-pagination-background-color); background: var(--theme-pagination-background-color);
&__perpage-block,
&__actualinfo-block {
.mat-icon-button {
&:focus {
border: none;
left: 3px;
}
&.cdk-focused {
.mat-icon {
@include rounded-border();
}
}
}
}
} }
.adf-pagination__range-block { .adf-pagination__range-block {
@ -44,5 +60,4 @@
.adf-pagination__controls-block { .adf-pagination__controls-block {
padding-right: 24px !important; padding-right: 24px !important;
} }
} }

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

@ -6,14 +6,8 @@
@include custom-theme($custom-theme); @include custom-theme($custom-theme);
$focus-color: #1f74db;
$contrast-gray: #646569; $contrast-gray: #646569;
@mixin rounded-border($border-color, $thickness: 2px, $radius: 4px) {
border: $thickness solid $border-color;
border-radius: $radius;
}
.mat-toolbar { .mat-toolbar {
color: var(--theme-text-color, rgba(0, 0, 0, 0.54)); color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
} }
@ -59,8 +53,7 @@ $contrast-gray: #646569;
.mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button { .mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button {
&:focus { &:focus {
@include rounded-border($focus-color); @include rounded-border();
left: 6px;
} }
.mat-ripple-element { .mat-ripple-element {
display: none; display: none;
@ -70,7 +63,7 @@ $contrast-gray: #646569;
display: none; display: none;
} }
.mat-checkbox-ripple { .mat-checkbox-ripple {
@include rounded-border($focus-color); @include rounded-border();
height: 22px; height: 22px;
width: 22px; width: 22px;
left: calc(50% - 13px); left: calc(50% - 13px);
@ -80,13 +73,13 @@ $contrast-gray: #646569;
} }
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg { .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg {
fill: #1f74db !important; fill: var(--theme-blue-button-color) !important;
} }
.mat-list-base .mat-list-option:focus { .mat-list-base .mat-list-option:focus {
background-color: white; background-color: white;
.mat-list-item-content { .mat-list-item-content {
border: 2px solid #1f74db; border: 2px solid var(--theme-blue-button-color);
} }
} }
@ -95,7 +88,7 @@ $contrast-gray: #646569;
display: none; display: none;
} }
&:focus { &:focus {
@include rounded-border($focus-color); @include rounded-border();
background-color: white; background-color: white;
} }
&.cdk-keyboard-focused:not([disabled]) { &.cdk-keyboard-focused:not([disabled]) {
@ -106,7 +99,7 @@ $contrast-gray: #646569;
.mat-option { .mat-option {
&.cdk-focused { &.cdk-focused {
.mat-option-ripple { .mat-option-ripple {
@include rounded-border($focus-color); @include rounded-border();
} }
} }
} }
@ -130,7 +123,7 @@ $contrast-gray: #646569;
&.mat-primary.mat-checked:not(.mat-disabled) { &.mat-primary.mat-checked:not(.mat-disabled) {
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
background-color: $focus-color; background-color: var(--theme-blue-button-color);
} }
.mat-slide-toggle-thumb { .mat-slide-toggle-thumb {
background-color: white; background-color: white;
@ -142,7 +135,7 @@ $contrast-gray: #646569;
} }
&.cdk-focused { &.cdk-focused {
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
border: 2px solid $focus-color; border: 2px solid var(--theme-blue-button-color);
} }
} }
} }
@ -150,7 +143,7 @@ $contrast-gray: #646569;
.mat-stroked-button, .mat-flat-button { .mat-stroked-button, .mat-flat-button {
&.cdk-focused { &.cdk-focused {
.mat-button-ripple.mat-ripple { .mat-button-ripple.mat-ripple {
border: 2px solid $focus-color; border: 2px solid var(--theme-blue-button-color);
top: -4px; top: -4px;
left: -4px; left: -4px;
bottom: -4px; bottom: -4px;
@ -162,14 +155,14 @@ $contrast-gray: #646569;
.mat-option { .mat-option {
&.cdk-focused { &.cdk-focused {
.mat-option-ripple { .mat-option-ripple {
@include rounded-border($focus-color); @include rounded-border();
} }
} }
} }
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) { .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
background-color: white !important; background-color: white !important;
border: 2px solid $focus-color; border: 2px solid var(--theme-blue-button-color);
} }
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected { .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
@ -178,7 +171,7 @@ $contrast-gray: #646569;
.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]) { .mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]) {
background-color: white; background-color: white;
border: 2px solid $focus-color; border: 2px solid var(--theme-blue-button-color);
} }
.adf-error-snackbar { .adf-error-snackbar {
@ -190,7 +183,7 @@ $contrast-gray: #646569;
} }
.adf-info-snackbar { .adf-info-snackbar {
background-color: $focus-color; background-color: var(--theme-blue-button-color);
.mat-simple-snackbar, .mat-simple-snackbar-action { .mat-simple-snackbar, .mat-simple-snackbar-action {
color: white; color: white;
@ -200,3 +193,4 @@ $contrast-gray: #646569;
.adf-empty-content__icon { .adf-empty-content__icon {
color: $contrast-gray; color: $contrast-gray;
} }