bulma-rails 1.0.0 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4cfbda8cfc8fffb2a18fe246b4036d7ee45a8eb3822a5f7ca22a298012730a2
-  data.tar.gz: a1d9891c5160e2225a5b2eff83eb48bbfe484b67a89ba12be1b223ed56f6d881
+  metadata.gz: 2dce4d4282d0b1cdf88404d105fb70d7d78b60c02bc3f242865ee946de3bfcbf
+  data.tar.gz: 948f197e1cc691955e805f89a6b115f7505fddad60678c4436dd81caad4496cc
 SHA512:
-  metadata.gz: dc4f8a1c7a3c1d58e3dbc6eb6641ea06401335aa8682f3fab7383f4c7ed6c6f30b6122c0024873c0d493818c1a06beef20448a331dddac20fc766c31b5a55b38
-  data.tar.gz: bd17be47f3058a805303ab5febb080f141e1528862c2b257dbb2f3c5788cba406bf483aeb1567f3d31aa1724d27ee68aaf5a6468ef293a270b23ce8ca7a8e13b
+  metadata.gz: 8f6c176c264bb30d5ca3c0327cebd3be50bf20d74a176ec13d5937867ef75ddd0656e9bb2308d1edf8f133eaddf4e9d99d7eec7c884f94a91615e752321ff493
+  data.tar.gz: 02bb51a017884d09f1f7dd59b54ba84912673a987dfbdec79f87b1f508e356187588ac567763c881898b886877c0027a6a48f94995930b30b4821aadd8694cb3

data/README.md

@@ -51,14 +51,41 @@ For using mixins add the following line to your `application.scss`:
 
     @use "sass/utilities/mixins";
 
