[Snyk] Upgrade bulma from 0.7.2 to 0.8.1 #5
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.7.2 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
modifierDeprecation warning
The
form.sass
file is deprecated. It has moved into its own/form
folder. If you were importingform.sass
, please importsass/form/_all.sass
now.If you were simply importing the whole of Bulma with
@import "~/bulma/bulma.sass"
or similar, you won't have to change anything, and everything will work as before. 😃New features
Support for overriding the
font-family
You can now specify a different
font-family
for the.title
,.subtitle
and.button
by using the variables$title-family
,$subtitle-family
and$button-family
respectively.Simply set a value when importing Bulma:
.is-relative
helper.navbar
focus behave like hover for the navigation.has-text-weight-medium
helper$footer-color
variableImprovements
.container
fixed width values, useflex-grow
Bug fixes
align
attribute intd/th
being ignored.has-addons
intag.sass
$gap
variable default value.tabs
within.content
Fix #1979 -> Correct loading spinner color when a button is:
New variables
Initial variables
$block-spacing
Base
$body-font-size
$small-font-size
$pre-font-size
$pre-padding
$pre-code-font-size
Components
$card-header-padding
$card-content-padding
$card-media-margin
$dropdown-menu-min-width
$dropdown-content-padding-bottom
$dropdown-content-padding-top
$level-item-spacing
$menu-list-line-height
$menu-list-link-padding
$menu-nested-list-margin
$menu-nested-list-padding-left
$menu-label-font-size
$menu-label-letter-spacing
$menu-label-spacing
$pagination-item-font-size
$pagination-item-margin
$pagination-item-padding-left
$pagination-item-padding-right
$panel-margin
$panel-tabs-font-size
Elements
$container-offset
Grid
$tile-spacing
Same as
0.7.3
but with the CSS files attached.New features
$table-head-background-color
,$table-body-background-color
and$table-foot-background-color
for the.table
element<fieldset disabled>
.buttons
and.tags
group sizing (.are-small
,.are-medium
,.are-large
)Improvements
box-sizing: border-box
ondetails
element$footer-padding
variable$input-placeholder-color
and$input-disabled-placeholder-color
variablesBug fixes
.control
in.field
.tag.has-addons
to not work correctly.dropdown
links underlining in.message
component.hero.is-fullheight-with-navbar
tonavbar.sass
fileDeprecation
.control.has-icon
deprecated in favor of.control.has-icons
New features
$navbar-burger-color
variablemodal
for IE11 #1902is-arrowless
class for navbar itemsis-fullheight-with-navbar
class for heros.is-sr-only
helper$navbar-breakpoint
variable$control-height
,$control-line-height
,$pagination-min-width
,$input-height
.content ol
types:.is-lower-roman
,.is-upper-roman
,.is-lower-alpha
,.is-upper-alpha
, and support for thetype=
HTML attributeImprovements
.notification
to have a.dropdown-item
$border
to$grey-lighter
in mixins.media-content
will allow scrolling horizontally if the content is too wide$table-striped-row-even-hover-background-color
only for even rows<button>
as.dropdown-item
Bug fixes
size=""
Commit 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