1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | @use '@material/textfield/mdc-text-field';
|
11 | @use '@material/textfield';
|
12 | @use "@material/mwc-icon/_mwc-icon";
|
13 | @use "@material/floating-label/mdc-floating-label";
|
14 | @use "@material/line-ripple/mdc-line-ripple";
|
15 | @use "@material/notched-outline/mdc-notched-outline";
|
16 | @use "@material/ripple/common";
|
17 | @use '@material/theme/theme';
|
18 | @use '@material/theme/theme-color';
|
19 | @use '@material/shape';
|
20 |
|
21 | .material-icons {
|
22 | @extend %material-icons;
|
23 | }
|
24 |
|
25 | :host {
|
26 | display: inline-flex;
|
27 | flex-direction: column;
|
28 | outline: none;
|
29 | }
|
30 |
|
31 | .mdc-text-field {
|
32 | width: 100%;
|
33 |
|
34 | @include textfield.bottom-line-color(
|
35 | (
|
36 | varname: --mdc-text-field-idle-line-color,
|
37 | fallback: textfield.$bottom-line-idle,
|
38 | )
|
39 | );
|
40 |
|
41 | @include textfield.hover-bottom-line-color(
|
42 | (
|
43 | varname: --mdc-text-field-hover-line-color,
|
44 | fallback: textfield.$bottom-line-hover,
|
45 | )
|
46 | );
|
47 |
|
48 | @include textfield.disabled-bottom-line-color(
|
49 | (
|
50 | varname: --mdc-text-field-disabled-line-color,
|
51 | fallback: textfield.$disabled-border,
|
52 | )
|
53 | );
|
54 |
|
55 | &.mdc-text-field--invalid {
|
56 | @include textfield.bottom-line-color(textfield.$error);
|
57 | }
|
58 | }
|
59 |
|
60 | .mdc-text-field__input {
|
61 | direction: inherit;
|
62 | }
|
63 |
|
64 | mwc-notched-outline {
|
65 | --mdc-notched-outline-border-color: var(
|
66 | --mdc-text-field-outlined-idle-border-color,
|
67 | #{textfield.$outlined-idle-border}
|
68 | );
|
69 | }
|
70 |
|
71 | :host(:not([disabled]):hover)
|
72 | :not(.mdc-text-field--invalid):not(.mdc-text-field--focused)
|
73 | mwc-notched-outline {
|
74 | --mdc-notched-outline-border-color: var(
|
75 | --mdc-text-field-outlined-hover-border-color,
|
76 | #{textfield.$outlined-hover-border}
|
77 | );
|
78 | }
|
79 |
|
80 | :host(:not([disabled])) {
|
81 | .mdc-text-field {
|
82 | &:not(.mdc-text-field--outlined) {
|
83 | background-color: var(
|
84 | --mdc-text-field-fill-color,
|
85 | #{textfield.$background}
|
86 | );
|
87 | }
|
88 |
|
89 | &.mdc-text-field--invalid {
|
90 | mwc-notched-outline {
|
91 | --mdc-notched-outline-border-color: var(
|
92 | --mdc-text-field-error-color,
|
93 | var(--mdc-theme-error, #{theme-color.$error})
|
94 | );
|
95 | }
|
96 |
|
97 | & + .mdc-text-field-helper-line .mdc-text-field-character-counter,
|
98 | .mdc-text-field__icon {
|
99 | color: var(
|
100 | --mdc-text-field-error-color,
|
101 | var(--mdc-theme-error, #{theme-color.$error})
|
102 | );
|
103 | }
|
104 | }
|
105 |
|
106 | &:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) {
|
107 | .mdc-floating-label,
|
108 | .mdc-floating-label::after {
|
109 | color: var(--mdc-text-field-label-ink-color, #{textfield.$label});
|
110 | }
|
111 | }
|
112 |
|
113 | &.mdc-text-field--focused {
|
114 | mwc-notched-outline {
|
115 | --mdc-notched-outline-stroke-width: 2px;
|
116 | }
|
117 |
|
118 | &:not(.mdc-text-field--invalid) {
|
119 | mwc-notched-outline {
|
120 | --mdc-notched-outline-border-color: var(
|
121 | --mdc-text-field-focused-label-color,
|
122 | var(--mdc-theme-primary, #{textfield.$focused-label-color})
|
123 | );
|
124 | }
|
125 |
|
126 | .mdc-floating-label {
|
127 | @include theme.property(color, primary);
|
128 | }
|
129 | }
|
130 | }
|
131 |
|
132 | .mdc-text-field__input {
|
133 | color: var(--mdc-text-field-ink-color, #{textfield.$ink-color});
|
134 | }
|
135 |
|
136 | .mdc-text-field__input::placeholder {
|
137 | color: var(--mdc-text-field-label-ink-color, #{textfield.$label});
|
138 | }
|
139 | }
|
140 |
|
141 | .mdc-text-field-helper-line {
|
142 | .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg),
|
143 | &:not(.mdc-text-field--invalid) .mdc-text-field-character-counter {
|
144 | color: var(--mdc-text-field-label-ink-color, #{textfield.$label});
|
145 | }
|
146 | }
|
147 | }
|
148 |
|
149 | :host([disabled]) {
|
150 | .mdc-text-field {
|
151 | &:not(.mdc-text-field--outlined) {
|
152 | background-color: var(
|
153 | --mdc-text-field-disabled-fill-color,
|
154 | #{textfield.$disabled-background}
|
155 | );
|
156 | }
|
157 |
|
158 | &.mdc-text-field--outlined {
|
159 | mwc-notched-outline {
|
160 | --mdc-notched-outline-border-color: var(
|
161 | --mdc-text-field-outlined-disabled-border-color,
|
162 | #{textfield.$outlined-disabled-border}
|
163 | );
|
164 | }
|
165 | }
|
166 |
|
167 | &:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) {
|
168 | .mdc-floating-label,
|
169 | .mdc-floating-label::after {
|
170 | color: var(
|
171 | --mdc-text-field-disabled-ink-color,
|
172 | #{textfield.$disabled-ink-color}
|
173 | );
|
174 | }
|
175 | }
|
176 |
|
177 | .mdc-text-field__input,
|
178 | .mdc-text-field__input::placeholder {
|
179 | color: var(
|
180 | --mdc-text-field-disabled-ink-color,
|
181 | #{textfield.$disabled-ink-color}
|
182 | );
|
183 | }
|
184 | }
|
185 |
|
186 | .mdc-text-field-helper-line {
|
187 | .mdc-text-field-helper-text,
|
188 | .mdc-text-field-character-counter {
|
189 | color: var(
|
190 | --mdc-text-field-disabled-ink-color,
|
191 | #{textfield.$disabled-ink-color}
|
192 | );
|
193 | }
|
194 | }
|
195 | }
|