Update bulma to the latest version 🚀 #414
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The dependency bulma was updated from
0.7.5
to0.8.0
.This version is not covered by your current version range.
If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.
Publisher: jgthms
License: MIT
Release Notes for 0.8.0
Big update
Larger form controls
Controls and buttons are now
2.5em
high. You can revert this resizing by setting these previous values:Light and dark colors
Each main color (
"primary"
,"info"
,"success"
,"warning"
,"danger"
) now has a*-light
and*-dark
version. They are calculated using 2 new color functions:findLightColor()
which finds the light version of a colorfindDarkolor()
which finds the dark version of a colorThe light colors are used by the
button
element, while the light and dark colors are used by themessage
component.Panel colors
The
panel
component is now available in all the different colors.4-value color map
The
$colors
Sass map now accepts, for each of its values, a map of up to 4 values. For example: the key"info"
now has the($info, $info-invert, $info-light, $info-dark)
map.If you provide a
$custom-colors
map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:This is processed by the updated
mergeColorMaps()
Sass function.Scheme variables
There are 6 new
$scheme
derived variables:$scheme-main
$scheme-main-bis
$scheme-main-ter
$scheme-invert
$scheme-invert-bis
$scheme-invert-ter
They replace the
$white
and$black
occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:That is also why most of the codebase now references derived variables (
$text
,$background
,$border
etc.) instead of initial ones ($grey
,$grey-lighter
,$grey-darker
etc.): updating the derived variables will affect all elements and components directly.Initial variables
$green: hsl(141, 53%, 53%)
$cyan: hsl(204, 71%, 53%)
$red: hsl(348, 86%, 61%)
Derived variables
$primary-invert: findColorInvert($primary)
$primary-light: findLightColor($primary)
$primary-dark: findDarkColor($primary)
$info-invert: findColorInvert($info)
$info-light: findLightColor($info)
$info-dark: findDarkColor($info)
$success-invert: findColorInvert($success)
$success-light: findLightColor($success)
$success-dark: findDarkColor($success)
$warning-invert: findColorInvert($warning)
$warning-light: findLightColor($warning)
$warning-dark: findDarkColor($warning)
$danger-invert: findColorInvert($danger)
$danger-light: findLightColor($danger)
$danger-dark: findDarkColor($danger)
$light-invert: findColorInvert($light)
$dark-invert: findColorInvert($dark)
$scheme-main: $white
$scheme-main-bis: $white-bis
$scheme-main-ter: $white-ter
$scheme-invert: $black
$scheme-invert-bis: $black-bis
$scheme-invert-ter: $black-ter
Other variables
$control-height: 2.5em
$control-padding-vertical: calc(0.5em - #{$control-border-width})
$control-padding-horizontal: calc(0.75em - #{$control-border-width})
$media-border-color: rgba($border, 0.5)
$notification-code-background-color: $scheme-main
$panel-radius: $radius-large
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$textarea-padding: $control-padding-horizontal
$textarea-max-height: 40em
$textarea-min-height: 8em
Bug fixes
height: auto
on HTMLaudio
element breaks height of element-invert
variables usingfindColorInvert()
.container.is-fluid
marginsNew features
.image
has a new.is-fullwidth
modifierCommits
The new version differs by 71 commits.
35e3ccb
Build 0.8.0
9a28ea1
Fix form controls docs
7b35fd0
Update blog post
c2d785a
Write 0.8 blog post
1a6b00e
Improve layout docs
48515c4
Update changelog
a87e20b
Improve form documentation
e539036
Improve components documentation
d4c7731
Add more color documentation, Add light buttons to docs
d0c84b9
Update variable JSONs
817c676
Add dark Bulma example
ac0399d
Only use derived variables
0f988ea
Add color scheme
5131f2a
Add light/dark color functions
46b3edf
Update panel, Fix icon buttons
There are 71 commits in total.
See the full diff
FAQ and help
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper bot 🌴