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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_0.5.4/bower_components/paper-input/demo.html

Issue 895523005: Added Polymer 0.5.4 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 10 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 | « polymer_0.5.4/bower_components/paper-input/bower.json ('k') | polymer_0.5.4/bower_components/paper-input/index.html » ('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) 2014 The Polymer Project Authors. All rights reserved. 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://polym er.github.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polym er.github.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/CO NTRIBUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CO NTRIBUTORS.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/P ATENTS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.txt
9 --> 9 -->
10 <!doctype html> 10 <!doctype html>
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 } 43 }
44 44
45 paper-input { 45 paper-input {
46 width: 80%; 46 width: 80%;
47 } 47 }
48 48
49 paper-input-decorator { 49 paper-input-decorator {
50 max-width: 80%; 50 max-width: 80%;
51 } 51 }
52 52
53 @media only screen and (min-width : 320px) {
54 paper-input {
55 width: 100%;
56 }
57
58 paper-input-decorator {
59 max-width: 100%;
60 }
61 }
62
53 paper-input.narrow { 63 paper-input.narrow {
54 width: 150px; 64 width: 150px;
55 } 65 }
56 66
57 .custom /deep/ ::-webkit-input-placeholder { 67 .custom /deep/ ::-webkit-input-placeholder {
58 color: #f4b400; 68 color: #f4b400;
59 } 69 }
60 70
61 .custom /deep/ ::-moz-placeholder { 71 .custom /deep/ ::-moz-placeholder {
62 color: #f4b400; 72 color: #f4b400;
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
106 <div>Standalone</div> 116 <div>Standalone</div>
107 117
108 <br> 118 <br>
109 119
110 <paper-input label="label"></paper-input> 120 <paper-input label="label"></paper-input>
111 121
112 <br> 122 <br>
113 123
114 <paper-input label="floating label" floatingLabel></paper-input> 124 <paper-input label="floating label" floatingLabel></paper-input>
115 125
126 <br>
127
128 <paper-input label="disabled" disabled></paper-input>
129
116 </section> 130 </section>
117 131
118 <section> 132 <section>
119 133
120 <div>Decorator</div> 134 <div>Decorator</div>
121 135
122 <br> 136 <br>
123 137
124 <paper-input-decorator label="with core-input"> 138 <paper-input-decorator label="with core-input">
125 <input is="core-input"> 139 <input is="core-input">
(...skipping 16 matching lines...) Expand all
142 <br> 156 <br>
143 157
144 <paper-input-decorator label="with autogrowing text area + floatingLabel" fl oatingLabel> 158 <paper-input-decorator label="with autogrowing text area + floatingLabel" fl oatingLabel>
145 <paper-autogrow-textarea> 159 <paper-autogrow-textarea>
146 <textarea></textarea> 160 <textarea></textarea>
147 </paper-autogrow-textarea> 161 </paper-autogrow-textarea>
148 </paper-input-decorator> 162 </paper-input-decorator>
149 163
150 </section> 164 </section>
151 165
152 <section id="validate">
153
154 <div>Validation</div>
155
156 <button onclick="validateAll()">click me to validate all</button>
157
158 <paper-input-decorator label="required" floatingLabel error="input is requir ed!">
159 <input is="core-input" required>
160 </paper-input-decorator>
161
162 <script>
163 function validateAll() {
164 var $d = document.getElementById('validate').querySelectorAll('paper-inp ut-decorator');
165 Array.prototype.forEach.call($d, function(d) {
166 d.isInvalid = !d.querySelector('input').validity.valid;
167 });
168 }
169 </script>
170
171 </section>
172
173 <section> 166 <section>
167
168 <div>Auto-Validation</div>
169
170 <paper-input-decorator label="required" floatingLabel error="input is requir ed!" autoValidate>
171 <input is="core-input" required>
172 </paper-input-decorator>
173
174 </section>
175
176 <section>
174 177
175 <div>Custom styling</div> 178 <div>Custom styling</div>
176 179
177 <br> 180 <br>
178 181
179 <paper-input class="custom" label="paper-input"></paper-input> 182 <paper-input class="custom" label="paper-input"></paper-input>
180 183
181 <br> 184 <br>
182 185
183 <paper-input-decorator class="custom" label="decorator"> 186 <paper-input-decorator class="custom" label="decorator">
184 <input is="core-input"> 187 <input is="core-input">
185 </paper-input-decorator> 188 </paper-input-decorator>
186 189
187 </section> 190 </section>
188 191
192 <script>
193
194 document.body.addEventListener('change', function(e) {
195 console.log('change', e.target);
196 });
197
198 </script>
199
189 </body> 200 </body>
190 </html> 201 </html>
OLDNEW
« no previous file with comments | « polymer_0.5.4/bower_components/paper-input/bower.json ('k') | polymer_0.5.4/bower_components/paper-input/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698