86 lines
1.8 KiB
SCSS
86 lines
1.8 KiB
SCSS
@use '../button/button-theme';
|
|
@use '../button/icon-button-theme';
|
|
|
|
@mixin legacy-button-compat-theme($theme) {
|
|
.mat-datepicker-content {
|
|
@include button-theme.theme($theme);
|
|
@include icon-button-theme.theme($theme);
|
|
}
|
|
}
|
|
|
|
@mixin legacy-button-compat() {
|
|
.mat-datepicker-toggle .mat-mdc-button-base {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.mat-datepicker-actions {
|
|
$spacing: 8px;
|
|
|
|
.mat-button-base + .mat-button-base {
|
|
margin-left: $spacing;
|
|
|
|
[dir='rtl'] & {
|
|
margin-left: 0;
|
|
margin-right: $spacing;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin legacy-form-field-compat() {
|
|
.mat-form-field {
|
|
.mat-form-field-prefix,
|
|
.mat-form-field-suffix {
|
|
.mat-datepicker-toggle .mat-mdc-button-base {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
|
|
.mat-datepicker-toggle .mat-mdc-icon-button .mat-icon {
|
|
font-size: 1em;
|
|
display: inline-block;
|
|
margin: -2px 0 1px;
|
|
}
|
|
}
|
|
|
|
.mat-form-field-type-mat-date-range-input .mat-form-field-infix {
|
|
// Bump the default width slightly since it's somewhat cramped with two inputs and a separator.
|
|
width: 200px;
|
|
}
|
|
|
|
.mat-form-field-appearance-legacy {
|
|
.mat-form-field-prefix,
|
|
.mat-form-field-suffix {
|
|
.mat-datepicker-toggle .mat-mdc-icon-button {
|
|
font-size: inherit;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
padding: 0;
|
|
}
|
|
|
|
.mat-datepicker-toggle-default-icon {
|
|
width: 1em;
|
|
}
|
|
|
|
.mat-datepicker-toggle .mat-mdc-icon-button .mat-icon {
|
|
line-height: 1.5em;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-form-field {
|
|
.mat-datepicker-toggle .mat-mdc-button-base {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&:not(.mat-form-field-appearance-legacy) .mat-datepicker-toggle .mat-mdc-button-base {
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
}
|