1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
button {
padding: 5px 8px;
border: 1px solid rgba(0, 0, 0, .50);
-webkit-border-radius: 3px;
-webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .10);
background: -webkit-gradient(linear, 0 50%, 0 100%,
from(#ffffff), to(#e3e3e3));
}
button:active {
background: -webkit-gradient(linear, 0 4%, 0 100%,
from(#c3c3c3), to(#f5f5f5));
}
button:focus {
/* TODO(feldstein): find a better way to keep buttons same size. */
padding: 4px 7px;
outline: none;
border: 2px solid #426dc9;
}
button.action {
border: 1px solid #2e4987;
font-weight: bold;
color: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 100%,
from(#6391de), to(#426dc9));
}
button.action:focus {
border: 2px solid #426dc9;
/* inset border emulated using a shadow */
-webkit-box-shadow: 1px 1px 0 #dbdbdb inset, -1px -1px 0 #dbdbdb inset;
}
/* make sure we do not use active when disabled */
button.action:active:not(:disabled) {
background: -webkit-gradient(linear, 0 0, 0 100%,
from(#426dc9), to(#6391de));
}
button:disabled {
border: 1px solid rgba(0, 0, 0, .35);
color: rgba(0, 0, 0, .30);
background: -webkit-gradient(linear, 0 0, 0 100%,
from(#ffffff), to(#e3e3e3));
}
|
