/
_form-field-subscript.scss
70 lines (60 loc) · 2.05 KB
/
_form-field-subscript.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
@use '@material/textfield' as mdc-textfield;
@use '@material/theme/theme' as mdc-theme;
@use '@material/typography' as mdc-typography;
@use '@material/textfield/variables' as mdc-textfield-variables;
@use 'form-field-sizing';
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/theming/theming';
@mixin private-form-field-subscript() {
// Wrapper for the hints and error messages.
.mat-mdc-form-field-subscript-wrapper {
box-sizing: border-box;
width: 100%;
position: relative;
}
.mat-mdc-form-field-hint-wrapper,
.mat-mdc-form-field-error-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0 mdc-textfield-variables.$padding-horizontal;
}
.mat-mdc-form-field-bottom-align::before {
content: '';
display: inline-block;
height: 16px;
}
.mat-mdc-form-field-hint-end {
order: 1;
}
// Clears the floats on the hints. This is necessary for the hint animation to work.
.mat-mdc-form-field-hint-wrapper {
display: flex;
}
// Spacer used to make sure start and end hints have enough space between them.
.mat-mdc-form-field-hint-spacer {
flex: 1 0 form-field-sizing.$mat-form-field-hint-min-space;
}
// Single error message displayed beneath the form field underline.
.mat-mdc-form-field-error {
display: block;
}
}
@mixin private-form-field-subscript-color() {
// MDC does not have built-in error treatment.
.mat-mdc-form-field-error {
@include mdc-theme.prop(color, mdc-textfield.$error);
}
}
// We need to define our own typography for the subscript because we don't include MDC's
// helper text in our MDC based form field
@mixin private-form-field-subscript-typography($config-or-theme) {
$config: theming.get-typography-config($config-or-theme);
// The subscript wrapper has a minimum height to avoid that the form-field
// jumps when hints or errors are displayed.
.mat-mdc-form-field-subscript-wrapper,
.mat-mdc-form-field-bottom-align::before {
@include mdc-typography.typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
}
}