bulma-rails 1.0.2 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2dce4d4282d0b1cdf88404d105fb70d7d78b60c02bc3f242865ee946de3bfcbf
-  data.tar.gz: 948f197e1cc691955e805f89a6b115f7505fddad60678c4436dd81caad4496cc
+  metadata.gz: 8effdb1290e304821a7fadc0c77a3e8ce3591488599f9d69c250e440f31dd2a0
+  data.tar.gz: 5f421df85c9fa6ab1fda1658cdef8392b6e1452e69aee0f7b2eacff596ff7566
 SHA512:
-  metadata.gz: 8f6c176c264bb30d5ca3c0327cebd3be50bf20d74a176ec13d5937867ef75ddd0656e9bb2308d1edf8f133eaddf4e9d99d7eec7c884f94a91615e752321ff493
-  data.tar.gz: 02bb51a017884d09f1f7dd59b54ba84912673a987dfbdec79f87b1f508e356187588ac567763c881898b886877c0027a6a48f94995930b30b4821aadd8694cb3
+  metadata.gz: 95ebf085f272b07e55bac320f254ccdfae286b922c988dee44d9a3b969b6292558ed49b94b315dc914a6b99783cdcda7c52b54d8cf2e0a6feba1865c4b3f44b9
+  data.tar.gz: c13cad06640162d8c788c5677c600fe3127930272f74545596a7e6ebd305c8f09084518b45718be8b01c50e2ba1fdde5f8257e5dad396bf164f330c49945a326

data/README.md

@@ -41,7 +41,7 @@ run `rails tmp:clear` and restarting the server.
 Modularity in Bulma helps to import only what you need.
 As an example, Layout features like Bulma's columns can be loaded directly without requiring any additional files. Simply load the `columns.scss` file with the `@use` keyword into your `application.scss`:
 
