grid.sass in bulma-rails-0.0.18

- old
+ new

@@ -1,8 +1,11 @@
 .column
   flex: 1
   padding: 10px
+  .columns.is-mobile > &.is-full
+    flex: none
+    width: 100%
   .columns.is-mobile > &.is-half
     flex: none
     width: 50%
   .columns.is-mobile > &.is-third
     flex: none
@@ -14,17 +17,20 @@
     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
+  @for $i from 1 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
       width: ($i / 12) * 100%
     .columns.is-mobile > &.is-offset-#{$i}
       margin-left: ($i / 12) * 100%
   +mobile
+    &.is-full-mobile
+      flex: none
+      width: 100%
     &.is-half-mobile
       flex: none
       width: 50%
     &.is-third-mobile
       flex: none
@@ -36,17 +42,21 @@
       margin-left: 50%
     &.is-offset-third-mobile
       margin-left: 33.3333%
     &.is-offset-quarter-mobile
       margin-left: 25%
-    @for $i from 1 through 11
+    @for $i from 1 through 12
       &.is-#{$i}-mobile
         flex: none
         width: ($i / 12) * 100%
       &.is-offset-#{$i}-mobile
         margin-left: ($i / 12) * 100%
   +tablet
+    &.is-full,
+    &.is-full-tablet
+      flex: none
+      width: 100%
     &.is-half,
     &.is-half-tablet
       flex: none
       width: 50%
     &.is-third,
@@ -64,19 +74,22 @@
     &.is-offset-third-tablet
       margin-left: 33.3333%
     &.is-offset-quarter,
     &.is-offset-quarter-tablet
       margin-left: 25%
-    @for $i from 1 through 11
+    @for $i from 1 through 12
       &.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-full-desktop
+      flex: none
+      width: 100%
     &.is-half-desktop
       flex: none
       width: 50%
     &.is-third-desktop
       flex: none
@@ -88,11 +101,11 @@
       margin-left: 50%
     &.is-offset-third-desktop
       margin-left: 33.3333%
     &.is-offset-quarter-desktop
       margin-left: 25%
-    @for $i from 1 through 11
+    @for $i from 1 through 12
       &.is-#{$i}-desktop
         flex: none
         width: ($i / 12) * 100%
       &.is-offset-#{$i}-desktop
         margin-left: ($i / 12) * 100%
@@ -103,37 +116,84 @@
   margin-top: -10px
   &:last-child
     margin-bottom: -10px
   &:not(:last-child)
     margin-bottom: 10px
+  // Modifiers
   &.is-centered
     justify-content: center
-  &.is-mobile
-    display: flex
   &.is-gapless
     margin-left: 0
     margin-right: 0
+    margin-top: 0
+    &:last-child
+      margin-bottom: 0
     &:not(:last-child)
       margin-bottom: 20px
     & > .column
       margin: 0
       padding: 0
-  &.is-multiline
-    flex-wrap: wrap
-  &.is-vcentered
-    align-items: center
   &.is-grid
+    // Responsiveness
     +tablet
       flex-wrap: wrap
       & > .column
         flex-basis: 33.3333%
         max-width: 33.3333%
         padding: 10px
         width: 33.3333%
         & + .column
           margin-left: 0
+  &.is-mobile
+    display: flex
+  &.is-multiline
+    flex-wrap: wrap
+  &.is-vcentered
+    align-items: center
+  // Responsiveness
   +tablet
     &:not(.is-desktop)
       display: flex
   +desktop
+    // Modifiers
     &.is-desktop
       display: flex
+
+.tile-content
+  align-items: stretch
+  flex: 1
+  margin: 0 !important
+  // Responsiveness
+  +tablet
+    display: flex
+
+.tile
+  flex: 1
+  // Modifiers
+  &.is-parent
+    padding: 10px
+  // Responsiveness
+  +tablet
+    // Sizes
+    @for $i from 1 through 12
+      &.is-#{$i}
+        flex: none
+        width: ($i / 12) * 100%
+
+.tiles
+  align-items: stretch
+  // Modifiers
+  &.is-ancestor
+    margin-left: -10px
+    margin-right: -10px
+    margin-top: -10px
+    &:last-child
+      margin-bottom: -10px
+    &:not(:last-child)
+      margin-bottom: 10px
+  &.is-vertical
+    flex-direction: column
+    & > .tile-content:not(:last-child)
+      margin-bottom: 20px !important
+  // Responsiveness
+  +tablet
+    display: flex