Add modals, Add block, Add has modifier

bulma/base/content.sass

@@ -1,4 +1,5 @@
 .content
+  @extend .block
   &.is-medium
     font-size: $size-5
     code
@@ -7,8 +8,6 @@
     font-size: $size-4
     code
       font-size: $size-5
-  &:not(:last-child)
-    margin-bottom: 20px
   h1,
   h2,
   h3,

bulma/base/generic.sass

@@ -7,6 +7,8 @@ html
   overflow-x: hidden
   overflow-y: scroll
   text-rendering: optimizeLegibility
+  &.has-modal-open
+    overflow: hidden
 
 body,
 button,
@@ -47,7 +49,6 @@ hr
   margin: 20px 0
 
 img
-  max-height: 100%
   max-width: 100%
 
 input[type="checkbox"],
@@ -90,8 +91,10 @@ table
   th
     color: $text-strong
 
+.block:not(:last-child)
+  margin-bottom: 20px
+
 .container
-  margin: 0 20px
   position: relative
   +desktop
     margin: 0 auto

bulma/base/helpers.sass

@@ -1,14 +1,3 @@
-// Alignment
-
-.is-centered
-  text-align: center
-
-.is-left
-  text-align: left
-
-.is-right
-  text-align: right
-
 // Display
 
 .is-block
@@ -20,7 +9,7 @@
 .is-flex
   display: flex
 
-// Pull
+// Float
 
 .is-clearfix
   +clearfix
@@ -31,11 +20,27 @@
 .is-pulled-right
   float: right
 
+// Overlay
+
+.is-overlay
+  +overlay
+
 // Size
 
 .is-fullwidth
   width: 100%
 
+// Text
+
+.is-text-centered
+  text-align: center
+
+.is-text-left
+  text-align: left
+
+.is-text-right
+  text-align: right
+
 // Visibility
 
 .is-hidden-mobile

bulma/components/components.sass

@@ -7,6 +7,4 @@
 @import "tabs"
 @import "media"
 @import "menu"
-
+@import "modal"
-.block:not(:last-child)
-  margin-bottom: 20px

bulma/components/media.sass

@@ -1,14 +1,3 @@
-.media-image
-  &.is-32
-    width: 32px
-  &.is-40
-    width: 40px
-  +mobile
-    margin-bottom: 10px
-  +tablet
-    margin-right: 10px
-    width: 60px
-
 .media-number
   background: $background
   border-radius: 290486px
@@ -26,25 +15,18 @@
     margin-right: 10px
 
 .media-left
-  +mobile
+  margin-right: 10px
-    margin-bottom: 20px
-  +tablet
-    margin-right: 20px
 
 .media-right
-  +mobile
+  margin-left: 10px
-    margin-top: 20px
-  +tablet
-    margin-left: 20px
 
 .media-content
   flex: 1
   text-align: left
-  .textarea
-    min-height: 60px
 
 .media
   align-items: flex-start
+  display: flex
   text-align: left
   .content:not(:last-child)
     margin-bottom: 10px
@@ -52,10 +34,6 @@
     border-top: 1px solid rgba($border, 0.5)
     display: flex
     padding-top: 10px
-    .media-image
-      margin-bottom: 0
-      margin-right: 10px
-      width: 40px
     .textarea
       +control-small
     .button
@@ -77,7 +55,6 @@
       margin-top: 20px
       padding-top: 20px
   +tablet
-    display: flex
     &.is-large
       .media-number
         margin-right: 20px

bulma/components/modal.sass

@@ -0,0 +1,34 @@
+.modal-background
+  +overlay
+  background: rgba(black, 0.86)
+
+.modal-content
+  margin: 0 20px
+  max-height: calc(100vh - 160px)
+  overflow: auto
+  position: relative
+  width: 100%
+  +tablet
+    margin: 0 auto
+    max-height: calc(100vh - 40px)
+    width: 640px
+
+.modal-close
+  @extend .delete
+  background: none
+  height: 40px
+  position: fixed
+  right: 20px
+  top: 20px
+  width: 40px
+
+.modal
+  +overlay
+  align-items: center
+  display: none
+  justify-content: center
+  overflow: hidden
+  position: fixed
+  z-index: 1986
+  &.is-active
+    display: flex

