Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html

Issue 1336623003: [MD settings] updating polymer to 1.1.13 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: changed Polymer.IronCheckedElementBehavior name Created 5 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-input/paper-input-char-counter-extracted.js ('k') | third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><html><head><link rel="import" href="../polymer/polymer.html"> 9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../paper-styles/paper-styles.html"> 10 <link rel="import" href="../paper-styles/paper-styles.html">
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
80 `--paper-input-container-prefix` | Mixin applied to the input prefix | `{}` 80 `--paper-input-container-prefix` | Mixin applied to the input prefix | `{}`
81 `--paper-input-container-suffix` | Mixin applied to the input suffix | `{}` 81 `--paper-input-container-suffix` | Mixin applied to the input suffix | `{}`
82 `--paper-input-container-underline` | Mixin applied to the underline | `{}` 82 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
83 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}` 83 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}`
84 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh en the input is disabled | `{}` 84 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh en the input is disabled | `{}`
85 85
86 This element is `display:block` by default, but you can set the `inline` attribu te to make it 86 This element is `display:block` by default, but you can set the `inline` attribu te to make it
87 `display:inline-block`. 87 `display:inline-block`.
88 --> 88 -->
89 </head><body><dom-module id="paper-input-container"> 89 </head><body><dom-module id="paper-input-container">
90 <template>
90 91
91 <style> 92 <style>
93 :host {
94 display: block;
95 padding: 8px 0;
92 96
93 :host { 97 @apply(--paper-input-container);
94 display: block; 98 }
95 padding: 8px 0;
96 99
97 @apply(--paper-input-container); 100 :host[inline] {
98 } 101 display: inline-block;
102 }
99 103
100 :host[inline] { 104 :host([disabled]) {
101 display: inline-block; 105 pointer-events: none;
102 } 106 opacity: 0.33;
103 107
104 :host([disabled]) { 108 @apply(--paper-input-container-disabled);
105 pointer-events: none; 109 }
106 opacity: 0.33;
107 110
108 @apply(--paper-input-container-disabled); 111 .floated-label-placeholder {
109 } 112 @apply(--paper-font-caption);
113 }
110 114
111 .floated-label-placeholder { 115 .underline {
112 @apply(--paper-font-caption); 116 position: relative;
113 } 117 }
114 118
115 .underline { 119 .focused-line {
116 position: relative; 120 height: 2px;
117 }
118 121
119 .focused-line { 122 -webkit-transform-origin: center center;
120 height: 2px; 123 transform-origin: center center;
124 -webkit-transform: scale3d(0,1,1);
125 transform: scale3d(0,1,1);
121 126
122 -webkit-transform-origin: center center; 127 background: var(--paper-input-container-focus-color, --default-primary-c olor);
123 transform-origin: center center;
124 -webkit-transform: scale3d(0,1,1);
125 transform: scale3d(0,1,1);
126 128
127 background: var(--paper-input-container-focus-color, --default-primary-col or); 129 @apply(--paper-input-container-underline-focus);
130 }
128 131
129 @apply(--paper-input-container-underline-focus); 132 .underline.is-highlighted .focused-line {
130 } 133 -webkit-transform: none;
134 transform: none;
135 -webkit-transition: -webkit-transform 0.25s;
136 transition: transform 0.25s;
131 137
132 .underline.is-highlighted .focused-line { 138 @apply(--paper-transition-easing);
133 -webkit-transform: none; 139 }
134 transform: none;
135 -webkit-transition: -webkit-transform 0.25s;
136 transition: transform 0.25s;
137 140
138 @apply(--paper-transition-easing); 141 .underline.is-invalid .focused-line {
139 } 142 background: var(--paper-input-container-invalid-color, --google-red-500) ;
140 143
141 .underline.is-invalid .focused-line { 144 -webkit-transform: none;
142 background: var(--paper-input-container-invalid-color, --google-red-500); 145 transform: none;
146 -webkit-transition: -webkit-transform 0.25s;
147 transition: transform 0.25s;
143 148
144 -webkit-transform: none; 149 @apply(--paper-transition-easing);
145 transform: none; 150 }
146 -webkit-transition: -webkit-transform 0.25s;
147 transition: transform 0.25s;
148 151
149 @apply(--paper-transition-easing); 152 .unfocused-line {
150 } 153 height: 1px;
154 background: var(--paper-input-container-color, --secondary-text-color);
151 155
152 .unfocused-line { 156 @apply(--paper-input-container-underline);
153 height: 1px; 157 }
154 background: var(--paper-input-container-color, --secondary-text-color);
155 158
156 @apply(--paper-input-container-underline); 159 :host([disabled]) .unfocused-line {
157 } 160 border-bottom: 1px dashed;
161 border-color: var(--paper-input-container-color, --secondary-text-color) ;
162 background: transparent;
158 163
159 :host([disabled]) .unfocused-line { 164 @apply(--paper-input-container-underline-disabled);
160 border-bottom: 1px dashed; 165 }
161 border-color: var(--paper-input-container-color, --secondary-text-color);
162 background: transparent;
163 166
164 @apply(--paper-input-container-underline-disabled); 167 .label-and-input-container {
165 } 168 @apply(--layout-flex);
169 @apply(--layout-relative);
170 }
166 171
167 .label-and-input-container { 172 .input-content {
168 @apply(--layout-flex); 173 position: relative;
169 @apply(--layout-relative); 174 @apply(--layout-horizontal);
170 } 175 @apply(--layout-end);
176 }
171 177
172 .input-content { 178 .input-content ::content label,
173 position: relative; 179 .input-content ::content .paper-input-label {
174 @apply(--layout-horizontal); 180 position: absolute;
175 @apply(--layout-end); 181 top: 0;
176 } 182 right: 0;
183 left: 0;
184 font: inherit;
185 color: var(--paper-input-container-color, --secondary-text-color);
177 186
178 .input-content ::content label, 187 @apply(--paper-font-subhead);
179 .input-content ::content .paper-input-label { 188 @apply(--paper-input-container-label);
180 position: absolute; 189 }
181 top: 0;
182 right: 0;
183 left: 0;
184 font: inherit;
185 color: var(--paper-input-container-color, --secondary-text-color);
186 190
187 @apply(--paper-font-subhead); 191 .input-content.label-is-floating ::content label,
188 @apply(--paper-input-container-label); 192 .input-content.label-is-floating ::content .paper-input-label {
189 } 193 -webkit-transform: translate3d(0, -75%, 0) scale(0.75);
194 transform: translate3d(0, -75%, 0) scale(0.75);
195 -webkit-transform-origin: left top;
196 transform-origin: left top;
197 -webkit-transition: -webkit-transform 0.25s;
198 transition: transform 0.25s;
190 199
191 .input-content.label-is-floating ::content label, 200 @apply(--paper-transition-easing);
192 .input-content.label-is-floating ::content .paper-input-label { 201 }
193 -webkit-transform: translate3d(0, -75%, 0) scale(0.75);
194 transform: translate3d(0, -75%, 0) scale(0.75);
195 -webkit-transform-origin: left top;
196 transform-origin: left top;
197 -webkit-transition: -webkit-transform 0.25s;
198 transition: transform 0.25s;
199 202
200 @apply(--paper-transition-easing); 203 .input-content.label-is-highlighted ::content label,
201 } 204 .input-content.label-is-highlighted ::content .paper-input-label {
205 color: var(--paper-input-container-focus-color, --default-primary-color) ;
202 206
203 .input-content.label-is-highlighted ::content label, 207 @apply(--paper-input-container-label-focus);
204 .input-content.label-is-highlighted ::content .paper-input-label { 208 }
205 color: var(--paper-input-container-focus-color, --default-primary-color);
206 209
207 @apply(--paper-input-container-label-focus); 210 .input-content.is-invalid ::content label,
208 } 211 .input-content.is-invalid ::content .paper-input-label {
212 color: var(--paper-input-container-invalid-color, --google-red-500);
213 }
209 214
210 .input-content.is-invalid ::content label, 215 .input-content.label-is-hidden ::content label,
211 .input-content.is-invalid ::content .paper-input-label { 216 .input-content.label-is-hidden ::content .paper-input-label {
212 color: var(--paper-input-container-invalid-color, --google-red-500); 217 visibility: hidden;
213 } 218 }
214 219
215 .input-content.label-is-hidden ::content label, 220 .input-content ::content input,
216 .input-content.label-is-hidden ::content .paper-input-label { 221 .input-content ::content textarea,
217 visibility: hidden; 222 .input-content ::content iron-autogrow-textarea,
218 } 223 .input-content ::content .paper-input-input {
224 position: relative; /* to make a stacking context */
225 outline: none;
226 box-shadow: none;
227 padding: 0;
228 width: 100%;
229 background: transparent;
230 border: none;
231 color: var(--paper-input-container-input-color, --primary-text-color);
219 232
220 .input-content ::content input, 233 @apply(--paper-font-subhead);
221 .input-content ::content textarea, 234 @apply(--paper-input-container-input);
222 .input-content ::content iron-autogrow-textarea, 235 }
223 .input-content ::content .paper-input-input {
224 position: relative; /* to make a stacking context */
225 outline: none;
226 box-shadow: none;
227 padding: 0;
228 width: 100%;
229 background: transparent;
230 border: none;
231 color: var(--paper-input-container-input-color, --primary-text-color);
232 236
233 @apply(--paper-font-subhead); 237 ::content [prefix] {
234 @apply(--paper-input-container-input); 238 @apply(--paper-font-subhead);
235 } 239 @apply(--paper-input-prefix);
240 }
236 241
237 ::content [prefix] { 242 ::content [suffix] {
238 @apply(--paper-font-subhead); 243 @apply(--paper-font-subhead);
239 @apply(--paper-input-prefix); 244 @apply(--paper-input-suffix);
240 } 245 }
241 246
242 ::content [suffix] { 247 /* Firefox sets a min-width on the input, which can cause layout issues */
243 @apply(--paper-font-subhead); 248 .input-content ::content input {
244 @apply(--paper-input-suffix); 249 min-width: 0;
245 } 250 }
246 251
247 /* Firefox sets a min-width on the input, which can cause layout issues */ 252 .input-content ::content textarea {
248 .input-content ::content input { 253 resize: none;
249 min-width: 0; 254 }
250 }
251 255
252 .input-content ::content textarea { 256 .add-on-content.is-invalid ::content * {
253 resize: none; 257 color: var(--paper-input-container-invalid-color, --google-red-500);
254 } 258 }
255 259
256 .add-on-content.is-invalid ::content * { 260 .add-on-content.is-highlighted ::content * {
257 color: var(--paper-input-container-invalid-color, --google-red-500); 261 color: var(--paper-input-container-focus-color, --default-primary-color) ;
258 } 262 }
259 263 </style>
260 .add-on-content.is-highlighted ::content * {
261 color: var(--paper-input-container-focus-color, --default-primary-color);
262 }
263
264 </style>
265
266 <template>
267 264
268 <template is="dom-if" if="[[!noLabelFloat]]"> 265 <template is="dom-if" if="[[!noLabelFloat]]">
269 <div class="floated-label-placeholder">&nbsp;</div> 266 <div class="floated-label-placeholder">&nbsp;</div>
270 </template> 267 </template>
271 268
272 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus ed,invalid,_inputHasContent)]]"> 269 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus ed,invalid,_inputHasContent)]]">
273 <content select="[prefix]" id="prefix"></content> 270 <content select="[prefix]" id="prefix"></content>
274 <div class="label-and-input-container"> 271 <div class="label-and-input-container">
275 <content select=":not([add-on]):not([prefix]):not([suffix])"></content> 272 <content select=":not([add-on]):not([prefix]):not([suffix])"></content>
276 </div> 273 </div>
277 <content select="[suffix]"></content> 274 <content select="[suffix]"></content>
278 </div> 275 </div>
279 276
280 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> 277 <div class$="[[_computeUnderlineClass(focused,invalid)]]">
281 <div class="unfocused-line fit"></div> 278 <div class="unfocused-line fit"></div>
282 <div class="focused-line fit"></div> 279 <div class="focused-line fit"></div>
283 </div> 280 </div>
284 281
285 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> 282 <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
286 <content id="addOnContent" select="[add-on]"></content> 283 <content id="addOnContent" select="[add-on]"></content>
287 </div> 284 </div>
288 285
289 </template> 286 </template>
290
291 </dom-module> 287 </dom-module>
292 288
293 <script src="paper-input-container-extracted.js"></script></body></html> 289 <script src="paper-input-container-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-input/paper-input-char-counter-extracted.js ('k') | third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698