bulma-rails 0.9.1 → 0.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41b5fc12ffe9ec0813cb85b62e9c378dde1bf49cb495310321f98670babc5e81
-  data.tar.gz: e1f1416581b6145f60a72119eabfa4584f4c8ecc2cf667247983327078b2b3a2
+  metadata.gz: ab8722d0592d514a63e177a4a3d060b320bd5902677793319dbd83f5a73f0cf3
+  data.tar.gz: a7b21a9651aeaea722a8247923741e75ecc3dff593f36dd4e3f80094459a23f1
 SHA512:
-  metadata.gz: d0201fcc1931f21bad020d6ad7c2667ad9381fc5cc93c2bcfb92f59be0ba68a197da9785d5f91e8b5b11e746a1080a8146e1157e5a323280dd078f79a65b66a0
-  data.tar.gz: c2473c57268be1eb151fcb54c9c8575561501d1ea003455ac67fb344cf5f3e45322ba22139e6c78e022ea94f06f818753604e3ff6ef589225259daf54133f423
+  metadata.gz: 3f4a888d63dca6673ca7776699510a0dab6900d5d047f022950bf29073fc934fd139d0601b450fc451706360e9ab8057e930f2112bccec1d411f6f51d8337d39
+  data.tar.gz: 01f77a36af7b192105dc3d3613f1aa979f4e0f416ca693f8d69280b930e1d9088ce3989a56a31bf8da70d744b4d02c04b7538e268007c40b561dc5d11cf546b9

data/README.md

@@ -8,7 +8,7 @@ A modern CSS framework based on Flexbox.
 
 Add this line to your application's Gemfile:
 
-    gem "bulma-rails", "~> 0.9.1"
+    gem "bulma-rails", "~> 0.9.2"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
-/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.9.2 | MIT License | github.com/jgthms/bulma */
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"

data/app/assets/stylesheets/sass/base/_all.sass

@@ -1,5 +1,6 @@
 /* Bulma Base */
 @charset "utf-8"
 
-@import "minireset.sass"
-@import "generic.sass"
+@import "minireset"
+@import "generic"
+@import "animations"

data/app/assets/stylesheets/sass/base/animations.sass

@@ -0,0 +1,5 @@
+@keyframes spinAround
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(359deg)

data/app/assets/stylesheets/sass/base/generic.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $body-background-color: $scheme-main !default
 $body-size: 16px !default
 $body-min-width: 300px !default

data/app/assets/stylesheets/sass/components/_all.sass

@@ -1,15 +1,15 @@
 /* Bulma Components */
 @charset "utf-8"
 
-@import "breadcrumb.sass"
-@import "card.sass"
-@import "dropdown.sass"
-@import "level.sass"
-@import "media.sass"
-@import "menu.sass"
-@import "message.sass"
-@import "modal.sass"
-@import "navbar.sass"
-@import "pagination.sass"
-@import "panel.sass"
-@import "tabs.sass"
+@import "breadcrumb"
+@import "card"
+@import "dropdown"
+@import "level"
+@import "media"
+@import "menu"
+@import "message"
+@import "modal"
+@import "navbar"
+@import "pagination"
+@import "panel"
+@import "tabs"

data/app/assets/stylesheets/sass/components/breadcrumb.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $breadcrumb-item-color: $link !default
 $breadcrumb-item-hover-color: $link-hover !default
 $breadcrumb-item-active-color: $text-strong !default

data/app/assets/stylesheets/sass/components/card.sass

@@ -1,8 +1,9 @@
+@import "../utilities/mixins"
+
 $card-color: $text !default
 $card-background-color: $scheme-main !default
 $card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 $card-radius: 0.25rem !default
-$card-overflow: hidden !default
 
 $card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
@@ -25,10 +26,18 @@ $card-media-margin: $block-spacing !default
   box-shadow: $card-shadow
   color: $card-color
   max-width: 100%
-  overflow: $card-overflow
   position: relative
 
+%card-item
+  &:first-child
+    border-top-left-radius: $card-radius
+    border-top-right-radius: $card-radius
+  &:last-child
+    border-bottom-left-radius: $card-radius
+    border-bottom-right-radius: $card-radius
+
 .card-header
