third_party/polymer/components/paper-input/demo.html

   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
  25   <style shim-shadowdom>
  26
  27     body {
  28       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  29       font-size: 14px;
  30       margin: 0;
  31       padding: 24px;
  32       -webkit-tap-highlight-color: rgba(0,0,0,0);
  33       -webkit-touch-callout: none;
  34     }
  35
  36     section {
  37       padding: 20px 0;
  38     }
  39
  40     section > div {
  41       padding: 14px;
  42       font-size: 16px;
  43     }
  44
  45     paper-input {
  46       width: 80%;
  47     }
  48
  49     paper-input-decorator {
  50       max-width: 80%;
  51     }
  52
  53     paper-input.narrow {
  54       width: 150px;
  55     }
  56
  57     .custom /deep/ ::-webkit-input-placeholder {
  58       color: #f4b400;
  59     }
  60
  61     .custom /deep/ ::-moz-placeholder {
  62       color: #f4b400;
  63     }
  64
  65     .custom /deep/ :-ms-input-placeholder {
  66       color: #f4b400;
  67     }
  68
  69     .custom /deep/ .label-text,
  70     .custom /deep/ .error {
  71       color: #f4b400;
  72     }
  73
  74     .custom /deep/ .unfocused-underline {
  75       background-color: #f4b400;
  76     }
  77
  78     .custom[focused] /deep/ .floated-label .label-text {
  79       color: #0f9d58;
  80     }
  81
  82     .custom /deep/ .focused-underline {
  83       background-color: #0f9d58;
  84     }
  85
  86     .custom.invalid /deep/ .floated-label .label-text,
  87     .custom /deep/ .error {
  88       color: #f06292;
  89     }
  90
  91     .custom.invalid /deep/ .focused-underline {
  92       background-color: #f06292;
  93     }
  94
  95     .custom {
  96       color: #1a237e;
  97     }
  98
  99   </style>
 100
 101 </head>
 102 <body unresolved>
 103
 104   <section>
 105
 106     <div>Standalone</div>
 107
 108     <br>
 109
 110     <paper-input label="label"></paper-input>
 111
 112     <br>
 113
 114     <paper-input label="floating label" floatingLabel></paper-input>
 115
 116   </section>
 117
 118   <section>
 119
 120     <div>Decorator</div>
 121
 122     <br>
 123
 124     <paper-input-decorator label="with core-input">
 125       <input is="core-input">
 126     </paper-input-decorator>
 127
 128     <br>
 129
 130     <paper-input-decorator label="with core-input + floatingLabel" floatingLabel>
 131       <input is="core-input">
 132     </paper-input-decorator>
 133
 134     <br>
 135
 136     <paper-input-decorator label="with autogrowing text area">
 137       <paper-autogrow-textarea>
 138         <textarea></textarea>
 139       </paper-autogrow-textarea>
 140     </paper-input-decorator>
 141
 142     <br>
 143
 144     <paper-input-decorator label="with autogrowing text area + floatingLabel" floatingLabel>
 145       <paper-autogrow-textarea>
 146         <textarea></textarea>
 147       </paper-autogrow-textarea>
 148     </paper-input-decorator>
 149
 150   </section>
 151
 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 required!">
 159       <input is="core-input" required>
 160     </paper-input-decorator>
 161
 162     <script>
 163       function validateAll() {
 164         var $d = document.getElementById('validate').querySelectorAll('paper-input-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>
 174
 175     <div>Custom styling</div>
 176
 177     <br>
 178
 179     <paper-input class="custom" label="paper-input"></paper-input>
 180
 181     <br>
 182
 183     <paper-input-decorator class="custom" label="decorator">
 184       <input is="core-input">
 185     </paper-input-decorator>
 186
 187   </section>
 188
 189 </body>
 190 </html>