Bulma 0.9.1

README.md

@@ -3,7 +3,7 @@
 This is a port of the [Bulma](https://bulma.io/) project SASS files to the
 SCSS syntax.
 
-Currently, these files are based on Bulma version 0.9.0, and will be updated
+Currently, these files are based on Bulma version 0.9.1, and will be updated
 with later releases. The files are converted to SCSS with
 [this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164).
 

base/_all.scss

@@ -1,2 +1,3 @@
+/* Bulma Base */
 @import "minireset";
 @import "generic";

base/_generic.scss

@@ -54,6 +54,7 @@ section {
 body,
 button,
 input,
+optgroup,
 select,
 textarea {
   font-family: $body-family;

bulma.scss

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

components/_all.scss

@@ -1,3 +1,4 @@
+/* Bulma Components */
 @import "breadcrumb";
 @import "card";
 @import "dropdown";

components/_card.scss

@@ -1,6 +1,8 @@
 $card-color: $text !default;
 $card-background-color: $scheme-main !default;
 $card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
+$card-radius: 0.25rem !default;
+$card-overflow: hidden !default;
 
 $card-header-background-color: transparent !default;
 $card-header-color: $text-strong !default;
@@ -19,9 +21,11 @@ $card-media-margin: $block-spacing !default;
 
 .card {
   background-color: $card-background-color;
+  border-radius: $card-radius;
   box-shadow: $card-shadow;
   color: $card-color;
   max-width: 100%;
+  overflow: $card-overflow;
   position: relative;
 }
 

components/_modal.scss

@@ -28,6 +28,8 @@ $modal-card-foot-border-top: 1px solid $border !default;
 $modal-card-body-background-color: $scheme-main !default;
 $modal-card-body-padding: 20px !default;
 
+$modal-breakpoint: $tablet !default;
+
 .modal {
   @extend %overlay;
 
@@ -60,7 +62,7 @@ $modal-card-body-padding: 20px !default;
   width: 100%;
 
   // Responsiveness
-  @include tablet {
+  @include from($modal-breakpoint) {
     margin: 0 auto;
     max-height: calc(100vh - #{$modal-content-spacing-tablet});
     width: $modal-content-width;

components/_navbar.scss

@@ -46,6 +46,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
 
 $navbar-breakpoint: $desktop !default;
 
+$navbar-colors: $colors !default;
+
 @mixin navbar-fixed {
   left: 0;
   position: fixed;
@@ -59,7 +61,7 @@ $navbar-breakpoint: $desktop !default;
   position: relative;
   z-index: $navbar-z;
 
-  @each $name, $pair in $colors {
+  @each $name, $pair in $navbar-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
 

elements/_all.scss

@@ -1,3 +1,4 @@
+/* Bulma Elements */
 @import "box";
 @import "button";
 @import "container";

elements/_button.scss

@@ -33,6 +33,8 @@ $button-static-color: $text-light !default;
 $button-static-background-color: $scheme-main-ter !default;
 $button-static-border-color: $border !default;
 
+$button-colors: $colors !default;
+
 // The button sizes use mixins so they can be used at different breakpoints
 @mixin button-small {
   border-radius: $radius-small;
@@ -155,7 +157,7 @@ $button-static-border-color: $border !default;
     }
   }
 
-  @each $name, $pair in $colors {
+  @each $name, $pair in $button-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
 

elements/_container.scss

@@ -1,4 +1,5 @@
 $container-offset: 2 * $gap !default;
+$container-max-width: $fullhd !default;
 
 .container {
   flex-grow: 1;
@@ -7,7 +8,7 @@ $container-offset: 2 * $gap !default;
   width: auto;
 
   &.is-fluid {
-    max-width: none;
+    max-width: none !important;
     padding-left: $gap;
     padding-right: $gap;
     width: 100%;
@@ -19,25 +20,29 @@ $container-offset: 2 * $gap !default;
 
 
   @include until-widescreen {
-    &.is-widescreen {
-      max-width: $widescreen - $container-offset;
+    &.is-widescreen:not(.is-max-desktop) {
+      max-width: min($widescreen, $container-max-width) - $container-offset;
     }
   }
 
 
   @include until-fullhd {
-    &.is-fullhd {
-      max-width: $fullhd - $container-offset;
+    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
+      max-width: min($fullhd, $container-max-width) - $container-offset;
     }
   }
 
 
   @include widescreen {
-    max-width: $widescreen - $container-offset;
+    &:not(.is-max-desktop) {
+      max-width: min($widescreen, $container-max-width) - $container-offset;
+    }
   }
 
 
   @include fullhd {
-    max-width: $fullhd - $container-offset;
+    &:not(.is-max-desktop):not(.is-max-widescreen) {
+      max-width: min($fullhd, $container-max-width) - $container-offset;
+    }
   }
 }

elements/_notification.scss

@@ -5,6 +5,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;
 $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default;
 $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
 
+$notification-colors: $colors !default;
+
 .notification {
   @extend %block;
 
@@ -54,7 +56,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
   }
 
   // Colors
-  @each $name, $pair in $colors {
+  @each $name, $pair in $notification-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
 

elements/_progress.scss

@@ -4,6 +4,8 @@ $progress-border-radius: $radius-rounded !default;
 
 $progress-indeterminate-duration: 1.5s !default;
 
+$progress-colors: $colors !default;
+
 .progress {
   @extend %block;
 
@@ -35,7 +37,7 @@ $progress-indeterminate-duration: 1.5s !default;
   }
 
   // Colors
-  @each $name, $pair in $colors {
+  @each $name, $pair in $progress-colors {
     $color: nth($pair, 1);
 
     &.is-#{$name} {
@@ -75,6 +77,10 @@ $progress-indeterminate-duration: 1.5s !default;
     &::-moz-progress-bar {
       background-color: transparent;
     }
+
+    &::-ms-fill {
+      animation-name: none;
+    }
   }
 
   // Sizes

elements/_table.scss

@@ -23,6 +23,8 @@ $table-row-active-color: $primary-invert !default;
 $table-striped-row-even-background-color: $scheme-main-bis !default;
 $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
 
+$table-colors: $colors !default;
+
 .table {
   @extend %block;
 
@@ -37,7 +39,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
     vertical-align: top;
 
     // Colors
-    @each $name, $pair in $colors {
+    @each $name, $pair in $table-colors {
       $color: nth($pair, 1);
       $color-invert: nth($pair, 2);
 

elements/_tag.scss

@@ -3,6 +3,8 @@ $tag-color: $text !default;
 $tag-radius: $radius !default;
 $tag-delete-margin: 1px !default;
 
+$tag-colors: $colors !default;
+
 .tags {
   align-items: center;
   display: flex;
@@ -115,7 +117,7 @@ $tag-delete-margin: 1px !default;
   }
 
   // Colors
-  @each $name, $pair in $colors {
+  @each $name, $pair in $tag-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
 

form/_all.scss

@@ -1,3 +1,4 @@
+/* Bulma Form */
 @import "shared";
 @import "input-textarea";
 @import "checkbox-radio";

form/_checkbox-radio.scss

@@ -13,7 +13,8 @@
   }
 
   &[disabled],
-  fieldset[disabled] & {
+  fieldset[disabled] &,
+  input[disabled] {
     color: $input-disabled-color;
     cursor: not-allowed;
   }

form/_file.scss

@@ -11,6 +11,8 @@ $file-name-border-style: solid !default;
 $file-name-border-width: 1px 1px 1px 0 !default;
 $file-name-max-width: 16em !default;
 
+$file-colors: $form-colors !default;
+
 .file {
   @extend %unselectable;
 
@@ -20,7 +22,7 @@ $file-name-max-width: 16em !default;
   position: relative;
 
   // Colors
-  @each $name, $pair in $colors {
+  @each $name, $pair in $file-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
 

form/_input-textarea.scss

@@ -2,6 +2,8 @@ $textarea-padding: $control-padding-horizontal !default;
 $textarea-max-height: 40em !default;
 $textarea-min-height: 8em !default;
 
+$textarea-colors: $form-colors !default;
+
 %input-textarea {
   @extend %input;
 
@@ -14,7 +16,7 @@ $textarea-min-height: 8em !default;
   }
 
   // Colors
-  @each $name, $pair in $colors {
+  @each $name, $pair in $textarea-colors {
     $color: nth($pair, 1);
 
     &.is-#{$name} {

form/_select.scss

@@ -1,3 +1,5 @@
+$select-colors: $form-colors !default;
+
 .select {
   display: inline-block;
   max-width: 100%;
@@ -68,7 +70,7 @@
   }
 
   // Colors
-  @each $name, $pair in $colors {
+  @each $name, $pair in $select-colors {
     $color: nth($pair, 1);
 
     &.is-#{$name} {

form/_shared.scss

@@ -1,3 +1,5 @@
+$form-colors: $colors !default;
+
 $input-color: $text-strong !default;
 $input-background-color: $scheme-main !default;
 $input-border-color: $border !default;

form/_tools.scss

@@ -3,6 +3,8 @@ $label-weight: $weight-bold !default;
 
 $help-size: $size-small !default;
 
+$label-colors: $form-colors !default;
+
 .label {
   color: $label-color;
   display: block;
@@ -32,7 +34,7 @@ $help-size: $size-small !default;
   font-size: $help-size;
   margin-top: 0.25rem;
 
-  @each $name, $pair in $colors {
+  @each $name, $pair in $label-colors {
     $color: nth($pair, 1);
 
     &.is-#{$name} {

grid/_all.scss

@@ -1,2 +1,3 @@
+/* Bulma Grid */
 @import "columns";
 @import "tiles";

helpers/_all.scss

@@ -1,4 +1,6 @@
+/* Bulma Helpers */
 @import "color";
+@import "flexbox";
 @import "float";
 @import "other";
 @import "overflow";