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