columns.sass in bulma-rails-0.5.2

- old
+ new

@@ -1,11 +1,13 @@
+$column-gap: 0.75rem !default
+
 .column
   display: block
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
-  padding: 0.75rem
+  padding: $column-gap
   .columns.is-mobile > &.is-narrow
     flex: none
   .columns.is-mobile > &.is-full
     flex: none
     width: 100%
@@ -276,41 +278,31 @@
         width: ($i / 12) * 100%
       &.is-offset-#{$i}-fullhd
         margin-left: ($i / 12) * 100%
 
 .columns
-  margin-left: -0.75rem
-  margin-right: -0.75rem
-  margin-top: -0.75rem
+  margin-left: (-$column-gap)
+  margin-right: (-$column-gap)
+  margin-top: (-$column-gap)
   &:last-child
-    margin-bottom: -0.75rem
+    margin-bottom: (-$column-gap)
   &:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: calc(1.5rem - #{$column-gap})
   // 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
-  &.is-grid
-    // Responsiveness
-    +tablet
-      flex-wrap: wrap
-      & > .column
-        max-width: 33.3333%
-        padding: 0.75rem
-        width: 33.3333%
-        & + .column
-          margin-left: 0
+      padding: 0 !important
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+    &:last-child
+      margin-bottom: 0
   &.is-mobile
     display: flex
   &.is-multiline
     flex-wrap: wrap
   &.is-vcentered
@@ -321,5 +313,16 @@
       display: flex
   +desktop
     // Modifiers
     &.is-desktop
       display: flex
+
+.columns.is-variable
+  --columnGap: 0.75rem
+  margin-left: calc(-1 * var(--columnGap))
+  margin-right: calc(-1 * var(--columnGap))
+  .column
+    padding-left: var(--columnGap)
+    padding-right: var(--columnGap)
+  @for $i from 0 through 8
+    &.is-#{$i}
+      --columnGap: $i * 0.25rem