Fix columns docs

docs/_sass/specific.sass

@@ -124,3 +124,31 @@
 .bd-emoji
   margin-right: 0.5em
   margin-top: 2px
+
+$notification-background-color: $background !default
+$notification-radius: $radius !default
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
+
+.bd-notification
+  background-color: $background
+  border-radius: $radius
+  padding: 1.25rem 1.5rem
+  position: relative
+  text-align: center
+  .title,
+  .subtitle,
+  .content,
+  strong
+    color: currentColor
+  code,
+  pre
+    background: $white
+  pre code
+    background: transparent
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert

docs/bulma-docs.sass

@@ -21,14 +21,5 @@ $twitter: #55acee
 @import "./_sass/love"
 @import "./_sass/bootstrap"
 
-\:root
+.columns
-  --primary: #{$primary}
+  background-color: coral
-  --gap: 0.75rem
-
-html
-  \::-moz-selection
-    background: $primary
-    color: $primary-invert
-  \::selection
-    background: $primary
-    color: $primary-invert

docs/css/bulma-docs.css

@@ -7052,7 +7052,8 @@ label.panel-block:hover {
           flex-grow: 1;
   -ms-flex-negative: 1;
       flex-shrink: 1;
-  padding: 0.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
 .columns.is-mobile > .column.is-narrow {
@@ -8260,15 +8261,10 @@ label.panel-block:hover {
 .columns {
   margin-left: -0.75rem;
   margin-right: -0.75rem;
-  margin-top: -0.75rem;
-}
-
-.columns:last-child {
-  margin-bottom: -0.75rem;
 }
 
 .columns:not(:last-child) {
-  margin-bottom: 0.75rem;
+  margin-bottom: 1.5rem;
 }
 
 .columns.is-centered {
@@ -8280,35 +8276,11 @@ label.panel-block:hover {
 .columns.is-gapless {
   margin-left: 0;
   margin-right: 0;
-  margin-top: 0;
-}
-
-.columns.is-gapless:last-child {
-  margin-bottom: 0;
-}
-
-.columns.is-gapless:not(:last-child) {
-  margin-bottom: 1.5rem;
 }
 
 .columns.is-gapless > .column {
   margin: 0;
-  padding: 0;
+  padding: 0 !important;
-}
-
-@media screen and (min-width: 769px), print {
-  .columns.is-grid {
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
-  }
-  .columns.is-grid > .column {
-    max-width: 33.3333%;
-    padding: 0.75rem;
-    width: 33.3333%;
-  }
-  .columns.is-grid > .column + .column {
-    margin-left: 0;
-  }
 }
 
 .columns.is-mobile {
@@ -8322,6 +8294,23 @@ label.panel-block:hover {
       flex-wrap: wrap;
 }
 
+.columns.is-multiline > .column {
+  padding-bottom: 0.75rem;
+  padding-top: 0.75rem;
+}
+
+.columns.is-multiline:not(.is-gapless) {
+  margin-top: -0.75rem;
+}
+
+.columns.is-multiline:not(.is-gapless):last-child {
+  margin-bottom: -0.75rem;
+}
+
+.columns.is-multiline:not(.is-gapless):not(:last-child) {
+  margin-bottom: calc(1.5rem - 0.75rem);
+}
+
 .columns.is-vcentered {
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -10556,6 +10545,75 @@ html.route-index #carbon {
   margin-top: 2px;
 }
 
+.bd-notification {
+  background-color: whitesmoke;
+  border-radius: 3px;
+  padding: 1.25rem 1.5rem;
+  position: relative;
+  text-align: center;
+}
+
+.bd-notification .title,
+.bd-notification .subtitle,
+.bd-notification .content,
+.bd-notification strong {
+  color: currentColor;
+}
+
+.bd-notification code,
+.bd-notification pre {
+  background: white;
+}
+
+.bd-notification pre code {
+  background: transparent;
+}
+
+.bd-notification.is-white {
+  background-color: white;
+  color: #0a0a0a;
+}
+
+.bd-notification.is-black {
+  background-color: #0a0a0a;
+  color: white;
+}
+
+.bd-notification.is-light {
+  background-color: whitesmoke;
+  color: #363636;
+}
+
+.bd-notification.is-dark {
+  background-color: #363636;
+  color: whitesmoke;
+}
+
+.bd-notification.is-primary {
+  background-color: #00d1b2;
+  color: #fff;
+}
+
+.bd-notification.is-info {
+  background-color: #3273dc;
+  color: #fff;
+}
+
+.bd-notification.is-success {
+  background-color: #23d160;
+  color: #fff;
+}
+
+.bd-notification.is-warning {
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.bd-notification.is-danger {
+  background-color: #ff3860;
+  color: #fff;
+}
+
 .bd-example,
 .bd-structure {
   border: 1px solid #ffdd57;
@@ -11639,19 +11697,8 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   margin-bottom: 3rem;
 }
 
-:root {
+.columns {
-  --primary: #00d1b2;
+  background-color: coral;
-  --gap: 0.75rem;
-}
-
-html ::-moz-selection {
-  background: #00d1b2;
-  color: #fff;
-}
-
-html ::selection {
-  background: #00d1b2;
-  color: #fff;
 }
 
 /*# sourceMappingURL=bulma-docs.css.map */

sass/grid/columns.sass

@@ -1,9 +1,12 @@
+$column-gap: 0.75rem !default
+
 .column
   display: block
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
-  padding: 0.75rem
+  padding-left: $column-gap
+  padding-right: $column-gap
   .columns.is-mobile > &.is-narrow
     flex: none
   .columns.is-mobile > &.is-full
@@ -278,41 +281,46 @@
         margin-left: ($i / 12) * 100%
 
 .columns
-  margin-left: -0.75rem
+  margin-left: (-$column-gap)
-  margin-right: -0.75rem
+  margin-right: (-$column-gap)
-  margin-top: -0.75rem
+  // margin-top: (-$column-gap)
-  &:last-child
-    margin-bottom: -0.75rem
   &:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: 1.5rem
+  // &:last-child
+  //   margin-bottom: (-$column-gap * 2)
+  // &:not(:last-child)
+  //   margin-bottom: $column-gap * 2
   // Modifiers
   &.is-centered
     justify-content: center
   &.is-gapless
     margin-left: 0
     margin-right: 0
-    margin-top: 0
-    &:last-child
-      margin-bottom: 0
-    &:not(:last-child)
-      margin-bottom: 1.5rem
     & > .column
       margin: 0
-      padding: 0
+      padding: 0 !important
-  &.is-grid
+  // &.is-grid
-    // Responsiveness
+  //   +tablet
-    +tablet
+  //     flex-wrap: wrap
-      flex-wrap: wrap
+  //     & > .column
-      & > .column
+  //       max-width: 33.3333%
-        max-width: 33.3333%
+  //       padding: $column-gap
-        padding: 0.75rem
+  //       width: 33.3333%
-        width: 33.3333%
+  //       & + .column
-        & + .column
+  //         margin-left: 0
-          margin-left: 0
   &.is-mobile
     display: flex
   &.is-multiline
     flex-wrap: wrap
+    & > .column
+      padding-bottom: $column-gap
+      padding-top: $column-gap
+    &:not(.is-gapless)
+      margin-top: (-$column-gap)
+      &:last-child
+        margin-bottom: (-$column-gap)
+      &:not(:last-child)
+        margin-bottom: calc(1.5rem - #{$column-gap})
   &.is-vcentered
     align-items: center
   // Responsiveness