/
form-field.scss
123 lines (110 loc) · 4.69 KB
/
form-field.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@use '@material/textfield' as mdc-textfield;
@use '@material/floating-label' as mdc-floating-label;
@use '@material/notched-outline' as mdc-notched-outline;
@use '@material/line-ripple' as mdc-line-ripple;
@use './form-field-sizing';
@use './form-field-subscript';
@use './form-field-focus-overlay';
@use './form-field-high-contrast';
@use './form-field-native-select';
@use './mdc-text-field-textarea-overrides';
@use './mdc-text-field-structure-overrides';
@use '../mdc-helpers/mdc-helpers';
// Base styles for MDC text-field, notched-outline, floating label and line-ripple.
@include mdc-textfield.without-ripple(
$query: mdc-helpers.$mat-base-styles-without-animation-query);
@include mdc-floating-label.core-styles(
$query: mdc-helpers.$mat-base-styles-without-animation-query);
@include mdc-notched-outline.core-styles(
$query: mdc-helpers.$mat-base-styles-without-animation-query);
@include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
// MDC text-field overwrites.
@include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides();
@include mdc-text-field-structure-overrides.private-text-field-structure-overrides();
// Include the subscript, focus-overlay, native select and high-contrast styles.
@include form-field-subscript.private-form-field-subscript();
@include form-field-focus-overlay.private-form-field-focus-overlay();
@include form-field-native-select.private-form-field-native-select();
@include form-field-high-contrast.private-form-field-high-contrast();
// Host element of the form-field. It contains the mdc-text-field wrapper
// and the subscript wrapper.
.mat-mdc-form-field {
display: inline-flex;
// This container contains the text-field and the subscript. The subscript
// should be displayed below the text-field. Hence the column direction.
flex-direction: column;
// This allows the form-field to shrink down when used inside flex or grid layouts.
min-width: 0;
// To avoid problems with text-align.
text-align: left;
[dir='rtl'] & {
text-align: right;
}
}
// Container that contains the prefixes, infix and suffixes. These elements should
// be aligned vertically in the baseline and in a single row.
.mat-mdc-form-field-flex {
display: inline-flex;
align-items: baseline;
box-sizing: border-box;
width: 100%;
}
// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
// This allows developers to control the width without needing custom CSS overrides.
.mat-mdc-text-field-wrapper {
width: 100%;
}
// Vertically center icons.
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
align-self: center;
// The line-height can cause the prefix/suffix container to be taller than the actual icons,
// breaking the vertical centering. To prevent this we set the line-height to 0.
line-height: 0;
}
// The prefix/suffix needs a little extra padding between the icon and the infix. Because we need to
// support arbitrary height input elements, we use a different DOM structure for prefix and suffix
// icons, and therefore can't rely on MDC for these styles.
.mat-mdc-form-field-icon-prefix,
[dir='rtl'] .mat-mdc-form-field-icon-suffix {
padding: 0 form-field-sizing.$mat-form-field-icon-prefix-infix-padding 0 0;
}
.mat-mdc-form-field-icon-suffix,
[dir='rtl'] .mat-mdc-form-field-icon-prefix {
padding: 0 0 0 form-field-sizing.$mat-form-field-icon-prefix-infix-padding;
}
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
& > .mat-icon {
padding: 12px;
}
}
// Scale down icons in the subscript and floating label to be the same size
// as the text.
.mat-mdc-form-field-subscript-wrapper,
.mat-mdc-form-field label {
.mat-icon {
width: 1em;
height: 1em;
font-size: inherit;
}
}
// Infix that contains the projected content (usually an input or a textarea). We ensure
// that the projected form-field control and content can stretch as needed, but we also
// apply a default infix width to make the form-field's look natural.
.mat-mdc-form-field-infix {
flex: auto;
min-width: 0;
width: form-field-sizing.$mat-form-field-default-infix-width;
// Needed so that the floating label does not overlap with prefixes or suffixes.
position: relative;
box-sizing: border-box;
}
// In order to make it possible for developers to disable animations for form-fields,
// we only activate the animation styles if animations are not explicitly disabled.
.mat-mdc-form-field:not(.mat-form-field-no-animations) {
@include mdc-textfield.without-ripple($query: animation);
@include mdc-floating-label.core-styles($query: animation);
@include mdc-notched-outline.core-styles($query: animation);
@include mdc-line-ripple.core-styles($query: animation);
}