OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <meta name="viewport" content="width=device-width, initial-scale=1, user-scala
ble=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><paper-input></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)" validat
e="^[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 he
re..."></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 hig
h"></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)" validat
e="^[0-9]*$" error="Input is not a number!"></paper-input> |
| 112 </div> |
| 113 </section> |
| 114 </body> |
OLD | NEW |