bulma/CHANGELOG.md

Bulma Changelog

Upcoming release

Bug fixes

• Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
• Fix #2060 -> height: auto on HTML audio element breaks height of element

New features

• #2563 .image has a new .is-fullwidth modifier

0.7.5

Deprecation warning

The 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 bbefore.

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:

$title-family: "Georgia", serif;

• #2375 Add .is-relative helper
• #2321 Make .navbar focus behave like hover for the navigation
• #2290 Fix #1186 -> Reset the offset on columns
• #2231 Add .has-text-weight-medium helper
• #2224 Add customizable border radius to progress bar
• #2480 Add $footer-color variable

Improvements

• #2396 Update docs with webpack 4 example
• #2381 Make centered buttons have equal margin
• Fix #2297 -> Remove .container fixed width values, use flex-grow
• #2478 Move form.sass into its own folder

Bug fixes

• #2420 Fix #2414 -> Fix align attribute in td/th being ignored
• #2463 Remove duplicate .has-addons in tag.sass
• #2253 Fix $gap variable default value
• #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox
• #2175 Proper aligning for .tabs within .content
• #2476 Fix #2441 -> Correct active pagination link text colour on hero

Fix #1979 -> Correct loading spinner color when a button is:

• outlined and hovered/focused
• outlined, inverted and hovered/focused

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

0.7.3

New features

• #2145 Fix #372 -> New indeterminate progress bars
• #2206 Fix #2046 -> New variables $table-head-background-color, $table-body-background-color and $table-foot-background-color for the .table element
• #592 -> Give arbitrary elements access to the image/ratio classes
• #1682 Fix #1681 -> Adds disabled styles for <fieldset disabled>
• #2201 Fix #1875 -> .buttons and .tags group sizing (.are-small, .are-medium, .are-large)

Improvements

• #1978 Fix #1696 -> Force box-sizing: border-box on details element
• #2167 Fix #1878 -> New $footer-padding variable
• #2168 -> New $input-placeholder-color and $input-disabled-placeholder-color variables

Bug fixes

• #2157 Fix #1656 -> Allow border radius if only one .control in .field
• #2091 Fix #2091 -> Remove CSS rule which causes .tag.has-addons to not work correctly
• #2186 Fix #1130 -> Prevent .dropdown links underlining in .message component
• Fix #2154 -> Move .hero.is-fullheight-with-navbar to navbar.sass file

Deprecation

• .control.has-icon deprecated in favor of .control.has-icons

0.7.2

New features

• #1884 New $navbar-burger-color variable
• #1679 Add breakpoint based column gaps
• #1905 Fix modal for IE11 #1902
• #1919 New is-arrowless class for navbar items
• #1949 New is-fullheight-with-navbar class for heros
• #1764 New .is-sr-only helper
• #2109 Add and use $navbar-breakpoint variable
• New variables $control-height, $control-line-height, $pagination-min-width, $input-height
• #1720 Add list element feature
• #2123 Add .content ol types: .is-lower-roman, .is-upper-roman, .is-lower-alpha, .is-upper-alpha, and support for the type= HTML attribute

Improvements

• #1964 Allow .notification to have a .dropdown-item
• #1999 Change $border to $grey-lighter in mixins
• #2085 .media-content will allow scrolling horizontally if the content is too wide
• #1744 Fix #1710 by using $table-striped-row-even-hover-background-color only for even rows
• #2074 Allow <button> as .dropdown-item

Bug fixes

• #1749 Fix icons floating out of input area
• #1993 Fixes #1992 Prevent disabled form elements hover state from overlapping, if control has add-ons elements
• #1909 Fix Modal card in IE11
• #1908 Fix IE11 when textarea doesn't listen to size=""
• Fix #1991 The last button in list of full-width buttons has longer width
• #1982 Fix navbar-burger color when color modifier is used
• #1819 Fix #1137 error message for required file
• Fix #1904 and #1969: hide native file input in Chrome
• #2059 Remove unnecessary right margin from last level-item (level.is-mobile)

0.7.1

Improvements

• #1789 Add all shades to has-background-* helpers

Bug fixes

• #1796 #1806 Remove navbar box-shadow by default

0.7.0

New features

• New variables $widescreen-enabled and $fullhd-enabled: you can set them to false to disable each breakpoint
• New variables $control-border-width and $button-border-width
• 🎉 #1624 Add some common photography aspect ratios and portrait ratios
• 🎉 #1747 New $custom-colors and $custom-shades variable for adding your own colors and shades to Bulma's $colors and $shades maps respectively

Improvements

• #1619 Add $card-header-background-color, $card-content-background-color and $card-footer-background-color to allow different background customization for card elements
• #1669 Add .is-expanded modifier to .buttons.has-addons
• #1628 Add .has-background helpers for block background colors, like .has-text
• #1767 Added minified bundle with cleancss

Bug fixes

• #1778 Fix is-text-right precedence over is-text-left-mobile
• #1571 Fix position of delete button on .tag
• #1549 Implementing a simple version of the native sass percentage function
• #1707 Disable table hover in .content by default
• #1428 Fix media-content overflow