+  @extend %card-item
   background-color: $card-header-background-color
   align-items: stretch
   box-shadow: $card-header-shadow
@@ -54,12 +63,22 @@ $card-media-margin: $block-spacing !default
 .card-image
   display: block
   position: relative
+  &:first-child
+    img
+      border-top-left-radius: $card-radius
+      border-top-right-radius: $card-radius
+  &:last-child
+    img
+      border-bottom-left-radius: $card-radius
+      border-bottom-right-radius: $card-radius
 
 .card-content
+  @extend %card-item
   background-color: $card-content-background-color
   padding: $card-content-padding
 
 .card-footer
+  @extend %card-item
   background-color: $card-footer-background-color
   border-top: $card-footer-border-top
   align-items: stretch

data/app/assets/stylesheets/sass/components/dropdown.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $dropdown-menu-min-width: 12rem !default
 
 $dropdown-content-background-color: $scheme-main !default

data/app/assets/stylesheets/sass/components/level.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $level-item-spacing: ($block-spacing / 2) !default
 
 .level

data/app/assets/stylesheets/sass/components/media.sass

@@ -1,26 +1,33 @@
+@import "../utilities/mixins"
+
 $media-border-color: bulmaRgba($border, 0.5) !default
-$media-spacing: 1rem
-$media-spacing-large: 1.5rem
+$media-border-size: 1px !default
+$media-spacing: 1rem !default
+$media-spacing-large: 1.5rem !default
+$media-content-spacing: 0.75rem !default
+$media-level-1-spacing: 0.75rem !default
+$media-level-1-content-spacing: 0.5rem !default
+$media-level-2-spacing: 0.5rem !default
 
 .media
   align-items: flex-start
   display: flex
   text-align: inherit
   .content:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $media-content-spacing
   .media
-    border-top: 1px solid $media-border-color
+    border-top: $media-border-size solid $media-border-color
     display: flex
-    padding-top: 0.75rem
+    padding-top: $media-level-1-spacing
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 0.5rem
+      margin-bottom: $media-level-1-content-spacing
     .media
-      padding-top: 0.5rem
+      padding-top: $media-level-2-spacing
       & + .media
-        margin-top: 0.5rem
+        margin-top: $media-level-2-spacing
   & + .media
-    border-top: 1px solid $media-border-color
+    border-top: $media-border-size solid $media-border-color
     margin-top: $media-spacing
     padding-top: $media-spacing
   // Sizes

data/app/assets/stylesheets/sass/components/menu.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $menu-item-color: $text !default
 $menu-item-radius: $radius-small !default
 $menu-item-hover-color: $text-strong !default

data/app/assets/stylesheets/sass/components/message.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $message-background-color: $background !default
 $message-radius: $radius !default
 

data/app/assets/stylesheets/sass/components/modal.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $modal-z: 40 !default
 
 $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default

data/app/assets/stylesheets/sass/components/navbar.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $navbar-background-color: $scheme-main !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
 $navbar-box-shadow-color: $background !default

data/app/assets/stylesheets/sass/components/pagination.sass

@@ -1,3 +1,6 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
 $pagination-color: $text-strong !default
 $pagination-border-color: $border !default
 $pagination-margin: -0.25rem !default
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default
 $pagination-item-padding-left: 0.5em !default
 $pagination-item-padding-right: 0.5em !default
 
+$pagination-nav-padding-left: 0.75em !default
+$pagination-nav-padding-right: 0.75em !default
+
 $pagination-hover-color: $link-hover !default
 $pagination-hover-border-color: $link-hover-border !default
 
@@ -27,7 +33,7 @@ $pagination-current-border-color: $link !default
 
 $pagination-ellipsis-color: $grey-light !default
 
-$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
 
 .pagination
   @extend %block
@@ -91,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-previous,
 .pagination-next
-  padding-left: 0.75em
-  padding-right: 0.75em
+  padding-left: $pagination-nav-padding-left
+  padding-right: $pagination-nav-padding-right
   white-space: nowrap
 
 .pagination-link
