house of pane

ionic/components/app/structure.scss

@@ -28,7 +28,7 @@ ion-nav {
   height: 100%;
 }
 
-ion-nav-pane {
+ion-pane {
   position: absolute;
   top: 0;
   right: 0;
@@ -98,18 +98,6 @@ ion-content {
   will-change: scroll-position;
 }
 
-$swipe-handle-width:               20px !default;
-
-swipe-handle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: $swipe-handle-width;
-  height: 100%;
-  z-index: $z-index-swipe-handle;
-}
-
 
 // Hardware Acceleration
 .transitioning {

ionic/components/app/test/hn/pages/single.js

@@ -3,7 +3,7 @@ import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, NavParams, NavbarTemplate, Navbar, Content, Nav, NavPane, List, Item} from 'ionic/ionic';
+import {NavController, NavParams, NavbarTemplate, Navbar, Content, Nav, List, Item} from 'ionic/ionic';
 
 import {HackerNews} from '../hn'
 

ionic/components/app/util.scss

@@ -93,6 +93,31 @@ $content-padding:    10px !default;
 }
 
 
+// Swipe Handle
+// --------------------------------------------------
+
+$swipe-handle-width:               20px !default;
+$swipe-handle-top:                 80px !default;
+$swipe-handle-bottom:              80px !default;
+
+.swipe-handle {
+  position: absolute;
+  top: $swipe-handle-top;
+  left: 0;
+  bottom: $swipe-handle-bottom;
+  width: $swipe-handle-width;
+  z-index: $z-index-swipe-handle;
+
+  background: red;
+  opacity: 0.2;
+
+  transform: translate3d(-999px, 0px, 0px);
+  &.show-handle {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+
+
 // Node Inserted Animation
 // --------------------------------------------------
 // Used by the toolbar to know when the title has been rendered