fixing left menu

wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss

@@ -30,6 +30,7 @@ h2{
     }
 }
 a{
+    @include transition(color 0.2s ease, background-color 0.2s ease);
     outline:none;
     color:$color-link;
     text-decoration:none;

wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss

@@ -54,15 +54,15 @@ body{
 }
 
 .wrapper{
+    @include transition-transform(0.2s ease);
     @include clearfix();
 }
 
 .nav-wrapper{
-    @include box-shadow(inset -5px 0px 5px -3px rgba(0, 0, 0, 0.3));
     position:relative;
     background: $color-grey-1;
-    margin-left: -100%;
-    width: 180px;
+    margin-left: -$menu-width;
+    width: $menu-width;
     float: left;
     height:100%;
     min-height:800px;
@@ -107,7 +107,6 @@ body{
         $selected-highlight:darken($color-grey-1, 10%);
         $submenu-color:darken($color-grey-1, 5%);
 
-
         top: 43px;
         bottom: 0px;
         overflow: auto;
@@ -267,13 +266,10 @@ body{
 .content-wrapper{
     width:100%;
     height:100%; /* this has no effect on desktop, but on mobile it helps aesthetics of menu popout action */
-    float: right;
+    float: left;
     position: relative;
     background-color:$color-grey-4;
     border-bottom:1px solid $color-grey-3;
-
-   /* transform: translate3d(0,0,0);
-    -webkit-transform: translate3d(0,0,0);*/
 }
     .content{
         @include row();
@@ -283,37 +279,38 @@ body{
         position:relative; /* yuk. necessary for positions for jquery ui widgets */
     }
 
-body.nav-open .nav-wrapper{
-    margin-left:0;
+footer{
+    @include transition(all 0.2s ease);
 }
 
-body.nav-open .content-wrapper{
-    transform: translate3d(180px,0,0);
-    -webkit-transform: translate3d(180px,0,0);
-
-    position:fixed;
-}
-
-body.nav-open footer{
-    bottom:1px;
-}
-body.nav-closed footer{
-    bottom:0;
-}
-
-body.explorer-open {
-    .nav-wrapper{
-        width:80%;
-    }
-    .nav-main{
-        display:none;
+/* Navigation open condition */
+body.nav-open{
+    .wrapper{
+        transform: translate3d($menu-width,0,0);
+        -webkit-transform: translate3d($menu-width,0,0);
     }
     .content-wrapper{
-        transform: translate3d(80%,0,0);
-        -webkit-transform: translate3d(80%,0,0);
-
         position:fixed;
     }
+    footer{
+        bottom:1px;
+    }
+}
+
+/* Explorer open condition, widens navigation area */
+body.explorer-open {
+    .wrapper{
+        transform: translate3d($menu-width*2,0,0);
+        -webkit-transform: translate3d($menu-width*2,0,0);
+    }
+    .nav-wrapper{
+        margin-left: -$menu-width*2;
+        width: $menu-width*2;
+    }
+
+    .nav-main{
+        display:none;
+    }
 
     .explorer{
         display:block;
@@ -566,16 +563,17 @@ footer, .logo{
         padding-right:$desktop-nice-padding;
     }
 
-    .wrapper{
-        margin-left:$menu-width;
+    .wrapper,
+    body.nav-open .wrapper{
+        -webkit-transform:none;
+        transform:none;
+        padding-left:$menu-width;
     }
 
     .browsermessage{
         margin:0 0 0 -150px;
     }
     .content-wrapper{
-        -webkit-transform:none;
-        transform:none;
         border-bottom-right-radius: 5px;
     }
 
@@ -584,7 +582,6 @@ footer, .logo{
         position:absolute;
         left:0;
         height:100%;
-        width:$menu-width;
         margin-left: 0;
 
         .inner{
@@ -661,21 +658,17 @@ footer, .logo{
     body.nav-open{
         .content-wrapper{
             position:relative;
-            transform: none;
-            -webkit-transform: none;
-        }
-        .nav-wrapper{
-            margin-left: -$menu-width;
-        }
-        .nav-wrapper,
-        .nav-main{
-            width:$menu-width;
         }
     }
 
     body.explorer-open {
+        .wrapper{
+            -webkit-transform:none;
+            transform:none;
+        }
         .nav-wrapper{
-            width:$menu-width;
+            margin-left: 0;
+            width: $menu-width;
         }
         .explorer:before{
             display:none;
@@ -683,12 +676,6 @@ footer, .logo{
         .nav-main{
             display:block;
         }
-        .content-wrapper{
-            transform: none;
-            -webkit-transform: none;
-
-            position:relative;
-        }
     }
 
     footer{
@@ -737,19 +724,4 @@ footer, .logo{
     footer{
         width:90em;
     }
-}
-
-/* Transitions (resolution agnostic) */
-.content-wrapper,
-.nav-main,
-#nav-toggle,
-footer,
-.logo{
-    @include transition(all 0.2s ease);
-}
-.nav-wrapper{
-    @include transition-transform(0.2s ease);
-}
-.nav-main a, a{
-    @include transition(color 0.2s ease, background-color 0.2s ease);
 }