Variable changes

Updated default values

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

New variables

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

Removed variables

File	Removed	Replaced with
sass/components/message.sass	$message-body-border	$message-body-border-color $message-body-border-width

0.6.2

New features

• 🎉 Rounded buttons, inputs, pagination and toggle tabs

Improvements

• #1343 Add sub and sup title sizes
• #1452 New .is-italic helper

Bug fixes

• #935 Bug dropdown in hero (primary) menu items not visible
• #1456 Fix customize documentation
• #1190 Add $variable-columns to disable --columnGap
• #1518 Fix spacing of the delete button in notification element
• #1569 Fix missing use of $pagination-color variable

0.6.1

New features

• 🎉 List of buttons
• 🎉 #1235 Support for five column grid: .is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths
• 🎉 #1287 New .is-invisible helper
• 🎉 #1255 New .is-expanded modifier for navbar-item
• 🎉 #1384 New .is-centered and .is-right modifiers for tags
• 🎉 #1383 New .is-empty modifier for file
• 🎉 #1380 Allow .is-selected class on <td> and <th> tags

Improvements

• #987 Improve tag > icon spacing
• Improve hamburger alignment

Bug fixes

• #1358 Fix indentation bug for .is-one-fifth
• #1356 SASS 3.5+ variable parsing compatibility allows only #{}
• #1342 Remove black line from progress bar in IE
• #1334 Fix progress bar colors in IE
• #1313 Fix Table is-selected and is-hoverable styling issue
• #963 Fix Delete Button Bug in iOS Safari

0.6.0

Breaking changes

• The new $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.
• The deprecated variables.sass file has been removed.
• The deprecated nav.sass file has been removed.

New features

• #1236 .table hover effect is opt-in, by using the .is-hoverable modifier class
• #1254 .dropdown now supports .is-up modifier

Improvements

• #1257 Include placeholder mixin in =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

Issues closed

• #708 Import variables in mixins

0.5.3

New features

• #1101 .card-header-title can be centered with .is-centered
• #1189 .input readonly and .is-static
• #1189 .textarea readonly

Issues closed

• #1177 Fix .message .tag combination
• #1167 Fix pre code
• #1207 Fix .breadcrumb alignment

0.5.2

New features

• #842 navbar color modifiers
• #331 Support for third party icons
• Added $button-focus-box-shadow-size and $button-focus-box-shadow-color for customization
• Added $input-focus-box-shadow-size and $input-focus-box-shadow-color for customization
• Navbar tabs

Issues closed

• #1168 Undefined variable: $navbar-item
• #930 Remove vertical-align: top for icons
• #735 Font awesome custom font-size
• #395 Font awesome stacked icons
• #1152 Level-items not centered horizontally on mobile
• #1147 Add text-size-adjust: 100% to html
• #1106 pagination docs
• #1063 $family-primary customization

0.5.1

New features

• 🎉 #280 File upload element
• $container-offset variable to determine the .container breakpoints
• #1001 Text case helpers

Issues closed

• #1030 Add !important to non responsive display helpers
• #1020 Customizing .navbar-item img max height
• #998 .navbar-dropdown with right alignment
• #877 .pagination isn't using $pagination-background
• #989 navbar-brand overflowing on mobile
• #975 Variable $table-head-color isn't used
• #964 Tabs sass file throwing error with !important
• #949 .is-size-7 helper is missing

0.5.0

New features

• 🎉 List of tags
• New variable naming system: component-subcomponent-state-property
• Improved customization thanks to new set of variables
• #934 New .is-shadowless helper

Variable 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

Improved documentation

• Starter template
• Colors page
• Typography helpers
• Meta information for all elements and components
• Variables information for most elements and components

Issues closed

• #909 .dropdown wrapping
• #938 .is-fullwidth removed from docs
• #900 Variable .navbar-item for hover+active background/color
• #902 .navbar-item color overrides

0.4.4

New features

• New dropdown button!
• The breakpoints and .container gap can be customized with the new $gap variable
• The .container has 2 new modifiers: .is-widescreen and .is-fullhd

Issues closed

• Fix #26 .textarea element will honors [rows] attribute
• Fix #887 body scrollbar
• Fix #715 .help class behaviour in horizontal form is-grouped field
• Fix #842 Adding modifiers in navbar
• Fix #841 .container as direct child of .navbar moves .navbar-menu below .navbar-brand
• Fix #861 Box in hero as text and background white
• Fix #852 charset and version number
• Fix #856 JavaScript .nav-burger example
• Fix #821 Notification strong color

0.4.3

New features

