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

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

Issue 3010683002: Update Polymer components. (Closed)
Patch Set: Rebase Created 3 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
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 --> 9 -->
10 10
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after
83 `--paper-input-container-color` | Label and underline color when the input is no t focused | `--secondary-text-color` 83 `--paper-input-container-color` | Label and underline color when the input is no t focused | `--secondary-text-color`
84 `--paper-input-container-focus-color` | Label and underline color when the input is focused | `--primary-color` 84 `--paper-input-container-focus-color` | Label and underline color when the input is focused | `--primary-color`
85 `--paper-input-container-invalid-color` | Label and underline color when the inp ut is is invalid | `--error-color` 85 `--paper-input-container-invalid-color` | Label and underline color when the inp ut is is invalid | `--error-color`
86 `--paper-input-container-input-color` | Input foreground color | `--primary-text -color` 86 `--paper-input-container-input-color` | Input foreground color | `--primary-text -color`
87 `--paper-input-container` | Mixin applied to the container | `{}` 87 `--paper-input-container` | Mixin applied to the container | `{}`
88 `--paper-input-container-disabled` | Mixin applied to the container when it's di sabled | `{}` 88 `--paper-input-container-disabled` | Mixin applied to the container when it's di sabled | `{}`
89 `--paper-input-container-label` | Mixin applied to the label | `{}` 89 `--paper-input-container-label` | Mixin applied to the label | `{}`
90 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu t is focused | `{}` 90 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu t is focused | `{}`
91 `--paper-input-container-label-floating` | Mixin applied to the label when float ing | `{}` 91 `--paper-input-container-label-floating` | Mixin applied to the label when float ing | `{}`
92 `--paper-input-container-input` | Mixin applied to the input | `{}` 92 `--paper-input-container-input` | Mixin applied to the input | `{}`
93 `--paper-input-container-input-focus` | Mixin applied to the input when focused | `{}`
94 `--paper-input-container-input-invalid` | Mixin applied to the input when invali d | `{}`
93 `--paper-input-container-input-webkit-spinner` | Mixin applied to the webkit spi nner | `{}` 95 `--paper-input-container-input-webkit-spinner` | Mixin applied to the webkit spi nner | `{}`
96 `--paper-input-container-input-webkit-clear` | Mixin applied to the webkit clear button | `{}`
97 `--paper-input-container-ms-clear` | Mixin applied to the Internet Explorer clea r button | `{}`
94 `--paper-input-container-underline` | Mixin applied to the underline | `{}` 98 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
95 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}` 99 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
96 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh en the input is disabled | `{}` 100 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh en the input is disabled | `{}`
97 `--paper-input-prefix` | Mixin applied to the input prefix | `{}` 101 `--paper-input-prefix` | Mixin applied to the input prefix | `{}`
98 `--paper-input-suffix` | Mixin applied to the input suffix | `{}` 102 `--paper-input-suffix` | Mixin applied to the input suffix | `{}`
99 103
100 This element is `display:block` by default, but you can set the `inline` attribu te to make it 104 This element is `display:block` by default, but you can set the `inline` attribu te to make it
101 `display:inline-block`. 105 `display:inline-block`.
102 --> 106 -->
103 107
(...skipping 166 matching lines...) Expand 10 before | Expand all | Expand 10 after
270 border: none; 274 border: none;
271 color: var(--paper-input-container-input-color, --primary-text-color); 275 color: var(--paper-input-container-input-color, --primary-text-color);
272 -webkit-appearance: none; 276 -webkit-appearance: none;
273 text-align: inherit; 277 text-align: inherit;
274 vertical-align: bottom; 278 vertical-align: bottom;
275 279
276 @apply(--paper-font-subhead); 280 @apply(--paper-font-subhead);
277 @apply(--paper-input-container-input); 281 @apply(--paper-input-container-input);
278 } 282 }
279 283
284 .input-content.focused ::content input,
285 .input-content.focused ::content textarea,
286 .input-content.focused ::content iron-autogrow-textarea,
287 .input-content.focused ::content .paper-input-input {
288 @apply(--paper-input-container-input-focus);
289 }
290
291 .input-content.is-invalid ::content input,
292 .input-content.is-invalid ::content textarea,
293 .input-content.is-invalid ::content iron-autogrow-textarea,
294 .input-content.is-invalid ::content .paper-input-input {
295 @apply(--paper-input-container-input-invalid);
296 }
297
280 .input-content ::content input::-webkit-outer-spin-button, 298 .input-content ::content input::-webkit-outer-spin-button,
281 .input-content ::content input::-webkit-inner-spin-button { 299 .input-content ::content input::-webkit-inner-spin-button {
282 @apply(--paper-input-container-input-webkit-spinner); 300 @apply(--paper-input-container-input-webkit-spinner);
283 } 301 }
284 302
285 ::content [prefix] { 303 ::content [prefix] {
286 @apply(--paper-font-subhead); 304 @apply(--paper-font-subhead);
287 305
288 @apply(--paper-input-prefix); 306 @apply(--paper-input-prefix);
289 @apply(--layout-flex-none); 307 @apply(--layout-flex-none);
(...skipping 297 matching lines...) Expand 10 before | Expand all | Expand 10 after
587 if (invalid) { 605 if (invalid) {
588 cls += ' is-invalid'; 606 cls += ' is-invalid';
589 } else if (focused) { 607 } else if (focused) {
590 cls += " label-is-highlighted"; 608 cls += " label-is-highlighted";
591 } 609 }
592 } else { 610 } else {
593 // When the label is not floating, it should overlap the input element . 611 // When the label is not floating, it should overlap the input element .
594 if (label) { 612 if (label) {
595 this.$.labelAndInputContainer.style.position = 'relative'; 613 this.$.labelAndInputContainer.style.position = 'relative';
596 } 614 }
615 if (invalid) {
616 cls += ' is-invalid';
617 }
597 } 618 }
598 } else { 619 } else {
599 if (_inputHasContent) { 620 if (_inputHasContent) {
600 cls += ' label-is-hidden'; 621 cls += ' label-is-hidden';
601 } 622 }
623 if (invalid) {
624 cls += ' is-invalid';
625 }
626 }
627 if (focused) {
628 cls += ' focused';
602 } 629 }
603 return cls; 630 return cls;
604 }, 631 },
605 632
606 _computeUnderlineClass: function(focused, invalid) { 633 _computeUnderlineClass: function(focused, invalid) {
607 var cls = 'underline'; 634 var cls = 'underline';
608 if (invalid) { 635 if (invalid) {
609 cls += ' is-invalid'; 636 cls += ' is-invalid';
610 } else if (focused) { 637 } else if (focused) {
611 cls += ' is-highlighted' 638 cls += ' is-highlighted'
612 } 639 }
613 return cls; 640 return cls;
614 }, 641 },
615 642
616 _computeAddOnContentClass: function(focused, invalid) { 643 _computeAddOnContentClass: function(focused, invalid) {
617 var cls = 'add-on-content'; 644 var cls = 'add-on-content';
618 if (invalid) { 645 if (invalid) {
619 cls += ' is-invalid'; 646 cls += ' is-invalid';
620 } else if (focused) { 647 } else if (focused) {
621 cls += ' is-highlighted' 648 cls += ' is-highlighted'
622 } 649 }
623 return cls; 650 return cls;
624 } 651 }
625 }); 652 });
626 </script> 653 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698