# Bulma Changelog ## 1.0.3 ### Bug Fixes - Fix #3842: restore use of `$easing`, `$radius-rounded` and `$speed` Sass variables ### Documentation Fixes - Fix #3904, #3884: fix website horizontal overflow - Fix #3849: fix Light Mode color swatches in Dark Mode ## 1.0.2 ### Improvements - Smart Grid `is-col-min` now goes up to `32` (Fixes #3829) - Remove need for `is-variable` modifier for Column gaps - You can have a list of radio buttons or checkboxes with the `radios` and `checkboxes` classes respectively - Add `is-max-tablet` modifier to the Container element - Add `currentColor` and `inherit` as possible values for the color and background helpers - The Section can now have a minimum height of `100vh` with the `is-fullheight` modifier - Add more SCSS variables: - `$input-border-style` - `$input-border-width` - `$label-spacing` - `$field-block-spacing` - Add more CSS variables: - `--bulma-input-border-style` - `--bulma-input-border-width` - `--bulma-label-color` - `--bulma-label-spacing` - `--bulma-label-weight` - `--bulma-help-size` - `--bulma-field-block-spacing` ### Bug fixes - Fix #3824: ability to override `$scheme-h`, `$scheme-s`, `$dark-l` and `$light-l` Sass variables - Fix #3830: add remaining logical properties - Fix #3743: make sure 12 columns system take up whole width - Fix #3799: restore variable columns - Fix #3846: restore `--bulma-column-gap` CSS variable - Fix #3775: `has-background` helpers should only affect element it's applied to - Fix #3856: Sass nested rule deprecation warning - Fix #3757: restore use of `$navbar-burger-color` ## 1.0.1 ### Bug fixes - Fix #3755: `.select` colors - Fix #3736: include helpers in "No Dark Mode" version - Fix #3744: build non-minified versions - Fix #3747: ability to nest fixed grids - Fix #3759: remove unused `.skeleton` class - Fix #3786: fix horizontal padding of rounded buttons ### Documentation fixes - Fix #3725 - Fix #3720 - Update online documentation link in README - Update `migrating-to-v1.html` - Fix #3735 - Fix #3729: explain how to use Bulma in a modular way - Fix #3785: make use of the `@prefers-reduced-motion` setting - Fix #3758: broken links for `0.9.4` version - Fix #3760: fix form controls typo ### Improvements - Fix #3737: Move `sass` to `devDependencies` ## 1.0.0 Bulma v1 is a **full rewrite** of the framework using [**Dart Sass**](https://sass-lang.com/dart-sass/), which is the the primary implementation of Sass. While this affects a few development details, everything has been done to make the transition **as easy as possible**. ## What remains the same **All HTML snippets are the same**. This means you don't need to update your markup. **This is important** because it means, if you're using Bulma straight "out of the box", you don't need to change anything. You can just swap `bulma@0.9.4/css/bulma.min.css` with `bulma@1.0.0/css/bulma.min.css` and everything will work. Things will look slightly different, but they will still work. ## What changes * [**Dart Sass**](https://sass-lang.com/dart-sass/) is used to build Bulma * if you use the `sass` npm package, you're already using Dart Sass * [**CSS Variables**](https://bulma.io/documentation/features/css-variables/) are used instead of literals: `color: var(--bulma-primary);` instead of `color: hsl(171deg, 100%, 41%);`, which means you can customize Bulma with CSS only (without using Sass) * Customization by setting your own value for Sass variables works differently. See [how to customize Bulma with Sass](https://bulma.io/documentation/customize/). ## What's new (i.e. did not exist before) * The notion of [**Themes**](https://bulma.io/documentation/features/themes/) is introduced: a theme is a collection of CSS variables within a context, and is the best approach to customize Bulma * As a result, a Theme for [**Dark Mode**](https://bulma.io/documentation/features/dark-mode/) is included * [**Color Palettes**](https://bulma.io/documentation/features/color-palettes/) are created for each of the 7 primary colors * [**Skeleton loaders**](https://bulma.io/documentation/features/skeletons/) exist as standalone components but also as variants of other components * You can add a **prefix** to all your Bulma classes so that `.button` becomes `.my-prefix-button` * a pre-built prefixed version exists as one of the [**alternative versions**](https://bulma.io/documentation/start/alternative-versions/) ## 0.9.4 ### New features - **Responsive buttons**: the size of a button will change for each breakpoint (Fix #1572) - `@mixin between`: takes 2 breakpoint values, outputs a media query for the range between these 2 values - `$breakpoints` Sass map: a map of named breakpoints and their type (`from`, `until` or both) - `@mixin breakpoint`: uses the new `$breakpoints` Sass map to output a media query ### Improvements - Add missing variables for content customization - Fix #683 Modal - example javascript toggle - Fix #3461 Bulma logo with wordmark in SVG - Fix #3383 'Variables' sections on docs page (#3513) - Fixes #3510 The navbar overlaps with sidebars in "Fullheight hero with navbar" (#3516) - Setup [Cypress](https://www.cypress.io/) testing (#3436) ### Bugfix - Replace disabled attr on pagination anchor elements with is-disabled - #3500 Fix hidden disabled buttons on iOS 15.4 (#3521) - #3076 Fix Table headers centered aligned in Safari ## 0.9.3 ### New features - New `is-underlined` class for underlined text and links - New `auto` value for margin and padding helper classes ### Improvements - New `$section-padding-desktop` Sass variable - New `$hero-body-padding-tablet` Sass variable - New `$shadow` Sass variable (used for `.box`, `.card`, `.dropdown` and `.panel`) - Add `is-normal` size modifiers to `.file` and `.content` - New `%reset` placeholder ### Bugfix - #3362 Fix slash divide ## 0.9.2 ### Breaking change 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. ### New features - Fix #1583 New `is-ghost` button that behaves / looks like a regular link - New `icon-text` component, to combine an icon with text on its side ### Bug fixes - #3005 Fix `column` offsets in RTL - Fix #3145 Dropdown content is bounded by a parent card - Fix #3089 Sub columns of a variable columns have weird gap - Fix #2937 Add `width: unset` for narrow columns - #3208 Fix #3163 Do not override is-rounded with button-small - #3216 Removed duplicate `mixins` imports, created a single `extends` file - #3216 Removed all references to the `.sass` file extension have been removed, since they're unnecessary when there's no ambiguity between a `.sass` file or a `.scss` file ### Improvements - Fix #3012 Add `$media-*` variables, set to `!default` - Fix #2797 Import dependencies individually for each component - Remove list style from pagination list ## 0.9.1 ### New features - #3047 Flexbox helpers - #3085 Add `is-clickable` helper - #3086 Allow each component to have its own colors and default to global ones - New variables `$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` ### Improvements - #2630 Fixes #2598 -> Add `$card-radius` variable - Add `$card-overflow` variable - #2540 Fixes #2539 -> Fix indeterminate progress styling in IE11 - #3057 Make the default text color of `$code` listings more accessible - #3088 Adds not allowed cursor to missing inputs - #3101 Add `$modal-breakpoint` variable for modal breakpoint - #3107 Add `optgroup` to `generic.sass` ## 0.9.0 ### Deprecation warning 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 officially supported as it was too similar to `panel` component. Use that one instead. ### RTL support 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. ### Spacing helpers Bulma now has **spacing helpers**: https://bulma.io/documentation/helpers/spacing-helpers/

