Add responsive columns, Add import quotes, Update helpers

diff --git a/bulma.sass b/bulma.sass
index 45a7e672a8cc7799da973360435c7ff516b8d594..b05dcaeb83d24b0922ba134cc9180eb6c951109e 100644 (file)
--- a/bulma.sass
+++ b/bulma.sass
@@ -1,9 +1,9 @@
 @charset "utf-8"
 
-@import bulma/utilities/utilities
-@import bulma/config/variables
-@import bulma/config/generated-variables
-@import bulma/base/base
-@import bulma/elements/elements
-@import bulma/components/components
-@import bulma/layout/layout
+@import "bulma/utilities/utilities"
+@import "bulma/config/variables"
+@import "bulma/config/generated-variables"
+@import "bulma/base/base"
+@import "bulma/elements/elements"
+@import "bulma/components/components"
+@import "bulma/layout/layout"

diff --git a/bulma/base/helpers.sass b/bulma/base/helpers.sass
index 3ccf976c7255dcb5a07be57a9d03d81100ebee77..4182ce75d753811f7e912299d5e698fb91f9d8d5 100644 (file)
--- a/bulma/base/helpers.sass
+++ b/bulma/base/helpers.sass
@@ -1,3 +1,5 @@
+// Alignment
+
 .is-centered
   text-align: center
 
@@ -7,17 +9,59 @@
 .is-right
   text-align: right
 
+// Display
+
 .is-block
   display: block
 
-.is-disabled
-  pointer-events: none
-
 .is-inline
   display: inline
 
+.is-flex
+  display: flex
+
+// Pull
+
+.is-clearfix
+  +clearfix
+
+.is-pulled-left
+  float: left
+
+.is-pulled-right
+  float: right
+
+// Size
+
+.is-fullwidth
+  width: 100%
+
+// Visibility
+
+.is-hidden-mobile
+  +mobile
+    display: none !important
+
+.is-hidden-tablet
+  +tablet
+    display: none !important
+
+.is-hidden-touch
+  +touch
+    display: none !important
+
+.is-hidden-desktop
+  +desktop
+    display: none !important
+
+// Other
+
+.is-disabled
+  pointer-events: none
+
 .is-marginless
   margin: 0 !important
 
 .is-unselectable
   +unselectable
+

diff --git a/bulma/components/grid.sass b/bulma/components/grid.sass
index 0c0c6a22247002a3ad1678dbbb3b68549b15b6ee..e0e9ff78af89457ef7881aab31cfbf9c94019d39 100644 (file)
--- a/bulma/components/grid.sass
+++ b/bulma/components/grid.sass
@@ -1,39 +1,87 @@
 .column
+  flex: 1
+  padding: 10px
+  .columns.is-mobile > &.is-half
+    flex: none
+    width: 50%
+  .columns.is-mobile > &.is-third
+    flex: none
+    width: 33.3333%
+  .columns.is-mobile > &.is-quarter
+    flex: none
+    width: 25%
+  @for $i from 1 through 11
+    .columns.is-mobile > &.is-#{$i}-mobile
+      flex: none
+      width: ($i / 12) * 100%
   +mobile
-    & + .column
-      margin-top: $column-gap
+    &.is-half-mobile
+      flex: none
+      width: 50%
+    &.is-third-mobile
+      flex: none
+      width: 33.3333%
+    &.is-quarter-mobile
+      flex: none
+      width: 25%
+    @for $i from 1 through 11
+      &.is-#{$i}-mobile
+        flex: none
+        width: ($i / 12) * 100%
   +tablet
-    flex: 1
-    & + .column
-      margin-left: $column-gap
-    &.is-double
-      flex: 2
-    &.is-triple
-      flex: 3
-    &.is-quadruple
-      flex: 4
-    &.is-half
+    &.is-half,
+    &.is-half-tablet
       flex: none
       width: 50%
-    &.is-third
+    &.is-third,
+    &.is-third-tablet
       flex: none
       width: 33.3333%
-    &.is-quarter
+    &.is-quarter,
+    &.is-quarter-tablet
       flex: none
       width: 25%
     @for $i from 1 through 11
-      &.is-#{$i}
+      &.is-#{$i},
+      &.is-#{$i}-tablet
+        flex: none
+        width: ($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%
+    @for $i from 1 through 11
+      &.is-#{$i}-desktop
         flex: none
         width: ($i / 12) * 100%
 
 .columns
-  &:not(:last-child)
-    margin-bottom: $column-gap
-  +tablet
+  margin-bottom: 10px
+  margin-left: -10px
+  margin-right: -10px
+  margin-top: -10px
+  &.is-mobile
     display: flex
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    &.is-desktop
+      display: flex
   &.is-gapless
-    & > .column + .column
+    &:not(:last-child)
+      margin: 0 0 20px
+    & > .column
       margin: 0
+      padding: 0
+  &.is-multiline
+    flex-wrap: wrap
   &.is-vcentered
     align-items: center
   &.is-grid