Index: polymer_0.5.0/bower_components/paper-input/demo.html |
diff --git a/polymer_0.5.0/bower_components/paper-input/demo.html b/polymer_0.5.0/bower_components/paper-input/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..21bae3198ca0d02a9e9810c019e7b910efb05044 |
--- /dev/null |
+++ b/polymer_0.5.0/bower_components/paper-input/demo.html |
@@ -0,0 +1,190 @@ |
+<!-- |
+ @license |
+ Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+ Code distributed by Google as part of the polymer project is also |
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+<!doctype html> |
+<html> |
+<head> |
+ |
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
+ |
+ <title>paper-input</title> |
+ |
+ <script src="../webcomponentsjs/webcomponents.js"></script> |
+ |
+ <link href="../font-roboto/roboto.html" rel="import"> |
+ <link href="paper-autogrow-textarea.html" rel="import"> |
+ <link href="paper-input-decorator.html" rel="import"> |
+ <link href="paper-input.html" rel="import"> |
+ |
+ <style shim-shadowdom> |
+ |
+ body { |
+ font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; |
+ font-size: 14px; |
+ margin: 0; |
+ padding: 24px; |
+ -webkit-tap-highlight-color: rgba(0,0,0,0); |
+ -webkit-touch-callout: none; |
+ } |
+ |
+ section { |
+ padding: 20px 0; |
+ } |
+ |
+ section > div { |
+ padding: 14px; |
+ font-size: 16px; |
+ } |
+ |
+ paper-input { |
+ width: 80%; |
+ } |
+ |
+ paper-input-decorator { |
+ max-width: 80%; |
+ } |
+ |
+ paper-input.narrow { |
+ width: 150px; |
+ } |
+ |
+ .custom /deep/ ::-webkit-input-placeholder { |
+ color: #f4b400; |
+ } |
+ |
+ .custom /deep/ ::-moz-placeholder { |
+ color: #f4b400; |
+ } |
+ |
+ .custom /deep/ :-ms-input-placeholder { |
+ color: #f4b400; |
+ } |
+ |
+ .custom /deep/ .label-text, |
+ .custom /deep/ .error { |
+ color: #f4b400; |
+ } |
+ |
+ .custom /deep/ .unfocused-underline { |
+ background-color: #f4b400; |
+ } |
+ |
+ .custom[focused] /deep/ .floated-label .label-text { |
+ color: #0f9d58; |
+ } |
+ |
+ .custom /deep/ .focused-underline { |
+ background-color: #0f9d58; |
+ } |
+ |
+ .custom.invalid /deep/ .floated-label .label-text, |
+ .custom /deep/ .error { |
+ color: #f06292; |
+ } |
+ |
+ .custom.invalid /deep/ .focused-underline { |
+ background-color: #f06292; |
+ } |
+ |
+ .custom { |
+ color: #1a237e; |
+ } |
+ |
+ </style> |
+ |
+</head> |
+<body unresolved> |
+ |
+ <section> |
+ |
+ <div>Standalone</div> |
+ |
+ <br> |
+ |
+ <paper-input label="label"></paper-input> |
+ |
+ <br> |
+ |
+ <paper-input label="floating label" floatingLabel></paper-input> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Decorator</div> |
+ |
+ <br> |
+ |
+ <paper-input-decorator label="with core-input"> |
+ <input is="core-input"> |
+ </paper-input-decorator> |
+ |
+ <br> |
+ |
+ <paper-input-decorator label="with core-input + floatingLabel" floatingLabel> |
+ <input is="core-input"> |
+ </paper-input-decorator> |
+ |
+ <br> |
+ |
+ <paper-input-decorator label="with autogrowing text area"> |
+ <paper-autogrow-textarea> |
+ <textarea></textarea> |
+ </paper-autogrow-textarea> |
+ </paper-input-decorator> |
+ |
+ <br> |
+ |
+ <paper-input-decorator label="with autogrowing text area + floatingLabel" floatingLabel> |
+ <paper-autogrow-textarea> |
+ <textarea></textarea> |
+ </paper-autogrow-textarea> |
+ </paper-input-decorator> |
+ |
+ </section> |
+ |
+ <section id="validate"> |
+ |
+ <div>Validation</div> |
+ |
+ <button onclick="validateAll()">click me to validate all</button> |
+ |
+ <paper-input-decorator label="required" floatingLabel error="input is required!"> |
+ <input is="core-input" required> |
+ </paper-input-decorator> |
+ |
+ <script> |
+ function validateAll() { |
+ var $d = document.getElementById('validate').querySelectorAll('paper-input-decorator'); |
+ Array.prototype.forEach.call($d, function(d) { |
+ d.isInvalid = !d.querySelector('input').validity.valid; |
+ }); |
+ } |
+ </script> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Custom styling</div> |
+ |
+ <br> |
+ |
+ <paper-input class="custom" label="paper-input"></paper-input> |
+ |
+ <br> |
+ |
+ <paper-input-decorator class="custom" label="decorator"> |
+ <input is="core-input"> |
+ </paper-input-decorator> |
+ |
+ </section> |
+ |
+</body> |
+</html> |