UNPKG

1.87 kBSCSSView Raw
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 // Bump the default width slightly since it's somewhat cramped with two inputs and a separator.
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}