bulma/CHANGELOG.md

Bulma Changelog

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