bulma-rails 1.0.2 → 1.0.3

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

@@ -1,10 +1,10 @@
 @use "../utilities/initial-variables" as iv;
 
-.marginless {
+.#{iv.$class-prefix}marginless {
   margin: 0 !important;
 }
 
-.paddingless {
+.#{iv.$class-prefix}paddingless {
   padding: 0 !important;
 }
 
@@ -34,20 +34,20 @@ $spacing-values: (
 @each $property, $shortcut in $spacing-shortcuts {
   @each $name, $value in $spacing-values {
     // All directions
-    .#{$shortcut}-#{$name} {
+    .#{iv.$class-prefix}#{$shortcut}-#{$name} {
       #{$property}: $value !important;
     }
 
     // Cardinal directions
     @each $direction, $suffix in $spacing-directions {
-      .#{$shortcut}#{$suffix}-#{$name} {
+      .#{iv.$class-prefix}#{$shortcut}#{$suffix}-#{$name} {
         #{$property}-#{$direction}: $value !important;
       }
     }
 
     // Horizontal axis
     @if $spacing-horizontal != null {
-      .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+      .#{iv.$class-prefix}#{$shortcut}#{$spacing-horizontal}-#{$name} {
         #{$property}-left: $value !important;
         #{$property}-right: $value !important;
       }
@@ -55,7 +55,7 @@ $spacing-values: (
 
     // Vertical axis
     @if $spacing-vertical != null {
-      .#{$shortcut}#{$spacing-vertical}-#{$name} {
+      .#{iv.$class-prefix}#{$shortcut}#{$spacing-vertical}-#{$name} {
         #{$property}-top: $value !important;
         #{$property}-bottom: $value !important;
       }

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

@@ -1,12 +1,14 @@
+@use "sass:list";
+
 @use "../utilities/derived-variables" as dv;
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/mixins" as mx;
 
 @mixin typography-size($target: "") {
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
-    .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
       font-size: $size !important;
     }
   }
@@ -46,123 +48,123 @@ $alignments: (
 );
 
 @each $alignment, $text-align in $alignments {
-  .#{iv.$helpers-has-prefix}text-#{$alignment} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment} {
     text-align: #{$text-align} !important;
   }
 }
 
 @each $alignment, $text-align in $alignments {
   @include mx.mobile {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.tablet {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.tablet-only {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.touch {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.desktop {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.desktop-only {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.widescreen {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.widescreen-only {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.fullhd {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
       text-align: #{$text-align} !important;
     }
   }
 }
 
-.#{iv.$helpers-prefix}capitalized {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}capitalized {
   text-transform: capitalize !important;
 }
 
-.#{iv.$helpers-prefix}lowercase {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}lowercase {
   text-transform: lowercase !important;
 }
 
-.#{iv.$helpers-prefix}uppercase {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}uppercase {
   text-transform: uppercase !important;
 }
 
-.#{iv.$helpers-prefix}italic {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}italic {
   font-style: italic !important;
 }
 
-.#{iv.$helpers-prefix}underlined {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}underlined {
   text-decoration: underline !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-light {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-light {
   font-weight: iv.$weight-light !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-normal {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-normal {
   font-weight: iv.$weight-normal !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-medium {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-medium {
   font-weight: iv.$weight-medium !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-semibold {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-semibold {
   font-weight: iv.$weight-semibold !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-bold {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-bold {
   font-weight: iv.$weight-bold !important;
 }
 
-.#{iv.$helpers-prefix}family-primary {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-primary {
   font-family: dv.$family-primary !important;
 }
 
-.#{iv.$helpers-prefix}family-secondary {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-secondary {
   font-family: dv.$family-secondary !important;
 }
 
-.#{iv.$helpers-prefix}family-sans-serif {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-sans-serif {
   font-family: iv.$family-sans-serif !important;
 }
 
-.#{iv.$helpers-prefix}family-monospace {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-monospace {
   font-family: iv.$family-monospace !important;
 }
 
-.#{iv.$helpers-prefix}family-code {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-code {
   font-family: dv.$family-code !important;
 }

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

@@ -1,84 +1,84 @@
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/mixins" as mx;
 
-.#{iv.$helpers-prefix}display-none,
-.#{iv.$helpers-prefix}hidden {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden {
   display: none !important;
 }
 
 $displays: block flex inline inline-block inline-flex grid;
 
 @each $display in $displays {
-  .#{iv.$helpers-prefix}display-#{$display},
-  .#{iv.$helpers-prefix}#{$display} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display},
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display} {
     display: $display !important;
   }
 
   @include mx.mobile {
-    .#{iv.$helpers-prefix}display-#{$display}-mobile,
-    .#{iv.$helpers-prefix}#{$display}-mobile {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-mobile,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-mobile {
       display: $display !important;
     }
   }
 
   @include mx.tablet {
-    .#{iv.$helpers-prefix}display-#{$display}-tablet,
-    .#{iv.$helpers-prefix}#{$display}-tablet {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet {
       display: $display !important;
     }
   }
 
   @include mx.tablet-only {
-    .#{iv.$helpers-prefix}display-#{$display}-tablet-only,
-    .#{iv.$helpers-prefix}#{$display}-tablet-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet-only {
       display: $display !important;
     }
   }
 
   @include mx.touch {
-    .#{iv.$helpers-prefix}display-#{$display}-touch,
-    .#{iv.$helpers-prefix}#{$display}-touch {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-touch,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-touch {
       display: $display !important;
     }
   }
 
   @include mx.desktop {
-    .#{iv.$helpers-prefix}display-#{$display}-desktop,
-    .#{iv.$helpers-prefix}#{$display}-desktop {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop {
       display: $display !important;
     }
   }
 
   @include mx.desktop-only {
-    .#{iv.$helpers-prefix}display-#{$display}-desktop-only,
-    .#{iv.$helpers-prefix}#{$display}-desktop-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop-only {
       display: $display !important;
     }
   }
 
   @include mx.widescreen {
-    .#{iv.$helpers-prefix}display-#{$display}-widescreen,
-    .#{iv.$helpers-prefix}#{$display}-widescreen {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen {
       display: $display !important;
     }
   }
 
   @include mx.widescreen-only {
-    .#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
-    .#{iv.$helpers-prefix}#{$display}-widescreen-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen-only {
       display: $display !important;
     }
   }
 
   @include mx.fullhd {
-    .#{iv.$helpers-prefix}display-#{$display}-fullhd,
-    .#{iv.$helpers-prefix}#{$display}-fullhd {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-fullhd,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-fullhd {
       display: $display !important;
     }
   }
 }
 
-.#{iv.$helpers-prefix}sr-only {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}sr-only {
   border: none !important;
   clip: rect(0, 0, 0, 0) !important;
   height: 0.01em !important;
@@ -90,132 +90,132 @@ $displays: block flex inline inline-block inline-flex grid;
 }
 
 @include mx.mobile {
-  .#{iv.$helpers-prefix}display-none-mobile,
-  .#{iv.$helpers-prefix}hidden-mobile {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-mobile,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-mobile {
     display: none !important;
   }
 }
 
 @include mx.tablet {
-  .#{iv.$helpers-prefix}display-none-tablet,
-  .#{iv.$helpers-prefix}hidden-tablet {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet {
     display: none !important;
   }
 }
 
 @include mx.tablet-only {
-  .#{iv.$helpers-prefix}display-none-tablet-only,
-  .#{iv.$helpers-prefix}hidden-tablet-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet-only {
     display: none !important;
   }
 }
 
 @include mx.touch {
-  .#{iv.$helpers-prefix}display-none-touch,
-  .#{iv.$helpers-prefix}hidden-touch {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-touch,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-touch {
     display: none !important;
   }
 }
 
 @include mx.desktop {
-  .#{iv.$helpers-prefix}display-none-desktop,
-  .#{iv.$helpers-prefix}hidden-desktop {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop {
     display: none !important;
   }
 }
 
 @include mx.desktop-only {
-  .#{iv.$helpers-prefix}display-none-desktop-only,
-  .#{iv.$helpers-prefix}hidden-desktop-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop-only {
     display: none !important;
   }
 }
 
 @include mx.widescreen {
-  .#{iv.$helpers-prefix}display-none-widescreen,
-  .#{iv.$helpers-prefix}hidden-widescreen {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen {
     display: none !important;
   }
 }
 
 @include mx.widescreen-only {
-  .#{iv.$helpers-prefix}display-none-widescreen-only,
-  .#{iv.$helpers-prefix}hidden-widescreen-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen-only {
     display: none !important;
   }
 }
 
 @include mx.fullhd {
-  .#{iv.$helpers-prefix}display-none-fullhd,
-  .#{iv.$helpers-prefix}hidden-fullhd {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-fullhd,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-fullhd {
     display: none !important;
   }
 }
 
-.#{iv.$helpers-prefix}visibility-hidden,
-.#{iv.$helpers-prefix}invisible {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible {
   visibility: hidden !important;
 }
 
 @include mx.mobile {
-  .#{iv.$helpers-prefix}visibility-hidden-mobile,
-  .#{iv.$helpers-prefix}invisible-mobile {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-mobile,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-mobile {
     visibility: hidden !important;
   }
 }
 
 @include mx.tablet {
-  .#{iv.$helpers-prefix}visibility-hidden-tablet,
-  .#{iv.$helpers-prefix}invisible-tablet {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet {
     visibility: hidden !important;
   }
 }
 
 @include mx.tablet-only {
-  .#{iv.$helpers-prefix}visibility-hidden-tablet-only,
-  .#{iv.$helpers-prefix}invisible-tablet-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet-only {
     visibility: hidden !important;
   }
 }
 
 @include mx.touch {
-  .#{iv.$helpers-prefix}visibility-hidden-touch,
-  .#{iv.$helpers-prefix}invisible-touch {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-touch,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-touch {
     visibility: hidden !important;
   }
 }
 
 @include mx.desktop {
-  .#{iv.$helpers-prefix}visibility-hidden-desktop,
-  .#{iv.$helpers-prefix}invisible-desktop {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop {
     visibility: hidden !important;
   }
 }
 
 @include mx.desktop-only {
-  .#{iv.$helpers-prefix}visibility-hidden-desktop-only,
-  .#{iv.$helpers-prefix}invisible-desktop-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop-only {
     visibility: hidden !important;
   }
 }
 
 @include mx.widescreen {
-  .#{iv.$helpers-prefix}visibility-hidden-widescreen,
-  .#{iv.$helpers-prefix}invisible-widescreen {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen {
     visibility: hidden !important;
   }
 }
 
 @include mx.widescreen-only {
-  .#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
-  .#{iv.$helpers-prefix}invisible-widescreen-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen-only {
     visibility: hidden !important;
   }
 }
 
 @include mx.fullhd {
-  .#{iv.$helpers-prefix}visibility-hidden-fullhd,
-  .#{iv.$helpers-prefix}invisible-fullhd {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-fullhd,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-fullhd {
     visibility: hidden !important;
   }
 }

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

@@ -10,9 +10,9 @@ $hero-body-padding-small: 1.5rem !default;
 $hero-body-padding-medium: 9rem 4.5rem !default;
 $hero-body-padding-large: 18rem 6rem !default;
 
-$hero-gradient-h-offset: 5deg;
-$hero-gradient-s-offset: 10%;
-$hero-gradient-l-offset: 5%;
+$hero-gradient-h-offset: 5deg !default;
+$hero-gradient-s-offset: 10% !default;
+$hero-gradient-l-offset: 5% !default;
 
 $hero-colors: dv.$colors !default;
 
@@ -25,6 +25,9 @@ $hero-colors: dv.$colors !default;
       "hero-body-padding-small": #{$hero-body-padding-small},
       "hero-body-padding-medium": #{$hero-body-padding-medium},
       "hero-body-padding-large": #{$hero-body-padding-large},
+      "hero-gradient-h-offset": #{$hero-gradient-h-offset},
+      "hero-gradient-s-offset": #{$hero-gradient-s-offset},
+      "hero-gradient-l-offset": #{$hero-gradient-l-offset},
     )
   );
 }

data/app/assets/stylesheets/sass/themes/dark.scss

@@ -1,4 +1,5 @@
 @use "sass:list";
+@use "sass:meta";
 
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables" as cv;
@@ -19,7 +20,7 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
   @each $name, $color in dv.$colors {
     $base: $color;
 
-    @if type-of($color == "list") {
+    @if meta.type-of($color == "list") {
       $base: list.nth($color, 1);
     }
 

data/app/assets/stylesheets/sass/themes/light.scss

@@ -1,4 +1,5 @@
 @use "sass:list";
+@use "sass:meta";
 
 @use "../utilities/css-variables" as cv;
 @use "../utilities/derived-variables" as dv;
@@ -73,13 +74,13 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
       // Other
       "block-spacing": iv.$block-spacing,
       "duration": 294ms,
-      "easing": ease-out,
+      "easing": iv.$easing,
       "radius-small": iv.$radius-small,
       "radius": iv.$radius,
       "radius-medium": iv.$radius-medium,
       "radius-large": iv.$radius-large,
-      "radius-rounded": 9999px,
-      "speed": 86ms,
+      "radius-rounded": iv.$radius-rounded,
+      "speed": iv.$speed,
 
       "arrow-color": #{cv.getVar("link")},
       "loading-color": #{cv.getVar("border")},
@@ -103,7 +104,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
     $light: null;
     $dark: null;
 
-    @if type-of($color == "list") {
+    @if meta.type-of($color == "list") {
       $base: list.nth($color, 1);
 
       @if list.length($color) > 3 {
@@ -139,7 +140,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
   @include cv.register-hsl("shadow", dv.$shadow-color);
 
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
     $name: "size-#{$i}";
     @include cv.register-var($name, $size);
   }