@@ -107,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-list
   flex-wrap: wrap
+  li
+    list-style: none
 
 +mobile
   .pagination

data/app/assets/stylesheets/sass/components/panel.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $panel-margin: $block-spacing !default
 $panel-item-border: 1px solid $border-light !default
 $panel-radius: $radius-large !default

data/app/assets/stylesheets/sass/components/tabs.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $tabs-border-bottom-color: $border !default
 $tabs-border-bottom-style: solid !default
 $tabs-border-bottom-width: 1px !default

data/app/assets/stylesheets/sass/elements/_all.sass

@@ -1,16 +1,16 @@
 /* Bulma Elements */
 @charset "utf-8"
 
-@import "box.sass"
-@import "button.sass"
-@import "container.sass"
-@import "content.sass"
-@import "icon.sass"
-@import "image.sass"
-@import "notification.sass"
-@import "progress.sass"
-@import "table.sass"
-@import "tag.sass"
-@import "title.sass"
+@import "box"
+@import "button"
+@import "container"
+@import "content"
+@import "icon"
+@import "image"
+@import "notification"
+@import "progress"
+@import "table"
+@import "tag"
+@import "title"
 
-@import "other.sass"
+@import "other"

data/app/assets/stylesheets/sass/elements/box.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $box-color: $text !default
 $box-background-color: $scheme-main !default
 $box-radius: $radius-large !default

data/app/assets/stylesheets/sass/elements/button.sass

@@ -1,3 +1,6 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
 $button-color: $text-strong !default
 $button-background-color: $scheme-main !default
 $button-family: false !default
@@ -24,6 +27,13 @@ $button-text-decoration: underline !default
 $button-text-hover-background-color: $background !default
 $button-text-hover-color: $text-strong !default
 
+$button-ghost-background: none !default
+$button-ghost-border-color: transparent !default
+$button-ghost-color: $link !default
+$button-ghost-decoration: none !default
+$button-ghost-hover-color: $link !default
+$button-ghost-hover-decoration: underline !default
+
 $button-disabled-background-color: $scheme-main !default
 $button-disabled-border-color: $border !default
 $button-disabled-shadow: none !default
@@ -37,7 +47,8 @@ $button-colors: $colors !default
 
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
-  border-radius: $radius-small
+  &:not(.is-rounded)
+    border-radius: $radius-small
   font-size: $size-small
 =button-normal
   font-size: $size-normal
@@ -117,6 +128,15 @@ $button-colors: $colors !default
       background-color: transparent
       border-color: transparent
       box-shadow: none
+  &.is-ghost
+    background: $button-ghost-background
+    border-color: $button-ghost-border-color
+    color: $button-ghost-color
+    text-decoration: $button-ghost-decoration
+    &:hover,
+    &.is-hovered
+      color: $button-ghost-hover-color
+      text-decoration: $button-ghost-hover-decoration
   @each $name, $pair in $button-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)

data/app/assets/stylesheets/sass/elements/container.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $container-offset: (2 * $gap) !default
 $container-max-width: $fullhd !default
 

data/app/assets/stylesheets/sass/elements/content.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $content-heading-color: $text-strong !default
 $content-heading-weight: $weight-semibold !default
 $content-heading-line-height: 1.125 !default

data/app/assets/stylesheets/sass/elements/icon.sass

@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default
 $icon-dimensions-small: 1rem !default
 $icon-dimensions-medium: 2rem !default
 $icon-dimensions-large: 3rem !default
+$icon-text-spacing: 0.25em !default
 
 .icon
   align-items: center
@@ -19,3 +20,21 @@ $icon-dimensions-large: 3rem !default
   &.is-large
     height: $icon-dimensions-large
     width: $icon-dimensions-large
+
+.icon-text
+  align-items: flex-start
+  color: inherit
+  display: inline-flex
+  flex-wrap: wrap
+  line-height: $icon-dimensions
+  vertical-align: top
+  .icon
+    flex-grow: 0
+    flex-shrink: 0
+    &:not(:last-child)
+      margin-right: $icon-text-spacing
+    &:not(:first-child)
+      margin-left: $icon-text-spacing
+
+div.icon-text
+  display: flex

