Add modal card, Add display responsive utilities

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69531428edcd257dfa9b4310541dbd0a202a389a..3bbb2b912e90fd4c03938c1fb80bd1ca9ab1ad89 100644 (file)
--- 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 e032eaddad1b7ef9ab0378ada6944e0c96df9924..f57517043d50ee94137fe3f4107755c9b1789aa3 100644 (file)
--- 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 dabd3f1b1bb800180319e7fdbb8e44e702b0db50..2e4bec260d644cc35bddf0ebd088d94d765b1a5b 100644 (file)
--- 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 09d40ff0de65b4673bd13cf4878ebaf452a7c1f1..f9c2cefc7381c752e023503cbc3dc71280dde2fb 100644 (file)
--- 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