-For more information about Mixins see [Bulma Sass Mixins](https://bulma.io/documentation/start/modular/)
+For more information about Mixins see [Bulma Sass Mixins](https://bulma.io/documentation/sass/mixins/)
+
+## Customization
+
+To overwrite Bulma’s Sass variables with your own value, write `@use` and the `with` keyword for example to your `application.scss`:
+```
+// Set your brand colors
+$purple: #8a4d76;
+$pink: #fa7c91;
+$brown: #757763;
+$beige-light: #d0d1cd;
+$beige-lighter: #eff0eb;
+
+// Override global Sass variables from the /utilities folder
+@use "sass/utilities" with (
+  $family-primary: '"Nunito", sans-serif',
+  $grey-dark: $brown,
+  $grey-light: $beige-light,
+  $primary: $purple,
+  $link: $pink,
+  $control-border-width: 2px
+);
+
+// Load all styles
+@use "bulma";
+```
+
+This allows you to override Bulma’s global variables from the `utilities` folder.
+
+For more information about Customization see [Customize with Modular Sass](https://bulma.io/documentation/customize/with-modular-sass/)
 
 ## Helpful references
 
 Migrating to Bulma v1 and discover what changes, see [Migrating to Bulma v1](https://bulma.io/documentation/start/migrating-to-v1/)
 
-For information about customizing Bulma, see: [Bulma Customization Concepts](https://bulma.io/documentation/customize/concepts/)
-
 ## Contributing
 
 1. Fork it

data/app/assets/stylesheets/bulma.scss

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

data/app/assets/stylesheets/sass/base/skeleton.scss

@@ -112,15 +112,3 @@ textarea.#{iv.$class-prefix}is-skeleton {
     }
   }
 }
-
-.#{iv.$class-prefix}skeleton {
-  background-image: linear-gradient(
-    0deg,
-    transparent 0%,
-    transparent 50%,
-    #f60 50%,
-    #f60 100%
-  );
-  background-position: top left;
-  background-size: 1.5em;
-}

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

@@ -4,9 +4,9 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$navbar-h: cv.getVar("scheme-h");
-$navbar-s: cv.getVar("scheme-s");
-$navbar-l: cv.getVar("scheme-main-l");
+$navbar-h: cv.getVar("scheme-h") !default;
+$navbar-s: cv.getVar("scheme-s") !default;
+$navbar-l: cv.getVar("scheme-main-l") !default;
 $navbar-background-color: cv.getVar("scheme-main") !default;
 $navbar-box-shadow-size: 0 0.125em 0 0 !default;
 $navbar-box-shadow-color: cv.getVar("background") !default;
@@ -16,26 +16,35 @@ $navbar-padding-horizontal: 2rem !default;
 $navbar-z: 30 !default;
 $navbar-fixed-z: 30 !default;
 
-$navbar-item-background-a: 0;
-$navbar-item-background-l: cv.getVar("scheme-main-l");
-$navbar-item-background-l-delta: 0%;
-$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
-$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
-$navbar-item-color-l: cv.getVar("text-l");
-$navbar-item-selected-h: cv.getVar("link-h");
-$navbar-item-selected-s: cv.getVar("link-s");
-$navbar-item-selected-l: cv.getVar("link-l");
-$navbar-item-selected-background-l: cv.getVar("link-l");
-$navbar-item-selected-color-l: cv.getVar("link-invert-l");
+$navbar-item-background-a: 0 !default;
+$navbar-item-background-l: cv.getVar("scheme-main-l") !default;
+$navbar-item-background-l-delta: 0% !default;
+$navbar-item-hover-background-l-delta: cv.getVar(
+  "hover-background-l-delta"
+) !default;
+$navbar-item-active-background-l-delta: cv.getVar(
+  "active-background-l-delta"
+) !default;
+$navbar-item-color-l: cv.getVar("text-l") !default;
+$navbar-item-color: hsl(
+  #{cv.getVar("navbar-h")},
+  #{cv.getVar("navbar-s")},
+  #{cv.getVar("navbar-item-color-l")}
+) !default;
+$navbar-item-selected-h: cv.getVar("link-h") !default;
+$navbar-item-selected-s: cv.getVar("link-s") !default;
+$navbar-item-selected-l: cv.getVar("link-l") !default;
+$navbar-item-selected-background-l: cv.getVar("link-l") !default;
+$navbar-item-selected-color-l: cv.getVar("link-invert-l") !default;
 $navbar-item-img-max-height: 1.75rem !default;
 
-$navbar-dropdown-item-h: cv.getVar("scheme-h");
-$navbar-dropdown-item-s: cv.getVar("scheme-s");
-$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
-$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
-$navbar-dropdown-item-color-l: cv.getVar("text-l");
+$navbar-dropdown-item-h: cv.getVar("scheme-h") !default;
+$navbar-dropdown-item-s: cv.getVar("scheme-s") !default;
+$navbar-dropdown-item-l: cv.getVar("scheme-main-l") !default;
+$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
+$navbar-dropdown-item-color-l: cv.getVar("text-l") !default;
 
-$navbar-burger-color: cv.getVar("navbar-item-color") !default;
+$navbar-burger-color: cv.getVar("link") !default;
 
 $navbar-tab-hover-background-color: transparent !default;
 $navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
@@ -119,6 +128,7 @@ $navbar-colors: dv.$colors !default;
       "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
       "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
       "navbar-item-color-l": #{$navbar-item-color-l},
+      "navbar-item-color": #{$navbar-item-color},
       "navbar-item-selected-h": #{$navbar-item-selected-h},
       "navbar-item-selected-s": #{$navbar-item-selected-s},
       "navbar-item-selected-l": #{$navbar-item-selected-l},
@@ -254,9 +264,13 @@ body {
 .#{iv.$class-prefix}navbar-burger {
   @extend %reset;
   @include mx.burger(2.5rem);
-  align-self: center;
-  margin-inline-start: auto;
-  margin-inline-end: 0.375rem;
+
+  & {
+    align-self: center;
+    color: cv.getVar("navbar-burger-color");
+    margin-inline-start: auto;
+    margin-inline-end: 0.375rem;
+  }
 }
 
 .#{iv.$class-prefix}navbar-menu {
@@ -265,12 +279,9 @@ body {
 
 .#{iv.$class-prefix}navbar-item,
 .#{iv.$class-prefix}navbar-link {
-  color: hsl(
-    #{cv.getVar("navbar-h")},
-    #{cv.getVar("navbar-s")},
-    #{cv.getVar("navbar-item-color-l")}
-  );
+  color: cv.getVar("navbar-item-color");
   display: block;
+  gap: 0.75rem;
   line-height: 1.5;
   padding: 0.5rem 0.75rem;
   position: relative;
@@ -650,8 +661,8 @@ a.#{iv.$class-prefix}navbar-item,
 
   .#{iv.$class-prefix}navbar-dropdown {
     background-color: cv.getVar("navbar-dropdown-background-color");
-    border-bottom-left-radius: cv.getVar("navbar-dropdown-radius");
-    border-bottom-right-radius: cv.getVar("navbar-dropdown-radius");
+    border-end-start-radius: cv.getVar("navbar-dropdown-radius");
+    border-end-end-radius: cv.getVar("navbar-dropdown-radius");
     border-top-color: cv.getVar("navbar-dropdown-border-color");
     border-top-style: cv.getVar("navbar-dropdown-border-style");
     border-top-width: cv.getVar("navbar-dropdown-border-width");

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

@@ -192,8 +192,8 @@ $panel-colors: dv.$colors !default;
   }
 
   &:last-child {
-    border-bottom-left-radius: cv.getVar("panel-radius");
-    border-bottom-right-radius: cv.getVar("panel-radius");
+    border-end-start-radius: cv.getVar("panel-radius");
+    border-end-end-radius: cv.getVar("panel-radius");
   }
 }
 

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

@@ -33,6 +33,7 @@ $button-border-width: cv.getVar("control-border-width") !default;
 
 $button-padding-vertical: 0.5em !default;
 $button-padding-horizontal: 1em !default;
+$button-rounded-padding-horizontal-offset: 0.25em !default;
 
 $button-focus-border-color: cv.getVar("link-focus-border") !default;
 $button-focus-box-shadow-size: 0 0 0 0.125em !default;
@@ -533,8 +534,14 @@ $no-palette: ("white", "black", "light", "dark");
 
   &.#{iv.$class-prefix}is-rounded {
     border-radius: cv.getVar("radius-rounded");
-    padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
-    padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
+    padding-left: calc(
+      #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+        #{cv.getVar("button-border-width")}
+    );
+    padding-right: calc(
+      #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+        #{cv.getVar("button-border-width")}
+    );
   }
 }
 

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

@@ -133,7 +133,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
   ol {
     list-style-position: outside;
     margin-inline-start: 2em;
-    margin-top: 1em;
+
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
 
     &:not([type]) {
       list-style-type: decimal;
@@ -159,7 +162,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
   ul {
     list-style: disc outside;
     margin-inline-start: 2em;
-    margin-top: 1em;
+
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
 
     ul {
       list-style-type: circle;

data/app/assets/stylesheets/sass/form/checkbox-radio.scss

@@ -25,8 +25,12 @@
 
 .#{iv.$class-prefix}radio {
   @extend %checkbox-radio;
+}
 
-  & + .#{iv.$class-prefix}radio {
-    margin-inline-start: 0.5em;
-  }
+.#{iv.$class-prefix}checkboxes,
+.#{iv.$class-prefix}radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }

data/app/assets/stylesheets/sass/form/input-textarea.scss

@@ -12,16 +12,6 @@ $textarea-colors: shared.$form-colors !default;
 %input-textarea {
   @extend %input;
 
-  @include cv.register-vars(
-    (
-      "input-h": #{cv.getVar("scheme-h")},
-      "input-s": #{cv.getVar("scheme-s")},
-      "input-border-style": solid,
-      "input-border-width": 1px,
-      "input-border-l": #{cv.getVar("border-l")},
-    )
-  );
-
   box-shadow: shared.$input-shadow;
   max-width: 100%;
   width: 100%;

data/app/assets/stylesheets/sass/form/select.scss

@@ -84,6 +84,7 @@ $select-colors: shared.$form-colors !default;
           "input-focus-s": #{cv.getVar($name, "", "-s")},
           "input-focus-l": #{cv.getVar($name, "", "-l")},
           "input-border-l": #{cv.getVar($name, "", "-l")},
+          "arrow-color": #{cv.getVar($name)},
         )
       );
     }

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

@@ -9,6 +9,8 @@ $form-colors: dv.$colors !default;
 $input-h: #{cv.getVar("scheme-h")} !default;
 $input-s: #{cv.getVar("scheme-s")} !default;
 $input-l: #{cv.getVar("scheme-main-l")} !default;
+$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-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
@@ -58,12 +60,14 @@ $input-radius: cv.getVar("radius") !default;
 .#{iv.$class-prefix}control,
 .#{iv.$class-prefix}input,
 .#{iv.$class-prefix}textarea,
-.#{iv.$class-prefix}select select {
+.#{iv.$class-prefix}select {
   @include cv.register-vars(
     (
       "input-h": #{$input-h},
       "input-s": #{$input-s},
       "input-l": #{$input-l},
+      "input-border-style": #{$input-border-style},
+      "input-border-width": #{$input-border-width},
       "input-border-l": #{$input-border-l},
       "input-border-l-delta": #{$input-border-l-delta},
       "input-hover-border-l-delta": #{$input-hover-border-l-delta},

data/app/assets/stylesheets/sass/form/tools.scss

@@ -6,20 +6,35 @@
 @use "../utilities/mixins" as mx;
 
 $label-color: cv.getVar("text-strong") !default;
+$label-spacing: 0.5em !default;
 $label-weight: cv.getVar("weight-semibold") !default;
 
 $help-size: cv.getVar("size-small") !default;
 
 $label-colors: shared.$form-colors !default;
 
+$field-block-spacing: 0.75rem !default;
+
+:root {
+  @include cv.register-vars(
+    (
+      "label-color": #{$label-color},
+      "label-spacing": #{$label-spacing},
+      "label-weight": #{$label-weight},
+      "help-size": #{$help-size},
+      "field-block-spacing": #{$field-block-spacing},
+    )
+  );
+}
+
 .#{iv.$class-prefix}label {
-  color: $label-color;
+  color: cv.getVar("label-color");
   display: block;
   font-size: cv.getVar("size-normal");
   font-weight: $label-weight;
 
   &:not(:last-child) {
-    margin-bottom: 0.5em;
+    margin-bottom: cv.getVar("label-spacing");
   }
 
   // Sizes
@@ -38,7 +53,7 @@ $label-colors: shared.$form-colors !default;
 
 .#{iv.$class-prefix}help {
   display: block;
-  font-size: $help-size;
+  font-size: cv.getVar("help-size");
   margin-top: 0.25rem;
 
   @each $name, $pair in $label-colors {
@@ -57,7 +72,7 @@ $label-colors: shared.$form-colors !default;
 .#{iv.$class-prefix}field {
   @include cv.register-vars(
     (
-      "block-spacing": 0.75rem,
+      "block-spacing": #{cv.getVar("field-block-spacing")},
     )
   );
 
@@ -85,10 +100,8 @@ $label-colors: shared.$form-colors !default;
         .#{iv.$class-prefix}button,
         .#{iv.$class-prefix}input,
         .#{iv.$class-prefix}select select {
-          // @include ltr {
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
-          // }
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
         }
       }
 
@@ -96,10 +109,8 @@ $label-colors: shared.$form-colors !default;
         .#{iv.$class-prefix}button,
         .#{iv.$class-prefix}input,
         .#{iv.$class-prefix}select select {
-          // @include ltr {
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
-          // }
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
         }
       }
 

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

@@ -20,7 +20,7 @@ $column-gap: 0.75rem !default;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: $column-gap;
+  padding: cv.getVar("column-gap");
 
   .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
     > &.#{iv.$class-prefix}is-narrow {
@@ -137,9 +137,7 @@ $column-gap: 0.75rem !default;
     .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
       > &.#{iv.$class-prefix}is-#{$i} {
       flex: none;
-      width: calc(
-        math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
-      );
+      width: math.percentage(math.div($i, 12));
     }
 
     .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
@@ -243,11 +241,7 @@ $column-gap: 0.75rem !default;
     @for $i from 0 through 12 {
       &.#{iv.$class-prefix}is-#{$i}-mobile {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i}-mobile {
@@ -372,11 +366,7 @@ $column-gap: 0.75rem !default;
       &.#{iv.$class-prefix}is-#{$i},
       &.#{iv.$class-prefix}is-#{$i}-tablet {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i},
@@ -585,11 +575,7 @@ $column-gap: 0.75rem !default;
     @for $i from 0 through 12 {
       &.#{iv.$class-prefix}is-#{$i}-desktop {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i}-desktop {
@@ -693,11 +679,7 @@ $column-gap: 0.75rem !default;
     @for $i from 0 through 12 {
       &.#{iv.$class-prefix}is-#{$i}-widescreen {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
@@ -821,7 +803,9 @@ $column-gap: 0.75rem !default;
   }
 
   &:not(:last-child) {
-    margin-bottom: calc(1.5rem - #{$column-gap});
+    margin-bottom: calc(
+      #{cv.getVar("block-spacing")} - #{cv.getVar("column-gap")}
+    );
   }
 
   // Modifiers
@@ -874,4 +858,104 @@ $column-gap: 0.75rem !default;
       display: flex;
     }
   }
+
+  @for $i from 0 through 8 {
+    &.#{iv.$class-prefix}is-#{$i} {
+      @include cv.register-vars(
+        (
+          "column-gap": #{$i * 0.25rem},
+        )
+      );
+    }
+
+    @include mx.mobile {
+      &.#{iv.$class-prefix}is-#{$i}-mobile {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.tablet {
+      &.#{iv.$class-prefix}is-#{$i}-tablet {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.tablet-only {
+      &.#{iv.$class-prefix}is-#{$i}-tablet-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.touch {
+      &.#{iv.$class-prefix}is-#{$i}-touch {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.desktop {
+      &.#{iv.$class-prefix}is-#{$i}-desktop {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.desktop-only {
+      &.#{iv.$class-prefix}is-#{$i}-desktop-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.widescreen {
+      &.#{iv.$class-prefix}is-#{$i}-widescreen {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.widescreen-only {
+      &.#{iv.$class-prefix}is-#{$i}-widescreen-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.fullhd {
+      &.#{iv.$class-prefix}is-#{$i}-fullhd {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+  }
 }

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

@@ -10,7 +10,7 @@ $column-min-base: 1.5rem;
 @mixin fixed-grid-properties($suffix: "") {
   @for $i from 1 through $max-column-count {
     &.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} {
-      .#{iv.$class-prefix}grid {
+      > .#{iv.$class-prefix}grid {
         @include cv.register-var("grid-column-count", #{$i});
       }
     }
@@ -24,7 +24,7 @@ $grid-container-name: bulma-fixed-grid;
   container-name: $grid-container-name;
   container-type: inline-size;
 
-  .#{iv.$class-prefix}grid {
+  > .#{iv.$class-prefix}grid {
     @include cv.register-vars(
       (
         "grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1),
@@ -110,7 +110,7 @@ $grid-container-name: bulma-fixed-grid;
     );
   }
 
-  @for $i from 1 through 12 {
+  @for $i from 1 through 32 {
     &.#{iv.$class-prefix}is-col-min-#{$i} {
       @include cv.register-vars(
         (