1 | @use 'sass:map';
|
---|
2 | @use '../core/theming/theming';
|
---|
3 | @use '../core/style/private';
|
---|
4 | @use '../core/style/form-common';
|
---|
5 | @use '../core/typography/typography';
|
---|
6 | @use '../core/typography/typography-utils';
|
---|
7 |
|
---|
8 |
|
---|
9 | // Theme styles that only apply to the legacy appearance of the form-field.
|
---|
10 |
|
---|
11 | @mixin legacy-color($config-or-theme) {
|
---|
12 | $config: theming.get-color-config($config-or-theme);
|
---|
13 | $foreground: map.get($config, foreground);
|
---|
14 | $is-dark-theme: map.get($config, is-dark);
|
---|
15 |
|
---|
16 | $label-color: theming.get-color-from-palette($foreground, secondary-text);
|
---|
17 | $underline-color:
|
---|
18 | theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));
|
---|
19 |
|
---|
20 | .mat-form-field-appearance-legacy {
|
---|
21 | .mat-form-field-label {
|
---|
22 | color: $label-color;
|
---|
23 | }
|
---|
24 |
|
---|
25 | .mat-hint {
|
---|
26 | color: $label-color;
|
---|
27 | }
|
---|
28 |
|
---|
29 | .mat-form-field-underline {
|
---|
30 | background-color: $underline-color;
|
---|
31 | }
|
---|
32 |
|
---|
33 | &.mat-form-field-disabled .mat-form-field-underline {
|
---|
34 | @include form-common.private-control-disabled-underline($underline-color);
|
---|
35 | }
|
---|
36 | }
|
---|
37 | }
|
---|
38 |
|
---|
39 | // Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
|
---|
40 | // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
|
---|
41 | // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
|
---|
42 | // an unknown pseudo-class it will discard the entire rule set.
|
---|
43 | $legacy-dedupe: 0;
|
---|
44 |
|
---|
45 | // Applies a floating label above the form field control itself.
|
---|
46 | @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
|
---|
47 | // We use perspective to fix the text blurriness as described here:
|
---|
48 | // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
|
---|
49 | // This results in a small jitter after the label floats on Firefox, which the
|
---|
50 | // translateZ fixes.
|
---|
51 | transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
|
---|
52 | translateZ(0.001px + $legacy-dedupe);
|
---|
53 | // The tricks above used to smooth out the animation on chrome and firefox actually make things
|
---|
54 | // worse on IE, so we don't include them in the IE version.
|
---|
55 | -ms-transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
|
---|
56 | scale($font-scale);
|
---|
57 |
|
---|
58 | width: private.private-div(100%, $font-scale) + $legacy-dedupe;
|
---|
59 |
|
---|
60 | $legacy-dedupe: $legacy-dedupe + 0.00001 !global;
|
---|
61 | }
|
---|
62 |
|
---|
63 | // Same as mixin above, but omits the translateZ for printing purposes.
|
---|
64 | @mixin _label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
|
---|
65 | // This results in a small jitter after the label floats on Firefox, which the
|
---|
66 | // translateZ fixes.
|
---|
67 | transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
|
---|
68 | scale($font-scale);
|
---|
69 | // The tricks above used to smooth out the animation on chrome and firefox actually make things
|
---|
70 | // worse on IE, so we don't include them in the IE version.
|
---|
71 | $legacy-dedupe: $legacy-dedupe + 0.00001 !global;
|
---|
72 | }
|
---|
73 |
|
---|
74 | @mixin legacy-typography($config-or-theme) {
|
---|
75 | $config: typography.private-typography-to-2014-config(
|
---|
76 | theming.get-typography-config($config-or-theme));
|
---|
77 | // The unit-less line-height from the font config.
|
---|
78 | $line-height: typography-utils.line-height($config, input);
|
---|
79 | // The amount to scale the font for the floating label and subscript.
|
---|
80 | $subscript-font-scale: 0.75;
|
---|
81 | // The amount of space between the top of the line and the top of the actual text
|
---|
82 | // (as a fraction of the font-size).
|
---|
83 | $line-spacing: private.private-div($line-height - 1, 2);
|
---|
84 | // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
|
---|
85 | // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
|
---|
86 | $infix-padding: 0.5em - $line-spacing;
|
---|
87 | // The margin applied to the form-field-infix to reserve space for the floating label.
|
---|
88 | // If the line-height is given as a unitless number, coerce it to `em`.
|
---|
89 | $infix-margin-top:
|
---|
90 | $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);
|
---|
91 | // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
|
---|
92 | // Mocks show half of the text size, but this margin is applied to an element with the subscript
|
---|
93 | // text font size, so we need to divide by the scale factor to make it half of the original text
|
---|
94 | // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
|
---|
95 | // text, not the edge of the line.
|
---|
96 | $subscript-margin-top: private.private-div(0.5em, $subscript-font-scale) - ($line-spacing * 2);
|
---|
97 | // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
|
---|
98 | // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
|
---|
99 | // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
|
---|
100 | $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
|
---|
101 |
|
---|
102 | .mat-form-field-appearance-legacy {
|
---|
103 | .mat-form-field-wrapper {
|
---|
104 | padding-bottom: $wrapper-padding-bottom;
|
---|
105 | }
|
---|
106 |
|
---|
107 | .mat-form-field-infix {
|
---|
108 | padding: $infix-padding 0;
|
---|
109 | }
|
---|
110 |
|
---|
111 | &.mat-form-field-can-float {
|
---|
112 | &.mat-form-field-should-float .mat-form-field-label,
|
---|
113 | .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
|
---|
114 | @include _label-floating(
|
---|
115 | $subscript-font-scale, $infix-padding, $infix-margin-top);
|
---|
116 | }
|
---|
117 |
|
---|
118 | // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
|
---|
119 | .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
|
---|
120 | .mat-form-field-label {
|
---|
121 | @include _label-floating(
|
---|
122 | $subscript-font-scale, $infix-padding, $infix-margin-top);
|
---|
123 | }
|
---|
124 |
|
---|
125 | // Server-side rendered matInput with a label attribute but label not shown
|
---|
126 | // (used as a pure CSS stand-in for mat-form-field-should-float).
|
---|
127 | .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
|
---|
128 | .mat-form-field-label {
|
---|
129 | @include _label-floating(
|
---|
130 | $subscript-font-scale, $infix-padding, $infix-margin-top);
|
---|
131 | }
|
---|
132 | }
|
---|
133 |
|
---|
134 | .mat-form-field-label {
|
---|
135 | top: $infix-margin-top + $infix-padding;
|
---|
136 | }
|
---|
137 |
|
---|
138 | .mat-form-field-underline {
|
---|
139 | // We want the underline to start at the end of the content box, not the padding box,
|
---|
140 | // so we move it up by the padding amount.
|
---|
141 | bottom: $wrapper-padding-bottom;
|
---|
142 | }
|
---|
143 |
|
---|
144 | .mat-form-field-subscript-wrapper {
|
---|
145 | margin-top: $subscript-margin-top;
|
---|
146 |
|
---|
147 | // We want the subscript to start at the end of the content box, not the padding box,
|
---|
148 | // so we move it up by the padding amount (adjusted for the smaller font size);
|
---|
149 | top: calc(100% - #{private.private-div($wrapper-padding-bottom, $subscript-font-scale)});
|
---|
150 | }
|
---|
151 | }
|
---|
152 |
|
---|
153 | // translateZ causes the label to not appear while printing, so we override it to not
|
---|
154 | // apply translateZ while printing
|
---|
155 | @media print {
|
---|
156 | .mat-form-field-appearance-legacy {
|
---|
157 | &.mat-form-field-can-float {
|
---|
158 | &.mat-form-field-should-float .mat-form-field-label,
|
---|
159 | .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
|
---|
160 | @include _label-floating-print(
|
---|
161 | $subscript-font-scale, $infix-padding, $infix-margin-top);
|
---|
162 | }
|
---|
163 |
|
---|
164 | // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
|
---|
165 | .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
|
---|
166 | .mat-form-field-label {
|
---|
167 | @include _label-floating-print(
|
---|
168 | $subscript-font-scale, $infix-padding, $infix-margin-top);
|
---|
169 | }
|
---|
170 |
|
---|
171 | // Server-side rendered matInput with a label attribute but label not shown
|
---|
172 | // (used as a pure CSS stand-in for mat-form-field-should-float).
|
---|
173 | .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
|
---|
174 | .mat-form-field-label {
|
---|
175 | @include _label-floating-print(
|
---|
176 | $subscript-font-scale, $infix-padding, $infix-margin-top);
|
---|
177 | }
|
---|
178 | }
|
---|
179 | }
|
---|
180 | }
|
---|
181 | }
|
---|
182 |
|
---|
183 | @mixin private-form-field-legacy-density($config-or-theme) {}
|
---|
184 |
|
---|
185 | @mixin legacy-theme($theme-or-color-config) {
|
---|
186 | $theme: theming.private-legacy-get-theme($theme-or-color-config);
|
---|
187 | @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
|
---|
188 | $color: theming.get-color-config($theme);
|
---|
189 | $density: theming.get-density-config($theme);
|
---|
190 | $typography: theming.get-typography-config($theme);
|
---|
191 |
|
---|
192 | @if $color != null {
|
---|
193 | @include legacy-color($color);
|
---|
194 | }
|
---|
195 | @if $density != null {
|
---|
196 | @include private-form-field-legacy-density($density);
|
---|
197 | }
|
---|
198 | @if $typography != null {
|
---|
199 | @include legacy-typography($typography);
|
---|
200 | }
|
---|
201 | }
|
---|
202 | }
|
---|