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

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

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-styles/paper-styles.html"> 12 <link rel="import" href="../paper-styles/paper-styles.html">
13 <link rel="import" href="paper-input-addon-behavior.html">
13 14
14 <!-- 15 <!--
15 `<paper-input-error>` is an error message for use with `<paper-input-container>` . 16 `<paper-input-error>` is an error message for use with `<paper-input-container>` . The error is
17 displayed when the `<paper-input-container>` is `invalid`.
18
19 <paper-input-container>
20 <input is="iron-input" pattern="[0-9]*">
21 <paper-input-error>Only numbers are allowed!</paper-input-error>
22 </paper-input-container>
23
24 ### Styling
25
26 The following custom properties and mixins are available for styling:
27
28 Custom property | Description | Default
29 ----------------|-------------|----------
30 `--paper-input-container-invalid-color` | The foreground color of the error | `- -google-red-500`
31 `--paper-input-error` | Mixin applied to the error | `{ }`
16 --> 32 -->
17 <dom-module id="paper-input-error"> 33 <dom-module id="paper-input-error">
18 34
19 <style> 35 <style>
20 36
21 :host { 37 :host {
22 /* need to use display: none for role="alert" */ 38 /* need to use display: none for role="alert" */
23 display: none; 39 display: none;
24 float: left; 40 float: left;
25 41
26 color: var(--paper-input-container-invalid-color); 42 color: var(--paper-input-container-invalid-color, --google-red-500);
27 43
28 mixin(--paper-input-container-add-on); 44 @apply(--paper-font-caption);
29 mixin(--paper-input-container-add-on-font); 45 @apply(--paper-input-error);
30
31 mixin(--paper-input-error);
32 } 46 }
33 47
34 :host([invalid]) { 48 :host([invalid]) {
35 display: inline-block; 49 display: inline-block;
36 }; 50 };
37 51
38 </style> 52 </style>
39 53
40 <template> 54 <template>
41 55
42 <content></content> 56 <content></content>
43 57
44 </template> 58 </template>
45 59
46 </dom-module> 60 </dom-module>
47 61
48 <script> 62 <script>
49 63
50 (function() { 64 (function() {
51 65
52 Polymer({ 66 Polymer({
53 67
54 is: 'paper-input-error', 68 is: 'paper-input-error',
55 69
56 enableCustomStyleProperties: true, 70 behaviors: [
71 Polymer.PaperInputAddonBehavior
72 ],
57 73
58 hostAttributes: { 74 hostAttributes: {
59 'add-on': '',
60 'role': 'alert' 75 'role': 'alert'
61 }, 76 },
62 77
63 properties: { 78 properties: {
64 79
65 /** 80 /**
66 * Set to true to show the error. 81 * True if the error is showing.
67 */ 82 */
68 invalid: { 83 invalid: {
84 readOnly: true,
69 reflectToAttribute: true, 85 reflectToAttribute: true,
70 type: Boolean 86 type: Boolean
71 } 87 }
72 88
73 }, 89 },
74 90
75 attached: function() { 91 update: function(state) {
76 this.fire('addon-attached'); 92 this._setInvalid(state.invalid);
77 } 93 }
78 94
79 }) 95 })
80 96
81 })(); 97 })();
82 98
83 </script> 99 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698