OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <!-- | |
3 Copyright 2013 The Polymer Authors. All rights reserved. | |
4 Use of this source code is governed by a BSD-style | |
5 license that can be found in the LICENSE file. | |
6 --> | |
7 <html> | |
8 <head> | |
9 <title>paper-button</title> | |
10 <meta charset="utf-8"> | |
11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
12 <meta name="viewport" content="width=device-width, initial-scale=1, user-scala
ble=no"> | |
13 <script src="../platform/platform.js"></script> | |
14 <link href="../font-roboto/roboto.html" rel="import"> | |
15 <link href="../core-icons/core-icons.html" rel="import"> | |
16 <link href="paper-button.html" rel="import"> | |
17 <style shim-shadowdom> | |
18 body { | |
19 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | |
20 font-size: 14px; | |
21 text-align: center; | |
22 padding: 1em 2em; | |
23 transform: translateZ(0); | |
24 -webkit-transform: translateZ(0); | |
25 transform: translateZ(0); | |
26 } | |
27 h1 { | |
28 margin-bottom: 2em; | |
29 } | |
30 | |
31 section { | |
32 display: inline-block; | |
33 background: #f7f7f7; | |
34 border-radius: 3px; | |
35 width: 25%; | |
36 text-align: center; | |
37 margin: 1%; | |
38 padding: 1em; | |
39 } | |
40 | |
41 paper-button { | |
42 margin: 1em; | |
43 width: 10em; | |
44 } | |
45 | |
46 paper-button.colored { | |
47 color: #4285f4; | |
48 fill: #4285f4; | |
49 } | |
50 | |
51 paper-button[raisedButton].colored { | |
52 background: #4285f4; | |
53 color: #fff; | |
54 } | |
55 paper-button[raisedButton].colored.hover:hover { | |
56 background: #3367d6; | |
57 } | |
58 paper-button[raisedButton].colored::shadow #ripple { | |
59 color: #2a56c6; | |
60 } | |
61 paper-button[raisedButton].colored::shadow #focusBg { | |
62 background: #3367d6; | |
63 } | |
64 | |
65 .label { | |
66 text-align: left; | |
67 color: #bbb; | |
68 font-size: 12px; | |
69 margin-top: 2em; | |
70 } | |
71 </style> | |
72 </head> | |
73 <body unresolved> | |
74 | |
75 <h1><paper-button></h1> | |
76 | |
77 <section> | |
78 <paper-button label="button"></paper-button> | |
79 <br> | |
80 <paper-button class="colored" label="colored"></paper-button> | |
81 <br> | |
82 <paper-button disabled label="disabled"></paper-button> | |
83 <br> | |
84 <div class="label">flat</div> | |
85 </section> | |
86 | |
87 <section> | |
88 <paper-button raisedButton label="button"></paper-button> | |
89 <br> | |
90 <paper-button raisedButton class="colored" label="colored"></paper-button> | |
91 <br> | |
92 <paper-button raisedButton disabled label="disabled"></paper-button> | |
93 <br> | |
94 <div class="label">raised</div> | |
95 </section> | |
96 | |
97 <br> | |
98 <br> | |
99 | |
100 <section> | |
101 <paper-button class="hover" label="button"></paper-button> | |
102 <br> | |
103 <paper-button class="colored hover" label="colored"></paper-button> | |
104 <br> | |
105 <div class="label">flat + hover state</div> | |
106 </section> | |
107 | |
108 <section> | |
109 <paper-button raisedButton class="hover" label="button"></paper-button> | |
110 <br> | |
111 <paper-button raisedButton class="colored hover" label="colored"></paper-but
ton> | |
112 <br> | |
113 <div class="label">raised + hover state</div> | |
114 </section> | |
115 | |
116 <br> | |
117 <br> | |
118 | |
119 <section> | |
120 <paper-button focused label="button"></paper-button> | |
121 <br> | |
122 <paper-button focused class="colored" label="colored"></paper-button> | |
123 <br> | |
124 <div class="label">flat + focused</div> | |
125 </section> | |
126 | |
127 <section> | |
128 <paper-button raisedButton focused label="button"></paper-button> | |
129 <br> | |
130 <paper-button raisedButton focused class="colored" label="colored"></paper-b
utton> | |
131 <br> | |
132 <div class="label">raised + focused</div> | |
133 </section> | |
134 | |
135 </body> | |
136 </html> | |
OLD | NEW |