View difference between Paste ID: vy1h1z5h and Z4DPvdq9

 
 // Read the docs in the directive : app-canvas
 // Acts as a drawer on mobile
 // collapsible on tablet
 // full width on desktop
 
 .app-canvas{
 
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
 
 	> .side-pane, > .content-pane{
 		position: absolute;
 		left: 0px;
 		height: 100%;
 		overflow-x: hidden;
 	}
 
 	> .side-pane{
 
 		background: $appSideBarBackground;
 		width: $sideBarMobileWidth;
 		@include transition(width 140ms);
 
 		@media(min-width: $screen-md){
 			width: $sideBarTabletWidth;
 		}
 
 		@media(min-width: $screen-lg){
 			width: $sideBarDesktopWidth;
 		}
 	}
 
 	> .content-pane{
 
 		width: $sideBarMobileWidth;
 		@include transition(transform 140ms);
 
 		@media(min-width: $screen-md){
 			left: $sideBarTabletWidth;
 			@include experimental(width, calc(100% - #{$sideBarTabletWidth}));
 		}
 
 		@media(min-width: $screen-lg){
 			left: $sideBarDesktopWidth;
 			@include experimental(width, calc(100% - #{$sideBarDesktopWidth}));
 		}
 	}
-		> .side-pane{
+
-			@include transition(width 140ms);
+	// Mobile & Portrait Tablet Behavior
 	@media(max-width: $screen-md){
 		> .side-pane.open ~ .content-pane{
-		> .content-pane{
+			@include translate( #{$sideBarTabletExpandedWidth - 20px});
-			@include transition(transform 140ms);
+
 
 	}
 
 	// Landscape tablet behavior
 	@media(min-width: $screen-md) and (max-width: $screen-lg){
 
 
 		//> .side-pane:hover,
 		> .side-pane.open {
 			width: $sideBarTabletExpandedWidth;
 		}
 
 		//> .side-pane:hover ~ .content-pane,
 		> .side-pane.open ~ .content-pane{
 			@include translate( #{$sideBarTabletExpandedWidth} );
 		}
 	}
 }