javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(animations): inline css animations

Browse Source
This commit is contained in:
Adam Bradley
2016-02-09 16:22:40 -06:00
parent de76cefcf3
commit da18868636
94 changed files with 1071 additions and 6905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
ionic/components/button/button.md.scss
View File

@@ -18,8 +18,6 @@ $button-md-transition-duration: 300ms !default;
$button-md-clear-hover-background-color: rgba(158, 158, 158, 0.1) !default;
$button-md-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
$button-md-outline-ripple-opacity: 0.25 !default;
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
@@ -67,8 +65,13 @@ $button-md-small-icon-font-size: 1.4em !default;
box-shadow: $button-md-box-shadow-active;
background-color: $button-md-color-activated;
}
ion-button-effect {
background-color: $button-md-text-color;
}
}
// Material Design Default Button Color Mixin
// --------------------------------------------------
@@ -86,6 +89,10 @@ $button-md-small-icon-font-size: 1.4em !default;
opacity: 1;
background-color: $bg-color-activated;
}
ion-button-effect {
background-color: $fg-color;
}
}
}
@@ -149,8 +156,8 @@ $button-md-small-icon-font-size: 1.4em !default;
background-color: transparent;
}
md-ripple {
background-color: rgba($button-md-color, $button-md-outline-ripple-opacity);
ion-button-effect {
background-color: $button-md-color;
}
}
@@ -170,8 +177,8 @@ $button-md-small-icon-font-size: 1.4em !default;
background-color: transparent;
}
md-ripple {
background-color: rgba($fg-color, $button-md-outline-ripple-opacity);
ion-button-effect {
background-color: $fg-color;
}
}
@@ -194,9 +201,12 @@ $button-md-small-icon-font-size: 1.4em !default;
}
&:hover:not(.disable-hover) {
color: $button-md-color;
}
ion-button-effect {
background-color: #999;
}
}
@@ -211,7 +221,6 @@ $button-md-small-icon-font-size: 1.4em !default;
background-color: transparent;
color: $fg-color;
&.activated {
background-color: $button-md-clear-active-background-color;
box-shadow: none;
@@ -254,6 +263,25 @@ $button-md-small-icon-font-size: 1.4em !default;
}
// Material Design Ripple Effect
// --------------------------------------------------
$ripple-background-color: #555 !default;
ion-button-effect {
position: absolute;
z-index: 0;
display: block;
border-radius: 50%;
background-color: $ripple-background-color;
opacity: 0.2;
pointer-events: none;
transition-timing-function: ease-in-out;
}
// Generate Material Design Button Colors
// --------------------------------------------------