Merge pull request #1213 from mattolson/STRF-4146

STRF-4146: Don't lazy load logo if size is unknown

CHANGELOG.md

@@ -2,16 +2,16 @@
 
 ## Draft
 - Add the +/- icons for the category filtering [#1211](https://github.com/bigcommerce/cornerstone/pull/1211)
+- Fix overlapping logo when using "original" sizing and large logos [#1213](https://github.com/bigcommerce/cornerstone/pull/1213)
 
 ## 1.17.0 (2018-04-26)
-- Add the +/- icons for the category filtering [#1211](https://github.com/bigcommerce/cornerstone/pull/1211)
 - Fix empty object issue in app.js [#1204](https://github.com/bigcommerce/cornerstone/pull/1204)
 - Fix product layout when shop by price disabled [#1205](https://github.com/bigcommerce/cornerstone/pull/1205)
 - Fix brands import statement in app.js [#1202](https://github.com/bigcommerce/cornerstone/pull/1202)
 - Fix broken 403/404 page search box in mobile [#1203](https://github.com/bigcommerce/cornerstone/pull/1203)
 
 ## 1.16.0 (2018-04-12)
-- Add representation for products and variants with retail price that has sale price. [#1195](https://github.com/bigcommerce/cornerstone/pull/1195) 
+- Add representation for products and variants with retail price that has sale price. [#1195](https://github.com/bigcommerce/cornerstone/pull/1195)
 - Fix but in quickview related to grabbing default prices for products with no default selection. [#1197](https://github.com/bigcommerce/cornerstone/pull/1197)
 
 ## 1.15.0 (2018-04-04)

assets/scss/layouts/header/_header.scss

@@ -9,6 +9,9 @@
 //    margin. This centers the text logo properly.
 // 4. When the word "cart" is added to the mobile header's cart link, add more
 //    margin to compensate.
+// 5. When logo size is set to "original", we don't have advance knowledge of the
+//    image size, so we can't use absolute positioning + padding to reserve space
+//    for lazy loading.
 //
 // -----------------------------------------------------------------------------
 
@@ -170,7 +173,13 @@
     }
 }
 
+.header-logo-image-unknown-size { // 5
+    max-height: remCalc($header-height) - $header-logo-marginVertical * 2;
 
+    @include breakpoint("medium") {
+        max-height: none;
+    }
+}
 
 //
 // Mobile Menu Toggle