-
Notifications
You must be signed in to change notification settings - Fork 0
/
rippleButton.css
80 lines (77 loc) · 3.08 KB
/
rippleButton.css
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.mdl-ripple {
background: rgb(0,0,0);
border-radius: 50%;
height: 50px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50px;
overflow: hidden; }
.mdl-ripple.is-animating {
transition: width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1);
transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1); }
.mdl-ripple.is-visible {
opacity: 0.3; }
.mdl-button {
background: transparent;
border: none;
border-radius: 2px;
color: rgb(0,0,0);
position: relative;
height: 36px;
margin: 0;
min-width: 64px;
padding: 0 16px;
display: inline-block;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle; }
.mdl-button::-moz-focus-inner {
border: 0; }
.mdl-button:hover {
background-color: rgba(158,158,158, 0.20); }
.mdl-button:focus:not(:active) {
background-color: rgba(0,0,0, 0.12); }
.mdl-button:active {
background-color: rgba(158,158,158, 0.40); }
.mdl-button.mdl-button--colored {
color: rgb(63,81,181); }
.mdl-button.mdl-button--colored:focus:not(:active) {
background-color: rgba(0,0,0, 0.12); }
.mdl-button--raised {
background: rgba(158,158,158, 0.20);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.mdl-button--raised:active {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--raised:focus:not(:active) {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--raised.mdl-button--colored {
background: rgb(63,81,181);
color: rgb(255,255,255); }
.mdl-button--raised.mdl-button--colored:hover {
background-color: rgb(63,81,181); }
.mdl-button--raised.mdl-button--colored:active {
background-color: rgb(63,81,181); }
.mdl-button--raised.mdl-button--colored:focus:not(:active) {
background-color: rgb(63,81,181); }
.mdl-button--raised.mdl-button--colored .mdl-ripple {
background: rgb(255,255,255); }