Add modals, Add block, Add has modifier

diff --git a/bulma/base/content.sass b/bulma/base/content.sass
index 1807c6050b62b37308ec24182a8c566adc83a85c..d479e5f654d5486777894d07d18f5bf2f708749a 100644 (file)
--- a/bulma/base/content.sass
+++ b/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,

diff --git a/bulma/base/generic.sass b/bulma/base/generic.sass
index 1305a80ad1ed1007783cc94716c847a699034f34..ead7784374d500005a655b0f765674c3517fa2f8 100644 (file)
--- a/bulma/base/generic.sass
+++ b/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

diff --git a/bulma/base/helpers.sass b/bulma/base/helpers.sass
index 4182ce75d753811f7e912299d5e698fb91f9d8d5..b0d6eb14a29305a86a1f7c71b43a3b0a2388d7e4 100644 (file)
--- a/bulma/base/helpers.sass
+++ b/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

diff --git a/bulma/components/components.sass b/bulma/components/components.sass
index 77ecadcc96f797991795a7fbb3c73ae51c27d933..7a3bb6a8a31e475f27d8c5d41a4f003d83f71dcb 100644 (file)
--- a/bulma/components/components.sass
+++ b/bulma/components/components.sass
@@ -7,6 +7,4 @@
 @import "tabs"
 @import "media"
 @import "menu"
-
-.block:not(:last-child)
-  margin-bottom: 20px
+@import "modal"

diff --git a/bulma/components/media.sass b/bulma/components/media.sass
index bf275eb0a4f15315712586cca2ca0ebf212a3d5e..d6cdae3f007a9631d61994467e5667b59ad75be5 100644 (file)
--- a/bulma/components/media.sass
+++ b/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-bottom: 20px
-  +tablet
-    margin-right: 20px
+  margin-right: 10px
 
 .media-right
-  +mobile
-    margin-top: 20px
-  +tablet
-    margin-left: 20px
+  margin-left: 10px
 
 .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

diff --git a/bulma/components/modal.sass b/bulma/components/modal.sass
new file mode 100644 (file)
index 0000000..89e09fd
--- /dev/null
+++ b/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

diff --git a/bulma/components/navbar.sass b/bulma/components/navbar.sass
index 153f93c8af0766f5f04975bd35c3bd2430d1356a..a1b36b0a52d3c29a960a0610fd1e9c1b54063b51 100644 (file)
--- a/bulma/components/navbar.sass
+++ b/bulma/components/navbar.sass
@@ -7,8 +7,7 @@
       margin-bottom: 10px
 
 .navbar
-  &:not(:last-child)
-    margin-bottom: 20px
+  @extend .block
   code
     border-radius: $radius
   img

diff --git a/bulma/components/tabs.sass b/bulma/components/tabs.sass
index 90afd85e2f5fd9310c2e570925808885c56ed348..02218cc1162221cf9fa2c1a38aa2e94cd57d83b0 100644 (file)
--- a/bulma/components/tabs.sass
+++ b/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

diff --git a/bulma/elements/controls.sass b/bulma/elements/controls.sass
index 0bc84e477f0991702ea3fa796dd659add1dde30e..f4ca31bb0cdd9b0b9d753a0e1422157d238438e4 100644 (file)
--- a/bulma/elements/controls.sass
+++ b/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

diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass
index eba8de6112b4304791a2279a31d89536829d484e..078d674a92b433bf99285ebdd85eec4e32dcaf49 100644 (file)
--- a/bulma/elements/elements.sass
+++ b/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
-    width: 12px
+    top: 50%
+    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,
-    &:after
-      left: 4px
-      top: 7px
-      width: 8px
+  &.is-medium
+    height: 32px
+    width: 32px
+  &.is-large
+    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%

diff --git a/bulma/elements/messages.sass b/bulma/elements/messages.sass
index 0d239db613547c34fb6e02fe4ab107a0bdf71c15..f46e2de7db9226ee46f92f3ad1c4e8be7e9bc06e 100644 (file)
--- a/bulma/elements/messages.sass
+++ b/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)

diff --git a/bulma/elements/notifications.sass b/bulma/elements/notifications.sass
index 28bdf3b67710a70a8d8fb2560a3632eb7b102ab1..67c424b0c60538b7ea115964bb77e3a0ffa86e8d 100644 (file)
--- a/bulma/elements/notifications.sass
+++ b/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)
+

diff --git a/bulma/elements/titles.sass b/bulma/elements/titles.sass
index ded99d1c04a2d32d552d8832e757be23dbc0b1a6..8c6edab0710c66289121fc5892f3d2bf1289cceb 100644 (file)
--- a/bulma/elements/titles.sass
+++ b/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

diff --git a/bulma/layout/section.sass b/bulma/layout/section.sass
index 0fce721a24bc3651c42c41bbe22a332332098cb3..86bbe85f9e0f9632fdc3ba13970cfa1721864e2a 100644 (file)
--- a/bulma/layout/section.sass
+++ b/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