Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(6)

Side by Side Diff: appengine/chromium_rietveld/new_static/components/cr-button.html

Issue 1001723003: Create a common directory of widgets and css. (Closed) Base URL: https://chromium.googlesource.com/infra/infra.git@master
Patch Set: Created 5 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698