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