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 |