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