bulma-rails 1.0.2 → 1.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2dce4d4282d0b1cdf88404d105fb70d7d78b60c02bc3f242865ee946de3bfcbf
-  data.tar.gz: 948f197e1cc691955e805f89a6b115f7505fddad60678c4436dd81caad4496cc
+  metadata.gz: 7a6542800c9a7e7f290a001bcac7d0ffb0530edd2e6a05c1c1ae2de62856f8db
+  data.tar.gz: a6bd388a7d6d777d26666a565e217e049a36e624f4aa5896363ce686f92cfbd1
 SHA512:
-  metadata.gz: 8f6c176c264bb30d5ca3c0327cebd3be50bf20d74a176ec13d5937867ef75ddd0656e9bb2308d1edf8f133eaddf4e9d99d7eec7c884f94a91615e752321ff493
-  data.tar.gz: 02bb51a017884d09f1f7dd59b54ba84912673a987dfbdec79f87b1f508e356187588ac567763c881898b886877c0027a6a48f94995930b30b4821aadd8694cb3
+  metadata.gz: 36be5b9e8b3b428849590e1ee7f7fe3747a041f00f6830b1abf6d197121e470d7208a8bb6f5e1b56f768419c0bd8f70f8f01e5aa1f2b8131750d42ad9d44934f
+  data.tar.gz: 8f24ac595609e494c9fd2a6ba9c41c56ebccae4e3d6b3777ba0efdcfafa5ecd27eee21c713b79503e36110ff57ad45a81e250b0c2b4969d4aab734410ef3bbc1

data/app/assets/stylesheets/bulma.scss

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

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

@@ -410,6 +410,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/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/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/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/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/helpers/aspect-ratio.scss

@@ -1,10 +1,12 @@
+@use "sass:list";
+
 @use "../utilities/initial-variables" as iv;
 
 @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.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
     aspect-ratio: #{$w} / #{$h};
   }
 }

data/app/assets/stylesheets/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/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/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/sass/helpers/float.scss

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

data/app/assets/stylesheets/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;
       }
     }

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

@@ -1,19 +1,19 @@
 @use "../utilities/extends";
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}radiusless {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}radiusless {
   border-radius: 0 !important;
 }
 
-.#{iv.$helpers-prefix}shadowless {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}shadowless {
   box-shadow: none !important;
 }
 
-.#{iv.$helpers-prefix}clickable {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}clickable {
   cursor: pointer !important;
   pointer-events: all !important;
 }
 
-.#{iv.$helpers-prefix}unselectable {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}unselectable {
   @extend %unselectable;
 }

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

@@ -1,21 +1,21 @@
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}clipped {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}clipped {
   overflow: hidden !important;
 }
 
 $overflows: auto clip hidden scroll visible;
 
 @each $overflow in $overflows {
-  .#{iv.$helpers-prefix}overflow-#{$overflow} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-#{$overflow} {
     overflow: $overflow !important;
   }
 
-  .#{iv.$helpers-prefix}overflow-x-#{$overflow} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-x-#{$overflow} {
     overflow-x: $overflow !important;
   }
 
-  .#{iv.$helpers-prefix}overflow-y-#{$overflow} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-y-#{$overflow} {
     overflow-y: $overflow !important;
   }
 }

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

@@ -1,19 +1,19 @@
 @use "../utilities/extends";
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}overlay,
-.#{iv.$helpers-prefix}overlay {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay {
   @extend %overlay;
 }
 
-.#{iv.$helpers-prefix}relative {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}relative {
   position: relative !important;
 }
 
 $positions: absolute fixed relative static sticky;
 
 @each $position in $positions {
-  .#{iv.$helpers-prefix}position-#{$position} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}position-#{$position} {
     position: $position !important;
   }
 }