OLD | NEW |
| (Empty) |
1 :host { | |
2 display: inline-block; | |
3 outline: none; | |
4 text-align: inherit; | |
5 color: #757575; | |
6 } | |
7 :host(:hover) { | |
8 cursor: text; | |
9 } | |
10 | |
11 #container { | |
12 position: relative; | |
13 } | |
14 | |
15 #inputClone, | |
16 #minInputHeight, | |
17 #maxInputHeight { | |
18 position: absolute; | |
19 top: 0; | |
20 left: 0; | |
21 visibility: hidden; | |
22 padding: 0.5em 0; | |
23 } | |
24 | |
25 :host /deep/ input, | |
26 :host /deep/ textarea { | |
27 font: inherit; | |
28 color: #000; | |
29 padding: 0; | |
30 /* Important to use margin here so the margin remains visible | |
31 * when textarea scrolls internally. */ | |
32 margin: 0.5em 0; | |
33 background-color: transparent; | |
34 border: none; | |
35 outline: none; | |
36 width: 100%; | |
37 } | |
38 | |
39 :host /deep/ input:invalid, | |
40 :host /deep/ textarea:invalid { | |
41 box-shadow: none; | |
42 } | |
43 | |
44 .host /deep/ textarea { | |
45 resize: none; | |
46 } | |
47 | |
48 #floatedLabel { | |
49 font-size: 0.75em; | |
50 background: transparent; | |
51 white-space: nowrap; | |
52 } | |
53 #floatedLabel.hidden { | |
54 visibility: hidden; | |
55 } | |
56 #floatedLabel.focused { | |
57 visibility: visible; | |
58 } | |
59 | |
60 #label { | |
61 position: absolute; | |
62 top: 0; | |
63 left: 0; | |
64 right: 0; | |
65 bottom: 0; | |
66 width: 100%; | |
67 padding: 0.5em 0; | |
68 background: transparent; | |
69 -moz-transform-origin: 0% 0%; | |
70 -webkit-transform-origin: 0% 0%; | |
71 transform-origin: 0% 0%; | |
72 pointer-events: none; | |
73 } | |
74 #label.hidden { | |
75 display: none; | |
76 } | |
77 #label.animating { | |
78 /* TODO: transforms are unprefixed in M36/ Remove when stable. */ | |
79 -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1); | |
80 transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1); | |
81 } | |
82 | |
83 #labelSpan { | |
84 overflow: hidden; | |
85 text-overflow: ellipsis; | |
86 white-space: nowrap; | |
87 display: inline-block; | |
88 max-width: 100%; | |
89 } | |
90 | |
91 #errorContainer { | |
92 visibility: hidden; | |
93 display: -webkit-flex; | |
94 display: flex; | |
95 -webkit-align-items: center; | |
96 align-items: center; | |
97 } | |
98 | |
99 :host(.invalid) #errorContainer { | |
100 visibility: visible; | |
101 } | |
102 | |
103 #error { | |
104 -webkit-flex: 1; | |
105 flex: 1; | |
106 font-size: 0.75em; | |
107 padding: 0.5em 0; | |
108 } | |
109 | |
110 #errorIcon { | |
111 background-image: url(error-100.png); | |
112 background-size: 24px 24px; | |
113 height: 24px; | |
114 width: 24px; | |
115 } | |
116 | |
117 | |
118 @media (min-resolution: 2dppx) { | |
119 #errorIcon { | |
120 background-image: url(error-200.png); | |
121 background-size: 24px 24px; | |
122 } | |
123 } | |
124 | |
125 #underlineContainer { | |
126 position: absolute; | |
127 left: 0; | |
128 right: 0; | |
129 bottom: -1px; | |
130 } | |
131 | |
132 :host([multiline]) #underlineContainer { | |
133 bottom: auto; | |
134 } | |
135 | |
136 :host([multiline]) #underlineContainer.animating { | |
137 -webkit-transition: top 0.2s ease-in; | |
138 transition: top 0.2s ease-in; | |
139 } | |
140 | |
141 #underline { | |
142 height: 1px; | |
143 background: #757575; | |
144 border-bottom-color: #757575; | |
145 } | |
146 | |
147 :host([disabled]) #underline { | |
148 border-bottom: 1px dashed; | |
149 height: 0px; | |
150 background: transparent; | |
151 } | |
152 | |
153 #underlineHighlight { | |
154 position: absolute; | |
155 left: 0; | |
156 right: 0; | |
157 bottom: 0; | |
158 height: 2px; | |
159 -webkit-transform: scale(0,2); | |
160 transform: scale(0,2); | |
161 } | |
162 #underlineHighlight.pressed { | |
163 -webkit-transform: scale(0.1,2); | |
164 transform: scale(0.1,2); | |
165 /* TODO: transforms are unprefixed in M36/ Remove when stable. */ | |
166 -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.2, 0, 0.03, 1); | |
167 transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1); | |
168 } | |
169 #underlineHighlight.animating { | |
170 /* TODO: transforms are unprefixed in M36/ Remove when stable. */ | |
171 -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1); | |
172 transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1); | |
173 } | |
174 #underlineHighlight.focused { | |
175 -webkit-transform: scale(1); | |
176 transform: scale(1); | |
177 } | |
178 | |
179 #caret { | |
180 display: none; | |
181 position: absolute; | |
182 top: 0; | |
183 left: 0; | |
184 right: 0; | |
185 bottom: 0; | |
186 opacity: 0; | |
187 -moz-transform-origin: 0%; | |
188 -webkit-transform-origin-x: 0%; | |
189 transform-origin-x: 0%; | |
190 -webkit-transform: scaleX(1) translateX(10%); | |
191 transform: scaleX(1) translateX(10%); | |
192 } | |
193 #caret.animating { | |
194 display: block; | |
195 /* TODO: transforms are unprefixed in M36/ Remove when stable. */ | |
196 -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out; | |
197 transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1); | |
198 } | |
199 #caret.focused { | |
200 display: block; | |
201 opacity: 0.75; | |
202 -webkit-transform: scaleX(0) translateX(0); | |
203 transform: scaleX(0) translateX(0); | |
204 } | |
205 #caretInner { | |
206 position: absolute; | |
207 top: 0.6em; | |
208 left: 0; | |
209 height: 1.2em; | |
210 width: 25%; | |
211 } | |
OLD | NEW |