OLD | NEW |
| (Empty) |
1 <!-- Copyright (c) 2014 The Chromium Authors. All rights reserved. | |
2 Use of this source code is governed by a BSD-style license that can be | |
3 found in the LICENSE file. --> | |
4 | |
5 <polymer-element name="cr-button" extends="button" on-keypress="{{ handleKeypres
s }}"> | |
6 <template><style> | |
7 :host { | |
8 -webkit-user-select: none; | |
9 background-color: #f5f5f5; | |
10 background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1); | |
11 border-radius: 2px; | |
12 border: 1px solid #dcdcdc; | |
13 color: #444; | |
14 font-weight: bold; | |
15 height: 30px; | |
16 margin: 0; | |
17 padding: 0 16px; | |
18 text-align: center; | |
19 vertical-align: middle; | |
20 white-space: nowrap; | |
21 } | |
22 | |
23 :host([icon]) { | |
24 padding: 0 4px; | |
25 } | |
26 | |
27 :host(:active), | |
28 :host(:hover) { | |
29 border-color: #c6c6c6; | |
30 color: #222; | |
31 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); | |
32 background-color: #f8f8f8; | |
33 background-image: linear-gradient(to bottom, #f8f8f8, #f1f1f1); | |
34 | |
35 } | |
36 | |
37 :host(:active) { | |
38 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); | |
39 } | |
40 | |
41 :host(:focus) { | |
42 border: 1px solid #4d90fe; | |
43 outline: none; | |
44 } | |
45 | |
46 :host([primary]) { | |
47 background-color: #4d90fe; | |
48 background-image: linear-gradient(to bottom, #4d90fe, #4787ed); | |
49 border: 1px solid #3079ed; | |
50 color: #fff; | |
51 } | |
52 | |
53 :host([create]) { | |
54 background-color: #d14836; | |
55 background-image: linear-gradient(to bottom, #dd4b39, #d14836); | |
56 text-shadow: 0 1px rgba(0,0,0,0.1); | |
57 border: 1px solid transparent; | |
58 color: white; | |
59 text-transform: uppercase; | |
60 } | |
61 | |
62 :host([primary]:hover) { | |
63 background-color: #357ae8; | |
64 background-image: linear-gradient(to bottom, #4d90fe, #357ae8); | |
65 border: 1px solid #2f5bb7; | |
66 } | |
67 | |
68 :host([create]:hover) { | |
69 background-color: #c53727; | |
70 background-image: linear-gradient(to bottom,#dd4b39,#c53727); | |
71 border: 1px solid #b0281a; | |
72 } | |
73 | |
74 :host([create]:focus), | |
75 :host([primary]:focus) { | |
76 box-shadow: inset 0 0 0 1px #fff; | |
77 border: 1px solid transparent; | |
78 outline: none; | |
79 } | |
80 | |
81 :host([primary]:active) { | |
82 box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); | |
83 background-color: #357ae8; | |
84 border: 1px solid #2f5bb7; | |
85 } | |
86 | |
87 :host([create]:active) { | |
88 box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); | |
89 background-color: #b0281a; | |
90 background-image: linear-gradient(to bottom, #dd4b39, #b0281a); | |
91 border: 1px solid #992a1b; | |
92 } | |
93 </style><content></content></template> | |
94 <script> | |
95 Polymer("cr-button", { | |
96 handleKeypress: function(event) { | |
97 // Allow space or enter to activate. | |
98 if (event.keyCode == 32) | |
99 this.fire("tap"); | |
100 else if (event.keyCode == 13) | |
101 this.fire("tap"); | |
102 }, | |
103 }); | |
104 </script> | |
105 </ploymer-element> | |
OLD | NEW |