1 <!-- 2 @license 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.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/CONTRIBUTORS.txt 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/PATENTS.txt 9 --> 10 <!doctype html> 11 <html> 12 <head> 13 14 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 15 16 <title>paper-input</title> 17 18 <script src="../webcomponentsjs/webcomponents.js"></script> 19 20 <link href="../font-roboto/roboto.html" rel="import"> 21 <link href="paper-autogrow-textarea.html" rel="import"> 22 <link href="paper-input-decorator.html" rel="import"> 23 <link href="paper-input.html" rel="import"> 24 <link href="paper-char-counter.html" rel="import"> 25 26 <style shim-shadowdom> 27 28 body { 29 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 30 font-size: 14px; 31 margin: 0; 32 padding: 24px; 33 -webkit-tap-highlight-color: rgba(0,0,0,0); 34 -webkit-touch-callout: none; 35 } 36 37 section { 38 padding: 20px 0; 39 } 40 41 section > div { 42 padding: 14px; 43 font-size: 16px; 44 } 45 46 paper-input { 47 width: 80%; 48 } 49 50 paper-input-decorator { 51 max-width: 80%; 52 } 53 54 @media only screen and (min-width : 320px) { 55 paper-input { 56 width: 100%; 57 } 58 59 paper-input-decorator { 60 max-width: 100%; 61 } 62 } 63 64 paper-input.narrow { 65 width: 150px; 66 } 67 68 .custom /deep/ ::-webkit-input-placeholder { 69 color: #f4b400; 70 } 71 72 .custom /deep/ ::-moz-placeholder { 73 color: #f4b400; 74 } 75 76 .custom /deep/ :-ms-input-placeholder { 77 color: #f4b400; 78 } 79 80 .custom /deep/ .label-text, 81 .custom /deep/ .error { 82 color: #f4b400; 83 } 84 85 .custom /deep/ .unfocused-underline { 86 background-color: #f4b400; 87 } 88 89 .custom[focused] /deep/ .floated-label .label-text { 90 color: #0f9d58; 91 } 92 93 .custom /deep/ .focused-underline { 94 background-color: #0f9d58; 95 } 96 97 .custom.invalid /deep/ .floated-label .label-text, 98 .custom /deep/ .error { 99 color: #f06292; 100 } 101 102 .custom.invalid /deep/ .focused-underline { 103 background-color: #f06292; 104 } 105 106 .custom { 107 color: #1a237e; 108 } 109 110 </style> 111 112 </head> 113 <body unresolved> 114 115 <section> 116 117 <div>Standalone</div> 118 119 <br> 120 121 <paper-input label="label"></paper-input> 122 123 <br> 124 125 <paper-input label="floating label" floatingLabel></paper-input> 126 127 <br> 128 129 <paper-input label="disabled" disabled></paper-input> 130 131 </section> 132 133 <section> 134 135 <div>Decorator</div> 136 137 <br> 138 139 <paper-input-decorator label="with core-input"> 140 <input is="core-input"> 141 </paper-input-decorator> 142 143 <br> 144 145 <paper-input-decorator label="with core-input + floatingLabel" floatingLabel> 146 <input is="core-input"> 147 </paper-input-decorator> 148 149 <br> 150 151 <paper-input-decorator label="with autogrowing text area"> 152 <paper-autogrow-textarea> 153 <textarea></textarea> 154 </paper-autogrow-textarea> 155 </paper-input-decorator> 156 157 <br> 158 159 <paper-input-decorator label="with autogrowing text area + floatingLabel" floatingLabel> 160 <paper-autogrow-textarea> 161 <textarea></textarea> 162 </paper-autogrow-textarea> 163 </paper-input-decorator> 164 165 </section> 166 167 <section> 168 169 <div>Character counter</div> 170 171 <paper-input-decorator label="input with visible character counter"> 172 <input id="i1" is="core-input" maxlength="5"> 173 <paper-char-counter class="counter" target="i1"></paper-char-counter> 174 </paper-input-decorator> 175 176 <br> 177 178 <paper-input-decorator label="input with character counter and custom error" 179 error="maximum characters exceeded"> 180 <input id="i2" is="core-input" maxlength="10"> 181 <paper-char-counter class="counter" target="i2"></paper-char-counter> 182 </paper-input-decorator> 183 184 <br> 185 186 <paper-input-decorator label="input with hidden character counter" 187 error="maximum characters exceeded"> 188 <input id="i3" is="core-input" maxlength="10"> 189 <paper-char-counter class="counter" showCounter="false" target="i3"></paper-char-counter> 190 </paper-input-decorator> 191 192 <paper-input-decorator label="autogrowing text area with character counter"> 193 <paper-autogrow-textarea> 194 <textarea id="t1" maxlength="100"></textarea> 195 </paper-autogrow-textarea> 196 <paper-char-counter class="counter" target="t1"></paper-char-counter> 197 </paper-input-decorator> 198 199 </section> 200 201 <section> 202 203 <div>Auto-Validation</div> 204 205 <paper-input-decorator label="required" floatingLabel error="input is required!" autoValidate> 206 <input is="core-input" required> 207 </paper-input-decorator> 208 209 </section> 210 211 <section> 212 213 <div>Custom styling</div> 214 215 <br> 216 217 <paper-input class="custom" label="paper-input"></paper-input> 218 219 <br> 220 221 <paper-input-decorator class="custom" label="decorator"> 222 <input is="core-input"> 223 </paper-input-decorator> 224 225 </section> 226 227 <script> 228 229 document.body.addEventListener('change', function(e) { 230 console.log('change', e.target); 231 }); 232 233 </script> 234 235 </body> 236 </html> 237
