• 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
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
14  <title>paper-button</title>
15
16  <script src="../platform/platform.js"></script>
17
18  <link href="../font-roboto/roboto.html" rel="import">
19  <link href="../core-icons/core-icons.html" rel="import">
20  <link href="paper-button.html" rel="import">
21
22  <style shim-shadowdom>
23    body {
24      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
25      margin: 0;
26      padding: 24px;
27      -webkit-user-select: none;
28      -moz-user-select: none;
29      -ms-user-select: none;
30      user-select: none;
31      -webkit-tap-highlight-color: rgba(0,0,0,0);
32      -webkit-touch-callout: none;
33      transform: translateZ(0);
34      -webkit-transform: translateZ(0);
35    }
36
37    section {
38      padding: 20px 0;
39    }
40
41    section > div {
42      padding: 14px;:width;
43    }
44
45    paper-button {
46      margin: 1em;
47      width: 10em;
48    }
49
50    paper-button.colored {
51      color: #4285f4;
52      fill: #4285f4;
53    }
54
55    paper-button[raisedButton].colored {
56      background: #4285f4;
57      color: #fff;
58    }
59
60    paper-button[raisedButton].colored #ripple,
61    paper-button[raisedButton].colored::shadow #ripple {
62      color: #2a56c6;
63    }
64
65    paper-button[raisedButton].colored #focusBg,
66    paper-button[raisedButton].colored::shadow #focusBg {
67      background: #3367d6;
68    }
69
70  </style>
71</head>
72<body unresolved>
73
74  <section>
75
76    <div>Flat buttons</div>
77
78    <paper-button label="button"></paper-button>
79    <paper-button class="colored" label="colored"></paper-button>
80    <!-- <paper-button focused label="focused"></paper-button> -->
81    <paper-button disabled label="disabled" onclick="alert('should not be clickable');"></paper-button>
82
83  </section>
84
85  <br>
86
87  <section>
88
89    <div>Raised buttons</div>
90
91    <paper-button raisedButton label="button"></paper-button>
92    <paper-button raisedButton class="colored" label="colored"></paper-button>
93    <!-- <paper-button raisedButton focused label="focused"></paper-button> -->
94    <paper-button raisedButton disabled label="disabled" onclick="alert('should not be clickable');"></paper-button>
95
96  </section>
97
98</body>
99</html>
100