data/app/assets/stylesheets/sass/elements/image.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $dimensions: 16 24 32 48 64 96 128 !default
 
 .image

data/app/assets/stylesheets/sass/elements/notification.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $notification-background-color: $background !default
 $notification-code-background-color: $scheme-main !default
 $notification-radius: $radius !default

data/app/assets/stylesheets/sass/elements/other.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 .block
   @extend %block
 

data/app/assets/stylesheets/sass/elements/progress.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $progress-bar-background-color: $border-light !default
 $progress-value-background-color: $text !default
 $progress-border-radius: $radius-rounded !default

data/app/assets/stylesheets/sass/elements/table.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $table-color: $text-strong !default
 $table-background-color: $scheme-main !default
 

data/app/assets/stylesheets/sass/elements/tag.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $tag-background-color: $background !default
 $tag-color: $text !default
 $tag-radius: $radius !default

data/app/assets/stylesheets/sass/elements/title.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $title-color: $text-strong !default
 $title-family: false !default
 $title-size: $size-3 !default

data/app/assets/stylesheets/sass/form/_all.sass

@@ -1,9 +1,9 @@
 /* Bulma Form */
 @charset "utf-8"
 
-@import "shared.sass"
-@import "input-textarea.sass"
-@import "checkbox-radio.sass"
-@import "select.sass"
-@import "file.sass"
-@import "tools.sass"
+@import "shared"
+@import "input-textarea"
+@import "checkbox-radio"
+@import "select"
+@import "file"
+@import "tools"

data/app/assets/stylesheets/sass/form/shared.sass

@@ -1,3 +1,6 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
 $form-colors: $colors !default
 
 $input-color: $text-strong !default

data/app/assets/stylesheets/sass/grid/_all.sass

@@ -1,5 +1,5 @@
 /* Bulma Grid */
 @charset "utf-8"
 
-@import "columns.sass"
-@import "tiles.sass"
+@import "columns"
+@import "tiles"

data/app/assets/stylesheets/sass/grid/columns.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $column-gap: 0.75rem !default
 
 .column
@@ -8,6 +10,7 @@ $column-gap: 0.75rem !default
   padding: $column-gap
   .columns.is-mobile > &.is-narrow
     flex: none
+    width: unset
   .columns.is-mobile > &.is-full
     flex: none
     width: 100%
@@ -39,32 +42,33 @@ $column-gap: 0.75rem !default
     flex: none
     width: 80%
   .columns.is-mobile > &.is-offset-three-quarters
-    margin-left: 75%
+    +ltr-property("margin", 75%, false)
   .columns.is-mobile > &.is-offset-two-thirds
-    margin-left: 66.6666%
+    +ltr-property("margin", 66.6666%, false)
   .columns.is-mobile > &.is-offset-half
-    margin-left: 50%
+    +ltr-property("margin", 50%, false)
   .columns.is-mobile > &.is-offset-one-third
-    margin-left: 33.3333%
+    +ltr-property("margin", 33.3333%, false)
   .columns.is-mobile > &.is-offset-one-quarter
-    margin-left: 25%
+    +ltr-property("margin", 25%, false)
   .columns.is-mobile > &.is-offset-one-fifth
-    margin-left: 20%
+    +ltr-property("margin", 20%, false)
   .columns.is-mobile > &.is-offset-two-fifths
-    margin-left: 40%
+    +ltr-property("margin", 40%, false)
   .columns.is-mobile > &.is-offset-three-fifths
-    margin-left: 60%
+    +ltr-property("margin", 60%, false)
   .columns.is-mobile > &.is-offset-four-fifths
-    margin-left: 80%
+    +ltr-property("margin", 80%, false)
   @for $i from 0 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
       width: percentage($i / 12)
     .columns.is-mobile > &.is-offset-#{$i}
-      margin-left: percentage($i / 12)
+      +ltr-property("margin", percentage($i / 12), false)
   +mobile
     &.is-narrow-mobile
       flex: none
+      width: unset
     &.is-full-mobile
       flex: none
       width: 100%
