To fix duplicate imports, all Sass placeholders have moved from the utilities/mixins
file to its own utilities/extends
file.
The Sass placeholders are:
%control
%unselectable
%arrow
%block
%delete
%loader
%overlay
If you were importing them directly from utilities/mixins
, you'll need to import utilities/extends
instead.
If you were importing utilities/_all
or even bulma.sass
directly, no change is required.
is-ghost
button that behaves / looks like a regular linkicon-text
component, to combine an icon with text on its sidecolumn
offsets in RTLwidth: unset
for narrow columnsmixins
imports, created a single extends
file.sass
file extension have been removed, since they're unnecessary when there's no ambiguity between a .sass
file or a .scss
file$media-*
variables, set to !default
is-clickable
helper$navbar-colors
, $button-colors
, $notification-colors
, $progress-colors
, $table-colors
, $tag-colors
, $file-colors
, $textarea-colors
, $select-colors
, $form-colors
, $label-colors
and $hero-colors
$card-radius
variable$card-overflow
variable$code
listings more accessible$modal-breakpoint
variable for modal breakpointoptgroup
to generic.sass
The base/helpers.sass
file is deprecated. It has moved into its own /helpers
folder. If you were importing base/helpers.sass
or base/_all.sass
, please import sass/helpers/_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.
The list
component is also deprecated: the components/list.sass
file has been deleted. It was never officialy supported as it was too similar to panel
component. Use that one instead.
Bulma now has RTL support.
By setting the Sass flag $rtl
to true
, you can create an RTL version of Bulma, thanks to 4 new Sass mixins:
=ltr
=rtl
=ltr-property($property, $spacing, $right: true)
=ltr-position($spacing, $right: true)
The Bulma package now also comes with a bulma-rtl.css
and bulma-rtl.min.css
file to be used straight away.
Bulma now has spacing helpers: https://bulma.io/documentation/helpers/spacing-helpers/
Bulma provides margin m*
and padding p*
helpers in all directions:
*t
for top
*r
for right
*b
for bottom
*l
for left
*x
horizontally for both left and right
*y
vertically for both top and bottom
You need to combine a margin/padding prefix with a direciton suffix. For example:
margin-top
, use mt-*
padding-bottom
, use pb-*
margin-left
and margin-right
, use mx-*
Each of these property-direction
combinations needs to be appended with one of 6 value suffixes
This release also includes the following helpers:
is-vcentered
is-toggle
tag$input-color: $text-strong
notification
elementhero
bulmaRgba()
function to support inherit
value$button-text-decoration
variableControls and buttons are now 2.5em
high. You can revert this resizing by setting these previous values:
$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})
$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em
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 the message
component.
The panel
component is now available in all the different colors.
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:
$custom-colors: (
'lime': (
lime,
),
'tomato': (
tomato,
white,
),
'orange': (
$orange,
$orange-invert,
$orange-light,
),
'lavender': (
$lavender,
$lavender-invert,
$lavender-light,
$lavender-dark,
),
);
This is processed by the updated mergeColorMaps()
Sass function.
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:
$scheme-main: $black
$scheme-invert: $white
// etc.
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.
$green: hsl(141, 53%, 53%)
$cyan: hsl(204, 71%, 53%)
$red: hsl(348, 86%, 61%)
$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
$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
height: auto
on HTML audio
element breaks height of element-invert
variables using findColorInvert()
.container.is-fluid
margins.image
has a new .is-fullwidth
modifierThe form.sass
file is deprecated. It has moved into its own /form
folder. If you were importing form.sass
, please import sass/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.
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:
$title-family: 'Georgia', serif;
.is-relative
helper.navbar
focus behave like hover for the navigation.has-text-weight-medium
helper$footer-color
variable.container
fixed width values, use flex-grow
align
attribute in td/th
being ignored.has-addons
in tag.sass
$gap
variable default value.tabs
within .content
Fix #1979 -> Correct loading spinner color when a button is:
$block-spacing
$body-font-size
$small-font-size
$pre-font-size
$pre-padding
$pre-code-font-size
$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
$container-offset
$tile-spacing
$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
)box-sizing: border-box
on details
element$footer-padding
variable$input-placeholder-color
and $input-disabled-placeholder-color
variables.control
in .field
.tag.has-addons
to not work correctly.dropdown
links underlining in .message
component.hero.is-fullheight-with-navbar
to navbar.sass
file.control.has-icon
deprecated in favor of .control.has-icons
$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 the type=
HTML attribute.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
size=""
has-background-*
helpers$widescreen-enabled
and $fullhd-enabled
: you can set them to false
to disable each breakpoint$control-border-width
and $button-border-width
$custom-colors
and $custom-shades
variable for adding your own colors and shades to Bulma's $colors
and $shades
maps respectively$card-header-background-color
, $card-content-background-color
and $card-footer-background-color
to allow different background customization for card elements.is-expanded
modifier to .buttons.has-addons
.has-background
helpers for block background colors, like .has-text
is-text-right
precedence over is-text-left-mobile
.tag
.content
by defaultmedia-content
overflow
File
sass/utilities/initial-variables.sass
|
||
---|---|---|
Variable | From | To |
$gap
|
32px
|
64px
|
$radius
|
3px
|
4px
|
$radius-large
|
5px
|
6px
|
File
sass/base/generic.sass
|
||
---|---|---|
Variable | From | To |
$hr-background-color
|
$border
|
$background
|
$hr-height
|
1px
|
2px
|
File
sass/elements/content.sass
|
||
---|---|---|
Variable | From | To |
$content-heading-weight
|
$weight-normal
|
$weight-semibold
|
File
sass/components/message.sass
|
||
---|---|---|
Variable | From | To |
$message-header-padding
|
0.5em 0.75em
|
0.75em 1em
|
$message-body-padding
|
1em 1.25em
|
1.25em 1.5em
|
File
sass/components/navbar.sass
|
||
---|---|---|
Variable | From | To |
$navbar-item-hover-background-color
|
$background
|
$white-bis
|
$navbar-dropdown-border-top
|
1px solid $border
|
2px solid $border
|
$navbar-divider-background-color
|
$border
|
$background
|
File
sass/layout/footer.sass
|
||
---|---|---|
Variable | From | To |
$footer-background-color
|
$background
|
$white-bis
|
File
sass/components/breadcrumb.sass
|
|
---|---|
Name | Value |
$breadcrumb-item-padding-vertical
|
0
|
$breadcrumb-item-padding-horizontal
|
0.75em
|
File
sass/components/message.sass
|
|
---|---|
Name | Value |
$message-body-border-color
|
$border
|
$message-body-border-width
|
0 0 0 4px
|
$message-header-weight
|
$weight-bold
|
$message-header-body-border-width
|
0
|
File
sass/components/navbar.sass
|
|
---|---|
Name | Value |
$navbar-box-shadow-size
|
0 2px 0 0
|
$navbar-box-shadow-color
|
$background
|
$navbar-padding-vertical
|
1rem
|
$navbar-padding-horizontal
|
2rem
|
$navbar-z
|
30
|
File
sass/elements/title.sass
|
|
---|---|
Name | Value |
$title-line-height
|
1.125
|
$subtitle-line-height
|
1.25
|
$subtitle-negative-margin
|
-1.25rem
|
File | Removed | Replaced with |
---|---|---|
sass/components/message.sass
|
$message-body-border
|
$message-body-border-color
$message-body-border-width
|
hero
(primary) menu items not visible$variable-columns
to disable --columnGap
$pagination-color
variable.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths
.is-invisible
helper.is-expanded
modifier for navbar-item
.is-centered
and .is-right
modifiers for tags
.is-empty
modifier for file
.is-selected
class on <td>
and <th>
tagstag > icon
spacinghamburger
alignmentis-selected
and is-hoverable
styling issue$link
color is part of the $colors
map. As a result, .button.is-link
is a colored button now. Use .button.is-text
if you want the underlined button.variables.sass
file has been removed.nav.sass
file has been removed..table
hover effect is opt-in, by using the .is-hoverable
modifier class.dropdown
now supports .is-up
modifier=input
The $link
color is used instead of $primary
in the following components:
Variable | Old value | New value |
---|---|---|
$dropdown-item-active-color |
$primary-invert |
$link-invert |
$dropdown-item-active-background-color |
$primary |
$link |
$navbar-tab-hover-border-bottom-color |
$primary |
$link |
$navbar-tab-active-color |
$primary |
$link |
$navbar-tab-active-border-bottom-color |
$primary |
$link |
$navbar-dropdown-item-active-color |
$primary |
$link |
$tabs-link-active-border-bottom-color |
$primary |
$link |
$tabs-link-active-color |
$primary |
$link |
$tabs-toggle-link-active-background-color |
$primary |
$link |
$tabs-toggle-link-active-border-color |
$primary |
$link |
$tabs-toggle-link-active-color |
$primary-invert |
$link-invert |
.card-header-title
can be centered with .is-centered
.input
readonly and .is-static
.textarea
readonlynavbar
color modifiers$button-focus-box-shadow-size
and $button-focus-box-shadow-color
for customization$input-focus-box-shadow-size
and $input-focus-box-shadow-color
for customization$navbar-item
vertical-align: top
for iconsfont-size
text-size-adjust: 100%
to html
pagination
docs$family-primary
customization$container-offset
variable to determine the .container
breakpoints!important
to non responsive display helpers.navbar-item img
max height.navbar-dropdown
with right alignment.pagination
isn't using $pagination-background
navbar-brand
overflowing on mobile$table-head-color
isn't used!important
.is-size-7
helper is missingcomponent
-subcomponent
-state
-property
.is-shadowless
helperVariable name changes (mostly appending -color
):
From | To |
---|---|
$card | $card-color |
$card-background | $card-background-color |
$card-header | $card-header-color |
$dropdown-item | $dropdown-item-color |
$dropdown-content-background | $dropdown-content-background-color |
$dropdown-item-hover-background | $dropdown-item-hover-background-color |
$dropdown-item-hover | $dropdown-item-hover-color |
$dropdown-item-active-background | $dropdown-item-active-background-color |
$dropdown-item-active | $dropdown-item-active-color |
$dropdown-divider-background | $dropdown-divider-background-color |
$menu-item | $menu-item-color |
$menu-item-hover | $menu-item-hover-color |
$menu-item-hover-background | $menu-item-hover-background-color |
$menu-item-active | $menu-item-active-color |
$menu-item-active-background | $menu-item-active-background-color |
$menu-label | $menu-label-color |
$message-background | $message-background-color |
$message-header-background | $message-header-background-color |
$navbar-background | $navbar-background-color |
$navbar-item | $navbar-item-color |
$navbar-item-hover | $navbar-item-hover-color |
$navbar-item-hover-background | $navbar-item-hover-background-color |
$navbar-item-active | $navbar-item-active-color |
$navbar-item-active-background | $navbar-item-active-background-color |
$navbar-tab-hover-background | $navbar-tab-hover-background-color |
$navbar-tab-hover-border-bottom | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active | $navbar-tab-active-color |
$navbar-tab-active-background | $navbar-tab-active-background-color |
$navbar-divider-background | $navbar-divider-background-color |
$navbar-dropdown-item-hover | $navbar-dropdown-item-hover-color |
$navbar-dropdown-item-hover-background | $navbar-dropdown-item-hover-background-color |
$navbar-dropdown-item-active | $navbar-dropdown-item-active-color |
$navbar-dropdown-item-active-background | $navbar-dropdown-item-active-background-color |
$pagination | $pagination-color |
$pagination-hover | $pagination-hover-color |
$pagination-hover-border | $pagination-hover-border-color |
$pagination-focus | $pagination-focus-color |
$pagination-focus-border | $pagination-focus-border-color |
$pagination-active | $pagination-active-color |
$pagination-active-border | $pagination-active-border-color |
$pagination-disabled | $pagination-disabled-color |
$pagination-disabled-background | $pagination-disabled-background-color |
$pagination-disabled-border | $pagination-disabled-border-color |
$pagination-current | $pagination-current-color |
$pagination-current-background | $pagination-current-background-color |
$pagination-current-border | $pagination-current-border-color |
$pagination-ellipsis | $pagination-ellipsis-color |
$box | $box-color |
$box-background | $box-background-color |
$button | $button-color |
$button-background | $button-background-color |
$button-border | $button-border-color |
$button-link | $button-link-color |
$button-link-hover-background | $button-link-hover-background-color |
$button-link-hover | $button-link-hover-color |
$button-disabled-background | $button-disabled-background-color |
$button-disabled-border | $button-disabled-border-color |
$button-static | $button-static-color |
$button-static-background | $button-static-background-color |
$button-static-border | $button-static-border-color |
$input | $input-color |
$input-background | $input-background-color |
$input-border | $input-border-color |
$input-hover | $input-hover-color |
$input-hover-border | $input-hover-border-color |
$input-focus | $input-focus-color |
$input-focus-border | $input-focus-border-color |
$input-disabled | $input-disabled-color |
$input-disabled-background | $input-disabled-background-color |
$input-disabled-border | $input-disabled-border-color |
$input-icon | $input-icon-color |
$input-icon-active | $input-icon-active-color |
$title | $title-color |
$subtitle | $subtitle-color |
$card-footer-border | $card-footer-border-top |
$menu-list-border | $menu-list-border-left |
$navbar-tab-hover-border | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active-border | $navbar-tab-active-border-bottom |
$table-border | $table-cell-border |
$table-row-even-background | $table-striped-row-even-background-color |
$table-row-even-hover-background | $table-striped-row-even-hover-background-color |
.dropdown
wrapping.is-fullwidth
removed from docs.navbar-item
for hover+active background/color.navbar-item
color overrides.container
gap can be customized with the new $gap
variable.container
has 2 new modifiers: .is-widescreen
and .is-fullhd
.textarea
element will honors [rows]
attributebody
scrollbar.help
class behaviour in horizontal form is-grouped
fieldnavbar
.container
as direct child of .navbar
moves .navbar-menu
below .navbar-brand
.nav-burger
exampletext-align: center
height: auto
from media elements+center
mixindl
stylespre
margin-bottom
.field
element ; .control
repurposed.pagination
sizesNew $fullhd
breakpoint (1344px)
Remove monospace named fonts
Remove icon spacing logic
Split icon container dimensions and icon size
Fix delete button by using pixels instead of (r)em
Fix level on mobile
Add new .is-spaced
modifier for titles and subtitles
Fix #487
Fix #489
Fix #502
Fix #514
Fix #524
Fix #536
rem
and em
(!)Use {% capture %}
to ensure same display as code snippet (!)
Move variables to their own file
Remove small tag
Add :focus
state
Fix table
Remove table .is-icon
and .is-link
Add .content
table
Fix inputs with icons
Input icons require the .icon
container
Deprecate .media-number
Fix .level-item
height
Fix .menu
spacing
Deprecate .menu-nav
Add invert outlined buttons
Fix .nav
Fix .pagination
Fix .tabs
Fix .panel
Fix .delete
Add mixins documentation
Add functions documentation
flex: 1
shorthand.control.is-grouped
now uses .control
elements as direct children.modal-card
.nav-center
.tabs ul
left center right.navbar
renamed to .level
.header
renamed to .nav
.header
.navbar
.hero
layoututilities/controls.sass
and elements/form.sass
.tabs
need .icon
nowis-mobile
for the navbar<hr class="is-marginless">
nowinline-flex
for controls and tagsbulma
folder renamed to sass
to avoid the redundant bulma/bulma
pathvariables.sass
moved to /utilities
.content
moved to elements.table
moved to elements.message
moved to components.table-icon
, .table-link
, .table-narrow
are now called .is-icon
, .is-link
, .is-narrow
!default
so you can set your custom variables before importing Bulma.column.is-narrow
to make a column flex: none
.has-icon
support for different .input
sizes.tile
.is-third
renamed to .is-one-third
.is-quarter
renamed to .is-one-quarter
.is-two-thirds
.is-three-quarters
.delete
in .tag
has no red.is-text-*
renamed to .has-text-*
.is-fullwidth
helper.tag.is-small
*-full
column classes$family-code
.table
last row with th
.card
color in .hero
.columns.is-gapless
box-shadow
from .tag
.tag
uses display: inline-flex
now.pagination
.control.is-horizontal
.help
.progress
.button
uses display: inline-flex
now.button
needs an .icon
now.control.is-grouped
renamed to .control.has-addons
.control.is-inline
renamed to .control.is-grouped
.is-inline
and .is-block