blob: b2b1d606d5363862e866452bc9ef16813f86fbc1 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17@import "../variables";
18@import "../mixins";
19
20// The container for the whole component.
21.mdl-textfield {
22 position: relative;
23 font-size: $input-text-font-size;
24 display: inline-block;
25 box-sizing: border-box;
26 width: 300px;
27 max-width: 100%;
28 margin: 0;
29 padding: $input-text-vertical-spacing 0;
30
31 // Align buttons, if used.
32 & .mdl-button {
33 position: absolute;
34 bottom: $input-text-vertical-spacing;
35 }
36}
37
38// Optional class to align right.
39.mdl-textfield--align-right {
40 text-align: right;
41}
42
43// Optional class to display at full width.
44.mdl-textfield--full-width {
45 width: 100%;
46}
47
48// Optional class to make the text field expandable.
49.mdl-textfield--expandable {
50 min-width: $input-text-button-size;
51 width: auto;
52 min-height: $input-text-button-size;
53
54 // Align icon button
55 .mdl-button--icon {
56 top: $input-text-expandable-icon-top;
57 }
58}
59
60// Styling for the input element.
61.mdl-textfield__input {
62 border: none;
63 border-bottom: 1px solid $input-text-bottom-border-color;
64 display: block;
65 font-size: $input-text-font-size;
66 font-family: $performance_font;
67 margin: 0;
68 padding: $input-text-padding 0;
69 width: $input-text-width;
70 background: none;
71 text-align: left;
72 color: inherit;
73
74 &[type="number"] {
75 -moz-appearance: textfield;
76 }
77
78 &[type="number"]::-webkit-inner-spin-button,
79 &[type="number"]::-webkit-outer-spin-button {
80 -webkit-appearance: none;
81 margin: 0;
82 }
83
84 .mdl-textfield.is-focused & {
85 outline: none;
86 }
87
88 .mdl-textfield.is-invalid & {
89 border-color: $input-text-error-color;
90 box-shadow: none;
91 }
92
93 fieldset[disabled] .mdl-textfield &,
94 .mdl-textfield.is-disabled & {
95 background-color: transparent;
96 border-bottom: 1px dotted $input-text-disabled-color;
97 color: $input-text-disabled-text-color;
98 }
99}
100
101.mdl-textfield textarea.mdl-textfield__input {
102 display: block;
103}
104
105// Styling for the label / floating label.
106.mdl-textfield__label {
107 bottom: 0;
108 color: $input-text-label-color;
109 font-size: $input-text-font-size;
110 left: 0;
111 right: 0;
112 pointer-events: none;
113 position: absolute;
114 display: block;
115 top: ($input-text-padding + $input-text-vertical-spacing);
116 width: 100%;
117 overflow: hidden;
118 white-space: nowrap;
119 text-align: left;
120
121 .mdl-textfield.is-dirty &,
122 .mdl-textfield.has-placeholder & {
123 visibility: hidden;
124 }
125
126 // Floating Label
127 .mdl-textfield--floating-label & {
128 @include material-animation-default();
129 }
130
131 .mdl-textfield--floating-label.has-placeholder & {
132 transition: none;
133 }
134
135 fieldset[disabled] .mdl-textfield &,
136 .mdl-textfield.is-disabled.is-disabled & {
137 color: $input-text-disabled-text-color;
138 }
139
140 .mdl-textfield--floating-label.is-focused &,
141 .mdl-textfield--floating-label.is-dirty &,
142 .mdl-textfield--floating-label.has-placeholder & {
143 color: $input-text-highlight-color;
144 font-size : $input-text-floating-label-fontsize;
145 top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
146 visibility: visible;
147 }
148
149 .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder &,
150 .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &,
151 .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder & {
152 top: -($input-text-floating-label-fontsize + $input-text-padding);
153 }
154
155 .mdl-textfield--floating-label.is-invalid & {
156 color: $input-text-error-color;
157 font-size: $input-text-floating-label-fontsize;
158 }
159
160 // The after label is the colored underline for the TextField.
161 &:after {
162 background-color: $input-text-highlight-color;
163 bottom: $input-text-vertical-spacing;
164 content: '';
165 height: 2px;
166 left: 45%;
167 position: absolute;
168 @include material-animation-default();
169 visibility: hidden;
170 width: 10px;
171 }
172
173 .mdl-textfield.is-focused &:after {
174 left: 0;
175 visibility: visible;
176 width: 100%;
177 }
178
179 .mdl-textfield.is-invalid &:after {
180 background-color: $input-text-error-color;
181 }
182}
183
184// TextField Error.
185.mdl-textfield__error {
186 color: $input-text-error-color;
187 position: absolute;
188 font-size: $input-text-floating-label-fontsize;
189 margin-top: 3px;
190 visibility: hidden;
191 display: block;
192
193 .mdl-textfield.is-invalid & {
194 visibility: visible;
195 }
196}
197
198// Expandable Holder.
199.mdl-textfield__expandable-holder {
200 display: inline-block;
201 position: relative;
202 margin-left: $input-text-button-size;
203
204 @include material-animation-default();
205 display: inline-block;
206
207 // Safari (possibly others) need to be convinced that this field is actually
208 // visible, otherwise it cannot be tabbed to nor focused via a <label>.
209 // TODO: In some cases (Retina displays), this is big enough to render the
210 // inner element :(
211 max-width: 0.1px;
212
213 .mdl-textfield.is-focused &, .mdl-textfield.is-dirty & {
214 // This is an unfortunate hack. Animating between widths in percent (%)
215 // in many browsers (Chrome, Firefox) only animates the inner visual style
216 // of the input - the outer bounding box still 'jumps'.
217 // Thus assume a sensible maximum, and animate to/from that value.
218 max-width: 600px;
219 }
220 .mdl-textfield__label:after {
221 bottom: 0;
222 }
223}