CHANGELOG.md (bulma-0.9.2) | : | CHANGELOG.md (bulma-0.9.3) | ||
---|---|---|---|---|
# Bulma Changelog | # Bulma Changelog | |||
## 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 | ## 0.9.2 | |||
### Breaking change | ### Breaking change | |||
To fix duplicate imports, all Sass placeholders have moved from the `utilities/m ixins` file to its own `utilities/extends` file. | To fix duplicate imports, all Sass placeholders have moved from the `utilities/m ixins` file to its own `utilities/extends` file. | |||
The Sass placeholders are: | The Sass placeholders are: | |||
- `%control` | - `%control` | |||
- `%unselectable` | - `%unselectable` | |||
skipping to change at line 69 | skipping to change at line 88 | |||
- #3101 Add `$modal-breakpoint` variable for modal breakpoint | - #3101 Add `$modal-breakpoint` variable for modal breakpoint | |||
- #3107 Add `optgroup` to `generic.sass` | - #3107 Add `optgroup` to `generic.sass` | |||
## 0.9.0 | ## 0.9.0 | |||
### Deprecation warning | ### Deprecation warning | |||
The `base/helpers.sass` file is **deprecated**. It has moved into its own `/help ers` folder. If you were importing `base/helpers.sass` or `base/_all.sass`, plea se import `sass/helpers/_all.sass` now. | The `base/helpers.sass` file is **deprecated**. It has moved into its own `/help ers` folder. If you were importing `base/helpers.sass` or `base/_all.sass`, plea se import `sass/helpers/_all.sass` now. | |||
If you were simply importing the whole of Bulma with `@import "~/bulma/bulma.sas s"` or similar, you won't have to change anything, and everything will work as b efore. | If you were simply importing the whole of Bulma with `@import "~/bulma/bulma.sas s"` or similar, you won't have to change anything, and everything will work as b efore. | |||
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 officially supported as it was too similar to `panel ` component. Use that one instead. | |||
### RTL support | ### RTL support | |||
Bulma now has **RTL support**. | Bulma now has **RTL support**. | |||
By setting the Sass flag `$rtl` to `true`, you can create an RTL version of Bulm a, thanks to 4 new Sass mixins: | By setting the Sass flag `$rtl` to `true`, you can create an RTL version of Bulm a, thanks to 4 new Sass mixins: | |||
- `=ltr` | - `=ltr` | |||
- `=rtl` | - `=rtl` | |||
- `=ltr-property($property, $spacing, $right: true)` | - `=ltr-property($property, $spacing, $right: true)` | |||
skipping to change at line 112 | skipping to change at line 131 | |||
</li> | </li> | |||
<li> | <li> | |||
<code>*x</code> horizontally for both <strong>left</strong> and <strong>righ t</strong> | <code>*x</code> horizontally for both <strong>left</strong> and <strong>righ t</strong> | |||
</li> | </li> | |||
<li> | <li> | |||
<code>*y</code> vertically for both <strong>top</strong> and <strong>bottom< /strong> | <code>*y</code> vertically for both <strong>top</strong> and <strong>bottom< /strong> | |||
</li> | </li> | |||
</ul> | </ul> | |||
<p> | <p> | |||
You need to <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example: | You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example: | |||
</p> | </p> | |||
<ul> | <ul> | |||
<li>for a <code>margin-top</code>, use <code>mt-*</code></li> | <li>for a <code>margin-top</code>, use <code>mt-*</code></li> | |||
<li>for a <code>padding-bottom</code>, use <code>pb-*</code></li> | <li>for a <code>padding-bottom</code>, use <code>pb-*</code></li> | |||
<li>for both <code>margin-left</code> and <code>margin-right</code>, use <code >mx-*</code></li> | <li>for both <code>margin-left</code> and <code>margin-right</code>, use <code >mx-*</code></li> | |||
</ul> | </ul> | |||
<p> | <p> | |||
Each of these <code>property-direction</code> <strong>combinations</strong> ne eds to be appended with one of <strong>6 value suffixes</strong> | Each of these <code>property-direction</code> <strong>combinations</strong> ne eds to be appended with one of <strong>6 value suffixes</strong> | |||
skipping to change at line 178 | skipping to change at line 197 | |||
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) | $control-padding-horizontal: calc(0.625em - #{$control-border-width}) | |||
$button-padding-vertical: calc(0.375em - #{$button-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 | #### Light and dark colors | |||
Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) no w has a `*-light` and `*-dark` version. They are calculated using 2 new color fu nctions: | Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) no w has a `*-light` and `*-dark` version. They are calculated using 2 new color fu nctions: | |||
- `findLightColor()` which finds the light version of a color | - `findLightColor()` which finds the light version of a color | |||
- `findDarkolor()` which finds the dark 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 colo rs are used by the `message` component. | The light colors are used by the `button` element, while the light and dark colo rs are used by the `message` component. | |||
#### Panel colors | #### Panel colors | |||
The `panel` component is now available in all the different colors. | The `panel` component is now available in all the different colors. | |||
#### 4-value color map | #### 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. | 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. | |||
skipping to change at line 220 | skipping to change at line 239 | |||
$lavender-dark, | $lavender-dark, | |||
), | ), | |||
); | ); | |||
``` | ``` | |||
This is processed by the updated `mergeColorMaps()` Sass function. | This is processed by the updated `mergeColorMaps()` Sass function. | |||
#### Scheme variables | #### 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` | 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` occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values: | They replace the `$white` and `$black` occurrences in the codebase. This makes i t easy to create a "Dark mode" simply by swapping the values: | |||
```sass | ```sass | |||
$scheme-main: $black | $scheme-main: $black | |||
$scheme-invert: $white | $scheme-invert: $white | |||
// etc. | // etc. | |||
``` | ``` | |||
That is also why most of the codebase now references **derived** variables (`$te xt`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey -lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly. | That is also why most of the codebase now references **derived** variables (`$te xt`, `$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 | #### Initial variables | |||
skipping to change at line 328 | skipping to change at line 347 | |||
- Fix #2297 -> Remove `.container` fixed width values, use `flex-grow` | - Fix #2297 -> Remove `.container` fixed width values, use `flex-grow` | |||
- #2478 Move form.sass into its own folder | - #2478 Move form.sass into its own folder | |||
### Bug fixes | ### Bug fixes | |||
- #2420 Fix #2414 -> Fix `align` attribute in `td/th` being ignored | - #2420 Fix #2414 -> Fix `align` attribute in `td/th` being ignored | |||
- #2463 Remove duplicate `.has-addons` in `tag.sass` | - #2463 Remove duplicate `.has-addons` in `tag.sass` | |||
- #2253 Fix `$gap` variable default value | - #2253 Fix `$gap` variable default value | |||
- #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox | - #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox | |||
- #2175 Proper aligning for `.tabs` within `.content` | - #2175 Proper aligning for `.tabs` within `.content` | |||
- #2476 Fix #2441 -> Correct active pagination link text colour on hero | - #2476 Fix #2441 -> Correct active pagination link text color on hero | |||
Fix #1979 -> Correct loading spinner color when a button is: | Fix #1979 -> Correct loading spinner color when a button is: | |||
- outlined and hovered/focused | - outlined and hovered/focused | |||
- outlined, inverted and hovered/focused | - outlined, inverted and hovered/focused | |||
### New variables | ### New variables | |||
#### Initial variables | #### Initial variables | |||
skipping to change at line 1215 | skipping to change at line 1234 | |||
### New features | ### New features | |||
- New [dropdown button](https://bulma.io/documentation/components/dropdown/)! | - New [dropdown button](https://bulma.io/documentation/components/dropdown/)! | |||
- The breakpoints and `.container` **gap** can be customized with the new `$gap` variable | - The breakpoints and `.container` **gap** can be customized with the new `$gap` variable | |||
- The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd` | - The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd` | |||
### Issues closed | ### Issues closed | |||
- Fix #26 `.textarea` element will honors `[rows]` attribute | - Fix #26 `.textarea` element will honors `[rows]` attribute | |||
- Fix #887 `body` scrollbar | - Fix #887 `body` scrollbar | |||
- Fix #715 `.help` class behaviour in horizontal form `is-grouped` field | - Fix #715 `.help` class behavior in horizontal form `is-grouped` field | |||
- Fix #842 Adding modifiers in `navbar` | - Fix #842 Adding modifiers in `navbar` | |||
- Fix #841 `.container` as direct child of `.navbar` moves `.navbar-menu` below `.navbar-brand` | - 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 #861 Box in hero as text and background white | |||
- Fix #852 charset and version number | - Fix #852 charset and version number | |||
- Fix #856 JavaScript `.nav-burger` example | - Fix #856 JavaScript `.nav-burger` example | |||
- Fix #821 Notification strong color | - Fix #821 Notification strong color | |||
## 0.4.3 | ## 0.4.3 | |||
### New features | ### New features | |||
End of changes. 7 change blocks. | ||||
6 lines changed or deleted | 26 lines changed or added |