v1.63.0 — Updated c-modal styles. (#241)

justeat · Aug 29, 2019 · 0f0e129 · 0f0e129
1 parent 52377b0
commit 0f0e129
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,20 +3,35 @@
 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.63.0
+------------------------------
+*August 29, 2019*
+
+### Added
+- `c-modal-title--spacing` modifier.
+
+### Changed
+- `c-modal-content--flush` now only removes padding.
+- `c-modal-content--scrollable` renamed to `c-modal-content-scrollable` as it is applied to a child of `c-modal-content`.
+- Casing on `c-modal--fullPage--belowMid` updated.
+
+
 v1.62.1
 ------------------------------
 *August 23, 2019*
 
 ### Removed
 - Removed animation from the `c-listing-item-header` for performance increase
 
+
 v1.62.0
 ------------------------------
 *August 20, 2019*
 
 ### Changed
 - Added `will-change` to `c-listing` loading animation to stop a larger redraw
 
+
 v1.61.0
 ------------------------------
 *August 6, 2019*

diff --git a/package.json b/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.62.1",
+  "version": "1.63.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",

diff --git a/src/scss/components/optional/_modal.scss b/src/scss/components/optional/_modal.scss
@@ -30,6 +30,14 @@ $modal-transitionTime    : 250ms !default;
             }
         }
 
+            .c-modal-title--spacing {
+                padding: spacing(x3) spacing(x3) 0;
+
+                @include media('>=mid') {
+                    padding: spacing(x5) spacing(x5) 0;
+                }
+            }
+
         .c-modal-content {
             background-color: $white;
             border-radius: 8px;
@@ -60,23 +68,28 @@ $modal-transitionTime    : 250ms !default;
 
             .c-modal-content--flush {
                 padding: 0;
-                overflow: hidden;
+            }
 
-                .c-modal-title {
-                    padding: 0;
-                }
+            .c-modal-content--visible {
+                display: block;
             }
 
-            .c-modal-content--scrollable {
-                @include media('>=mid') {
-                    overflow: scroll;
-                    max-height: 550px;
-                }
+        .c-modal-content-scrollable {
+            max-height: 100vh;
+            overflow-y: auto;
+
+            @include media('>=mid') {
+                max-height: 550px;
             }
 
-            .c-modal-content--visible {
-                display: block;
+            @include media('height<=narrowMid', '>=mid') {
+                max-height: 90vh;
+            }
+
+            &.is-stuck {
+                padding-top: spacing(x5);
             }
+        }
 
         .c-modal--rays--belowMid {
             @include media('<mid') {
@@ -111,7 +124,7 @@ $modal-transitionTime    : 250ms !default;
             }
         }
 
-        .c-modal--fullpage--belowMid {
+        .c-modal--fullPage--belowMid {
             @include media('<mid') {
                 .c-modal-content {
                     border-radius: 0;