Bulma provides margin m* and padding p* helpers in all directions:

You need to combine a margin/padding prefix with a direction suffix. For example:

Each of these property-direction combinations needs to be appended with one of 6 value suffixes

This release also includes the following helpers: - light and dark color helpers - light and dark background color helpers ### Improvements - #2925 Center table cell content vertically with `is-vcentered` ### Bug fixes - #2955 Fix issue when there's only one `is-toggle` tag ## 0.8.2 ### Bug fixes - Fix #2885 -> Revert `$input-color: $text-strong` ## 0.8.1 ### Improvements - #2709 Add light colors to the `notification` element - #2740 Fixes #2739 -> Add variables size for layout `hero` - Fix #2741 -> Create `bulmaRgba()` function to support `inherit` value - #2756 Add `$button-text-decoration` variable ### Bug fixes - #2664 Fixes #2671 -> Add `$panel-colors` variable ## 0.8.0 ### Big update #### Larger form controls Controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values: ```sass $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 ``` #### 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 color - `findDarkColor()` which finds the dark version of a color The light colors are used by the `button` element, while the light and dark colors are used by the `message` 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: ```scss $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. #### 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` occurrences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values: ```sass $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. #### 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 - Fix #2647 -> Missing meta tags in snippet - Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map - Fix #2060 -> `height: auto` on HTML `audio` element breaks height of element - Fix #706 -> Derive `-invert` variables using `findColorInvert()` - #1608 Fix #1552 -> `.container.is-fluid` margins ### 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 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: ```scss $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 color 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 `
` - #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 `