UNPKG

4.81 kBSCSSView Raw
1/**
2 * @license
3 * Copyright 2019 Google LLC
4 * SPDX-License-Identifier: Apache-2.0
5 */
6
7// stylelint-disable selector-class-pattern --
8// Selector '.mdc-*' should only be used in this project.
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
64mwc-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}