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

6
ionic/components/button/button.ios.scss
View File

@@ -203,6 +203,12 @@ $button-ios-small-icon-font-size: 1.3em !default;
}
ion-button-effect {
// iOS does not use the button effect
display: none;
}
// Generate iOS Button Colors
// --------------------------------------------------

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
// --------------------------------------------------

9
ionic/components/button/button.ts
View File

@@ -30,7 +30,11 @@ import {Toolbar} from '../toolbar/toolbar';
*/
@Component({
selector: 'button:not([ion-item]),[button]',
template: '<span class="button-inner"><ng-content></ng-content></span>'
template:
'<span class="button-inner">' +
'<ng-content></ng-content>' +
'</span>' +
'<ion-button-effect></ion-button-effect>'
})
export class Button {
private _role: string = 'button'; // bar-button/item-button
@@ -125,7 +129,7 @@ export class Button {
private _readIcon(element: HTMLElement) {
// figure out if and where the icon lives in the button
let childNodes = element.childNodes;
if (childNodes.length == 1) {
if (childNodes.length > 0) {
childNodes = childNodes[0].childNodes;
}
let childNode;
@@ -158,6 +162,7 @@ export class Button {
} else if (nodes[0] === TEXT && nodes[1] === ICON) {
this._icon = 'icon-right';
}
} else if (nodes.length === 1 && nodes[0] === ICON) {
this._icon = 'icon-only';
}