javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Porting ripple

Browse Source
This commit is contained in:
Max Lynch
2015-07-19 18:23:48 -05:00
parent 2270f8be74
commit b515a46d30
2 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
ionic/components/material/ripple.scss
View File

@ -0,0 +1,33 @@
/**
* Portions lovingly adapted from Material Design Lite
* Copyright Google, 2015, Licensed under the Apache 2 license.
* https://github.com/google/material-design-lite
*/
$ripple-bg-color: black;
$ripple-animation-curve: cubic-bezier(0, 0, 0.2, 1) !default;
.md-ripple {
background: $ripple-bg-color;
border-radius: 50%;
height: 50px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transform: translate(-50%, -50%);
width: 50px;
overflow: hidden;
&.is-animating {
transition: transform 0.3s $ripple-animation-curve;
width: 0.3s $ripple-animation-curve;
height: 0.3s $ripple-animation-curve;
opacity: 0.6s $ripple-animation-curve;
}
&.is-visible {
opacity: 0.3;
}
}

2
ionic/ionic.scss
View File

@ -73,6 +73,8 @@
// Material Design Components // Material Design Components
@import @import
"components/material/ripple",
"components/app/extensions/material", "components/app/extensions/material",
"components/action-menu/extensions/material", "components/action-menu/extensions/material",
"components/alert/extensions/material", "components/alert/extensions/material",