grid.sass in bulma-rails-0.0.14

- old
+ new

@@ -8,28 +8,44 @@
     flex: none
     width: 33.3333%
   .columns.is-mobile > &.is-quarter
     flex: none
     width: 25%
+  .columns.is-mobile > &.is-offset-half
+    margin-left: 50%
+  .columns.is-mobile > &.is-offset-third
+    margin-left: 33.3333%
+  .columns.is-mobile > &.is-offset-quarter
+    margin-left: 25%
   @for $i from 1 through 11
-    .columns.is-mobile > &.is-#{$i}-mobile
+    .columns.is-mobile > &.is-#{$i}
       flex: none
       width: ($i / 12) * 100%
+    .columns.is-mobile > &.is-offset-#{$i}
+      margin-left: ($i / 12) * 100%
   +mobile
     &.is-half-mobile
       flex: none
       width: 50%
     &.is-third-mobile
       flex: none
       width: 33.3333%
     &.is-quarter-mobile
       flex: none
       width: 25%
+    &.is-offset-half-mobile
+      margin-left: 50%
+    &.is-offset-third-mobile
+      margin-left: 33.3333%
+    &.is-offset-quarter-mobile
+      margin-left: 25%
     @for $i from 1 through 11
       &.is-#{$i}-mobile
         flex: none
         width: ($i / 12) * 100%
+      &.is-offset-#{$i}-mobile
+        margin-left: ($i / 12) * 100%
   +tablet
     &.is-half,
     &.is-half-tablet
       flex: none
       width: 50%
@@ -39,29 +55,49 @@
       width: 33.3333%
     &.is-quarter,
     &.is-quarter-tablet
       flex: none
       width: 25%
+    &.is-offset-half,
+    &.is-offset-half-tablet
+      margin-left: 50%
+    &.is-offset-third,
+    &.is-offset-third-tablet
+      margin-left: 33.3333%
+    &.is-offset-quarter,
+    &.is-offset-quarter-tablet
+      margin-left: 25%
     @for $i from 1 through 11
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
         width: ($i / 12) * 100%
+      &.is-offset-#{$i},
+      &.is-offset-#{$i}-tablet
+        margin-left: ($i / 12) * 100%
   +desktop
     &.is-half-desktop
       flex: none
       width: 50%
     &.is-third-desktop
       flex: none
       width: 33.3333%
     &.is-quarter-desktop
       flex: none
       width: 25%
+    &.is-offset-half-desktop
+      margin-left: 50%
+    &.is-offset-third-desktop
+      margin-left: 33.3333%
+    &.is-offset-quarter-desktop
+      margin-left: 25%
     @for $i from 1 through 11
       &.is-#{$i}-desktop
         flex: none
         width: ($i / 12) * 100%
+      &.is-offset-#{$i}-desktop
+        margin-left: ($i / 12) * 100%
 
 .columns
   margin-left: -10px
   margin-right: -10px
   margin-top: -10px
@@ -69,19 +105,15 @@
     margin-bottom: -10px
   &:not(:last-child)
     margin-bottom: 10px
   &.is-mobile
     display: flex
-  +tablet
-    &:not(.is-desktop)
-      display: flex
-  +desktop
-    &.is-desktop
-      display: flex
   &.is-gapless
+    margin-left: 0
+    margin-right: 0
     &:not(:last-child)
-      margin: 0 0 20px
+      margin-bottom: 20px
     & > .column
       margin: 0
       padding: 0
   &.is-multiline
     flex-wrap: wrap
@@ -95,5 +127,11 @@
         max-width: 33.3333%
         padding: 10px
         width: 33.3333%
         & + .column
           margin-left: 0
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    &.is-desktop
+      display: flex