third_party/polymer/components-chromium/paper-input/demo2.html

   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>