bulma-rails 0.8.0 → 0.9.2

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

@@ -0,0 +1,12 @@
+/* Bulma Helpers */
+@charset "utf-8"
+
+@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

@@ -0,0 +1,39 @@
+@import "../utilities/derived-variables"
+
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  .has-text-#{$name}
+    color: $color !important
+  a.has-text-#{$name}
+    &:hover,
+    &:focus
+      color: bulmaDarken($color, 10%) !important
+  .has-background-#{$name}
+    background-color: $color !important
+  @if length($pair) >= 4
+    $color-light: nth($pair, 3)
+    $color-dark: nth($pair, 4)
+    // Light
+    .has-text-#{$name}-light
+      color: $color-light !important
+    a.has-text-#{$name}-light
+      &:hover,
+      &:focus
+        color: bulmaDarken($color-light, 10%) !important
+    .has-background-#{$name}-light
+      background-color: $color-light !important
+    // Dark
+    .has-text-#{$name}-dark
+      color: $color-dark !important
+    a.has-text-#{$name}-dark
+      &:hover,
+      &:focus
+        color: bulmaLighten($color-dark, 10%) !important
+    .has-background-#{$name}-dark
+      background-color: $color-dark !important
+
+@each $name, $shade in $shades
+  .has-text-#{$name}
+    color: $shade !important
+  .has-background-#{$name}
+    background-color: $shade !important

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

@@ -0,0 +1,35 @@
+$flex-direction-values: row, row-reverse, column, column-reverse
+@each $value in $flex-direction-values
+  .is-flex-direction-#{$value}
+    flex-direction: $value !important
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse
+@each $value in $flex-wrap-values
+  .is-flex-wrap-#{$value}
+    flex-wrap: $value !important
+
+$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
+@each $value in $justify-content-values
+  .is-justify-content-#{$value}
+    justify-content: $value !important
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
+@each $value in $align-content-values
+  .is-align-content-#{$value}
+    align-content: $value !important
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
+@each $value in $align-items-values
+  .is-align-items-#{$value}
+    align-items: $value !important
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
+@each $value in $align-self-values
+  .is-align-self-#{$value}
+    align-self: $value !important
+
+$flex-operators: grow, shrink
+@each $operator in $flex-operators
+  @for $i from 0 through 5
+    .is-flex-#{$operator}-#{$i}
+      flex-#{$operator}: $i !important

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

@@ -0,0 +1,10 @@
+@import "../utilities/mixins"
+
+.is-clearfix
+  +clearfix
+
+.is-pulled-left
+  float: left !important
+
+.is-pulled-right
+  float: right !important

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

@@ -0,0 +1,14 @@
+@import "../utilities/mixins"
+
+.is-radiusless
+  border-radius: 0 !important
+
+.is-shadowless
+  box-shadow: none !important
+
+.is-clickable
+  cursor: pointer !important
+  pointer-events: all !important
+
+.is-unselectable
+  @extend %unselectable

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

@@ -0,0 +1,2 @@
+.is-clipped
+  overflow: hidden !important

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

@@ -0,0 +1,7 @@
+@import "../utilities/mixins"
+
+.is-overlay
+  @extend %overlay
+
+.is-relative
+  position: relative !important

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

@@ -0,0 +1,31 @@
+.is-marginless
+  margin: 0 !important
+
+.is-paddingless
+  padding: 0 !important
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
+$spacing-horizontal: "x" !default
+$spacing-vertical: "y" !default
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
+
+@each $property, $shortcut in $spacing-shortcuts
+  @each $name, $value in $spacing-values
+    // All directions
+    .#{$shortcut}-#{$name}
+      #{$property}: $value !important
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions
+      .#{$shortcut}#{$suffix}-#{$name}
+        #{$property}-#{$direction}: $value !important
+    // Horizontal axis
+    @if $spacing-horizontal != null
+      .#{$shortcut}#{$spacing-horizontal}-#{$name}
+        #{$property}-left: $value !important
+        #{$property}-right: $value !important
+    // Vertical axis
+    @if $spacing-vertical != null
+      .#{$shortcut}#{$spacing-vertical}-#{$name}
+        #{$property}-top: $value !important
+        #{$property}-bottom: $value !important

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

@@ -0,0 +1,100 @@
+@import "../utilities/mixins"
+
+=typography-size($target:'')
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
+      font-size: $size !important
+
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
+$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+  .has-text-#{$alignment}
+    text-align: #{$text-align} !important
+
+@each $alignment, $text-align in $alignments
+  +mobile
+    .has-text-#{$alignment}-mobile
+      text-align: #{$text-align} !important
+  +tablet
+    .has-text-#{$alignment}-tablet
+      text-align: #{$text-align} !important
+  +tablet-only
+    .has-text-#{$alignment}-tablet-only
+      text-align: #{$text-align} !important
+  +touch
+    .has-text-#{$alignment}-touch
+      text-align: #{$text-align} !important
+  +desktop
+    .has-text-#{$alignment}-desktop
+      text-align: #{$text-align} !important
+  +desktop-only
+    .has-text-#{$alignment}-desktop-only
+      text-align: #{$text-align} !important
+  +widescreen
+    .has-text-#{$alignment}-widescreen
+      text-align: #{$text-align} !important
+  +widescreen-only
+    .has-text-#{$alignment}-widescreen-only
+      text-align: #{$text-align} !important
+  +fullhd
+    .has-text-#{$alignment}-fullhd
+      text-align: #{$text-align} !important
+
+.is-capitalized
+  text-transform: capitalize !important
+
+.is-lowercase
+  text-transform: lowercase !important
+
+.is-uppercase
+  text-transform: uppercase !important
+
+.is-italic
+  font-style: italic !important
+
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-medium
+  font-weight: $weight-medium !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
+.is-family-primary
+  font-family: $family-primary !important
+
+.is-family-secondary
+  font-family: $family-secondary !important
+
+.is-family-sans-serif
+  font-family: $family-sans-serif !important
+
+.is-family-monospace
+  font-family: $family-monospace !important
+
+.is-family-code
+  font-family: $family-code !important