v1.61.0 — Updating page banner styles. (#238)

CHANGELOG.md

@@ -3,6 +3,17 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)
 
+v1.61.0
+------------------------------
+*August 6, 2019*
+
+### Added
+- `c-pageBanner--loading` modifier to remove margin whilst images are loading.
+
+### Changed
+- Increased `margin-top` for images on wide screens for `c-pageBanner--narrow`.
+
+
 v1.60.0
 ------------------------------
 *August 1, 2019*
@@ -11,20 +22,23 @@ v1.60.0
 - `c-modal-content--flush` styles.
 - `c-modal-content--scrollable` styles.
 
+
 v1.59.0
 ------------------------------
 *July 8, 2019*
 
 ### Changed
 - Updated collapsible card styles.
 
+
 v1.58.0
 ------------------------------
 *July 3, 2019*
 
 ### Added
 - Styles for `c-breadcrumb--pill`.
 
+
 v1.57.0
 ------------------------------
 *June 21, 2019*

package.json

@@ -2,7 +2,7 @@
   "name": "@justeat/fozzie",
   "title": "Fozzie – Just Eat UI Web Framework",
   "description": "UI Web Framework for the Just Eat Global Platform",
-  "version": "1.60.0",
+  "version": "1.61.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",

src/scss/components/optional/_page-banner.scss

@@ -66,10 +66,25 @@ $rays--coloured-spacing--huge: 230px;
         @include media('>=huge') {
             max-height: 370px;
         }
+
+        @include media('>=mid') {
+            min-height: 370px;
+        }
+
         .c-pageBanner-img {
             @include media('>=mid') {
                 margin-top: -8%;
             }
+
+            @include media('>=wide') {
+                margin-top: -20%;
+            }
+        }
+    }
+
+    .c-pageBanner--loading {
+        .c-pageBanner-img {
+            margin-top: 0;
         }
     }