@@ -96,33 +100,34 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-mobile
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-mobile
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-mobile
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-mobile
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-mobile
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-mobile
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-mobile
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-mobile
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-mobile
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
     @for $i from 0 through 12
       &.is-#{$i}-mobile
         flex: none
         width: percentage($i / 12)
       &.is-offset-#{$i}-mobile
-        margin-left: percentage($i / 12)
+        +ltr-property("margin", percentage($i / 12), false)
   +tablet
     &.is-narrow,
     &.is-narrow-tablet
       flex: none
+      width: unset
     &.is-full,
     &.is-full-tablet
       flex: none
@@ -165,31 +170,31 @@ $column-gap: 0.75rem !default
       width: 80%
     &.is-offset-three-quarters,
     &.is-offset-three-quarters-tablet
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds,
     &.is-offset-two-thirds-tablet
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half,
     &.is-offset-half-tablet
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third,
     &.is-offset-one-third-tablet
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter,
     &.is-offset-one-quarter-tablet
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth,
     &.is-offset-one-fifth-tablet
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths,
     &.is-offset-two-fifths-tablet
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths,
     &.is-offset-three-fifths-tablet
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths,
     &.is-offset-four-fifths-tablet
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
     @for $i from 0 through 12
       &.is-#{$i},
       &.is-#{$i}-tablet
@@ -197,10 +202,11 @@ $column-gap: 0.75rem !default
         width: percentage($i / 12)
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
-        margin-left: percentage($i / 12)
+        +ltr-property("margin", percentage($i / 12), false)
   +touch
     &.is-narrow-touch
       flex: none
+      width: unset
     &.is-full-touch
       flex: none
       width: 100%
@@ -232,32 +238,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-touch
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-touch
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-touch
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-touch
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-touch
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-touch
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-touch
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-touch
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-touch
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
     @for $i from 0 through 12
       &.is-#{$i}-touch
         flex: none
         width: percentage($i / 12)
       &.is-offset-#{$i}-touch
-        margin-left: percentage($i / 12)
+        +ltr-property("margin", percentage($i / 12), false)
   +desktop
     &.is-narrow-desktop
       flex: none
+      width: unset
     &.is-full-desktop
       flex: none
       width: 100%
@@ -289,32 +296,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-desktop
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-desktop
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-desktop
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-desktop
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-desktop
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-desktop
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-desktop
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-desktop
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-desktop
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
     @for $i from 0 through 12
       &.is-#{$i}-desktop
         flex: none
         width: percentage($i / 12)
       &.is-offset-#{$i}-desktop
-        margin-left: percentage($i / 12)
+        +ltr-property("margin", percentage($i / 12), false)
   +widescreen
     &.is-narrow-widescreen
       flex: none
+      width: unset
     &.is-full-widescreen
       flex: none
       width: 100%
@@ -346,32 +354,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-widescreen
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-widescreen
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-widescreen
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-widescreen
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-widescreen
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-widescreen
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-widescreen
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-widescreen
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-widescreen
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
     @for $i from 0 through 12
       &.is-#{$i}-widescreen
         flex: none
         width: percentage($i / 12)
       &.is-offset-#{$i}-widescreen
-        margin-left: percentage($i / 12)
+        +ltr-property("margin", percentage($i / 12), false)
   +fullhd
     &.is-narrow-fullhd
       flex: none
+      width: unset
     &.is-full-fullhd
       flex: none
       width: 100%
@@ -403,33 +412,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-fullhd
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-fullhd
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-fullhd
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-fullhd
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-fullhd
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-fullhd
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-fullhd
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-fullhd
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-fullhd
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
     @for $i from 0 through 12
       &.is-#{$i}-fullhd
         flex: none
         width: percentage($i / 12)
       &.is-offset-#{$i}-fullhd
-        margin-left: percentage($i / 12)
+        +ltr-property("margin", percentage($i / 12), false)
 
 .columns
-  margin-left: (-$column-gap)
-  margin-right: (-$column-gap)
+  +ltr-property("margin", (-$column-gap), false)
+  +ltr-property("margin", (-$column-gap))
   margin-top: (-$column-gap)
   &:last-child
     margin-bottom: (-$column-gap)
