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-4259] Updated CSS rules for DateTimePicker (#2986)

Browse Source 
* Updated CSS rules for DateTimePicker to show which date is currently focused on when navigating using the keyboard.

* [ACS-4259] Added variables for CSS colors

* [ACS-4259] Updated CSS color variable names to be more generic and not include the colors themselves.

* [ACS-4259] Added CSS variables for white background used in datetimepicker cell background

* [ACS-4259] Resolved typo

* [ACS-4259] Added CSS variables for datetimepicker cell selected background color and cell focus background color
This commit is contained in:
swapnil-verma-gl 2023-02-17 22:40:35 +05:30 committed by GitHub
parent 910a6c27cb
commit ce29b36605
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
projects/aca-content/src/lib/ui/overrides/ay11.scss
View File

@ -157,13 +157,21 @@
} }
} }
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content {
outline: 2px solid var(--theme-datetimepicker-cell-focus-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: var(--theme-datetimepicker-cell-background) !important;
outline: 2px solid var(--theme-blue-button-color); }
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
background-color: var(--theme-datetimepicker-cell-focus-background);
color: var(--theme-datetimepicker-font-color);
} }
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected { .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
background-color: #2254b2; background-color: var(--theme-datetimepicker-selected-date-background);
} }
.mat-expansion-panel .mat-expansion-panel-header { .mat-expansion-panel .mat-expansion-panel-header {

10
projects/aca-content/src/lib/ui/variables/variables.scss
View File

@ -41,6 +41,11 @@ $black-heading: #4e4c4c;
$grey-dropdown-background: #eee; $grey-dropdown-background: #eee;
$grey-divider: rgba(0,0,0,.22); $grey-divider: rgba(0,0,0,.22);
$pagination-background-color: #ffffff; $pagination-background-color: #ffffff;
$datetimepicker-font-color: rgba(black, 0.87);
$datetimepicker-selected-date-background: #2254b2;
$datetimepicker-cell-background-color: #ffffff;
$datetimepicker-cell-focus-border-color: #1F74DB;
$datetimepicker-cell-focus-background-color: rgba(33, 33, 33, 0.12);
$defaults: ( $defaults: (
--theme-primary-color: mat.get-color-from-palette($primary), --theme-primary-color: mat.get-color-from-palette($primary),
@ -73,6 +78,11 @@ $defaults: (
--theme-about-panel-border-color: $grey-background, --theme-about-panel-border-color: $grey-background,
--theme-about-panel-background-color: #ffffff, --theme-about-panel-background-color: #ffffff,
--theme-about-panel-title-color: #212121, --theme-about-panel-title-color: #212121,
--theme-datetimepicker-font-color: $datetimepicker-font-color,
--theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
--theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,
--theme-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color,
--theme-datetimepicker-cell-focus-background: $datetimepicker-cell-focus-background-color
); );
// propagates SCSS variables into the CSS variables scope // propagates SCSS variables into the CSS variables scope