Fix watermark positioning

fixes CNVS-26123

When we made changes for the course menu in for CNVS-24113 the positioning
of the watermark image changed. It should be positioned adjacent to the
global nav.

Bug: http://cl.ly/2H3M0u2p1Q1G
Fix: http://cl.ly/2C2x443E0m30

Test plan:
- Add a watermark image using the theme editor
- Verify the watermark positioning in all supported browsers
- Verify expand/collapse of course menu

Change-Id: I39fff87f086b8d07ca22f63fd2da3a8ff651ace4
Reviewed-on: https://gerrit.instructure.com/69362
Reviewed-by: Chris Hart <[email protected]>
Product-Review: Chris Hart <[email protected]>
Tested-by: Jenkins
QA-Review: Ryan Allen <[email protected]>

app/stylesheets/base/_ic_app_layout.scss

@@ -46,10 +46,6 @@ $ic-left-side-width: $ic-sp*15;
     margin-left: 0;
   }
 
-  body.course-menu-expanded:not(.ic-no-flex-layout) & {
-    margin-left: $ic-left-side-width;
-  }
-
   // Theme Editor watermark gets attached to this element as a background image
   body:not(.no-headers) & {
     z-index: 1;
@@ -62,6 +58,15 @@ $ic-left-side-width: $ic-sp*15;
       z-index: -1;
       opacity: $ic-brand-watermark-opacity;
       background: transparent $ic-brand-watermark left bottom no-repeat;
+      transition: all 0.1s ease-out;
+    }
+  }
+
+  body.course-menu-expanded:not(.ic-no-flex-layout) & {
+    margin-left: $ic-left-side-width;
+
+    &:before {
+      left: -$ic-left-side-width;
     }
   }
 
@@ -104,7 +109,7 @@ $ic-left-side-width: $ic-sp*15;
     box-sizing: border-box;
     flex: 1;
     @include breakpoint(desktop) { display: flex; }
-    
+
     // Fix Firefox and IE Edge issues with contents breaking out of flex container
     min-width: 1px;
   }
@@ -115,7 +120,7 @@ $ic-left-side-width: $ic-sp*15;
   @include breakpoint(desktop) {
     body:not(.ic-no-flex-layout) & {
       flex: 1;
-      
+
       // Fix Firefox and IE Edge issues with contents breaking out of flex container
       min-width: 1px;
     }