1 | @use '../core/theming/theming';
|
2 | @use '../core/mdc-helpers/mdc-helpers';
|
3 | @use '../core/style/private';
|
4 | @use '../core/typography/typography';
|
5 | @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
|
6 | @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
|
7 | @use '@material/typography' as mdc-typography;
|
8 | @use '@material/theme/theme-color' as mdc-theme-color;
|
9 | @use 'sass:color';
|
10 | @use 'sass:map';
|
11 |
|
12 | @mixin color($config-or-theme) {
|
13 | $config: theming.get-color-config($config-or-theme);
|
14 | $foreground: map.get($config, foreground);
|
15 |
|
16 | @include mdc-helpers.using-mdc-theme($config) {
|
17 | .mat-mdc-card {
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | @include private.private-theme-elevation(1, $config);
|
23 | @include mdc-elevated-card-theme.theme((
|
24 | container-color: mdc-theme-color.prop-value(surface),
|
25 | ));
|
26 | }
|
27 |
|
28 | .mat-mdc-card-outlined {
|
29 | @include private.private-theme-elevation(0, $config);
|
30 | @include mdc-outlined-card-theme.theme((
|
31 | outline-color: color.mix(mdc-theme-color.prop-value(on-surface),
|
32 | mdc-theme-color.prop-value(surface), 12%)
|
33 | ));
|
34 | }
|
35 |
|
36 |
|
37 |
|
38 | .mat-mdc-card-subtitle {
|
39 | color: theming.get-color-from-palette($foreground, secondary-text);
|
40 | }
|
41 | }
|
42 | }
|
43 |
|
44 | @mixin typography($config-or-theme) {
|
45 | $config: typography.private-typography-to-2018-config(
|
46 | theming.get-typography-config($config-or-theme));
|
47 | @include mdc-helpers.using-mdc-typography($config) {
|
48 |
|
49 |
|
50 | .mat-mdc-card-title {
|
51 | @include mdc-typography.typography(headline6);
|
52 | }
|
53 |
|
54 | .mat-mdc-card-subtitle {
|
55 | @include mdc-typography.typography(subtitle2);
|
56 | }
|
57 | }
|
58 | }
|
59 |
|
60 | @mixin density($config-or-theme) {}
|
61 |
|
62 | @mixin theme($theme-or-color-config) {
|
63 | $theme: theming.private-legacy-get-theme($theme-or-color-config);
|
64 | @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
|
65 | $color: theming.get-color-config($theme);
|
66 | $density: theming.get-density-config($theme);
|
67 | $typography: theming.get-typography-config($theme);
|
68 |
|
69 | @if $color != null {
|
70 | @include color($color);
|
71 | }
|
72 | @if $density != null {
|
73 | @include density($density);
|
74 | }
|
75 | @if $typography != null {
|
76 | @include typography($typography);
|
77 | }
|
78 | }
|
79 | }
|