[Snyk] Upgrade bulma from 0.8.0 to 0.8.1 #16
Closed
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.
Snyk has created this PR to upgrade bulma from 0.8.0 to 0.8.1.
ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.Release notes
Package name: bulma
Improvements
notification
elementhero
bulmaRgba()
function to supportinherit
value$button-text-decoration
variableBug fixes
$panel-colors
variableBig 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
modifierCommit messages
Package name: bulma
Compare
Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.
For more information:
🧐 View latest project report
🛠 Adjust upgrade PR settings
🔕 Ignore this dependency or unsubscribe from future upgrade PRs