• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3Copyright 2013 The Polymer Authors. All rights reserved.
4Use of this source code is governed by a BSD-style
5license 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-scalable=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>&lt;paper-button&gt;</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-button>
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-button>
131    <br>
132    <div class="label">raised + focused</div>
133  </section>
134
135</body>
136</html>
137