Updates for Bulma 0.9.4

See the Bulma 0.9.4 release notes: https://github.com/jgthms/bulma/releases/tag/0.9.4

bulma.scss

@@ -1,4 +1,4 @@
-/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
 @import "utilities/_all";
 @import "base/_all";
 @import "elements/_all";

components/_pagination.scss

@@ -112,7 +112,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
     box-shadow: $pagination-shadow-inset;
   }
 
-  &[disabled] {
+  &[disabled],
+  &.is-disabled {
     background-color: $pagination-disabled-background-color;
     border-color: $pagination-disabled-border-color;
     box-shadow: none;

elements/_button.scss

@@ -44,6 +44,7 @@ $button-static-background-color: $scheme-main-ter !default;
 $button-static-border-color: $border !default;
 
 $button-colors: $colors !default;
+$button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $size-small * 0.875, "medium": $size-small, "large": $size-normal), "tablet-only": ("small": $size-small * 0.875, "normal": $size-small, "medium": $size-normal, "large": $size-medium)) !default;
 
 // The button sizes use mixins so they can be used at different breakpoints
 @mixin button-small {
@@ -219,7 +220,7 @@ $button-colors: $colors !default;
       &[disabled],
       fieldset[disabled] & {
         background-color: $color;
-        border-color: transparent;
+        border-color: $color;
         box-shadow: none;
       }
 
@@ -509,3 +510,21 @@ $button-colors: $colors !default;
     }
   }
 }
+
+@each $bp-name, $bp-sizes in $button-responsive-sizes {
+  @include breakpoint($bp-name) {
+    @each $size, $value in $bp-sizes {
+      @if $size != "normal" {
+        .button.is-responsive.is-#{$size} {
+          font-size: $value;
+        }
+      }
+      @else {
+        .button.is-responsive,
+        .button.is-responsive.is-normal {
+          font-size: $value;
+        }
+      }
+    }
+  }
+}

elements/_content.scss

@@ -4,6 +4,8 @@ $content-heading-color: $text-strong !default;
 $content-heading-weight: $weight-semibold !default;
 $content-heading-line-height: 1.125 !default;
 
+$content-block-margin-bottom: 1em !default;
+
 $content-blockquote-background-color: $background !default;
 $content-blockquote-border-left: 5px solid $border !default;
 $content-blockquote-padding: 1.25em 1.5em !default;
@@ -16,6 +18,7 @@ $content-table-cell-padding: 0.5em 0.75em !default;
 $content-table-cell-heading-color: $text-strong !default;
 $content-table-head-cell-border-width: 0 0 2px !default;
 $content-table-head-cell-color: $text-strong !default;
+$content-table-body-last-row-cell-border-bottom-width: 0 !default;
 $content-table-foot-cell-border-width: 2px 0 0 !default;
 $content-table-foot-cell-color: $text-strong !default;
 
@@ -36,7 +39,7 @@ $content-table-foot-cell-color: $text-strong !default;
   pre,
   table {
     &:not(:last-child) {
-      margin-bottom: 1em;
+      margin-bottom: $content-block-margin-bottom;
     }
   }
 
@@ -226,7 +229,7 @@ $content-table-foot-cell-color: $text-strong !default;
         &:last-child {
           td,
           th {
-            border-bottom-width: 0;
+            border-bottom-width: $content-table-body-last-row-cell-border-bottom-width;
           }
         }
       }

elements/_table.scss

@@ -7,6 +7,7 @@ $table-cell-border: 1px solid $border !default;
 $table-cell-border-width: 0 0 1px !default;
 $table-cell-padding: 0.5em 0.75em !default;
 $table-cell-heading-color: $text-strong !default;
+$table-cell-text-align: left !default;
 
 $table-head-cell-border-width: 0 0 2px !default;
 $table-head-cell-color: $text-strong !default;
@@ -77,7 +78,7 @@ $table-colors: $colors !default;
     color: $table-cell-heading-color;
 
     &:not([align]) {
-      text-align: inherit;
+      text-align: $table-cell-text-align;
     }
   }
 

form/_select.scss

@@ -112,7 +112,8 @@ $select-colors: $form-colors !default;
   // Modifiers
   &.is-disabled {
     &::after {
-      border-color: $input-disabled-color;
+      border-color: $input-disabled-color !important;
+      opacity: 0.5;
     }
   }
 

utilities/_functions.scss

@@ -115,7 +115,7 @@
   }
 }
 
-@function findLightColor($color) {
+@function findLightColor($color, $l: 96%) {
   @if type-of($color) == "color" {
     $l: 96%;
 
@@ -129,9 +129,8 @@
   @return $background;
 }
 
-@function findDarkColor($color) {
+@function findDarkColor($color, $base-l: 29%) {
   @if type-of($color) == "color" {
-    $base-l: 29%;
     $luminance: colorLuminance($color);
     $luminance-delta: 0.53 - $luminance;
     $target-l: round($base-l + $luminance-delta * 53);

utilities/_initial-variables.scss

@@ -66,6 +66,7 @@ $widescreen-enabled: true !default;
 // 1344px container + 4rem
 $fullhd: 1344px + 2 * $gap !default;
 $fullhd-enabled: true !default;
+$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default;
 
 // Miscellaneous
 

utilities/_mixins.scss

@@ -32,6 +32,11 @@
 }
 
 @mixin hamburger($dimensions) {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
   cursor: pointer;
   display: block;
   height: $dimensions;
@@ -126,6 +131,12 @@
   }
 }
 
+@mixin between($from, $until) {
+  @media screen and (min-width: $from) and (max-width: $until - 1px) {
+    @content;
+  }
+}
+
 @mixin mobile {
   @media screen and (max-width: $tablet - 1px) {
     @content;
@@ -204,6 +215,31 @@
   }
 }
 
+@mixin breakpoint($name) {
+  $breakpoint: map-get($breakpoints, $name);
+
+  @if $breakpoint {
+    $from: map-get($breakpoint, "from");
+    $until: map-get($breakpoint, "until");
+
+    @if $from and $until {
+      @include between($from, $until) {
+        @content;
+      }
+    }
+    @else if $from {
+      @include from($from) {
+        @content;
+      }
+    }
+    @else if $until {
+      @include until($until) {
+        @content;
+      }
+    }
+  }
+}
+
 @mixin ltr {
   @if not $rtl {
     @content;