@@ -439,8 +448,8 @@ $column-gap: 0.75rem !default
   &.is-centered
     justify-content: center
   &.is-gapless
-    margin-left: 0
-    margin-right: 0
+    +ltr-property("margin", 0, false)
+    +ltr-property("margin", 0)
     margin-top: 0
     & > .column
       margin: 0
@@ -467,9 +476,9 @@ $column-gap: 0.75rem !default
 @if $variable-columns
   .columns.is-variable
     --columnGap: 0.75rem
-    margin-left: calc(-1 * var(--columnGap))
-    margin-right: calc(-1 * var(--columnGap))
-    .column
+    +ltr-property("margin", calc(-1 * var(--columnGap)), false)
+    +ltr-property("margin", calc(-1 * var(--columnGap)))
+    > .column
       padding-left: var(--columnGap)
       padding-right: var(--columnGap)
     @for $i from 0 through 8

data/app/assets/stylesheets/sass/grid/tiles.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $tile-spacing: 0.75rem !default
 
 .tile

data/app/assets/stylesheets/sass/helpers/_all.sass

@@ -1,12 +1,12 @@
 /* Bulma Helpers */
 @charset "utf-8"
 
-@import "color.sass"
-@import "flexbox.sass"
-@import "float.sass"
-@import "other.sass"
-@import "overflow.sass"
-@import "position.sass"
-@import "spacing.sass"
-@import "typography.sass"
-@import "visibility.sass"
+@import "color"
+@import "flexbox"
+@import "float"
+@import "other"
+@import "overflow"
+@import "position"
+@import "spacing"
+@import "typography"
+@import "visibility"

data/app/assets/stylesheets/sass/helpers/color.sass

@@ -1,3 +1,5 @@
+@import "../utilities/derived-variables"
+
 @each $name, $pair in $colors
   $color: nth($pair, 1)
   .has-text-#{$name}

data/app/assets/stylesheets/sass/helpers/float.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 .is-clearfix
   +clearfix
 

data/app/assets/stylesheets/sass/helpers/other.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 .is-radiusless
   border-radius: 0 !important
 
@@ -6,6 +8,7 @@
 
 .is-clickable
   cursor: pointer !important
+  pointer-events: all !important
 
 .is-unselectable
   @extend %unselectable

data/app/assets/stylesheets/sass/helpers/position.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 .is-overlay
   @extend %overlay
 

data/app/assets/stylesheets/sass/helpers/typography.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 =typography-size($target:'')
   @each $size in $sizes
     $i: index($sizes, $size)

data/app/assets/stylesheets/sass/helpers/visibility.sass

@@ -1,4 +1,4 @@
-
+@import "../utilities/mixins"
 
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 

data/app/assets/stylesheets/sass/layout/_all.sass

@@ -1,6 +1,6 @@
 /* Bulma Layout */
 @charset "utf-8"
 
-@import "hero.sass"
-@import "section.sass"
-@import "footer.sass"
+@import "hero"
+@import "section"
+@import "footer"

data/app/assets/stylesheets/sass/layout/footer.sass

@@ -1,3 +1,5 @@
+@import "../utilities/derived-variables"
+
 $footer-background-color: $scheme-main-bis !default
 $footer-color: false !default
 $footer-padding: 3rem 1.5rem 6rem !default

data/app/assets/stylesheets/sass/layout/hero.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $hero-body-padding: 3rem 1.5rem !default
 $hero-body-padding-small: 1.5rem !default
 $hero-body-padding-medium: 9rem 1.5rem !default

data/app/assets/stylesheets/sass/layout/section.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $section-padding: 3rem 1.5rem !default
 $section-padding-medium: 9rem 1.5rem !default
 $section-padding-large: 18rem 1.5rem !default

data/app/assets/stylesheets/sass/utilities/_all.sass

@@ -1,9 +1,9 @@
 /* Bulma Utilities */
 @charset "utf-8"
 
