1 | @use '../button/button-theme';
|
2 | @use '../button/icon-button-theme';
|
3 |
|
4 | @mixin legacy-button-compat-theme($theme) {
|
5 | .mat-datepicker-content {
|
6 | @include button-theme.theme($theme);
|
7 | @include icon-button-theme.theme($theme);
|
8 | }
|
9 | }
|
10 |
|
11 | @mixin legacy-button-compat() {
|
12 | .mat-datepicker-toggle .mat-mdc-button-base {
|
13 | width: 40px;
|
14 | height: 40px;
|
15 | padding: 8px 0;
|
16 | }
|
17 |
|
18 | .mat-datepicker-actions {
|
19 | $spacing: 8px;
|
20 |
|
21 | .mat-button-base + .mat-button-base {
|
22 | margin-left: $spacing;
|
23 |
|
24 | [dir='rtl'] & {
|
25 | margin-left: 0;
|
26 | margin-right: $spacing;
|
27 | }
|
28 | }
|
29 | }
|
30 | }
|
31 |
|
32 | @mixin legacy-form-field-compat() {
|
33 | .mat-form-field {
|
34 | .mat-form-field-prefix,
|
35 | .mat-form-field-suffix {
|
36 | .mat-datepicker-toggle .mat-mdc-button-base {
|
37 | width: 40px;
|
38 | height: 40px;
|
39 | padding: 8px 0;
|
40 | }
|
41 | }
|
42 |
|
43 | .mat-datepicker-toggle .mat-mdc-icon-button .mat-icon {
|
44 | font-size: 1em;
|
45 | display: inline-block;
|
46 | margin: -2px 0 1px;
|
47 | }
|
48 | }
|
49 |
|
50 | .mat-form-field-type-mat-date-range-input .mat-form-field-infix {
|
51 |
|
52 | width: 200px;
|
53 | }
|
54 |
|
55 | .mat-form-field-appearance-legacy {
|
56 | .mat-form-field-prefix,
|
57 | .mat-form-field-suffix {
|
58 | .mat-datepicker-toggle .mat-mdc-icon-button {
|
59 | font-size: inherit;
|
60 | width: 1.5em;
|
61 | height: 1.5em;
|
62 | padding: 0;
|
63 | }
|
64 |
|
65 | .mat-datepicker-toggle-default-icon {
|
66 | width: 1em;
|
67 | }
|
68 |
|
69 | .mat-datepicker-toggle .mat-mdc-icon-button .mat-icon {
|
70 | line-height: 1.5em;
|
71 | margin: 0;
|
72 | }
|
73 | }
|
74 | }
|
75 |
|
76 | .mat-form-field {
|
77 | .mat-datepicker-toggle .mat-mdc-button-base {
|
78 | vertical-align: middle;
|
79 | }
|
80 |
|
81 | &:not(.mat-form-field-appearance-legacy) .mat-datepicker-toggle .mat-mdc-button-base {
|
82 | vertical-align: baseline;
|
83 | }
|
84 | }
|
85 | }
|