-    @use "sass/grid/columns";
+    @use "bulma_sass/grid/columns";
 
 For more information about Modularity see [Modularity in bulma](https://bulma.io/documentation/start/modular/)
 
@@ -49,10 +49,22 @@ For more information about Modularity see [Modularity in bulma](https://bulma.io
 
 For using mixins add the following line to your `application.scss`:
 
-    @use "sass/utilities/mixins";
+    @use "bulma_sass/utilities/mixins";
 
 For more information about Mixins see [Bulma Sass Mixins](https://bulma.io/documentation/sass/mixins/)
 
+## Prefix
+
+Prefix all generated classes with `bulma-`:
+```
+// application.scss
+// Load all styles with `bulma-` prefix
+
+@use "bulma_sass" with (
+  $class-prefix: "bulma-"
+);
+```
+
 ## Customization
 
 To overwrite Bulma’s Sass variables with your own value, write `@use` and the `with` keyword for example to your `application.scss`:
@@ -65,7 +77,7 @@ $beige-light: #d0d1cd;
 $beige-lighter: #eff0eb;
 
 // Override global Sass variables from the /utilities folder
-@use "sass/utilities" with (
+@use "bulma_sass/utilities" with (
   $family-primary: '"Nunito", sans-serif',
   $grey-dark: $brown,
   $grey-light: $beige-light,

data/app/assets/stylesheets/bulma.scss

@@ -1,4 +1,4 @@
 @charset "utf-8";
 
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
-@use "sass";
+/*! bulma.io v1.0.4 | MIT License | github.com/jgthms/bulma */
+@use "bulma_sass";

data/app/assets/stylesheets/{sass → bulma_sass}/base/generic.scss

@@ -1,3 +1,4 @@
+@use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables.scss" as cv;
 @use "../utilities/mixins" as mx;
 
@@ -32,7 +33,7 @@ $pre-font-size: 0.875em !default;
 $pre-padding: 1.25rem 1.5rem !default;
 $pre-code-font-size: 1em !default;
 
-:root {
+#{iv.$variables-host} {
   @include cv.register-vars(
     (
       "body-background-color": #{$body-background-color},

data/app/assets/stylesheets/{sass → bulma_sass}/base/skeleton.scss

@@ -9,7 +9,7 @@ $skeleton-block-min-height: 4.5em !default;
 $skeleton-lines-gap: 0.75em !default;
 $skeleton-line-height: 0.75em !default;
 
-:root {
+#{iv.$variables-host} {
   @include cv.register-vars(
     (
       "skeleton-background": #{$skeleton-background},

data/app/assets/stylesheets/{sass → bulma_sass}/components/navbar.scss

@@ -101,7 +101,7 @@ $navbar-colors: dv.$colors !default;
   z-index: cv.getVar("navbar-fixed-z");
 }
 
-:root {
+#{iv.$variables-host} {
   @include cv.register-vars(
     (
       "navbar-height": #{$navbar-height},

data/app/assets/stylesheets/{sass → bulma_sass}/elements/button.scss

@@ -383,6 +383,12 @@ $no-palette: ("white", "black", "light", "dark");
     @include cv.register-vars(
       (
         "button-border-width": max(1px, 0.0625em),
+        "loading-color":
+        hsl(
+          #{cv.getVar("button-h")},
+          #{cv.getVar("button-s")},
+          #{cv.getVar("button-l")}
+        ),
       )
     );
 
@@ -410,6 +416,12 @@ $no-palette: ("white", "black", "light", "dark");
     &:active {
       @include cv.register-vars(());
     }
+
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: transparent;
+      box-shadow: none;
+    }
   }
 
   &.#{iv.$class-prefix}is-inverted {

data/app/assets/stylesheets/{sass → bulma_sass}/elements/image.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables" as cv;
 @use "../utilities/mixins" as mx;
@@ -37,8 +39,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
   }
 
   @each $pair in iv.$aspect-ratios {
-    $w: nth($pair, 1);
-    $h: nth($pair, 2);
+    $w: list.nth($pair, 1);
+    $h: list.nth($pair, 2);
 
     &.#{iv.$class-prefix}is-#{$w}by#{$h} {
       aspect-ratio: #{$w} / #{$h};

data/app/assets/stylesheets/{sass → bulma_sass}/elements/title.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "../utilities/css-variables" as cv;
 @use "../utilities/derived-variables" as dv;
 @use "../utilities/initial-variables" as iv;
@@ -90,7 +92,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
 
   // Sizes
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
     &.#{iv.$class-prefix}is-#{$i} {
       font-size: $size;
@@ -119,7 +121,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
 
   // Sizes
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
     &.#{iv.$class-prefix}is-#{$i} {
       font-size: $size;

data/app/assets/stylesheets/{sass → bulma_sass}/form/input-textarea.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "shared";
 @use "../utilities/css-variables" as cv;
 @use "../utilities/initial-variables" as iv;
@@ -22,7 +24,7 @@ $textarea-colors: shared.$form-colors !default;
 
   // Colors
   @each $name, $pair in $textarea-colors {
-    $color: nth($pair, 1);
+    $color: list.nth($pair, 1);
 
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(

data/app/assets/stylesheets/{sass → bulma_sass}/form/shared.scss

@@ -13,6 +13,11 @@ $input-border-style: solid !default;
 $input-border-width: cv.getVar("control-border-width") !default;
 $input-border-l: cv.getVar("border-l") !default;
 $input-border-l-delta: 0% !default;
+$input-border-color: hsl(
+  cv.getVar("input-h"),
+  cv.getVar("input-s"),
+  calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
+) !default;
 $input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
 $input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
 $input-color-l: cv.getVar("text-strong-l") !default;
@@ -70,6 +75,7 @@ $input-radius: cv.getVar("radius") !default;
       "input-border-width": #{$input-border-width},
       "input-border-l": #{$input-border-l},
       "input-border-l-delta": #{$input-border-l-delta},
+      "input-border-color": #{$input-border-color},
       "input-hover-border-l-delta": #{$input-hover-border-l-delta},
       "input-active-border-l-delta": #{$input-active-border-l-delta},
       "input-focus-h": #{$input-focus-h},
@@ -107,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
         )}
     )
   );
-  border-color: hsl(
-    cv.getVar("input-h"),
-    cv.getVar("input-s"),
-    calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
-  );
+  border-color: cv.getVar("input-border-color");
   border-radius: cv.getVar("input-radius");
   color: hsl(
     #{cv.getVar("input-h")},

data/app/assets/stylesheets/{sass → bulma_sass}/form/tools.scss

@@ -15,7 +15,7 @@ $label-colors: shared.$form-colors !default;
 
 $field-block-spacing: 0.75rem !default;
 
-:root {
+#{iv.$variables-host} {
   @include cv.register-vars(
     (
       "label-color": #{$label-color},

data/app/assets/stylesheets/{sass → bulma_sass}/grid/columns.scss

@@ -7,7 +7,7 @@
 
 $column-gap: 0.75rem !default;
 
-:root {
+#{iv.$variables-host} {
   @include cv.register-vars(
     (
       "column-gap": #{$column-gap},

data/app/assets/stylesheets/bulma_sass/helpers/aspect-ratio.scss

@@ -0,0 +1,12 @@
+@use "sass:list";
+
+@use "../utilities/initial-variables" as iv;
+
+@each $pair in iv.$aspect-ratios {
+  $w: list.nth($pair, 1);
+  $h: list.nth($pair, 2);
+
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+    aspect-ratio: #{$w} / #{$h};
+  }
+}

data/app/assets/stylesheets/{sass → bulma_sass}/helpers/border.scss

@@ -9,7 +9,7 @@ $radii: (
 );
 
 @each $name, $var in $radii {
-  .#{iv.$helpers-has-prefix}radius-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}radius-#{$name} {
     border-radius: cv.getVar($var);
   }
 }

data/app/assets/stylesheets/{sass → bulma_sass}/helpers/color.scss

@@ -26,7 +26,7 @@ $digits: (
   "100"
 );
 
-.#{iv.$helpers-has-prefix}background {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background {
   background-color: cv.getVar("background");
 }
 
@@ -43,16 +43,16 @@ $digits: (
     #{cv.getVar($name, "", "-l")}
   );
 
-  .#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
     color: $color !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $background !important;
   }
 
   // Invert
-  .#{iv.$helpers-has-prefix}text-#{$name}-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -60,7 +60,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -69,7 +69,7 @@ $digits: (
   }
 
   // On Scheme
-  .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -77,7 +77,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -86,7 +86,7 @@ $digits: (
   }
 
   // Light
-  .#{iv.$helpers-has-prefix}text-#{$name}-light {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -94,7 +94,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-light {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -102,7 +102,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -110,7 +110,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -119,7 +119,7 @@ $digits: (
   }
 
   // Dark
-  .#{iv.$helpers-has-prefix}text-#{$name}-dark {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -127,7 +127,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-dark {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -135,7 +135,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -143,7 +143,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -152,7 +152,7 @@ $digits: (
   }
 
   // Soft/Bold
-  .#{iv.$helpers-has-prefix}text-#{$name}-soft {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -160,7 +160,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-soft {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -168,7 +168,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-bold {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -176,7 +176,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-bold {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -184,7 +184,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -192,7 +192,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -200,7 +200,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -208,7 +208,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -217,7 +217,7 @@ $digits: (
   }
 
   @each $digit in $digits {
-    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
       color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -225,7 +225,7 @@ $digits: (
       ) !important;
     }
 
-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
       background-color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -233,7 +233,7 @@ $digits: (
       ) !important;
     }
 
-    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
       color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -241,7 +241,7 @@ $digits: (
       ) !important;
     }
 
-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
       background-color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -251,9 +251,9 @@ $digits: (
   }
 
   // Hover
-  a.#{iv.$helpers-has-prefix}text-#{$name},
-  button.#{iv.$helpers-has-prefix}text-#{$name},
-  #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
+  a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
+  button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
+  #{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
     &:hover,
     &:focus-visible {
       color: hsl(
@@ -276,9 +276,9 @@ $digits: (
     }
   }
 
-  a.#{iv.$helpers-has-prefix}background-#{$name},
-  button.#{iv.$helpers-has-prefix}background-#{$name},
-  #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
+  a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
+  button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
+  #{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
     &:hover,
     &:focus-visible {
       background-color: hsl(
@@ -304,7 +304,7 @@ $digits: (
   }
 
   // Palettes
-  .#{iv.$helpers-prefix}palette-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}palette-#{$name} {
     --h: #{cv.getVar($name, "", "-h")};
     --s: #{cv.getVar($name, "", "-s")};
     --l: #{cv.getVar($name, "", "-l")};
@@ -318,27 +318,27 @@ $digits: (
 }
 
 @each $name, $shade in dv.$shades {
-  .#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
     color: $shade !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $shade !important;
   }
 }
 
-.#{iv.$helpers-has-prefix}text-current {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-current {
   color: currentColor !important;
 }
 
-.#{iv.$helpers-has-prefix}text-inherit {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-inherit {
   color: inherit !important;
 }
 
-.#{iv.$helpers-has-prefix}background-current {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-current {
   background-color: currentColor !important;
 }
 
-.#{iv.$helpers-has-prefix}background-inherit {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-inherit {
   background-color: inherit !important;
 }

data/app/assets/stylesheets/{sass → bulma_sass}/helpers/flexbox.scss

@@ -3,7 +3,7 @@
 $flex-direction-values: row, row-reverse, column, column-reverse;
 
 @each $value in $flex-direction-values {
-  .#{iv.$helpers-prefix}flex-direction-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-direction-#{$value} {
     flex-direction: $value !important;
   }
 }
@@ -11,7 +11,7 @@ $flex-direction-values: row, row-reverse, column, column-reverse;
 $flex-wrap-values: nowrap, wrap, wrap-reverse;
 
 @each $value in $flex-wrap-values {
-  .#{iv.$helpers-prefix}flex-wrap-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-wrap-#{$value} {
     flex-wrap: $value !important;
   }
 }
@@ -20,7 +20,7 @@ $justify-content-values: flex-start, flex-end, center, space-between,
   space-around, space-evenly, start, end, left, right;
 
 @each $value in $justify-content-values {
-  .#{iv.$helpers-prefix}justify-content-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}justify-content-#{$value} {
     justify-content: $value !important;
   }
 }
@@ -29,7 +29,7 @@ $align-content-values: flex-start, flex-end, center, space-between, space-around
   space-evenly, stretch, start, end, baseline;
 
 @each $value in $align-content-values {
-  .#{iv.$helpers-prefix}align-content-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-content-#{$value} {
     align-content: $value !important;
   }
 }