bulma/components/navbar.sass

@@ -7,8 +7,7 @@
       margin-bottom: 10px
 
 .navbar
-  &:not(:last-child)
+  @extend .block
-    margin-bottom: 20px
   code
     border-radius: $radius
   img

bulma/components/tabs.sass

@@ -1,10 +1,9 @@
 .tabs
+  @extend .block
   line-height: 24px
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
-  &:not(:last-child)
-    margin-bottom: 20px
   .fa
     font-size: 14px
     line-height: 20px

bulma/elements/controls.sass

@@ -182,7 +182,7 @@
       top: 8px
   &:not(:last-child)
     margin-bottom: 10px
-  &.is-withicon
+  &.has-icon
     & > .fa
       +fa(14px, 20px)
       color: $text-light

bulma/elements/elements.sass

@@ -7,6 +7,12 @@
 @import "messages"
 @import "notifications"
 
+.box
+  background: white
+  border-radius: 5px
+  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  padding: 20px
+
 .delete
   +unselectable
   -moz-appearance: none
@@ -26,24 +32,27 @@
     content: ""
     display: block
     height: 2px
-    left: 6px
+    left: 50%
+    margin-left: -25%
+    margin-top: -1px
     position: absolute
-    top: 11px
+    top: 50%
-    width: 12px
+    width: 50%
   &:before
     transform: rotate(45deg)
   &:after
     transform: rotate(-45deg)
   &:hover
-    background: rgba(black, 0.5)
+    background: $red
   &.is-small
     height: 16px
     width: 16px
-    &:before,
+  &.is-medium
-    &:after
+    height: 32px
-      left: 4px
+    width: 32px
-      top: 7px
+  &.is-large
-      width: 8px
+    height: 40px
+    width: 40px
 
 .icon
   +fa(21px, 24px)
@@ -107,13 +116,12 @@
   text-transform: uppercase
 
 .highlight
+  @extend .block
   font-size: 12px
   font-weight: normal
   max-width: 100%
   overflow: hidden
   padding: 0
-  &:not(:last-child)
-    margin-bottom: 20px
   pre
     overflow: auto
     max-width: 100%

bulma/elements/messages.sass

@@ -19,10 +19,9 @@
     border-top: none
 
 .message
+  @extend .block
   background: $background
   border-radius: $radius
-  &:not(:last-child)
-    margin-bottom: 20px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)

bulma/elements/notifications.sass

@@ -1,11 +1,10 @@
 .notification
+  @extend .block
   +clearfix
   background: $background
   border-radius: $radius
   padding: 16px 20px
   position: relative
-  &:not(:last-child)
-    margin-bottom: 20px
   .title
     color: inherit
   @each $name, $pair in $colors
@@ -15,6 +14,10 @@
       background: $color
       color: $color-invert
   .delete
+    background: rgba(black, 0.2)
     border-radius: 0 $radius
     float: right
     margin: -16px -20px 0 20px
+    &:hover
+      background: rgba(black, 0.5)
+

bulma/elements/titles.sass

@@ -1,12 +1,10 @@
 .title,
 .subtitle
+  @extend .block
   font-weight: 300
-  &:not(:last-child)
-    margin-bottom: 20px
   a
     &:hover
       border-bottom: 1px solid
-      // text-decoration: underline
 
 .title
   color: $text-strong

bulma/layout/section.sass

@@ -1,9 +1,10 @@
 .section
   background: white
-  padding: 40px 0
+  padding: 40px 20px
   & + .section
     border-top: 1px solid rgba($border, 0.5)
   +desktop
+    padding: 40px 0
     &.is-medium
       padding: 120px 0
     &.is-large