Home | History | Annotate | Download | only in paper-input 
      1 <!doctype html>
      2 <html>
      3 <head>
      4   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      5   <title>paper-input</title>
      6   <script src="../platform/platform.js"></script>
      7   <link href="../font-roboto/roboto.html" rel="import">
      8   <link href="paper-input.html" rel="import">
      9   <style>
     10     body {
     11       padding: 0;
     12       margin: 0;
     13       -webkit-transform: translateZ(0);
     14       transform: translateZ(0);
     15     }
     16     section {
     17       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
     18       font-size: 16px;
     19       text-align: center;
     20       padding: 36px 20%;
     21       background: #eee;
     22     }
     23     h1 {
     24       font-size: 2em;
     25       margin-bottom: 2em;
     26     }
     27     .container {
     28       margin: 24px 0;
     29       border-radius: 5px;
     30     }
     31     paper-input {
     32       width: 100%;
     33       text-align: left;
     34     }
     35     .dark-theme {
     36       background: #333333;
     37       color: #ccc;
     38     }
     39     .dark-theme paper-input {
     40       color: #666;
     41     }
     42     .dark-theme input {
     43       color: #fff;
     44     }
     45     .dark-theme /deep/ input {
     46       color: #fff;
     47     }
     48     .dark-theme #underline {
     49       background: #666;
     50       border-bottom-color: #666;
     51     }
     52     .dark-theme /deep/ #underline {
     53       background: #666;
     54       border-bottom-color: #666;
     55     }
     56     .dark-theme .focusedColor {
     57       color: #7d8ad0;
     58       background: #7d8ad0;
     59     }
     60     .dark-theme /deep/ .focusedColor {
     61       color: #7d8ad0;
     62       background: #7d8ad0;
     63     }
     64   </style>
     65 </head>
     66 <body unresolved>
     67   <section>
     68     <h1>&lt;paper-input&gt;</h1>
     69     <div class="container">
     70       <paper-input label="Type something..."></paper-input>
     71     </div>
     72     <div class="container">
     73       <paper-input label="Type only numbers..." validate="^[0-9]*$" error="Input is not a number!"></paper-input>
     74     </div>
     75     <div class="container">
     76       <paper-input disabled label="I'm disabled"></paper-input>
     77     </div>
     78     <div class="container">
     79       <paper-input floatingLabel label="Floating label"></paper-input>
     80     </div>
     81     <div class="container">
     82       <paper-input floatingLabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"></paper-input>
     83     </div>
     84     <div class="container">
     85       <paper-input multiline style="display:none;" label="Type multiple lines here..."></paper-input>
     86     </div>
     87     <div class="container">
     88       <paper-input multiline rows="3" label="This input is 3 rows high"></paper-input>
     89     </div>
     90     <div class="container">
     91       <paper-input multiline maxRows="3" label="This input is at most 3 rows high"></paper-input>
     92     </div>
     93     <div class="container">
     94       <paper-input multiline floatingLabel label="Multiple lines and a floating label"></paper-input>
     95     </div>
     96   </section>
     97   <section class="dark-theme">
     98     <div class="container">
     99       <paper-input label="Type something..."></paper-input>
    100     </div>
    101     <div class="container">
    102       <paper-input label="Type only numbers..." validate="^[0-9]*$" error="Input is not a number!"></paper-input>
    103     </div>
    104     <div class="container">
    105       <paper-input disabled label="I'm disabled"></paper-input>
    106     </div>
    107     <div class="container">
    108       <paper-input floatingLabel label="Floating label"></paper-input>
    109     </div>
    110     <div class="container">
    111       <paper-input floatingLabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"></paper-input>
    112     </div>
    113   </section>
    114 </body>
    115