[Snyk] Upgrade bulma from 0.7.5 to 0.8.0

[snyk-bot]

Snyk has created this PR to upgrade bulma from 0.7.5 to 0.8.0.

• The recommended version is 1 version ahead of your current version.
• The recommended version was released 9 days ago, on 2019-10-18.

Release notes

• Package name: bulma
  • 0.8.0 - 2019-10-18

    Big update

    Larger form controls

    Controls and buttons are now 2.5em high. You can revert this resizing by setting these previous values:

    $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
    • 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.

    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:

    $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 occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:

    $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 - 2019-05-18

    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:

    $title-family: "Georgia", serif;

    • #2375 Add .is-relative helper
    • #2321 Make .navbar focus behave like hover for the navigation
    • #2290 Fix #1186 -> Reset the offset on columns
    • #2231 Add .has-text-weight-medium helper
    • #2224 Add customizable border radius to progress bar
    • #2480 Add $footer-color variable

    Improvements

    • #2396 Update docs with webpack 4 example
    • #2381 Make centered buttons have equal margin
    • Fix #2297 -> Remove .container fixed width values, use flex-grow
    • #2478 Move form.sass into its own folder

    Bug fixes

    • #2420 Fix #2414 -> Fix align attribute in td/th being ignored
    • #2463 Remove duplicate .has-addons in tag.sass
    • #2253 Fix $gap variable default value
    • #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox
    • #2175 Proper aligning for .tabs within .content
    • #2476 Fix #2441 -> Correct active pagination link text colour on hero

    Fix #1979 -> Correct loading spinner color when a button is:

    • outlined and hovered/focused
    • outlined, inverted and hovered/focused

    New variables

    Initial variables

    • $block-spacing

    Base

    • $body-font-size
    • $small-font-size
    • $pre-font-size
    • $pre-padding
    • $pre-code-font-size

    Components

    • $card-header-padding
    • $card-content-padding
    • $card-media-margin
    • $dropdown-menu-min-width
    • $dropdown-content-padding-bottom
    • $dropdown-content-padding-top
    • $level-item-spacing
    • $menu-list-line-height
    • $menu-list-link-padding
    • $menu-nested-list-margin
    • $menu-nested-list-padding-left
    • $menu-label-font-size
    • $menu-label-letter-spacing
    • $menu-label-spacing
    • $pagination-item-font-size
    • $pagination-item-margin
    • $pagination-item-padding-left
    • $pagination-item-padding-right
    • $panel-margin
    • $panel-tabs-font-size

    Elements

    • $container-offset

    Grid

    • $tile-spacing
from [`bulma` GitHub Release Notes](https://github.com/jgthms/bulma/releases)

------------

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs