retina-friendly logos and breadcrumbs

Test plan:

View the Canvas logos in both the app header and login screen on a Retina device

View the breadcrumbs on a Retina device

Make sure everything is nice and sharp

fixes CNVS-4623

Change-Id: Ia4ff86ba2981416097d4b0f325682a7639346d8f
Reviewed-on: https://gerrit.instructure.com/18571
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Stanley Stuart <stanley@instructure.com>
Product-Review: Stanley Stuart <stanley@instructure.com>
QA-Review: Stanley Stuart <stanley@instructure.com>

app/stylesheets/base/_#header.sass

@@ -24,6 +24,9 @@
   bottom: 21px
   position: absolute
   text-indent: -9999px
+  @media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx)
+    background-image: url("/images/canvas/header_canvas_logo@2x.png")
+    background-size: 110px 26px
 // TODO: remove this style once people have time to update their logo-related custom
 // css. See related code in app/coffeescripts/bundles/common.coffee too.
 #header-logo.original, #header.no-user #header-logo.original
@@ -36,6 +39,9 @@
   right: 26px
   bottom: 6px
   position: absolute
+  @media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx)
+    background-image: url("/images/canvas/header_canvas_logo@2x.png")
+    background-size: 110px 26px
 
 #header-inner
   padding-top: 26px

app/stylesheets/base/_layout.sass

@@ -145,7 +145,7 @@ body
       line-height: 29px
       padding-left: 12px
       margin-left: 8px
-      background: url(/images/breadcrumb-chevron.png) left 50% no-repeat
+      @include bg-image(breadcrumb-chevron, png, no-repeat, 0, 50%, transparent, 5px, 9px)
       &:first-child
         background: none
         padding-left: 0

app/stylesheets/login.sass

@@ -84,7 +84,7 @@ body.modal
       h1
         height: 107px
         margin: 0 0 50px
-        background: transparent url(/images/canvas.png) 83px 46px no-repeat
+        @include bg-image(canvas, png, no-repeat, 68px, 46px, transparent, 136px, 33px)
         text-indent: -999em
       a
         color: #64b9f9 !important
@@ -176,7 +176,7 @@ span.field-with-fancyplaceholder
   background: url(/images/fft_ribbon.png) no-repeat
   padding-top: 10px
   width: 232px
-  height: 53px
+  height: 52px
   right: -13px
   top: 56px
   text-align: center