-@import "initial-variables.sass"
-@import "functions.sass"
-@import "derived-variables.sass"
-@import "animations.sass"
-@import "mixins.sass"
-@import "controls.sass"
+@import "initial-variables"
+@import "functions"
+@import "derived-variables"
+@import "mixins"
+@import "controls"
+@import "extends"

data/app/assets/stylesheets/sass/utilities/animations.sass

@@ -1,5 +1 @@
-@keyframes spinAround
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(359deg)
+@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."

data/app/assets/stylesheets/sass/utilities/controls.sass

@@ -1,3 +1,5 @@
+@import "derived-variables"
+
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
 
@@ -37,9 +39,6 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
   fieldset[disabled] &
     cursor: not-allowed
 
-%control
-  +control
-
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small

data/app/assets/stylesheets/sass/utilities/derived-variables.sass

@@ -1,3 +1,6 @@
+@import "initial-variables"
+@import "functions"
+
 $primary: $turquoise !default
 
 $info: $cyan !default

data/app/assets/stylesheets/sass/utilities/extends.sass

@@ -0,0 +1,22 @@
+@import "mixins"
+
+%control
+  +control
+
+%unselectable
+  +unselectable
+
+%arrow
+  +arrow
+
+%block
+  +block
+
+%delete
+  +delete
+
+%loader
+  +loader
+
+%overlay
+  +overlay

data/app/assets/stylesheets/sass/utilities/mixins.sass

@@ -1,4 +1,4 @@
-@import "initial-variables"
+@import "derived-variables"
 
 =clearfix
   &::after
@@ -161,9 +161,6 @@
   -ms-user-select: none
   user-select: none
 
-%unselectable
-  +unselectable
-
 =arrow($color: transparent)
   border: 3px solid $color
   border-radius: 2px
@@ -180,18 +177,12 @@
   transform-origin: center
   width: 0.625em
 
-%arrow
-  +arrow
-
 =block($spacing: $block-spacing)
   &:not(:last-child)
     margin-bottom: $spacing
 
-%block
-  +block
-
 =delete
-  @extend %unselectable
+  +unselectable
   -moz-appearance: none
   -webkit-appearance: none
   background-color: bulmaRgba($scheme-invert, 0.2)
@@ -256,9 +247,6 @@
     min-width: 32px
     width: 32px
 
-%delete
-  +delete
-
 =loader
   animation: spinAround 500ms infinite linear
   border: 2px solid $grey-lighter
@@ -271,9 +259,6 @@
   position: relative
   width: 1em
 
-%loader
-  +loader
-
 =overlay($offset: 0)
   bottom: $offset
   left: $offset
@@ -281,5 +266,3 @@
   right: $offset
   top: $offset
 
-%overlay
-  +overlay

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.9.1'
+  gem.version       = '0.9.2'
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]
   gem.description   = %q{A modern CSS framework based on Flexbox}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.9.2
 platform: ruby
 authors:
 - Joshua Jansen
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-24 00:00:00.000000000 Z
+date: 2021-10-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -35,6 +35,7 @@ files:
 - README.md
 - app/assets/stylesheets/bulma.sass
 - app/assets/stylesheets/sass/base/_all.sass
+- app/assets/stylesheets/sass/base/animations.sass
 - app/assets/stylesheets/sass/base/generic.sass
 - app/assets/stylesheets/sass/base/helpers.sass
 - app/assets/stylesheets/sass/base/minireset.sass
@@ -93,6 +94,7 @@ files:
 - app/assets/stylesheets/sass/utilities/animations.sass
 - app/assets/stylesheets/sass/utilities/controls.sass
 - app/assets/stylesheets/sass/utilities/derived-variables.sass
+- app/assets/stylesheets/sass/utilities/extends.sass
 - app/assets/stylesheets/sass/utilities/functions.sass
 - app/assets/stylesheets/sass/utilities/initial-variables.sass
 - app/assets/stylesheets/sass/utilities/mixins.sass
@@ -102,7 +104,7 @@ homepage: https://github.com/joshuajansen/bulma-rails
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -117,8 +119,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubygems_version: 3.2.22
+signing_key:
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import
   them in your Rails project.