• New navbar with dropdown support
• Add new feature: Breadcrumb component (#632) @vinialbano
• Add Bloomer to README.md (#787) @AlgusDark
• Add responsive is-*-touch tags for .column sizes (#780) @tom-rb
• Adding 'is-hidden' to helpers in docs (#798) @aheuermann
• Add figure/figcaption as content element (#807) @werthen
• Add ^{and _{support to content (#808) @werthen}}
• Add re-bulma and react-bulma (#809) @kulakowka
• Add is-halfheight to hero (#783) @felipeas
• Added a related project with Golang backend (#784) @Caiyeon

Issues closed

• Fix #827 Breadcrumb and Navbar in docs
• Fix #824 Code examples broken because of text-align: center
• Fix #820 Loading spinner resizes with controls
• Fix #819 Remove height: auto from media elements
• Fix #790 Documentation typo
• Fix #814 Make use of +fullhd mixin for columns @Saboteur777
• Fix #781 Add min/max height/width to delete class size modifiers @ZackWard
• Fix #391 Section docs update

0.4.2

• Fix #728 selected row on striped table
• Fix #747 remove flex-shrink for is-expanded
• Fix #702 add icons support for select dropdown
• Fix #712 delete button as flexbox item
• Fix #759 static button

0.4.1

• Fix #568 max-width container
• Fix #589 notification delete
• Fix #272 nav-right without nav-menu
• Fix #616 hero and notification buttons
• Fix #607 has-addons z-index
• Feature #586 select color modifiers
• Fix #537 -ms-expand
• Fix #578 better +center mixin
• Fix #565 dl styles
• Fix #389 pre margin-bottom
• Fix #484 icon alignment
• Fix #506 bold nav menu
• Fix #581 nav container
• Fix #512 nav grouped buttons
• Fix #605 container example
• Fix #458 select expanded
• Fix #403 separate animations
• Fix #637 customize Bulma
• Fix #584 loading select
• Fix #571 control height
• Fix #634 is-grouped control
• Fix #676 checkbox/radio wrapping
• Feature #479 has-icons placement
• Fix #442 selected table row
• Fix #187 add customize page
• Fix #449 columns negative horizontal margin
• Fix #399 pagination wrapping
• Fix #227 color keys as strings

0.4.0

• Default font-size is 16px

• New .field element ; .control repurposed

• New .pagination sizes

• New $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

0.3.2

• Fix #478

0.3.1

• Fix #441
• Fix #443

0.3.0

• Use rem and em (!)

• Fix Font Awesome icons in buttons (!)

• Fix message colors (!)

• 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

0.2.2

• Fix: remove multiple imports

0.2.1

• Fix: container flex
• Fix: nav-item flex
• Fix: media-number flex
• Fix: new brand colors

0.2.0

• Added: new branding
• Added: modularity
• Added: grid folder
• Added: .github folder

0.1.1

• Remove flex: 1 shorthand

0.1.0

• Fix #227
• Fix #232
• Fix #242
• Fix #243
• Fix #228
• Fix #245
• Fix #246

0.0.28

• BREAKING: .control.is-grouped now uses .control elements as direct children
• Fix #220
• Fix #214
• Fix #210
• Fix #206
• Fix #122

0.0.27

• Fix: #217
• Fix: #213
• Fix: #209
• Fix: #205
• Fix: #204
• Fix: #81

0.0.26

• Added: .modal-card
• Added: display responsive utilities
• Added: .nav-center
• Added: .tabs ul left center right
• Changed: .navbar renamed to .level
• Changed: .header renamed to .nav
• Deprecated: .header
• Deprecated: .navbar
• Fixed: .hero layout

0.0.25

• Added: utilities/controls.sass and elements/form.sass
• Added: new responsive classes
• Added: white/black and light/dark colors
• Changed: .tabs need .icon now
• Changed: cdnjs link doesn't include version

0.0.24

Added

• is-mobile for the navbar

Removed

• removed border between sections. Use <hr class="is-marginless"> now

Updated

• restructured files
• added back inline-flex for controls and tags

Removed

• test tiles

0.0.23

BREAKING

• bulma folder renamed to sass to avoid the redundant bulma/bulma path
• variables.sass moved to /utilities
• almost everything is singular now
• elements only have one class
• components have at least one sub-class
• .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

Added

• all variables are now !default so you can set your custom variables before importing Bulma

0.0.22

Fixed

• links in hero subtitle

0.0.21

Added

• .column.is-narrow to make a column flex: none

0.0.20

Added

• .has-icon support for different .input sizes

0.0.19

NEW!!!

• .tile

BREAKING

• .is-third renamed to .is-one-third
• .is-quarter renamed to .is-one-quarter

Added

• .is-two-thirds
• .is-three-quarters

Changed

• .delete in .tag has no red

0.0.18

BREAKING

• .is-text-* renamed to .has-text-*
• removed .is-fullwidth helper

Added

• small tag: .tag.is-small
• 12th column classes
• *-full column classes
• $family-code

Fixed

• disabled input with element
• .table last row with th
• .card color in .hero
• .columns.is-gapless

Removed

• removed box-shadow from .tag
• custom checkboxes and radio buttons

Updated

• .tag uses display: inline-flex now

0.0.17

Added

• pagination: .pagination
• horizontal forms: .control.is-horizontal
• help text for form controls: .help
• progress bars: .progress

Updated

• .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

Removed

• helpers .is-inline and .is-block