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

aside updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-31 14:21:38 -05:00
parent 7dc76f5f31
commit ae20464484
3 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ionic/components/aside/aside.scss
View File

@@ -33,18 +33,6 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
}
}
ion-aside-backdrop {
z-index: $z-index-aside-backdrop;
transition: $aside-backdrop-transition;
transform: translateX($aside-width);
top: 0;
right: 0;
left: 0;
bottom: 0;
position: fixed;
background-color: rgba(0,0,0,0);;
}
&[type=overlay] {
z-index: $z-index-aside-overlay;
@@ -66,9 +54,10 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
}
&[type=overlay] {
transform: translate3d($aside-width,0,0);
box-shadow: 1px 2px 16px rgba(0, 0, 0, 0.3);
ion-aside-backdrop {
background-color: rgba(0,0,0,0.6);
background-color: rgba(0,0,0,0.32);
}
}
}
@@ -114,6 +103,18 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
}
ion-aside-backdrop {
z-index: $z-index-aside-backdrop;
transition: $aside-backdrop-transition;
transform: translateX($aside-width);
top: 0;
right: 0;
left: 0;
bottom: 0;
position: fixed;
background-color: rgba(0,0,0,0);;
}
.aside-content {
transition: $aside-transition;
transform: translate3d(0,0,0);

4
ionic/components/aside/extensions/types.ts
View File

@@ -41,14 +41,14 @@ const backdropManipulator = {
//.classList[sliding ? 'add' : 'remove']('no-transition');
},
setOpen(open) {
let amt = open ? 0.6 : 0;
let amt = open ? 0.32 : 0;
this.aside.backdrop.backgroundColor = 'rgba(0,0,0,' + amt + ')';
},
setTransform(t) {
if(t === null) {
t = this.aside.width();
}
let fade = 0.6 * t / this.aside.width();
let fade = 0.32 * t / this.aside.width();
this.aside.backdrop.backgroundColor = 'rgba(0,0,0,' + fade + ')';
}
}

2
ionic/components/aside/test/basic/main.html
View File

@@ -1,4 +1,4 @@
<ion-aside #aside [content]="content" id="menu" type="reveal">
<ion-aside #aside [content]="content" id="menu">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>