Add modal card, Add display responsive utilities

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`

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,

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

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