diff --git a/CHANGELOG.md b/CHANGELOG.md index edbe1fa2..79be6446 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,55 +8,56 @@ To fix duplicate imports, all Sass placeholders have moved from the `utilities/m The Sass placeholders are: -* `%control` -* `%unselectable` -* `%arrow` -* `%block` -* `%delete` -* `%loader` -* `%overlay` +- `%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 +- 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 +- #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 +- 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` +- #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` +- #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 @@ -65,7 +66,7 @@ If you were importing `utilities/_all` or even `bulma.sass` directly, no change 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. +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. ### RTL support @@ -73,10 +74,10 @@ 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)` +- `=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. @@ -123,35 +124,35 @@ Bulma now has **spacing helpers**: https://bulma.io/documentation/helpers/spacin This release also includes the following helpers: -* light and dark color helpers -* light and dark background color helpers +- light and dark color helpers +- light and dark background color helpers ### Improvements -* #2925 Center table cell content vertically with `is-vcentered` +- #2925 Center table cell content vertically with `is-vcentered` ### Bug fixes -* #2955 Fix issue when there's only one `is-toggle` tag +- #2955 Fix issue when there's only one `is-toggle` tag ## 0.8.2 ### Bug fixes -* Fix #2885 -> Revert `$input-color: $text-strong` +- 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 +- #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 +- #2664 Fixes #2671 -> Add `$panel-colors` variable ## 0.8.0 @@ -166,15 +167,15 @@ $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 +$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 -* `findDarkolor()` which finds the dark version of a color +- `findLightColor()` which finds the light version of a color +- `findDarkolor()` 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. @@ -190,10 +191,24 @@ If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, ```scss $custom-colors: ( - "lime": (lime), - "tomato": (tomato, white), - "orange": ($orange, $orange-invert, $orange-light), - "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark) + 'lime': ( + lime, + ), + 'tomato': ( + tomato, + white, + ), + 'orange': ( + $orange, + $orange-invert, + $orange-light, + ), + 'lavender': ( + $lavender, + $lavender-invert, + $lavender-light, + $lavender-dark, + ), ); ``` @@ -214,61 +229,61 @@ That is also why most of the codebase now references **derived** variables (`$te #### Initial variables -* `$green: hsl(141, 53%, 53%)` -* `$cyan: hsl(204, 71%, 53%)` -* `$red: hsl(348, 86%, 61%)` +- `$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)` +- `$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` +- `$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` +- `$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 +- 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 +- #2563 `.image` has a new `.is-fullwidth` modifier ## 0.7.5 @@ -286,177 +301,177 @@ You can now specify a different `font-family` for the `.title`, `.subtitle` and Simply set a value when importing Bulma: ```scss -$title-family: "Georgia", serif; +$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 +- #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 +- #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 +- #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 +- outlined and hovered/focused +- outlined, inverted and hovered/focused ### New variables #### Initial variables -* `$block-spacing` +- `$block-spacing` #### Base -* `$body-font-size` -* `$small-font-size` -* `$pre-font-size` -* `$pre-padding` -* `$pre-code-font-size` +- `$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` +- `$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` +- `$container-offset` #### Grid -* `$tile-spacing` +- `$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`) +- #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 +- #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 +- #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` +- `.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 +- #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 `