From cce74cf010f5dd4dec37efd3000810eadc2a4cb5 Mon Sep 17 00:00:00 2001 From: Jim Campbell Date: Mon, 9 May 2022 15:26:18 -0500 Subject: [PATCH] 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 | 2 +- components/_pagination.scss | 3 ++- elements/_button.scss | 21 +++++++++++++++++- elements/_content.scss | 7 ++++-- elements/_table.scss | 3 ++- form/_select.scss | 3 ++- utilities/_functions.scss | 5 ++--- utilities/_initial-variables.scss | 1 + utilities/_mixins.scss | 36 +++++++++++++++++++++++++++++++ 9 files changed, 71 insertions(+), 10 deletions(-) diff --git a/bulma.scss b/bulma.scss index d90eb01..03f42b0 100644 --- a/bulma.scss +++ b/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"; diff --git a/components/_pagination.scss b/components/_pagination.scss index 67ce7a7..8821cc1 100644 --- a/components/_pagination.scss +++ b/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; diff --git a/elements/_button.scss b/elements/_button.scss index 949b624..c4bd3ba 100644 --- a/elements/_button.scss +++ b/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; + } + } + } + } +} diff --git a/elements/_content.scss b/elements/_content.scss index d501b6e..6cb610c 100644 --- a/elements/_content.scss +++ b/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; } } } diff --git a/elements/_table.scss b/elements/_table.scss index f654911..5bd463c 100644 --- a/elements/_table.scss +++ b/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; } } diff --git a/form/_select.scss b/form/_select.scss index 107406d..844a27a 100644 --- a/form/_select.scss +++ b/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; } } diff --git a/utilities/_functions.scss b/utilities/_functions.scss index 699e574..c7a7580 100644 --- a/utilities/_functions.scss +++ b/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); diff --git a/utilities/_initial-variables.scss b/utilities/_initial-variables.scss index 68f3152..32503f1 100644 --- a/utilities/_initial-variables.scss +++ b/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 diff --git a/utilities/_mixins.scss b/utilities/_mixins.scss index b631a3e..4aab21d 100644 --- a/utilities/_mixins.scss +++ b/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;