| 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 |