mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-12 17:04:46 +00:00
[ACS-4036] Move ay11 focus feature to one file and fix 'jumping' (#2805)
* [ACS-4036] Move ay11 focus feature to one file and fix 'jumping' * [ACS-4036] Move ay11 stylesheet to correct folder
This commit is contained in:
MichalKinas
GitHub
parent
456454fee1
commit
ad9b532c53
@ -1,6 +1,7 @@
|
|||||||
@use '@angular/material' as mat;
|
@use '@angular/material' as mat;
|
||||||
@import './overrides/adf-style-fixes.theme';
|
@import './overrides/adf-style-fixes.theme';
|
||||||
@import './overrides/adf-pagination.theme';
|
@import './overrides/adf-pagination.theme';
|
||||||
|
@import './overrides/ay11';
|
||||||
@import './colors';
|
@import './colors';
|
||||||
|
|
||||||
$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
|
$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
|
||||||
@ -20,4 +21,5 @@ $custom-theme: mat.define-light-theme(
|
|||||||
@include adf-core-theme($theme);
|
@include adf-core-theme($theme);
|
||||||
@include adf-style-fixes($theme);
|
@include adf-style-fixes($theme);
|
||||||
@include adf-pagination-theme($theme);
|
@include adf-pagination-theme($theme);
|
||||||
|
@include ay11-theme();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,7 +15,12 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
|
@mixin rounded-outline($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
|
||||||
border: $thickness solid $border-color;
|
outline: $thickness solid $border-color;
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
|
||||||
|
border: $thickness solid $border-color !important;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,22 +14,6 @@
|
|||||||
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 {
|
||||||
|
|||||||
204
app/src/app/content-plugin/ui/overrides/ay11.scss
Normal file
204
app/src/app/content-plugin/ui/overrides/ay11.scss
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
@mixin ay11-theme() {
|
||||||
|
.adf-pagination {
|
||||||
|
&__perpage-block,
|
||||||
|
&__actualinfo-block {
|
||||||
|
|
||||||
|
.mat-icon-button {
|
||||||
|
left: 3px;
|
||||||
|
&:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cdk-keyboard-focused {
|
||||||
|
.mat-icon {
|
||||||
|
@include rounded-outline();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button {
|
||||||
|
&:focus-visible {
|
||||||
|
@include rounded-outline();
|
||||||
|
}
|
||||||
|
.mat-ripple-element {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&.cdk-keyboard-focused {
|
||||||
|
.mat-button-focus-overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.mat-checkbox-ripple {
|
||||||
|
@include rounded-outline();
|
||||||
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
|
left: calc(50% - 11px);
|
||||||
|
top: calc(50% - 11px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg {
|
||||||
|
fill: var(--theme-blue-button-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-list-base .mat-list-option {
|
||||||
|
&:focus-visible {
|
||||||
|
background-color: white;
|
||||||
|
.mat-list-item-content {
|
||||||
|
@include rounded-border();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mat-list-item-content {
|
||||||
|
@include rounded-border(transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.acs-close-members-container {
|
||||||
|
.mat-icon-button {
|
||||||
|
outline: none;
|
||||||
|
line-height: 36px !important;
|
||||||
|
@include rounded-border(transparent);
|
||||||
|
&:focus-visible {
|
||||||
|
@include rounded-border();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-search-user-button, .app-search-button {
|
||||||
|
line-height: 36px !important;
|
||||||
|
@include rounded-border(transparent);
|
||||||
|
&:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
@include rounded-border();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-menu-item {
|
||||||
|
.mat-menu-ripple {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@include rounded-border(transparent);
|
||||||
|
&:focus-visible {
|
||||||
|
@include rounded-border();
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
&.cdk-keyboard-focused:not([disabled]) {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-toolbar-title {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-option {
|
||||||
|
&.cdk-keyboard-focused {
|
||||||
|
.mat-option-ripple {
|
||||||
|
@include rounded-outline();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-slide-toggle {
|
||||||
|
&.mat-primary.mat-checked:not(.mat-disabled) {
|
||||||
|
.mat-slide-toggle-bar {
|
||||||
|
background-color: var(--theme-blue-button-color);
|
||||||
|
}
|
||||||
|
.mat-slide-toggle-thumb {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-slide-toggle-ripple {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&.cdk-keyboard-focused {
|
||||||
|
.mat-slide-toggle-bar {
|
||||||
|
outline: 2px solid var(--theme-blue-button-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-stroked-button, .mat-flat-button {
|
||||||
|
&.cdk-keyboard-focused {
|
||||||
|
.mat-button-ripple.mat-ripple {
|
||||||
|
outline: 2px solid var(--theme-blue-button-color);
|
||||||
|
top: -4px;
|
||||||
|
left: -4px;
|
||||||
|
bottom: -4px;
|
||||||
|
right: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-option {
|
||||||
|
&.cdk-keyboard-focused {
|
||||||
|
.mat-option-ripple {
|
||||||
|
@include rounded-outline();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
|
||||||
|
background-color: white !important;
|
||||||
|
outline: 2px solid var(--theme-blue-button-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
|
||||||
|
background-color: #2254b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-expansion-panel .mat-expansion-panel-header {
|
||||||
|
border: 2px solid transparent;
|
||||||
|
.mat-button {
|
||||||
|
outline: none;
|
||||||
|
@include rounded-border(transparent);
|
||||||
|
&:focus-visible {
|
||||||
|
@include rounded-border();
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.cdk-keyboard-focused:not([aria-disabled=true]) {
|
||||||
|
background-color: white;
|
||||||
|
@include rounded-border();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-error-snackbar {
|
||||||
|
background-color: #ba1b1b;
|
||||||
|
|
||||||
|
.mat-simple-snackbar, .mat-simple-snackbar-action {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-info-snackbar {
|
||||||
|
background-color: var(--theme-blue-button-color);
|
||||||
|
|
||||||
|
.mat-simple-snackbar, .mat-simple-snackbar-action {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-filter-button {
|
||||||
|
margin-left: -2px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -51,145 +51,6 @@ $contrast-gray: #646569;
|
|||||||
color: $contrast-gray !important;
|
color: $contrast-gray !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button {
|
|
||||||
&:focus {
|
|
||||||
@include rounded-border();
|
|
||||||
}
|
|
||||||
.mat-ripple-element {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&.cdk-focused {
|
|
||||||
.mat-button-focus-overlay {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.mat-checkbox-ripple {
|
|
||||||
@include rounded-border();
|
|
||||||
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: var(--theme-blue-button-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-list-base .mat-list-option:focus {
|
|
||||||
background-color: white;
|
|
||||||
.mat-list-item-content {
|
|
||||||
border: 2px solid var(--theme-blue-button-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-menu-item {
|
|
||||||
.mat-menu-ripple {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
@include rounded-border();
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
&.cdk-keyboard-focused:not([disabled]) {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-option {
|
|
||||||
&.cdk-focused {
|
|
||||||
.mat-option-ripple {
|
|
||||||
@include rounded-border();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: var(--theme-blue-button-color);
|
|
||||||
}
|
|
||||||
.mat-slide-toggle-thumb {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-slide-toggle-ripple {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&.cdk-focused {
|
|
||||||
.mat-slide-toggle-bar {
|
|
||||||
border: 2px solid var(--theme-blue-button-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-stroked-button, .mat-flat-button {
|
|
||||||
&.cdk-focused {
|
|
||||||
.mat-button-ripple.mat-ripple {
|
|
||||||
border: 2px solid var(--theme-blue-button-color);
|
|
||||||
top: -4px;
|
|
||||||
left: -4px;
|
|
||||||
bottom: -4px;
|
|
||||||
right: -4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-option {
|
|
||||||
&.cdk-focused {
|
|
||||||
.mat-option-ripple {
|
|
||||||
@include rounded-border();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
|
|
||||||
background-color: white !important;
|
|
||||||
border: 2px solid var(--theme-blue-button-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 var(--theme-blue-button-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.adf-error-snackbar {
|
|
||||||
background-color: #ba1b1b;
|
|
||||||
|
|
||||||
.mat-simple-snackbar, .mat-simple-snackbar-action {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.adf-info-snackbar {
|
|
||||||
background-color: var(--theme-blue-button-color);
|
|
||||||
|
|
||||||
.mat-simple-snackbar, .mat-simple-snackbar-action {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.adf-empty-content__icon {
|
.adf-empty-content__icon {
|
||||||
color: $contrast-gray;
|
color: $contrast-gray;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user