1 | @use 'sass:map';
|
2 | @use 'sass:math';
|
3 | @use '../core/theming/theming';
|
4 | @use '../core/typography/typography';
|
5 | @use '../core/typography/typography-utils';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | @mixin fill-color($config-or-theme) {
|
11 | $config: theming.get-color-config($config-or-theme);
|
12 | $foreground: map.get($config, foreground);
|
13 | $is-dark-theme: map.get($config, is-dark);
|
14 |
|
15 | $fill-background:
|
16 | theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.1, 0.04));
|
17 | $fill-disabled-background:
|
18 | theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02));
|
19 | $underline-color:
|
20 | theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.5, 0.42));
|
21 | $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);
|
22 |
|
23 | .mat-form-field-appearance-fill {
|
24 | .mat-form-field-flex {
|
25 | background-color: $fill-background;
|
26 | }
|
27 |
|
28 | &.mat-form-field-disabled .mat-form-field-flex {
|
29 | background-color: $fill-disabled-background;
|
30 | }
|
31 |
|
32 | .mat-form-field-underline::before {
|
33 | background-color: $underline-color;
|
34 | }
|
35 |
|
36 | &.mat-form-field-disabled {
|
37 | .mat-form-field-label {
|
38 | color: $label-disabled-color;
|
39 | }
|
40 |
|
41 | .mat-form-field-underline::before {
|
42 | background-color: transparent;
|
43 | }
|
44 | }
|
45 | }
|
46 | }
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | $fill-dedupe: 0;
|
53 |
|
54 |
|
55 | @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
|
56 | transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)
|
57 | scale($font-scale);
|
58 | width: math.div(100%, $font-scale) + $fill-dedupe;
|
59 |
|
60 | $fill-dedupe: $fill-dedupe + 0.00001 !global;
|
61 | }
|
62 |
|
63 | @mixin fill-typography($config-or-theme) {
|
64 | $config: typography.private-typography-to-2014-config(
|
65 | theming.get-typography-config($config-or-theme));
|
66 |
|
67 | $line-height: typography-utils.line-height($config, input);
|
68 |
|
69 | $subscript-font-scale: 0.75;
|
70 |
|
71 | $infix-padding-top: 0.25em;
|
72 |
|
73 | $infix-padding-bottom: 0.75em;
|
74 |
|
75 | $infix-margin-top:
|
76 | $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);
|
77 |
|
78 | $fill-appearance-label-offset: -0.5em;
|
79 |
|
80 | .mat-form-field-appearance-fill {
|
81 | .mat-form-field-infix {
|
82 | padding: $infix-padding-top 0 $infix-padding-bottom 0;
|
83 | }
|
84 |
|
85 | .mat-form-field-label {
|
86 | top: $infix-margin-top + $infix-padding-top;
|
87 | margin-top: $fill-appearance-label-offset;
|
88 | }
|
89 |
|
90 | &.mat-form-field-can-float {
|
91 | &.mat-form-field-should-float .mat-form-field-label,
|
92 | .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
|
93 | @include _label-floating(
|
94 | $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
|
95 | $infix-margin-top);
|
96 | }
|
97 |
|
98 |
|
99 |
|
100 | .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
|
101 | .mat-form-field-label {
|
102 | @include _label-floating(
|
103 | $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
|
104 | $infix-margin-top);
|
105 | }
|
106 | }
|
107 | }
|
108 | }
|
109 |
|
110 | @mixin private-form-field-fill-density($config-or-theme) {}
|
111 |
|
112 | @mixin fill-theme($theme-or-color-config) {
|
113 | $theme: theming.private-legacy-get-theme($theme-or-color-config);
|
114 | @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {
|
115 | $color: theming.get-color-config($theme);
|
116 | $density: theming.get-density-config($theme);
|
117 | $typography: theming.get-typography-config($theme);
|
118 |
|
119 | @if $color != null {
|
120 | @include fill-color($color);
|
121 | }
|
122 | @if $density != null {
|
123 | @include private-form-field-fill-density($density);
|
124 | }
|
125 | @if $typography != null {
|
126 | @include fill-typography($typography);
|
127 | }
|
128 | }
|
129 | }
|