From c0f0f9f9d8dc7916f19bd080d06b7328cbc687c1 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 7 May 2016 15:08:27 +0100
Subject: [PATCH] Add modal card, Add display responsive utilities

---
 CHANGELOG.md               |  5 +++++
 sass/base/generic.sass     |  3 ---
 sass/base/helpers.sass     |  6 ++++++
 sass/components/modal.sass | 39 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69531428..3bbb2b91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Bulma Changelog
 
+## 0.0.26
+
+* Added: `.modal-card`
+* Added: display responsive utilites
+
 ## 0.0.25
 
 * Added: `utilities/controls.sass` and `elements/form.sass`
diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index e032eadd..f5751704 100644
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@ -7,9 +7,6 @@ html
   overflow-x: hidden
   overflow-y: scroll
   text-rendering: optimizeLegibility
-  // Modifiers
-  &.has-modal
-    overflow: hidden
 
 article,
 aside,
diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass
index dabd3f1b..2e4bec26 100644
--- a/sass/base/helpers.sass
+++ b/sass/base/helpers.sass
@@ -26,6 +26,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   .is-#{$display}-widescreen
     +widescreen
       display: #{$display} !important
+
 // Float
 
 .is-clearfix
@@ -37,6 +38,11 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-pulled-right
   float: right
 
+// Overflow
+
+.is-clipped
+  overflow: hidden !important
+
 // Overlay
 
 .is-overlay
diff --git a/sass/components/modal.sass b/sass/components/modal.sass
index 09d40ff0..f9c2cefc 100644
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@ -23,6 +23,45 @@
   top: 20px
   width: 40px
 
+.modal-card
+  @extend .modal-content
+  background: $white
+  border-radius: 5px
+  display: flex
+  flex-direction: column
+  max-height: calc(100vh - 40px)
+  overflow: hidden
+
+.modal-card-head,
+.modal-card-foot
+  align-items: center
+  background: $background
+  display: flex
+  flex-shrink: 0
+  justify-content: flex-start
+  padding: 20px
+  position: relative
+
+.modal-card-head
+  border-bottom: 1px solid $border
+
+.modal-card-title
+  color: $text-strong
+  flex: 1
+  font-size: $size-4
+  line-height: 1
+
+.modal-card-foot
+  border-top: 1px solid $border
+  .button
+    &:not(:last-child)
+      margin-right: 10px
+
+.modal-card-body
+  flex: 1
+  overflow: auto
+  padding: 20px
+
 .modal
   +overlay
   align-items: center