|
13 | 13 | $is-dark-theme: map-get($theme, is-dark);
|
14 | 14 |
|
15 | 15 | // Placeholder colors. Required is used for the `*` star shown in the placeholder.
|
16 |
| - $input-placeholder-color: mat-color($foreground, secondary-text); |
17 |
| - $input-floating-placeholder-color: mat-color($primary); |
18 |
| - $input-required-placeholder-color: mat-color($accent); |
| 16 | + $form-field-placeholder-color: mat-color($foreground, secondary-text); |
| 17 | + $form-field-floating-placeholder-color: mat-color($primary); |
| 18 | + $form-field-required-placeholder-color: mat-color($accent); |
19 | 19 |
|
20 | 20 | // Underline colors.
|
21 |
| - $input-underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42)); |
22 |
| - $input-underline-color-accent: mat-color($accent); |
23 |
| - $input-underline-color-warn: mat-color($warn); |
24 |
| - $input-underline-focused-color: mat-color($primary); |
| 21 | + $form-field-underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42)); |
| 22 | + $form-field-underline-color-accent: mat-color($accent); |
| 23 | + $form-field-underline-color-warn: mat-color($warn); |
| 24 | + $form-field-underline-focused-color: mat-color($primary); |
25 | 25 |
|
26 |
| - .mat-input-placeholder { |
27 |
| - color: $input-placeholder-color; |
| 26 | + .mat-form-field-placeholder { |
| 27 | + color: $form-field-placeholder-color; |
28 | 28 | }
|
29 | 29 |
|
30 | 30 | .mat-hint {
|
31 | 31 | color: mat-color($foreground, secondary-text);
|
32 | 32 | }
|
33 | 33 |
|
34 |
| - // :focus is applied to the input, but we apply mat-focused to the other elements |
35 |
| - // that need to listen to it. |
36 |
| - .mat-focused .mat-input-placeholder { |
37 |
| - color: $input-floating-placeholder-color; |
| 34 | + .mat-focused .mat-form-field-placeholder { |
| 35 | + color: $form-field-floating-placeholder-color; |
38 | 36 |
|
39 | 37 | &.mat-accent {
|
40 |
| - color: $input-underline-color-accent; |
| 38 | + color: $form-field-underline-color-accent; |
41 | 39 | }
|
42 | 40 |
|
43 | 41 | &.mat-warn {
|
44 |
| - color: $input-underline-color-warn; |
| 42 | + color: $form-field-underline-color-warn; |
45 | 43 | }
|
46 | 44 | }
|
47 | 45 |
|
48 | 46 | .mat-input-element:disabled {
|
49 | 47 | color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42));
|
50 | 48 | }
|
51 | 49 |
|
52 |
| - // See _mat-input-placeholder-floating mixin in input-container.scss |
53 |
| - input.mat-input-element:-webkit-autofill + .mat-input-placeholder, |
54 |
| - .mat-focused .mat-input-placeholder.mat-float { |
55 |
| - .mat-placeholder-required { |
56 |
| - color: $input-required-placeholder-color; |
| 50 | + // See _mat-form-field-placeholder-floating mixin in form-field.scss |
| 51 | + input.mat-input-element:-webkit-autofill + .mat-form-field-placeholder, |
| 52 | + .mat-focused .mat-form-field-placeholder.mat-form-field-float { |
| 53 | + .mat-form-field-required-marker { |
| 54 | + color: $form-field-required-placeholder-color; |
57 | 55 | }
|
58 | 56 | }
|
59 | 57 |
|
60 |
| - .mat-input-underline { |
61 |
| - background-color: $input-underline-color; |
| 58 | + .mat-form-field-underline { |
| 59 | + background-color: $form-field-underline-color; |
62 | 60 |
|
63 | 61 | &.mat-disabled {
|
64 |
| - @include mat-control-disabled-underline($input-underline-color); |
| 62 | + @include mat-control-disabled-underline($form-field-underline-color); |
65 | 63 | }
|
66 | 64 | }
|
67 | 65 |
|
68 |
| - .mat-input-ripple { |
69 |
| - background-color: $input-underline-focused-color; |
| 66 | + .mat-form-field-ripple { |
| 67 | + background-color: $form-field-underline-focused-color; |
70 | 68 |
|
71 | 69 | &.mat-accent {
|
72 |
| - background-color: $input-underline-color-accent; |
| 70 | + background-color: $form-field-underline-color-accent; |
73 | 71 | }
|
74 | 72 |
|
75 | 73 | &.mat-warn {
|
76 |
| - background-color: $input-underline-color-warn; |
| 74 | + background-color: $form-field-underline-color-warn; |
77 | 75 | }
|
78 | 76 | }
|
79 | 77 |
|
80 |
| - // Styling for the error state of the input container. Note that while the same can be |
| 78 | + // Styling for the error state of the form field. Note that while the same can be |
81 | 79 | // achieved with the ng-* classes, we use this approach in order to ensure that the same
|
82 | 80 | // logic is used to style the error state and to show the error messages.
|
83 |
| - .mat-input-invalid { |
84 |
| - .mat-input-placeholder { |
85 |
| - color: $input-underline-color-warn; |
| 81 | + .mat-form-field-invalid { |
| 82 | + .mat-form-field-placeholder { |
| 83 | + color: $form-field-underline-color-warn; |
86 | 84 |
|
87 | 85 | &.mat-accent,
|
88 |
| - &.mat-float .mat-placeholder-required { |
89 |
| - color: $input-underline-color-warn; |
| 86 | + &.mat-form-field-float .mat-form-field-required-marker { |
| 87 | + color: $form-field-underline-color-warn; |
90 | 88 | }
|
91 | 89 | }
|
92 | 90 |
|
93 |
| - .mat-input-ripple { |
94 |
| - background-color: $input-underline-color-warn; |
| 91 | + .mat-form-field-ripple { |
| 92 | + background-color: $form-field-underline-color-warn; |
95 | 93 | }
|
96 | 94 | }
|
97 | 95 |
|
98 |
| - .mat-input-error { |
99 |
| - color: $input-underline-color-warn; |
| 96 | + .mat-error { |
| 97 | + color: $form-field-underline-color-warn; |
100 | 98 | }
|
101 | 99 | }
|
102 | 100 |
|
103 |
| -// Applies a floating placeholder above the input itself. |
104 |
| -@mixin _mat-input-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) { |
105 |
| - // We use perspecitve to fix the text blurriness as described here: |
| 101 | +// Applies a floating placeholder above the form field control itself. |
| 102 | +@mixin _mat-form-field-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) { |
| 103 | + // We use perspective to fix the text blurriness as described here: |
106 | 104 | // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
|
107 | 105 | // This results in a small jitter after the label floats on Firefox, which the
|
108 | 106 | // translateZ fixes.
|
|
132 | 130 | // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
|
133 | 131 | // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
|
134 | 132 | $infix-padding: 0.5em - $line-spacing;
|
135 |
| - // The margin applied to the input-infix to reserve space for the floating label. |
| 133 | + // The margin applied to the form-field-infix to reserve space for the floating label. |
136 | 134 | $infix-margin-top: 1em * $line-height * $subscript-font-scale;
|
137 | 135 | // Font size to use for the label and subscript text.
|
138 | 136 | $subscript-font-size: $subscript-font-scale * 100%;
|
139 | 137 | // Font size to use for the for the prefix and suffix icons.
|
140 | 138 | $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;
|
141 |
| - // The space between the bottom of the input table and the subscript container. Mocks show half of |
142 |
| - // the text size, but this margin is applied to an element with the subscript text font size, so |
143 |
| - // we need to divide by the scale factor to make it half of the original text size. We again need |
144 |
| - // to subtract off the line spacing since the mocks measure to the edge of the text, not the edge |
145 |
| - // of the line. |
| 139 | + // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper. |
| 140 | + // Mocks show half of the text size, but this margin is applied to an element with the subscript |
| 141 | + // text font size, so we need to divide by the scale factor to make it half of the original text |
| 142 | + // size. We again need to subtract off the line spacing since the mocks measure to the edge of the |
| 143 | + // text, not the edge of the line. |
146 | 144 | $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
|
147 |
| - // The padding applied to the input-wrapper to reserve space for the subscript, since it's |
| 145 | + // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's |
148 | 146 | // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
|
149 | 147 | // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
|
150 | 148 | $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
|
151 | 149 |
|
152 |
| - .mat-input-container { |
| 150 | + .mat-form-field { |
153 | 151 | font-family: mat-font-family($config);
|
154 | 152 | font-size: inherit;
|
155 | 153 | font-weight: mat-font-weight($config, input);
|
156 | 154 | line-height: mat-line-height($config, input);
|
157 | 155 | }
|
158 | 156 |
|
159 |
| - .mat-input-wrapper { |
| 157 | + .mat-form-field-wrapper { |
160 | 158 | padding-bottom: $wrapper-padding-bottom;
|
161 | 159 | }
|
162 | 160 |
|
163 |
| - .mat-input-prefix, |
164 |
| - .mat-input-suffix { |
| 161 | + .mat-form-field-prefix, |
| 162 | + .mat-form-field-suffix { |
165 | 163 | // Allow icons in a prefix or suffix to adapt to the correct size.
|
166 | 164 | .mat-icon {
|
167 | 165 | font-size: $prefix-suffix-icon-font-size;
|
|
180 | 178 | }
|
181 | 179 | }
|
182 | 180 |
|
183 |
| - .mat-input-infix { |
| 181 | + .mat-form-field-infix { |
184 | 182 | padding: $infix-padding 0;
|
185 | 183 | // Throws off the baseline if we do it as a real margin, so we do it as a border instead.
|
186 | 184 | border-top: $infix-margin-top solid transparent;
|
187 | 185 | }
|
188 | 186 |
|
189 | 187 | .mat-input-element {
|
190 |
| - &:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float { |
191 |
| - @include _mat-input-placeholder-floating($subscript-font-scale, |
| 188 | + &:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float { |
| 189 | + @include _mat-form-field-placeholder-floating($subscript-font-scale, |
192 | 190 | $infix-padding, $infix-margin-top);
|
193 | 191 | }
|
194 | 192 | }
|
|
199 | 197 | margin-top: -$line-spacing * 1em;
|
200 | 198 | }
|
201 | 199 |
|
202 |
| - .mat-input-placeholder-wrapper { |
| 200 | + .mat-form-field-placeholder-wrapper { |
203 | 201 | top: -$infix-margin-top;
|
204 | 202 | padding-top: $infix-margin-top;
|
205 | 203 | }
|
206 | 204 |
|
207 |
| - .mat-input-placeholder { |
| 205 | + .mat-form-field-placeholder { |
208 | 206 | top: $infix-margin-top + $infix-padding;
|
209 | 207 |
|
210 |
| - // Show the placeholder above the input when it's not empty, or focused. |
211 |
| - &.mat-float:not(.mat-empty), .mat-focused &.mat-float { |
212 |
| - @include _mat-input-placeholder-floating($subscript-font-scale, |
| 208 | + // Show the placeholder above the control when it's not empty, or focused. |
| 209 | + &.mat-form-field-float:not(.mat-form-field-empty), |
| 210 | + .mat-focused &.mat-form-field-float { |
| 211 | + @include _mat-form-field-placeholder-floating($subscript-font-scale, |
213 | 212 | $infix-padding, $infix-margin-top);
|
214 | 213 | }
|
215 | 214 | }
|
216 | 215 |
|
217 |
| - .mat-input-underline { |
| 216 | + .mat-form-field-underline { |
218 | 217 | // We want the underline to start at the end of the content box, not the padding box,
|
219 | 218 | // so we move it up by the padding amount.
|
220 | 219 | bottom: $wrapper-padding-bottom;
|
221 | 220 | }
|
222 | 221 |
|
223 |
| - .mat-input-subscript-wrapper { |
| 222 | + .mat-form-field-subscript-wrapper { |
224 | 223 | font-size: $subscript-font-size;
|
225 | 224 | margin-top: $subscript-margin-top;
|
226 | 225 |
|
|
0 commit comments