|
14 | 14 | // limitations under the License.
|
15 | 15 | //
|
16 | 16 |
|
17 |
| -/** MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them. */ |
| 17 | +// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them. |
18 | 18 |
|
19 | 19 | @import "@material/animation/variables";
|
20 | 20 |
|
21 |
| -@keyframes mdc-ripple-fg-radius-in { |
22 |
| - from { |
23 |
| - animation-timing-function: $mdc-animation-standard-curve-timing-function; |
24 |
| - // NOTE: For these keyframes, we do not need custom property fallbacks because they are only |
25 |
| - // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure |
26 |
| - // that custom properties are supported within the browser before adding this class, we can |
27 |
| - // safely use them without a fallback. |
28 |
| - transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); |
| 21 | +@mixin mdc-ripple-keyframes_ { |
| 22 | + @keyframes mdc-ripple-fg-radius-in { |
| 23 | + from { |
| 24 | + animation-timing-function: $mdc-animation-standard-curve-timing-function; |
| 25 | + // NOTE: For these keyframes, we do not need custom property fallbacks because they are only |
| 26 | + // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure |
| 27 | + // that custom properties are supported within the browser before adding this class, we can |
| 28 | + // safely use them without a fallback. |
| 29 | + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); |
| 30 | + } |
| 31 | + |
| 32 | + to { |
| 33 | + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); |
| 34 | + } |
29 | 35 | }
|
30 | 36 |
|
31 |
| - to { |
32 |
| - transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); |
33 |
| - } |
34 |
| -} |
35 |
| - |
36 |
| -@keyframes mdc-ripple-fg-opacity-in { |
37 |
| - from { |
38 |
| - animation-timing-function: linear; |
39 |
| - opacity: 0; |
40 |
| - } |
| 37 | + @keyframes mdc-ripple-fg-opacity-in { |
| 38 | + from { |
| 39 | + animation-timing-function: linear; |
| 40 | + opacity: 0; |
| 41 | + } |
41 | 42 |
|
42 |
| - to { |
43 |
| - opacity: 1; |
| 43 | + to { |
| 44 | + opacity: 1; |
| 45 | + } |
44 | 46 | }
|
45 |
| -} |
46 | 47 |
|
47 |
| -@keyframes mdc-ripple-fg-opacity-out { |
48 |
| - from { |
49 |
| - animation-timing-function: linear; |
50 |
| - opacity: 1; |
51 |
| - } |
| 48 | + @keyframes mdc-ripple-fg-opacity-out { |
| 49 | + from { |
| 50 | + animation-timing-function: linear; |
| 51 | + opacity: 1; |
| 52 | + } |
52 | 53 |
|
53 |
| - to { |
54 |
| - opacity: 0; |
| 54 | + to { |
| 55 | + opacity: 0; |
| 56 | + } |
55 | 57 | }
|
56 | 58 | }
|
0 commit comments