|
9 | 9 | --> |
10 | 10 |
|
11 | 11 | <link rel="import" href="../polymer/polymer.html"> |
| 12 | +<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
12 | 13 | <link rel="import" href="../paper-styles/color.html"> |
13 | | -<link rel="import" href="../paper-styles/typography.html"> |
14 | 14 | <link rel="import" href="../paper-styles/default-theme.html"> |
15 | | -<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| 15 | +<link rel="import" href="../paper-styles/typography.html"> |
16 | 16 |
|
17 | 17 | <!-- |
18 | 18 | `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or |
|
92 | 92 | This element is `display:block` by default, but you can set the `inline` attribute to make it |
93 | 93 | `display:inline-block`. |
94 | 94 | --> |
| 95 | + |
95 | 96 | <dom-module id="paper-input-container"> |
96 | 97 | <template> |
97 | | - |
98 | 98 | <style> |
99 | 99 | :host { |
100 | 100 | display: block; |
|
123 | 123 | } |
124 | 124 |
|
125 | 125 | .focused-line { |
126 | | - height: 2px; |
127 | 126 | @apply(--layout-fit); |
128 | 127 |
|
| 128 | + background: var(--paper-input-container-focus-color, --default-primary-color); |
| 129 | + height: 2px; |
129 | 130 | -webkit-transform-origin: center center; |
130 | 131 | transform-origin: center center; |
131 | 132 | -webkit-transform: scale3d(0,1,1); |
132 | 133 | transform: scale3d(0,1,1); |
133 | 134 |
|
134 | | - background: var(--paper-input-container-focus-color, --default-primary-color); |
135 | | - |
136 | 135 | @apply(--paper-input-container-underline-focus); |
137 | 136 | } |
138 | 137 |
|
|
147 | 146 |
|
148 | 147 | .underline.is-invalid .focused-line { |
149 | 148 | background: var(--paper-input-container-invalid-color, --google-red-500); |
150 | | - |
151 | 149 | -webkit-transform: none; |
152 | 150 | transform: none; |
153 | 151 | -webkit-transition: -webkit-transform 0.25s; |
|
157 | 155 | } |
158 | 156 |
|
159 | 157 | .unfocused-line { |
160 | | - height: 1px; |
161 | 158 | @apply(--layout-fit); |
| 159 | + |
| 160 | + height: 1px; |
162 | 161 | background: var(--paper-input-container-color, --secondary-text-color); |
163 | 162 |
|
164 | 163 | @apply(--paper-input-container-underline); |
|
178 | 177 | } |
179 | 178 |
|
180 | 179 | .input-content { |
181 | | - position: relative; |
182 | 180 | @apply(--layout-horizontal); |
183 | 181 | @apply(--layout-center); |
| 182 | + |
| 183 | + position: relative; |
184 | 184 | } |
185 | 185 |
|
186 | 186 | .input-content ::content label, |
|
203 | 203 | transform: translateY(-75%) scale(0.75); |
204 | 204 | -webkit-transition: -webkit-transform 0.25s; |
205 | 205 | transition: transform 0.25s; |
206 | | - |
207 | 206 | -webkit-transform-origin: left top; |
208 | 207 | transform-origin: left top; |
209 | 208 |
|
|
303 | 302 | <div class="label-and-input-container" id="labelAndInputContainer"> |
304 | 303 | <content select=":not([add-on]):not([prefix]):not([suffix])"></content> |
305 | 304 | </div> |
| 305 | + |
306 | 306 | <content select="[suffix]"></content> |
307 | 307 | </div> |
308 | 308 |
|
|
314 | 314 | <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> |
315 | 315 | <content id="addOnContent" select="[add-on]"></content> |
316 | 316 | </div> |
317 | | - |
318 | 317 | </template> |
319 | 318 | </dom-module> |
320 | 319 |
|
|
0 commit comments