CHANGELOG.md

   1 # Bulma Changelog
   2
   3 ## 0.9.4
   4
   5 ### New features
   6
   7 - **Responsive buttons**: the size of a button will change for each breakpoint (Fix #1572)
   8 - `@mixin between`: takes 2 breakpoint values, outputs a media query for the range between these 2 values
   9 - `$breakpoints` Sass map: a map of named breakpoints and their type (`from`, `until` or both)
  10 - `@mixin breakpoint`: uses the new `$breakpoints` Sass map to output a media query
  11
  12 ### Improvements
  13
  14 - Add missing variables for content customization
  15 - Fix #683 Modal - example javascript toggle
  16 - Fix #3461 Bulma logo with wordmark in SVG
  17 - Fix #3383 'Variables' sections on docs page (#3513)
  18 - Fixes #3510 The navbar overlaps with sidebars in "Fullheight hero with navbar" (#3516)
  19 - Setup [Cypress](https://www.cypress.io/) testing (#3436)
  20
  21 ### Bugfix
  22
  23 - Replace disabled attr on pagination anchor elements with is-disabled
  24 - #3500 Fix hidden disabled buttons on iOS 15.4 (#3521)
  25 - #3076 Fix Table headers centered aligned in Safari
  26
  27 ## 0.9.3
  28
  29 ### New features
  30
  31 - New `is-underlined` class for underlined text and links
  32 - New `auto` value for margin and padding helper classes
  33
  34 ### Improvements
  35
  36 - New `$section-padding-desktop` Sass variable
  37 - New `$hero-body-padding-tablet` Sass variable
  38 - New `$shadow` Sass variable (used for `.box`, `.card`, `.dropdown` and `.panel`)
  39 - Add `is-normal` size modifiers to `.file` and `.content`
  40 - New `%reset` placeholder
  41
  42 ### Bugfix
  43
  44 - #3362 Fix slash divide
  45
  46 ## 0.9.2
  47
  48 ### Breaking change
  49
  50 To fix duplicate imports, all Sass placeholders have moved from the `utilities/mixins` file to its own `utilities/extends` file.
  51
  52 The Sass placeholders are:
  53
  54 - `%control`
  55 - `%unselectable`
  56 - `%arrow`
  57 - `%block`
  58 - `%delete`
  59 - `%loader`
  60 - `%overlay`
  61
  62 If you were importing them directly from `utilities/mixins`, you'll need to import `utilities/extends` instead.
  63 If you were importing `utilities/_all` or even `bulma.sass` directly, no change is required.
  64
  65 ### New features
  66
  67 - Fix #1583 New `is-ghost` button that behaves / looks like a regular link
  68 - New `icon-text` component, to combine an icon with text on its side
  69
  70 ### Bug fixes
  71
  72 - #3005 Fix `column` offsets in RTL
  73 - Fix #3145 Dropdown content is bounded by a parent card
  74 - Fix #3089 Sub columns of a variable columns have weird gap
  75 - Fix #2937 Add `width: unset` for narrow columns
  76 - #3208 Fix #3163 Do not override is-rounded with button-small
  77 - #3216 Removed duplicate `mixins` imports, created a single `extends` file
  78 - #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
  79
  80 ### Improvements
  81
  82 - Fix #3012 Add `$media-*` variables, set to `!default`
  83 - Fix #2797 Import dependencies individually for each component
  84 - Remove list style from pagination list
  85
  86 ## 0.9.1
  87
  88 ### New features
  89
  90 - #3047 Flexbox helpers
  91 - #3085 Add `is-clickable` helper
  92 - #3086 Allow each component to have its own colors and default to global ones
  93 - 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`
  94
  95 ### Improvements
  96
  97 - #2630 Fixes #2598 -> Add `$card-radius` variable
  98 - Add `$card-overflow` variable
  99 - #2540 Fixes #2539 -> Fix indeterminate progress styling in IE11
 100 - #3057 Make the default text color of `$code` listings more accessible
 101 - #3088 Adds not allowed cursor to missing inputs
 102 - #3101 Add `$modal-breakpoint` variable for modal breakpoint
 103 - #3107 Add `optgroup` to `generic.sass`
 104
 105 ## 0.9.0
 106
 107 ### Deprecation warning
 108
 109 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.
 110 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.
 111
 112 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.
 113
 114 ### RTL support
 115
 116 Bulma now has **RTL support**.
 117
 118 By setting the Sass flag `$rtl` to `true`, you can create an RTL version of Bulma, thanks to 4 new Sass mixins:
 119
 120 - `=ltr`
 121 - `=rtl`
 122 - `=ltr-property($property, $spacing, $right: true)`
 123 - `=ltr-position($spacing, $right: true)`
 124
 125 The Bulma package now also comes with a `bulma-rtl.css` and `bulma-rtl.min.css` file to be used straight away.
 126
 127 ### Spacing helpers
 128
 129 Bulma now has **spacing helpers**: https://bulma.io/documentation/helpers/spacing-helpers/
 130
 131 <p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
 132
 133 <ul>
 134   <li>
 135     <code>*t</code> for <strong>top</strong>
 136   </li>
 137   <li>
 138     <code>*r</code> for <strong>right</strong>
 139   </li>
 140   <li>
 141     <code>*b</code> for <strong>bottom</strong>
 142   </li>
 143   <li>
 144     <code>*l</code> for <strong>left</strong>
 145   </li>
 146   <li>
 147     <code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
 148   </li>
 149   <li>
 150     <code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
 151   </li>
 152 </ul>
 153
 154 <p>
 155   You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example:
 156 </p>
 157
 158 <ul>
 159   <li>for a <code>margin-top</code>, use <code>mt-*</code></li>
 160   <li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
 161   <li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
 162 </ul>
 163
 164 <p>
 165   Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>
 166 </p>
 167
 168 This release also includes the following helpers:
 169
 170 - light and dark color helpers
 171 - light and dark background color helpers
 172
 173 ### Improvements
 174
 175 - #2925 Center table cell content vertically with `is-vcentered`
 176
 177 ### Bug fixes
 178
 179 - #2955 Fix issue when there's only one `is-toggle` tag
 180
 181 ## 0.8.2
 182
 183 ### Bug fixes
 184
 185 - Fix #2885 -> Revert `$input-color: $text-strong`
 186
 187 ## 0.8.1
 188
 189 ### Improvements
 190
 191 - #2709 Add light colors to the `notification` element
 192 - #2740 Fixes #2739 -> Add variables size for layout `hero`
 193 - Fix #2741 -> Create `bulmaRgba()` function to support `inherit` value
 194 - #2756 Add `$button-text-decoration` variable
 195
 196 ### Bug fixes
 197
 198 - #2664 Fixes #2671 -> Add `$panel-colors` variable
 199
 200 ## 0.8.0
 201
 202 ### Big update
 203
 204 #### Larger form controls
 205
 206 Controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
 207
 208 ```sass
 209 $control-height: 2.25em
 210 $control-padding-vertical: calc(0.375em - #{$control-border-width})
 211 $control-padding-horizontal: calc(0.625em - #{$control-border-width})
 212 $button-padding-vertical: calc(0.375em - #{$button-border-width})
 213 $button-padding-horizontal: 0.75em
 214 ```
 215
 216 #### Light and dark colors
 217
 218 Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now has a `*-light` and `*-dark` version. They are calculated using 2 new color functions:
 219
 220 - `findLightColor()` which finds the light version of a color
 221 - `findDarkColor()` which finds the dark version of a color
 222
 223 The light colors are used by the `button` element, while the light and dark colors are used by the `message` component.
 224
 225 #### Panel colors
 226
 227 The `panel` component is now available in all the different colors.
 228
 229 #### 4-value color map
 230
 231 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.
 232
 233 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:
 234
 235 ```scss
 236 $custom-colors: (
 237   'lime': (
 238     lime,
 239   ),
 240   'tomato': (
 241     tomato,
 242     white,
 243   ),
 244   'orange': (
 245     $orange,
 246     $orange-invert,
 247     $orange-light,
 248   ),
 249   'lavender': (
 250     $lavender,
 251     $lavender-invert,
 252     $lavender-light,
 253     $lavender-dark,
 254   ),
 255 );
 256 ```
 257
 258 This is processed by the updated `mergeColorMaps()` Sass function.
 259
 260 #### Scheme variables
 261
 262 There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
 263 They replace the `$white` and `$black` occurrences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:
 264
 265 ```sass
 266 $scheme-main: $black
 267 $scheme-invert: $white
 268 // etc.
 269 ```
 270
 271 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.
 272
 273 #### Initial variables
 274
 275 - `$green: hsl(141, 53%, 53%)`
 276 - `$cyan: hsl(204, 71%, 53%)`
 277 - `$red: hsl(348, 86%, 61%)`
 278
 279 #### Derived variables
 280
 281 - `$primary-invert: findColorInvert($primary)`
 282 - `$primary-light: findLightColor($primary)`
 283 - `$primary-dark: findDarkColor($primary)`
 284 - `$info-invert: findColorInvert($info)`
 285 - `$info-light: findLightColor($info)`
 286 - `$info-dark: findDarkColor($info)`
 287 - `$success-invert: findColorInvert($success)`
 288 - `$success-light: findLightColor($success)`
 289 - `$success-dark: findDarkColor($success)`
 290 - `$warning-invert: findColorInvert($warning)`
 291 - `$warning-light: findLightColor($warning)`
 292 - `$warning-dark: findDarkColor($warning)`
 293 - `$danger-invert: findColorInvert($danger)`
 294 - `$danger-light: findLightColor($danger)`
 295 - `$danger-dark: findDarkColor($danger)`
 296 - `$light-invert: findColorInvert($light)`
 297 - `$dark-invert: findColorInvert($dark)`
 298
 299 - `$scheme-main: $white`
 300 - `$scheme-main-bis: $white-bis`
 301 - `$scheme-main-ter: $white-ter`
 302 - `$scheme-invert: $black`
 303 - `$scheme-invert-bis: $black-bis`
 304 - `$scheme-invert-ter: $black-ter`
 305
 306 ### Other variables
 307
 308 - `$control-height: 2.5em`
 309 - `$control-padding-vertical: calc(0.5em - #{$control-border-width})`
 310 - `$control-padding-horizontal: calc(0.75em - #{$control-border-width})`
 311 - `$media-border-color: rgba($border, 0.5)`
 312 - `$notification-code-background-color: $scheme-main`
 313 - `$panel-radius: $radius-large`
 314 - `$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)`
 315 - `$textarea-padding: $control-padding-horizontal`
 316 - `$textarea-max-height: 40em`
 317 - `$textarea-min-height: 8em`
 318
 319 ### Bug fixes
 320
 321 - Fix #2647 -> Missing meta tags in snippet
 322 - Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
 323 - Fix #2060 -> `height: auto` on HTML `audio` element breaks height of element
 324 - Fix #706 -> Derive `-invert` variables using `findColorInvert()`
 325 - #1608 Fix #1552 -> `.container.is-fluid` margins
 326
 327 ### New features
 328
 329 - #2563 `.image` has a new `.is-fullwidth` modifier
 330
 331 ## 0.7.5
 332
 333 ### Deprecation warning
 334
 335 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.
 336 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.
 337
 338 ### New features
 339
 340 #### Support for overriding the `font-family`
 341
 342 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.
 343
 344 Simply set a value when importing Bulma:
 345
 346 ```scss
 347 $title-family: 'Georgia', serif;
 348 ```
 349
 350 - #2375 Add `.is-relative` helper
 351 - #2321 Make `.navbar` focus behave like hover for the navigation
 352 - #2290 Fix #1186 -> Reset the offset on columns
 353 - #2231 Add `.has-text-weight-medium` helper
 354 - #2224 Add customizable border radius to progress bar
 355 - #2480 Add `$footer-color` variable
 356
 357 ### Improvements
 358
 359 - #2396 Update docs with webpack 4 example
 360 - #2381 Make centered buttons have equal margin
 361 - Fix #2297 -> Remove `.container` fixed width values, use `flex-grow`
 362 - #2478 Move form.sass into its own folder
 363
 364 ### Bug fixes
 365
 366 - #2420 Fix #2414 -> Fix `align` attribute in `td/th` being ignored
 367 - #2463 Remove duplicate `.has-addons` in `tag.sass`
 368 - #2253 Fix `$gap` variable default value
 369 - #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox
 370 - #2175 Proper aligning for `.tabs` within `.content`
 371 - #2476 Fix #2441 -> Correct active pagination link text color on hero
 372
 373 Fix #1979 -> Correct loading spinner color when a button is:
 374
 375 - outlined and hovered/focused
 376 - outlined, inverted and hovered/focused
 377
 378 ### New variables
 379
 380 #### Initial variables
 381
 382 - `$block-spacing`
 383
 384 #### Base
 385
 386 - `$body-font-size`
 387 - `$small-font-size`
 388 - `$pre-font-size`
 389 - `$pre-padding`
 390 - `$pre-code-font-size`
 391
 392 #### Components
 393
 394 - `$card-header-padding`
 395 - `$card-content-padding`
 396 - `$card-media-margin`
 397 - `$dropdown-menu-min-width`
 398 - `$dropdown-content-padding-bottom`
 399 - `$dropdown-content-padding-top`
 400 - `$level-item-spacing`
 401 - `$menu-list-line-height`
 402 - `$menu-list-link-padding`
 403 - `$menu-nested-list-margin`
 404 - `$menu-nested-list-padding-left`
 405 - `$menu-label-font-size`
 406 - `$menu-label-letter-spacing`
 407 - `$menu-label-spacing`
 408 - `$pagination-item-font-size`
 409 - `$pagination-item-margin`
 410 - `$pagination-item-padding-left`
 411 - `$pagination-item-padding-right`
 412 - `$panel-margin`
 413 - `$panel-tabs-font-size`
 414
 415 #### Elements
 416
 417 - `$container-offset`
 418
 419 #### Grid
 420
 421 - `$tile-spacing`
 422
 423 ## 0.7.3
 424
 425 ### New features
 426
 427 - #2145 Fix #372 -> New indeterminate progress bars
 428 - #2206 Fix #2046 -> New variables `$table-head-background-color`, `$table-body-background-color` and `$table-foot-background-color` for the `.table` element
 429 - #592 -> Give arbitrary elements access to the image/ratio classes
 430 - #1682 Fix #1681 -> Adds disabled styles for `<fieldset disabled>`
 431 - #2201 Fix #1875 -> `.buttons` and `.tags` group sizing (`.are-small`, `.are-medium`, `.are-large`)
 432
 433 ### Improvements
 434
 435 - #1978 Fix #1696 -> Force `box-sizing: border-box` on `details` element
 436 - #2167 Fix #1878 -> New `$footer-padding` variable
 437 - #2168 -> New `$input-placeholder-color` and `$input-disabled-placeholder-color` variables
 438
 439 ### Bug fixes
 440
 441 - #2157 Fix #1656 -> Allow border radius if only one `.control` in `.field`
 442 - #2091 Fix #2091 -> Remove CSS rule which causes `.tag.has-addons` to not work correctly
 443 - #2186 Fix #1130 -> Prevent `.dropdown` links underlining in `.message` component
 444 - Fix #2154 -> Move `.hero.is-fullheight-with-navbar` to `navbar.sass` file
 445
 446 ### Deprecation
 447
 448 - `.control.has-icon` deprecated in favor of `.control.has-icons`
 449
 450 ## 0.7.2
 451
 452 ### New features
 453
 454 - #1884 New `$navbar-burger-color` variable
 455 - #1679 Add breakpoint based column gaps
 456 - #1905 Fix `modal` for IE11 #1902
 457 - #1919 New `is-arrowless` class for navbar items
 458 - #1949 New `is-fullheight-with-navbar` class for heros
 459 - #1764 New `.is-sr-only` helper
 460 - #2109 Add and use `$navbar-breakpoint` variable
 461 - New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height`
 462 - #1720 Add list element feature
 463 - #2123 Add `.content ol` types: `.is-lower-roman`, `.is-upper-roman`, `.is-lower-alpha`, `.is-upper-alpha`, and support for the `type=` HTML attribute
 464
 465 ### Improvements
 466
 467 - #1964 Allow `.notification` to have a `.dropdown-item`
 468 - #1999 Change `$border` to `$grey-lighter` in mixins
 469 - #2085 `.media-content` will allow scrolling horizontally if the content is too wide
 470 - #1744 Fix #1710 by using `$table-striped-row-even-hover-background-color` only for even rows
 471 - #2074 Allow `<button>` as `.dropdown-item`
 472
 473 ### Bug fixes
 474
 475 - #1749 Fix icons floating out of input area
 476 - #1993 Fixes #1992 Prevent disabled form elements hover state from overlapping, if control has add-ons elements
 477 - #1909 Fix Modal card in IE11
 478 - #1908 Fix IE11 when textarea doesn't listen to `size=""`
 479 - Fix #1991 The last button in list of full-width buttons has longer width
 480 - #1982 Fix navbar-burger color when color modifier is used
 481 - #1819 Fix #1137 error message for required file
 482 - Fix #1904 and #1969: hide native file input in Chrome
 483 - #2059 Remove unnecessary right margin from last level-item (level.is-mobile)
 484
 485 ## 0.7.1
 486
 487 ### Improvements
 488
 489 - #1789 Add all shades to `has-background-*` helpers
 490
 491 ### Bug fixes
 492
 493 - #1796 #1806 Remove navbar `box-shadow` by default
 494
 495 ## 0.7.0
 496
 497 ### New features
 498
 499 - New variables `$widescreen-enabled` and `$fullhd-enabled`: you can set them to `false` to disable each breakpoint
 500 - New variables `$control-border-width` and `$button-border-width`
 501 - 🎉 #1624 Add some common photography aspect ratios and portrait ratios
 502 - 🎉 #1747 New `$custom-colors` and `$custom-shades` variable for adding your own colors and shades to Bulma's `$colors` and `$shades` maps respectively
 503
 504 ### Improvements
 505
 506 - #1619 Add `$card-header-background-color`, `$card-content-background-color` and `$card-footer-background-color` to allow different background customization for card elements
 507 - #1669 Add `.is-expanded` modifier to `.buttons.has-addons`
 508 - #1628 Add `.has-background` helpers for block background colors, like `.has-text`
 509 - #1767 Added minified bundle with cleancss
 510
 511 ### Bug fixes
 512
 513 - #1778 Fix `is-text-right` precedence over `is-text-left-mobile`
 514 - #1571 Fix position of delete button on `.tag`
 515 - #1549 Implementing a simple version of the native sass percentage function
 516 - #1707 Disable table hover in `.content` by default
 517 - #1428 Fix `media-content` overflow
 518
 519 ### Variable changes
 520
 521 #### Updated default values
 522
 523 <table class="table is-bordered">
 524   <tbody>
 525     <tr>
 526       <th class="is-light" colspan="3">
 527         File
 528         <code>sass/utilities/initial-variables.sass</code>
 529       </th>
 530     </tr>
 531     <tr>
 532       <th>Variable</th>
 533       <th>From</th>
 534       <th>To</th>
 535     </tr>
 536     <tr>
 537       <td>
 538         <code>$gap</code>
 539       </td>
 540       <td>
 541         <code>32px</code>
 542       </td>
 543       <td>
 544         <code>64px</code>
 545       </td>
 546     </tr>
 547     <tr>
 548       <td>
 549         <code>$radius</code>
 550       </td>
 551       <td>
 552         <code>3px</code>
 553       </td>
 554       <td>
 555         <code>4px</code>
 556       </td>
 557     </tr>
 558     <tr>
 559       <td>
 560         <code>$radius-large</code>
 561       </td>
 562       <td>
 563         <code>5px</code>
 564       </td>
 565       <td>
 566         <code>6px</code>
 567       </td>
 568     </tr>
 569   </tbody>
 570 </table>
 571
 572 <table class="table is-bordered">
 573   <tbody>
 574     <tr>
 575       <th class="is-light" colspan="3">
 576         File
 577         <code>sass/base/generic.sass</code>
 578       </th>
 579     </tr>
 580     <tr>
 581       <th>Variable</th>
 582       <th>From</th>
 583       <th>To</th>
 584     </tr>
 585     <tr>
 586       <td>
 587         <code>$hr-background-color</code>
 588       </td>
 589       <td>
 590         <code>$border</code>
 591       </td>
 592       <td>
 593         <code>$background</code>
 594       </td>
 595     </tr>
 596     <tr>
 597       <td>
 598         <code>$hr-height</code>
 599       </td>
 600       <td>
 601         <code>1px</code>
 602       </td>
 603       <td>
 604         <code>2px</code>
 605       </td>
 606     </tr>
 607   </tbody>
 608 </table>
 609
 610 <table class="table is-bordered">
 611   <tbody>
 612     <tr>
 613       <th class="is-light" colspan="3">
 614         File
 615         <code>sass/elements/content.sass</code>
 616       </th>
 617     </tr>
 618     <tr>
 619       <th>Variable</th>
 620       <th>From</th>
 621       <th>To</th>
 622     </tr>
 623     <tr>
 624       <td>
 625         <code>$content-heading-weight</code>
 626       </td>
 627       <td>
 628         <code>$weight-normal</code>
 629       </td>
 630       <td>
 631         <code>$weight-semibold</code>
 632       </td>
 633     </tr>
 634   </tbody>
 635 </table>
 636
 637 <table class="table is-bordered">
 638   <tbody>
 639     <tr>
 640       <th class="is-light" colspan="3">
 641         File
 642         <code>sass/components/message.sass</code>
 643       </th>
 644     </tr>
 645     <tr>
 646       <th>Variable</th>
 647       <th>From</th>
 648       <th>To</th>
 649     </tr>
 650     <tr>
 651       <td>
 652         <code>$message-header-padding</code>
 653       </td>
 654       <td>
 655         <code>0.5em 0.75em</code>
 656       </td>
 657       <td>
 658         <code>0.75em 1em</code>
 659       </td>
 660     </tr>
 661     <tr>
 662       <td>
 663         <code>$message-body-padding</code>
 664       </td>
 665       <td>
 666         <code>1em 1.25em</code>
 667       </td>
 668       <td>
 669         <code>1.25em 1.5em</code>
 670       </td>
 671     </tr>
 672   </tbody>
 673 </table>
 674
 675 <table class="table is-bordered">
 676   <tbody>
 677     <tr>
 678       <th class="is-light" colspan="3">
 679         File
 680         <code>sass/components/navbar.sass</code>
 681       </th>
 682     </tr>
 683     <tr>
 684       <th>Variable</th>
 685       <th>From</th>
 686       <th>To</th>
 687     </tr>
 688     <tr>
 689       <td>
 690         <code>$navbar-item-hover-background-color</code>
 691       </td>
 692       <td>
 693         <code>$background</code>
 694       </td>
 695       <td>
 696         <code>$white-bis</code>
 697       </td>
 698     </tr>
 699     <tr>
 700       <td>
 701         <code>$navbar-dropdown-border-top</code>
 702       </td>
 703       <td>
 704         <code>1px solid $border</code>
 705       </td>
 706       <td>
 707         <code>2px solid $border</code>
 708       </td>
 709     </tr>
 710     <tr>
 711       <td>
 712         <code>$navbar-divider-background-color</code>
 713       </td>
 714       <td>
 715         <code>$border</code>
 716       </td>
 717       <td>
 718         <code>$background</code>
 719       </td>
 720     </tr>
 721   </tbody>
 722 </table>
 723
 724 <table class="table is-bordered">
 725   <tbody>
 726     <tr>
 727       <th class="is-light" colspan="3">
 728         File
 729         <code>sass/layout/footer.sass</code>
 730       </th>
 731     </tr>
 732     <tr>
 733       <th>Variable</th>
 734       <th>From</th>
 735       <th>To</th>
 736     </tr>
 737     <tr>
 738       <td>
 739         <code>$footer-background-color</code>
 740       </td>
 741       <td>
 742         <code>$background</code>
 743       </td>
 744       <td>
 745         <code>$white-bis</code>
 746       </td>
 747     </tr>
 748   </tbody>
 749 </table>
 750
 751 #### New variables
 752
 753 <table class="table is-bordered">
 754   <tbody>
 755     <tr>
 756       <th class="is-light" colspan="2">
 757         File
 758         <code>sass/components/breadcrumb.sass</code>
 759       </th>
 760     </tr>
 761     <tr>
 762       <th>Name</th>
 763       <th>Value</th>
 764     </tr>
 765     <tr>
 766       <td>
 767         <code>$breadcrumb-item-padding-vertical</code>
 768       </td>
 769       <td>
 770         <code>0</code>
 771       </td>
 772     </tr>
 773     <tr>
 774       <td>
 775         <code>$breadcrumb-item-padding-horizontal</code>
 776       </td>
 777       <td>
 778         <code>0.75em</code>
 779       </td>
 780     </tr>
 781   </tbody>
 782 </table>
 783
 784 <table class="table is-bordered">
 785   <tbody>
 786     <tr>
 787       <th class="is-light" colspan="2">
 788         File
 789         <code>sass/components/message.sass</code>
 790       </th>
 791     </tr>
 792     <tr>
 793       <th>Name</th>
 794       <th>Value</th>
 795     </tr>
 796     <tr>
 797       <td>
 798         <code>$message-body-border-color</code>
 799       </td>
 800       <td>
 801         <code>$border</code>
 802       </td>
 803     </tr>
 804     <tr>
 805       <td>
 806         <code>$message-body-border-width</code>
 807       </td>
 808       <td>
 809         <code>0 0 0 4px</code>
 810       </td>
 811     </tr>
 812     <tr>
 813       <td>
 814         <code>$message-header-weight</code>
 815       </td>
 816       <td>
 817         <code>$weight-bold</code>
 818       </td>
 819     </tr>
 820     <tr>
 821       <td>
 822         <code>$message-header-body-border-width</code>
 823       </td>
 824       <td>
 825         <code>0</code>
 826       </td>
 827     </tr>
 828   </tbody>
 829 </table>
 830
 831 <table class="table is-bordered">
 832   <tbody>
 833     <tr>
 834       <th class="is-light" colspan="2">
 835         File
 836         <code>sass/components/navbar.sass</code>
 837       </th>
 838     </tr>
 839     <tr>
 840       <th>Name</th>
 841       <th>Value</th>
 842     </tr>
 843     <tr>
 844       <td>
 845         <code>$navbar-box-shadow-size</code>
 846       </td>
 847       <td>
 848         <code>0 2px 0 0</code>
 849       </td>
 850     </tr>
 851     <tr>
 852       <td>
 853         <code>$navbar-box-shadow-color</code>
 854       </td>
 855       <td>
 856         <code>$background</code>
 857       </td>
 858     </tr>
 859     <tr>
 860       <td>
 861         <code>$navbar-padding-vertical</code>
 862       </td>
 863       <td>
 864         <code>1rem</code>
 865       </td>
 866     </tr>
 867     <tr>
 868       <td>
 869         <code>$navbar-padding-horizontal</code>
 870       </td>
 871       <td>
 872         <code>2rem</code>
 873       </td>
 874     </tr>
 875     <tr>
 876       <td>
 877         <code>$navbar-z</code>
 878       </td>
 879       <td>
 880         <code>30</code>
 881       </td>
 882     </tr>
 883   </tbody>
 884 </table>
 885
 886 <table class="table is-bordered">
 887   <tbody>
 888     <tr>
 889       <th class="is-light" colspan="2">
 890         File
 891         <code>sass/elements/title.sass</code>
 892       </th>
 893     </tr>
 894     <tr>
 895       <th>Name</th>
 896       <th>Value</th>
 897     </tr>
 898     <tr>
 899       <td>
 900         <code>$title-line-height</code>
 901       </td>
 902       <td>
 903         <code>1.125</code>
 904       </td>
 905     </tr>
 906     <tr>
 907       <td>
 908         <code>$subtitle-line-height</code>
 909       </td>
 910       <td>
 911         <code>1.25</code>
 912       </td>
 913     </tr>
 914     <tr>
 915       <td>
 916         <code>$subtitle-negative-margin</code>
 917       </td>
 918       <td>
 919         <code>-1.25rem</code>
 920       </td>
 921     </tr>
 922   </tbody>
 923 </table>
 924
 925 #### Removed variables
 926
 927 <table class="table is-bordered">
 928   <tbody>
 929     <tr>
 930       <th>File</th>
 931       <th>Removed</th>
 932       <th>Replaced with</th>
 933     </tr>
 934     <tr>
 935       <td>
 936         <code>sass/components/message.sass</code>
 937       </td>
 938       <td>
 939         <code>$message-body-border</code>
 940       </td>
 941       <td>
 942         <code>$message-body-border-color</code>
 943         <br>
 944         <code>$message-body-border-width</code>
 945       </td>
 946     </tr>
 947   </tbody>
 948 </table>
 949
 950 ## 0.6.2
 951
 952 ### New features
 953
 954 - 🎉 Rounded buttons, inputs, pagination and toggle tabs
 955
 956 ### Improvements
 957
 958 - #1343 Add `sub` and `sup` title sizes
 959 - #1452 New `.is-italic` helper
 960
 961 ### Bug fixes
 962
 963 - #935 Bug dropdown in `hero` (primary) menu items not visible
 964 - #1456 Fix customize documentation
 965 - #1190 Add `$variable-columns` to disable `--columnGap`
 966 - #1518 Fix spacing of the delete button in notification element
 967 - #1569 Fix missing use of `$pagination-color` variable
 968
 969 ## 0.6.1
 970
 971 ### New features
 972
 973 - 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons)
 974 - 🎉 #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths`
 975 - 🎉 #1287 New `.is-invisible` helper
 976 - 🎉 #1255 New `.is-expanded` modifier for `navbar-item`
 977 - 🎉 #1384 New `.is-centered` and `.is-right` modifiers for `tags`
 978 - 🎉 #1383 New `.is-empty` modifier for `file`
 979 - 🎉 #1380 Allow `.is-selected` class on `<td>` and `<th>` tags
 980
 981 ### Improvements
 982
 983 - #987 Improve `tag > icon` spacing
 984 - Improve `hamburger` alignment
 985
 986 ### Bug fixes
 987
 988 - #1358 Fix indentation bug for .is-one-fifth
 989 - #1356 SASS 3.5+ variable parsing compatibility allows only #{}
 990 - #1342 Remove black line from progress bar in IE
 991 - #1334 Fix progress bar colors in IE
 992 - #1313 Fix Table `is-selected` and `is-hoverable` styling issue
 993 - #963 Fix Delete Button Bug in iOS Safari
 994
 995 ## 0.6.0
 996
 997 ### Breaking changes
 998
 999 - 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.
1000 - The deprecated `variables.sass` file has been removed.
1001 - The deprecated `nav.sass` file has been removed.
1002
1003 ### New features
1004
1005 - #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
1006 - #1254 `.dropdown` now supports `.is-up` modifier
1007
1008 ### Improvements
1009
1010 - #1257 Include placeholder mixin in `=input`
1011
1012 The `$link` color is used instead of `$primary` in the following components:
1013
1014 <table>
1015   <tr>
1016     <th>Variable</th>
1017     <th>Old value</th>
1018     <th>New value</th>
1019   </tr>
1020   <tr>
1021     <td><code>$dropdown-item-active-color</code></td>
1022     <td><code>$primary-invert</code></td>
1023     <td><code>$link-invert</code></td>
1024   </tr>
1025   <tr>
1026     <td><code>$dropdown-item-active-background-color</code></td>
1027     <td><code>$primary</code></td>
1028     <td><code>$link</code></td>
1029   </tr>
1030   <tr>
1031     <td><code>$navbar-tab-hover-border-bottom-color</code></td>
1032     <td><code>$primary</code></td>
1033     <td><code>$link</code></td>
1034   </tr>
1035   <tr>
1036     <td><code>$navbar-tab-active-color</code></td>
1037     <td><code>$primary</code></td>
1038     <td><code>$link</code></td>
1039   </tr>
1040   <tr>
1041     <td><code>$navbar-tab-active-border-bottom-color</code></td>
1042     <td><code>$primary</code></td>
1043     <td><code>$link</code></td>
1044   </tr>
1045   <tr>
1046     <td><code>$navbar-dropdown-item-active-color</code></td>
1047     <td><code>$primary</code></td>
1048     <td><code>$link</code></td>
1049   </tr>
1050   <tr>
1051     <td><code>$tabs-link-active-border-bottom-color</code></td>
1052     <td><code>$primary</code></td>
1053     <td><code>$link</code></td>
1054   </tr>
1055   <tr>
1056     <td><code>$tabs-link-active-color</code></td>
1057     <td><code>$primary</code></td>
1058     <td><code>$link</code></td>
1059   </tr>
1060   <tr>
1061     <td><code>$tabs-toggle-link-active-background-color</code></td>
1062     <td><code>$primary</code></td>
1063     <td><code>$link</code></td>
1064   </tr>
1065   <tr>
1066     <td><code>$tabs-toggle-link-active-border-color</code></td>
1067     <td><code>$primary</code></td>
1068     <td><code>$link</code></td>
1069   </tr>
1070   <tr>
1071     <td><code>$tabs-toggle-link-active-color</code></td>
1072     <td><code>$primary-invert</code></td>
1073     <td><code>$link-invert</code></td>
1074   </tr>
1075 </table>
1076
1077 ### Issues closed
1078
1079 - #708 Import variables in mixins
1080
1081 ## 0.5.3
1082
1083 ### New features
1084
1085 - #1101 `.card-header-title` can be centered with `.is-centered`
1086 - #1189 `.input` readonly and `.is-static`
1087 - #1189 `.textarea` readonly
1088
1089 ### Issues closed
1090
1091 - #1177 Fix `.message .tag` combination
1092 - #1167 Fix `pre code`
1093 - #1207 Fix `.breadcrumb` alignment
1094
1095 ## 0.5.2
1096
1097 ### New features
1098
1099 - #842 `navbar` color modifiers
1100 - #331 Support for third party icons
1101 - Added `$button-focus-box-shadow-size` and `$button-focus-box-shadow-color` for customization
1102 - Added `$input-focus-box-shadow-size` and `$input-focus-box-shadow-color` for customization
1103 - Navbar tabs
1104
1105 ### Issues closed
1106
1107 - #1168 Undefined variable: `$navbar-item`
1108 - #930 Remove `vertical-align: top` for icons
1109 - #735 Font awesome custom `font-size`
1110 - #395 Font awesome stacked icons
1111 - #1152 Level-items not centered horizontally on mobile
1112 - #1147 Add `text-size-adjust: 100%` to `html`
1113 - #1106 `pagination` docs
1114 - #1063 `$family-primary` customization
1115
1116 ## 0.5.1
1117
1118 ### New features
1119
1120 - 🎉 #280 [File upload element](https://bulma.io/documentation/form/file/)
1121 - `$container-offset` variable to determine the `.container` breakpoints
1122 - #1001 Text case helpers
1123
1124 ### Issues closed
1125
1126 - #1030 Add `!important` to non responsive display helpers
1127 - #1020 Customizing `.navbar-item img` max height
1128 - #998 `.navbar-dropdown` with **right** alignment
1129 - #877 `.pagination` isn't using `$pagination-background`
1130 - #989 `navbar-brand` overflowing on mobile
1131 - #975 Variable `$table-head-color` isn't used
1132 - #964 Tabs sass file throwing error with `!important`
1133 - #949 `.is-size-7` helper is missing
1134
1135 ## 0.5.0
1136
1137 ### New features
1138
1139 - 🎉 [List of tags](https://bulma.io/documentation/elements/tag/#list-of-tags)
1140 - New **variable naming system**: `component`-`subcomponent`-`state`-`property`
1141 - Improved **customization** thanks to new set of variables
1142 - #934 New `.is-shadowless` helper
1143
1144 Variable name changes (mostly appending `-color`):
1145
1146 <table>
1147 <tr><th>From</th><th>To</th></tr>
1148 <tr><td><code>$card</code></td><td><code>$card-color</code></td></tr>
1149 <tr><td><code>$card-background</code></td><td><code>$card-background-color</code></td></tr>
1150 <tr><td><code>$card-header</code></td><td><code>$card-header-color</code></td></tr>
1151 <tr><td><code>$dropdown-item</code></td><td><code>$dropdown-item-color</code></td></tr>
1152 <tr><td><code>$dropdown-content-background</code></td><td><code>$dropdown-content-background-color</code></td></tr>
1153 <tr><td><code>$dropdown-item-hover-background</code></td><td><code>$dropdown-item-hover-background-color</code></td></tr>
1154 <tr><td><code>$dropdown-item-hover</code></td><td><code>$dropdown-item-hover-color</code></td></tr>
1155 <tr><td><code>$dropdown-item-active-background</code></td><td><code>$dropdown-item-active-background-color</code></td></tr>
1156 <tr><td><code>$dropdown-item-active</code></td><td><code>$dropdown-item-active-color</code></td></tr>
1157 <tr><td><code>$dropdown-divider-background</code></td><td><code>$dropdown-divider-background-color</code></td></tr>
1158 <tr><td><code>$menu-item</code></td><td><code>$menu-item-color</code></td></tr>
1159 <tr><td><code>$menu-item-hover</code></td><td><code>$menu-item-hover-color</code></td></tr>
1160 <tr><td><code>$menu-item-hover-background</code></td><td><code>$menu-item-hover-background-color</code></td></tr>
1161 <tr><td><code>$menu-item-active</code></td><td><code>$menu-item-active-color</code></td></tr>
1162 <tr><td><code>$menu-item-active-background</code></td><td><code>$menu-item-active-background-color</code></td></tr>
1163 <tr><td><code>$menu-label</code></td><td><code>$menu-label-color</code></td></tr>
1164 <tr><td><code>$message-background</code></td><td><code>$message-background-color</code></td></tr>
1165 <tr><td><code>$message-header-background</code></td><td><code>$message-header-background-color</code></td></tr>
1166 <tr><td><code>$navbar-background</code></td><td><code>$navbar-background-color</code></td></tr>
1167 <tr><td><code>$navbar-item</code></td><td><code>$navbar-item-color</code></td></tr>
1168 <tr><td><code>$navbar-item-hover</code></td><td><code>$navbar-item-hover-color</code></td></tr>
1169 <tr><td><code>$navbar-item-hover-background</code></td><td><code>$navbar-item-hover-background-color</code></td></tr>
1170 <tr><td><code>$navbar-item-active</code></td><td><code>$navbar-item-active-color</code></td></tr>
1171 <tr><td><code>$navbar-item-active-background</code></td><td><code>$navbar-item-active-background-color</code></td></tr>
1172 <tr><td><code>$navbar-tab-hover-background</code></td><td><code>$navbar-tab-hover-background-color</code></td></tr>
1173 <tr><td><code>$navbar-tab-hover-border-bottom</code></td><td><code>$navbar-tab-hover-border-bottom-color</code></td></tr>
1174 <tr><td><code>$navbar-tab-active</code></td><td><code>$navbar-tab-active-color</code></td></tr>
1175 <tr><td><code>$navbar-tab-active-background</code></td><td><code>$navbar-tab-active-background-color</code></td></tr>
1176 <tr><td><code>$navbar-divider-background</code></td><td><code>$navbar-divider-background-color</code></td></tr>
1177 <tr><td><code>$navbar-dropdown-item-hover</code></td><td><code>$navbar-dropdown-item-hover-color</code></td></tr>
1178 <tr><td><code>$navbar-dropdown-item-hover-background</code></td><td><code>$navbar-dropdown-item-hover-background-color</code></td></tr>
1179 <tr><td><code>$navbar-dropdown-item-active</code></td><td><code>$navbar-dropdown-item-active-color</code></td></tr>
1180 <tr><td><code>$navbar-dropdown-item-active-background</code></td><td><code>$navbar-dropdown-item-active-background-color</code></td></tr>
1181 <tr><td><code>$pagination</code></td><td><code>$pagination-color</code></td></tr>
1182 <tr><td><code>$pagination-hover</code></td><td><code>$pagination-hover-color</code></td></tr>
1183 <tr><td><code>$pagination-hover-border</code></td><td><code>$pagination-hover-border-color</code></td></tr>
1184 <tr><td><code>$pagination-focus</code></td><td><code>$pagination-focus-color</code></td></tr>
1185 <tr><td><code>$pagination-focus-border</code></td><td><code>$pagination-focus-border-color</code></td></tr>
1186 <tr><td><code>$pagination-active</code></td><td><code>$pagination-active-color</code></td></tr>
1187 <tr><td><code>$pagination-active-border</code></td><td><code>$pagination-active-border-color</code></td></tr>
1188 <tr><td><code>$pagination-disabled</code></td><td><code>$pagination-disabled-color</code></td></tr>
1189 <tr><td><code>$pagination-disabled-background</code></td><td><code>$pagination-disabled-background-color</code></td></tr>
1190 <tr><td><code>$pagination-disabled-border</code></td><td><code>$pagination-disabled-border-color</code></td></tr>
1191 <tr><td><code>$pagination-current</code></td><td><code>$pagination-current-color</code></td></tr>
1192 <tr><td><code>$pagination-current-background</code></td><td><code>$pagination-current-background-color</code></td></tr>
1193 <tr><td><code>$pagination-current-border</code></td><td><code>$pagination-current-border-color</code></td></tr>
1194 <tr><td><code>$pagination-ellipsis</code></td><td><code>$pagination-ellipsis-color</code></td></tr>
1195 <tr><td><code>$box</code></td><td><code>$box-color</code></td></tr>
1196 <tr><td><code>$box-background</code></td><td><code>$box-background-color</code></td></tr>
1197 <tr><td><code>$button</code></td><td><code>$button-color</code></td></tr>
1198 <tr><td><code>$button-background</code></td><td><code>$button-background-color</code></td></tr>
1199 <tr><td><code>$button-border</code></td><td><code>$button-border-color</code></td></tr>
1200 <tr><td><code>$button-link</code></td><td><code>$button-link-color</code></td></tr>
1201 <tr><td><code>$button-link-hover-background</code></td><td><code>$button-link-hover-background-color</code></td></tr>
1202 <tr><td><code>$button-link-hover</code></td><td><code>$button-link-hover-color</code></td></tr>
1203 <tr><td><code>$button-disabled-background</code></td><td><code>$button-disabled-background-color</code></td></tr>
1204 <tr><td><code>$button-disabled-border</code></td><td><code>$button-disabled-border-color</code></td></tr>
1205 <tr><td><code>$button-static</code></td><td><code>$button-static-color</code></td></tr>
1206 <tr><td><code>$button-static-background</code></td><td><code>$button-static-background-color</code></td></tr>
1207 <tr><td><code>$button-static-border</code></td><td><code>$button-static-border-color</code></td></tr>
1208 <tr><td><code>$input</code></td><td><code>$input-color</code></td></tr>
1209 <tr><td><code>$input-background</code></td><td><code>$input-background-color</code></td></tr>
1210 <tr><td><code>$input-border</code></td><td><code>$input-border-color</code></td></tr>
1211 <tr><td><code>$input-hover</code></td><td><code>$input-hover-color</code></td></tr>
1212 <tr><td><code>$input-hover-border</code></td><td><code>$input-hover-border-color</code></td></tr>
1213 <tr><td><code>$input-focus</code></td><td><code>$input-focus-color</code></td></tr>
1214 <tr><td><code>$input-focus-border</code></td><td><code>$input-focus-border-color</code></td></tr>
1215 <tr><td><code>$input-disabled</code></td><td><code>$input-disabled-color</code></td></tr>
1216 <tr><td><code>$input-disabled-background</code></td><td><code>$input-disabled-background-color</code></td></tr>
1217 <tr><td><code>$input-disabled-border</code></td><td><code>$input-disabled-border-color</code></td></tr>
1218 <tr><td><code>$input-icon</code></td><td><code>$input-icon-color</code></td></tr>
1219 <tr><td><code>$input-icon-active</code></td><td><code>$input-icon-active-color</code></td></tr>
1220 <tr><td><code>$title</code></td><td><code>$title-color</code></td></tr>
1221 <tr><td><code>$subtitle</code></td><td><code>$subtitle-color</code></td></tr>
1222 <tr><td><code>$card-footer-border</code></td><td><code>$card-footer-border-top</code></td></tr>
1223 <tr><td><code>$menu-list-border</code></td><td><code>$menu-list-border-left</code></td></tr>
1224 <tr><td><code>$navbar-tab-hover-border</code></td><td><code>$navbar-tab-hover-border-bottom-color</code></td></tr>
1225 <tr><td><code>$navbar-tab-active-border</code></td><td><code>$navbar-tab-active-border-bottom</code></td></tr>
1226 <tr><td><code>$table-border</code></td><td><code>$table-cell-border</code></td></tr>
1227 <tr><td><code>$table-row-even-background</code></td><td><code>$table-striped-row-even-background-color</code></td></tr>
1228 <tr><td><code>$table-row-even-hover-background</code></td><td><code>$table-striped-row-even-hover-background-color</code></td></tr>
1229 </table>
1230
1231 ### Improved documentation
1232
1233 - [Starter template](https://bulma.io/documentation/overview/start/#starter-template)
1234 - [Colors page](https://bulma.io/documentation/overview/colors/)
1235 - [Typography helpers](https://bulma.io/documentation/modifiers/typography-helpers/)
1236 - **Meta** information for all elements and components
1237 - **Variables** information for most elements and components
1238
1239 ### Issues closed
1240
1241 - #909 `.dropdown` wrapping
1242 - #938 `.is-fullwidth` removed from docs
1243 - #900 Variable `.navbar-item` for hover+active background/color
1244 - #902 `.navbar-item` color overrides
1245
1246 ## 0.4.4
1247
1248 ### New features
1249
1250 - New [dropdown button](https://bulma.io/documentation/components/dropdown/)!
1251 - The breakpoints and `.container` **gap** can be customized with the new `$gap` variable
1252 - The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd`
1253
1254 ### Issues closed
1255
1256 - Fix #26 `.textarea` element will honors `[rows]` attribute
1257 - Fix #887 `body` scrollbar
1258 - Fix #715 `.help` class behavior in horizontal form `is-grouped` field
1259 - Fix #842 Adding modifiers in `navbar`
1260 - Fix #841 `.container` as direct child of `.navbar` moves `.navbar-menu` below `.navbar-brand`
1261 - Fix #861 Box in hero as text and background white
1262 - Fix #852 charset and version number
1263 - Fix #856 JavaScript `.nav-burger` example
1264 - Fix #821 Notification strong color
1265
1266 ## 0.4.3
1267
1268 ### New features
1269
1270 - New navbar with dropdown support
1271 - Add new feature: Breadcrumb component (#632) @vinialbano
1272 - Add Bloomer to README.md (#787) @AlgusDark
1273 - Add responsive is-\*-touch tags for .column sizes (#780) @tom-rb
1274 - Adding 'is-hidden' to helpers in docs (#798) @aheuermann
1275 - Add figure/figcaption as content element (#807) @werthen
1276 - Add <sup> and <sub> support to content (#808) @werthen
1277 - Add re-bulma and react-bulma (#809) @kulakowka
1278 - Add is-halfheight to hero (#783) @felipeas
1279 - Added a related project with Golang backend (#784) @Caiyeon
1280
1281 ### Issues closed
1282
1283 - Fix #827 Breadcrumb and Navbar in docs
1284 - Fix #824 Code examples broken because of `text-align: center`
1285 - Fix #820 Loading spinner resizes with controls
1286 - Fix #819 Remove `height: auto` from media elements
1287 - Fix #790 Documentation typo
1288 - Fix #814 Make use of +fullhd mixin for columns @Saboteur777
1289 - Fix #781 Add min/max height/width to delete class size modifiers @ZackWard
1290 - Fix #391 Section docs update
1291
1292 ## 0.4.2
1293
1294 - Fix #728 selected row on striped table
1295 - Fix #747 remove flex-shrink for is-expanded
1296 - Fix #702 add icons support for select dropdown
1297 - Fix #712 delete button as flexbox item
1298 - Fix #759 static button
1299
1300 ## 0.4.1
1301
1302 - Fix #568 max-width container
1303 - Fix #589 notification delete
1304 - Fix #272 nav-right without nav-menu
1305 - Fix #616 hero and notification buttons
1306 - Fix #607 has-addons z-index
1307 - Feature #586 select color modifiers
1308 - Fix #537 -ms-expand
1309 - Fix #578 better `+center` mixin
1310 - Fix #565 `dl` styles
1311 - Fix #389 `pre` `margin-bottom`
1312 - Fix #484 icon alignment
1313 - Fix #506 bold nav menu
1314 - Fix #581 nav container
1315 - Fix #512 nav grouped buttons
1316 - Fix #605 container example
1317 - Fix #458 select expanded
1318 - Fix #403 separate animations
1319 - Fix #637 customize Bulma
1320 - Fix #584 loading select
1321 - Fix #571 control height
1322 - Fix #634 is-grouped control
1323 - Fix #676 checkbox/radio wrapping
1324 - Feature #479 has-icons placement
1325 - Fix #442 selected table row
1326 - Fix #187 add customize page
1327 - Fix #449 columns negative horizontal margin
1328 - Fix #399 pagination wrapping
1329 - Fix #227 color keys as strings
1330
1331 ## 0.4.0
1332
1333 - **Default font-size is 16px**
1334 - **New `.field` element ; `.control` repurposed**
1335 - **New `.pagination` sizes**
1336 - **New `$fullhd` breakpoint (1344px)**
1337
1338 - Remove monospace named fonts
1339 - Remove icon spacing logic
1340 - Split icon container dimensions and icon size
1341 - Fix delete button by using pixels instead of (r)em
1342 - Fix level on mobile
1343 - Add new `.is-spaced` modifier for titles and subtitles
1344
1345 - Fix #487
1346 - Fix #489
1347 - Fix #502
1348 - Fix #514
1349 - Fix #524
1350 - Fix #536
1351
1352 ## 0.3.2
1353
1354 - Fix #478
1355
1356 ## 0.3.1
1357
1358 - Fix #441
1359 - Fix #443
1360
1361 ## 0.3.0
1362
1363 - Use `rem` and `em` (!)
1364 - Fix Font Awesome icons in buttons (!)
1365 - Fix message colors (!)
1366 - Use `{% capture %}` to ensure same display as code snippet (!)
1367
1368 - Move variables to their own file
1369 - Remove small tag
1370 - Add `:focus` state
1371 - Fix table
1372 - Remove table `.is-icon` and `.is-link`
1373 - Add `.content` table
1374 - Fix inputs with icons
1375 - Input icons require the `.icon` container
1376 - Deprecate `.media-number`
1377 - Fix `.level-item` height
1378 - Fix `.menu` spacing
1379 - Deprecate `.menu-nav`
1380 - Add invert outlined buttons
1381 - Fix `.nav`
1382 - Fix `.pagination`
1383 - Fix `.tabs`
1384 - Fix `.panel`
1385 - Fix `.delete`
1386 - Add mixins documentation
1387 - Add functions documentation
1388
1389 ## 0.2.2
1390
1391 - Fix: remove multiple imports
1392
1393 ## 0.2.1
1394
1395 - Fix: container flex
1396 - Fix: nav-item flex
1397 - Fix: media-number flex
1398 - Fix: new brand colors
1399
1400 ## 0.2.0
1401
1402 - Added: new branding
1403 - Added: modularity
1404 - Added: grid folder
1405 - Added: .github folder
1406
1407 ## 0.1.1
1408
1409 - Remove `flex: 1` shorthand
1410
1411 ## 0.1.0
1412
1413 - Fix #227
1414 - Fix #232
1415 - Fix #242
1416 - Fix #243
1417 - Fix #228
1418 - Fix #245
1419 - Fix #246
1420
1421 ## 0.0.28
1422
1423 - BREAKING: `.control.is-grouped` now uses `.control` elements as direct children
1424 - Fix #220
1425 - Fix #214
1426 - Fix #210
1427 - Fix #206
1428 - Fix #122
1429
1430 ## 0.0.27
1431
1432 - Fix: #217
1433 - Fix: #213
1434 - Fix: #209
1435 - Fix: #205
1436 - Fix: #204
1437 - Fix: #81
1438
1439 ## 0.0.26
1440
1441 - Added: `.modal-card`
1442 - Added: display responsive utilities
1443 - Added: `.nav-center`
1444 - Added: `.tabs ul` left center right
1445 - Changed: `.navbar` renamed to `.level`
1446 - Changed: `.header` renamed to `.nav`
1447 - Deprecated: `.header`
1448 - Deprecated: `.navbar`
1449 - Fixed: `.hero` layout
1450
1451 ## 0.0.25
1452
1453 - Added: `utilities/controls.sass` and `elements/form.sass`
1454 - Added: new responsive classes
1455 - Added: white/black and light/dark colors
1456 - Changed: `.tabs` need `.icon` now
1457 - Changed: cdnjs link doesn't include version
1458
1459 ## 0.0.24
1460
1461 ### Added
1462
1463 - `is-mobile` for the navbar
1464
1465 ### Removed
1466
1467 - removed border between sections. Use `<hr class="is-marginless">` now
1468
1469 ### Updated
1470
1471 - restructured files
1472 - added back `inline-flex` for controls and tags
1473
1474 ### Removed
1475
1476 - test tiles
1477
1478 ## 0.0.23
1479
1480 ### BREAKING
1481
1482 - `bulma` folder renamed to `sass` to avoid the redundant `bulma/bulma` path
1483 - `variables.sass` moved to `/utilities`
1484 - almost everything is singular now
1485 - **elements** only have one class
1486 - **components** have at least one sub-class
1487 - `.content` moved to elements
1488 - `.table` moved to elements
1489 - `.message` moved to components
1490 - `.table-icon`, `.table-link`, `.table-narrow` are now called `.is-icon`, `.is-link`, `.is-narrow`
1491
1492 ### Added
1493
1494 - all variables are now `!default` so you can set your custom variables before importing Bulma
1495
1496 ## 0.0.22
1497
1498 ### Fixed
1499
1500 - links in hero subtitle
1501
1502 ## 0.0.21
1503
1504 ### Added
1505
1506 - `.column.is-narrow` to make a column `flex: none`
1507
1508 ## 0.0.20
1509
1510 ### Added
1511
1512 - `.has-icon` support for different `.input` sizes
1513
1514 ## 0.0.19
1515
1516 ### NEW!!!
1517
1518 - `.tile`
1519
1520 ### BREAKING
1521
1522 - `.is-third` renamed to `.is-one-third`
1523 - `.is-quarter` renamed to `.is-one-quarter`
1524
1525 ### Added
1526
1527 - `.is-two-thirds`
1528 - `.is-three-quarters`
1529
1530 ### Changed
1531
1532 - `.delete` in `.tag` has no red
1533
1534 ## 0.0.18
1535
1536 ### BREAKING
1537
1538 - `.is-text-*` renamed to `.has-text-*`
1539 - removed `.is-fullwidth` helper
1540
1541 ### Added
1542
1543 - **small tag**: `.tag.is-small`
1544 - 12th column classes
1545 - `*-full` column classes
1546 - `$family-code`
1547
1548 ### Fixed
1549
1550 - disabled input with element
1551 - `.table` last row with `th`
1552 - `.card` color in `.hero`
1553 - `.columns.is-gapless`
1554
1555 ### Removed
1556
1557 - removed `box-shadow` from `.tag`
1558 - custom checkboxes and radio buttons
1559
1560 ### Updated
1561
1562 - `.tag` uses `display: inline-flex` now
1563
1564 ## 0.0.17
1565
1566 ### Added
1567
1568 - **pagination**: `.pagination`
1569 - **horizontal forms**: `.control.is-horizontal`
1570 - **help** text for form controls: `.help`
1571 - **progress bars**: `.progress`
1572
1573 ### Updated
1574
1575 - `.button` uses `display: inline-flex` now
1576 - `.button` needs an `.icon` now
1577 - `.control.is-grouped` renamed to `.control.has-addons`
1578 - `.control.is-inline` renamed to `.control.is-grouped`
1579
1580 ### Removed
1581
1582 - **helpers** `.is-inline` and `.is-block`