inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-38482] added mixin for theming mat-datetimepicker

Browse Source
This commit is contained in:
tomek.hanaj
2026-03-24 15:27:08 +01:00
parent bdd4b687c6
commit 45c2e51e31
3 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/styles/_index.scss
+1
View File
@@ -2,3 +2,4 @@
@forward './flex';
@forward './mixins';
@forward './mat-selectors';
@forward './mat-datetimepicker';
lib/core/src/lib/styles/_mat-datetimepicker.scss
+90
View File
@@ -0,0 +1,90 @@
@use 'mat-selectors' as ms;
@mixin override-mat-date-timepicker(
$primary-color,
$on-primary-color,
$sys-background,
$on-surface,
$surface-container-highest,
$on-surface-variant
) {
#{ms.$mat-datetimepicker-calendar-header} {
background-color: $primary-color;
color: $on-primary-color;
}
#{ms.$mat-datetimepicker-calendar} {
#{ms.$mat-datetimepicker-calendar-content} {
background-color: $sys-background;
color: $on-surface;
#{ms.$mat-datetimepicker-clock} {
background-color: $surface-container-highest;
#{ms.$mat-datetimepicker-clock-cell} {
color: $on-surface;
}
}
}
}
#{ms.$mat-datetimepicker-calendar-body-cell} {
color: $on-surface;
#{ms.$mat-datetimepicker-calendar-body-cell-content} {
color: $on-surface;
}
}
#{ms.$mat-datetimepicker-calendar-body-cell-content} {
&#{ms.$mat-datetimepicker-calendar-body-selected} {
background-color: $primary-color;
color: $on-surface;
color: $on-primary-color;
}
&#{ms.$mat-datetimepicker-calendar-body-disabled} > #{ms.$mat-datetimepicker-calendar-body-selected} {
background-color: $primary-color;
opacity: 0.4;
color: $on-primary-color;
}
&#{ms.$mat-datetimepicker-calendar-body-today} {
&:not(#{ms.$mat-datetimepicker-calendar-body-selected}) {
border-color: $primary-color;
}
&#{ms.$mat-datetimepicker-calendar-body-selected} {
box-shadow: inset 0 0 0 1px $on-primary-color;
}
}
}
#{ms.$mat-datetimepicker-clock-center} {
background-color: $primary-color;
}
#{ms.$mat-datetimepicker-clock-hand} {
background-color: $primary-color;
&::before {
background-color: $primary-color;
}
}
#{ms.$mat-datetimepicker-clock} {
#{ms.$mat-datetimepicker-clock-cell} {
&#{ms.$mat-datetimepicker-clock-cell-selected} {
color: $on-primary-color;
background-color: color-mix(in srgb, $primary-color 95%, white);
}
}
}
#{ms.$mat-datetimepicker-calendar-body-disabled}
> #{ms.$mat-datetimepicker-calendar-body-cell-content}:not(#{ms.$mat-datetimepicker-calendar-body-selected}) {
opacity: 0.4;
color: $on-surface;
}
#{ms.$mat-datetimepicker-calendar-table-header} {
color: $on-surface-variant;
}
}
lib/core/src/lib/styles/_mat-selectors.scss
+9
View File
@@ -77,3 +77,12 @@ $mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-t
$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
$mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
$mat-datetimepicker-clock: '.mat-datetimepicker-clock';
$mat-datetimepicker-clock-cell: '.mat-datetimepicker-clock-cell';
$mat-datetimepicker-calendar-body-cell-content: '.mat-datetimepicker-calendar-body-cell-content';
$mat-datetimepicker-calendar-body-selected: '.mat-datetimepicker-calendar-body-selected';
$mat-datetimepicker-calendar-body-today: '.mat-datetimepicker-calendar-body-today';
$mat-datetimepicker-clock-center: '.mat-datetimepicker-clock-center';
$mat-datetimepicker-clock-hand: '.mat-datetimepicker-clock-hand';
$mat-datetimepicker-clock-cell-selected: '.mat-datetimepicker-clock-cell-selected';
$mat-datetimepicker-calendar-body-cell: '.mat-datetimepicker-calendar-body-cell';