Merge pull request #230 from canjs/224-fix-ios-bug

Fixes bug scrolling to the top in IOS #224

Author: imaustink

static/mobile.less

@@ -17,24 +17,33 @@ label[for="nav-trigger"] {
   font-weight: 700;
   .border-radius;
   z-index: 99;
-  transition: background .25s;
+  transition: background @transition-speed;
 }
 label:hover{
   background: @border-color;
 }
 .nav-trigger:checked + label{
-    left: @sidebar-width + @gutter*2;
+  left: @sidebar-width + @gutter*2;
+  transition: left @transition-speed*2;
 }
 .nav-trigger ~ #everything #right {
 	width: 100%;
 }
 .nav-trigger:checked ~ #everything #right {
-  flex-shrink: 0;
-  width: auto;
-  position: fixed;
-  left: @sidebar-width;
-  overflow-x: hidden;
-  z-index: 50;
+  @media screen and (max-width: @breakpoint){
+    flex-shrink: 0;
+    width: auto;
+    position: fixed;
+    left: @sidebar-width;
+    overflow-x: hidden;
+    z-index: 50;
+  }
+}
+.nav-trigger:not(:checked) ~ #everything #left {
+  @media screen and (max-width: @breakpoint){
+    visibility: hidden;
+    transition: visibility @transition-speed;
+  }
 }
 .nav-trigger + label {
   .transition-left
@@ -52,4 +61,4 @@ label:hover{
       display: none;
     }
   }
-}
+}

static/sidebar.less

@@ -1,4 +1,3 @@
-
 .search-bar {
 	display:none;
   	background: @code-color;
@@ -10,8 +9,8 @@
     	color: white;
     	font-weight: 300;
   	}
-	@media screen and (min-width: @breakpoint) {
-      	display: block;
+	  @media screen and (min-width: @breakpoint) {
+      display: block;
     }
 }
 
@@ -137,4 +136,4 @@ img.social-icon-small{
       }
     }
   }
-}
+}

static/variables.less

@@ -14,7 +14,7 @@
 @gutter: 15px;
 @breakpoint: 1000px;
 @sidebar-width: 250px;
+@transition-speed: .25s;
 
 /*----- TYPE -----*/
 @font-weight-heading: 500;
-