@@ -38,7 +38,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
   self-start, self-end;
 
 @each $value in $align-items-values {
-  .#{iv.$helpers-prefix}align-items-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-items-#{$value} {
     align-items: $value !important;
   }
 }
@@ -46,7 +46,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
 $align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
 
 @each $value in $align-self-values {
-  .#{iv.$helpers-prefix}align-self-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-self-#{$value} {
     align-self: $value !important;
   }
 }
@@ -55,7 +55,7 @@ $flex-operators: grow, shrink;
 
 @each $operator in $flex-operators {
   @for $i from 0 through 5 {
-    .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
       flex-#{$operator}: $i !important;
     }
   }

data/app/assets/stylesheets/bulma_sass/helpers/float.scss

@@ -0,0 +1,28 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}clearfix {
+  @include mx.clearfix;
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}float-left,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-left {
+  float: left !important;
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}float-right,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-right {
+  float: right !important;
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}float-none {
+  float: none !important;
+}
+
+$clears: both left none right;
+
+@each $clear in $clears {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}clear-#{$clear} {
+    clear: $clear !important;
+  }
+}

data/app/assets/stylesheets/{sass → bulma_sass}/helpers/gap.scss

@@ -2,7 +2,7 @@
 @use "sass:string";
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}gapless {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}gapless {
   gap: 0 !important;
 }
 
@@ -11,12 +11,12 @@ $gap-base: 0.5rem;
 
 @each $gap in $gaps {
   @for $i from 0 through 8 {
-    .#{iv.$helpers-prefix}#{$gap}-#{$i} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i} {
       #{$gap}: ($gap-base * $i) !important;
     }
 
     @if $i < 8 {
-      .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
+      .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
         #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
       }
     }