bulma/CHANGELOG.md
Jeremy Thomas c3f91c335b Fix #1979
2019-05-18 22:06:52 +01:00

35 KiB

Bulma Changelog

Upcoming release

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):

FromTo
$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

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