1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @-webkit-keyframes mdc-ripple-fg-radius-in {
|
9 | from {
|
10 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
11 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
12 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
13 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
14 | }
|
15 | to {
|
16 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
17 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
18 | }
|
19 | }
|
20 | @keyframes mdc-ripple-fg-radius-in {
|
21 | from {
|
22 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
23 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
24 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
25 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
26 | }
|
27 | to {
|
28 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
29 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
30 | }
|
31 | }
|
32 | @-webkit-keyframes mdc-ripple-fg-opacity-in {
|
33 | from {
|
34 | -webkit-animation-timing-function: linear;
|
35 | animation-timing-function: linear;
|
36 | opacity: 0;
|
37 | }
|
38 | to {
|
39 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
40 | }
|
41 | }
|
42 | @keyframes mdc-ripple-fg-opacity-in {
|
43 | from {
|
44 | -webkit-animation-timing-function: linear;
|
45 | animation-timing-function: linear;
|
46 | opacity: 0;
|
47 | }
|
48 | to {
|
49 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
50 | }
|
51 | }
|
52 | @-webkit-keyframes mdc-ripple-fg-opacity-out {
|
53 | from {
|
54 | -webkit-animation-timing-function: linear;
|
55 | animation-timing-function: linear;
|
56 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
57 | }
|
58 | to {
|
59 | opacity: 0;
|
60 | }
|
61 | }
|
62 | @keyframes mdc-ripple-fg-opacity-out {
|
63 | from {
|
64 | -webkit-animation-timing-function: linear;
|
65 | animation-timing-function: linear;
|
66 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
67 | }
|
68 | to {
|
69 | opacity: 0;
|
70 | }
|
71 | }
|
72 | .mdc-ripple-surface {
|
73 | --mdc-ripple-fg-size: 0;
|
74 | --mdc-ripple-left: 0;
|
75 | --mdc-ripple-top: 0;
|
76 | --mdc-ripple-fg-scale: 1;
|
77 | --mdc-ripple-fg-translate-end: 0;
|
78 | --mdc-ripple-fg-translate-start: 0;
|
79 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
80 | will-change: transform, opacity;
|
81 | position: relative;
|
82 | outline: none;
|
83 | overflow: hidden;
|
84 | }
|
85 | .mdc-ripple-surface::before, .mdc-ripple-surface::after {
|
86 | position: absolute;
|
87 | border-radius: 50%;
|
88 | opacity: 0;
|
89 | pointer-events: none;
|
90 | content: "";
|
91 | }
|
92 | .mdc-ripple-surface::before {
|
93 | transition: opacity 15ms linear, background-color 15ms linear;
|
94 | z-index: 1;
|
95 |
|
96 | z-index: var(--mdc-ripple-z-index, 1);
|
97 | }
|
98 | .mdc-ripple-surface::after {
|
99 | z-index: 0;
|
100 |
|
101 | z-index: var(--mdc-ripple-z-index, 0);
|
102 | }
|
103 | .mdc-ripple-surface.mdc-ripple-upgraded::before {
|
104 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
|
105 | transform: scale(var(--mdc-ripple-fg-scale, 1));
|
106 | }
|
107 | .mdc-ripple-surface.mdc-ripple-upgraded::after {
|
108 | top: 0;
|
109 |
|
110 | left: 0;
|
111 | -webkit-transform: scale(0);
|
112 | transform: scale(0);
|
113 | -webkit-transform-origin: center center;
|
114 | transform-origin: center center;
|
115 | }
|
116 | .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
|
117 | top: var(--mdc-ripple-top, 0);
|
118 |
|
119 | left: var(--mdc-ripple-left, 0);
|
120 | }
|
121 | .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
|
122 | -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
123 | animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
124 | }
|
125 | .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
|
126 | -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
|
127 | animation: mdc-ripple-fg-opacity-out 150ms;
|
128 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
129 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
130 | }
|
131 | .mdc-ripple-surface::before, .mdc-ripple-surface::after {
|
132 | background-color: #000;
|
133 |
|
134 | background-color: var(--mdc-ripple-color, #000);
|
135 | }
|
136 | .mdc-ripple-surface:hover::before, .mdc-ripple-surface.mdc-ripple-surface--hover::before {
|
137 | opacity: 0.04;
|
138 |
|
139 | opacity: var(--mdc-ripple-hover-opacity, 0.04);
|
140 | }
|
141 | .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
|
142 | transition-duration: 75ms;
|
143 | opacity: 0.12;
|
144 |
|
145 | opacity: var(--mdc-ripple-focus-opacity, 0.12);
|
146 | }
|
147 | .mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
|
148 | transition: opacity 150ms linear;
|
149 | }
|
150 | .mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
|
151 | transition-duration: 75ms;
|
152 | opacity: 0.12;
|
153 |
|
154 | opacity: var(--mdc-ripple-press-opacity, 0.12);
|
155 | }
|
156 | .mdc-ripple-surface.mdc-ripple-upgraded {
|
157 | --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
|
158 | }
|
159 | .mdc-ripple-surface::before, .mdc-ripple-surface::after {
|
160 | top: calc(50% - 100%);
|
161 |
|
162 | left: calc(50% - 100%);
|
163 | width: 200%;
|
164 | height: 200%;
|
165 | }
|
166 | .mdc-ripple-surface.mdc-ripple-upgraded::after {
|
167 | width: var(--mdc-ripple-fg-size, 100%);
|
168 | height: var(--mdc-ripple-fg-size, 100%);
|
169 | }
|
170 |
|
171 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded],
|
172 | .mdc-ripple-upgraded--unbounded {
|
173 | overflow: visible;
|
174 | }
|
175 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,
|
176 | .mdc-ripple-upgraded--unbounded::before,
|
177 | .mdc-ripple-upgraded--unbounded::after {
|
178 | top: calc(50% - 50%);
|
179 |
|
180 | left: calc(50% - 50%);
|
181 | width: 100%;
|
182 | height: 100%;
|
183 | }
|
184 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
|
185 | .mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,
|
186 | .mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
|
187 | top: var(--mdc-ripple-top, calc(50% - 50%));
|
188 |
|
189 | left: var(--mdc-ripple-left, calc(50% - 50%));
|
190 | width: var(--mdc-ripple-fg-size, 100%);
|
191 | height: var(--mdc-ripple-fg-size, 100%);
|
192 | }
|
193 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
|
194 | .mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
|
195 | width: var(--mdc-ripple-fg-size, 100%);
|
196 | height: var(--mdc-ripple-fg-size, 100%);
|
197 | }
|
198 |
|
199 |
|
\ | No newline at end of file |