Upgrade bulma to 0.9.3

This commit is contained in:
Jez Cope 2021-09-01 19:33:34 +01:00
parent 00e15cdde5
commit 07a322d987
36 changed files with 1083 additions and 794 deletions

View File

@ -9,7 +9,7 @@
"bulma@^0.9.2"
],
"lockfileEntries": {
"bulma@^0.9.2": "https://registry.yarnpkg.com/bulma/-/bulma-0.9.2.tgz#340011e119c605f19b8ca886bfea595f1deaf23c"
"bulma@^0.9.2": "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
},
"files": [],
"artifacts": {}

View File

@ -1,5 +1,24 @@
# 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
### Breaking change
@ -66,7 +85,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 officially supported as it was too similar to `panel` component. Use that one instead.
### RTL support
@ -109,7 +128,7 @@ Bulma now has **spacing helpers**: https://bulma.io/documentation/helpers/spacin
</ul>
<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>
<ul>
@ -175,7 +194,7 @@ $button-padding-horizontal: 0.75em
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
- `findDarkColor()` which finds the dark version of a color
The light colors are used by the `button` element, while the light and dark colors are used by the `message` component.
@ -217,7 +236,7 @@ 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:
They replace the `$white` and `$black` occurrences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:
```sass
$scheme-main: $black
@ -325,7 +344,7 @@ $title-family: 'Georgia', serif;
- #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
- #2476 Fix #2441 -> Correct active pagination link text color on hero
Fix #1979 -> Correct loading spinner color when a button is:
@ -1212,7 +1231,7 @@ Variable name changes (mostly appending `-color`):
- Fix #26 `.textarea` element will honors `[rows]` attribute
- 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 #841 `.container` as direct child of `.navbar` moves `.navbar-menu` below `.navbar-brand`
- Fix #861 Box in hero as text and background white

View File

@ -81,6 +81,7 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors) | Adds support for attribute-based selectors |
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails) | Integrates Bulma with the rails asset pipeline |
| [BulmaRazor](https://github.com/loogn/bulmarazor) | A lightweight component library based on Bulma and Blazor. |
| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma |
| [Bulmaswatch](https://github.com/jenil/bulmaswatch) | Free themes for Bulma |
| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin |

View File

@ -1,5 +1,5 @@
@charset "utf-8"
/*! bulma.io v0.9.2 | MIT License | github.com/jgthms/bulma */
/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"name": "bulma",
"version": "0.9.2",
"version": "0.9.3",
"homepage": "https://bulma.io",
"author": {
"name": "Jeremy Thomas",
@ -27,10 +27,10 @@
"url": "https://github.com/jgthms/bulma/issues"
},
"devDependencies": {
"autoprefixer": "^9.8.0",
"autoprefixer": "^9.8.6",
"clean-css-cli": "^4.3.0",
"node-sass": "^4.14.1",
"postcss-cli": "^7.1.1",
"postcss-cli": "^7.1.2",
"rimraf": "^3.0.2"
},
"scripts": {

View File

@ -2,7 +2,7 @@
$card-color: $text !default
$card-background-color: $scheme-main !default
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$card-shadow: $shadow !default
$card-radius: 0.25rem !default
$card-header-background-color: transparent !default
@ -54,6 +54,7 @@ $card-media-margin: $block-spacing !default
justify-content: center
.card-header-icon
+reset
align-items: center
cursor: pointer
display: flex

View File

@ -8,7 +8,7 @@ $dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$dropdown-content-shadow: $shadow !default
$dropdown-content-z: 20 !default
$dropdown-item-color: $text !default

View File

@ -1,6 +1,6 @@
@import "../utilities/mixins"
$level-item-spacing: ($block-spacing / 2) !default
$level-item-spacing: ($block-spacing * 0.5) !default
.level
@extend %block

View File

@ -153,6 +153,7 @@ body
overflow-y: hidden
.navbar-burger
@extend %reset
color: $navbar-burger-color
+hamburger($navbar-height)
+ltr-property("margin", auto, false)

View File

@ -134,12 +134,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
flex-shrink: 1
justify-content: flex-start
order: 1
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis
margin-bottom: 0
margin-top: 0
.pagination-previous
order: 2
.pagination-next
order: 3
.pagination
justify-content: space-between
margin-bottom: 0
margin-top: 0
&.is-centered
.pagination-previous
order: 1

View File

@ -3,7 +3,7 @@
$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border-light !default
$panel-radius: $radius-large !default
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$panel-shadow: $shadow !default
$panel-heading-background-color: $border-light !default
$panel-heading-color: $text-strong !default

View File

@ -3,7 +3,7 @@
$box-color: $text !default
$box-background-color: $scheme-main !default
$box-radius: $radius-large !default
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$box-shadow: $shadow !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default

View File

@ -84,14 +84,14 @@ $button-colors: $colors !default
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
+ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
+ltr-property("margin", $button-padding-horizontal / 4)
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
+ltr-property("margin", $button-padding-horizontal * 0.25)
&:last-child:not(:first-child)
+ltr-property("margin", $button-padding-horizontal / 4, false)
+ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
&:first-child:last-child
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
// States
&:hover,
&.is-hovered

View File

@ -151,6 +151,8 @@ $content-table-foot-cell-color: $text-strong !default
// Sizes
&.is-small
font-size: $size-small
&.is-normal
font-size: $size-normal
&.is-medium
font-size: $size-medium
&.is-large

View File

@ -32,9 +32,15 @@ $icon-text-spacing: 0.25em !default
flex-grow: 0
flex-shrink: 0
&:not(:last-child)
margin-right: $icon-text-spacing
+ltr
margin-right: $icon-text-spacing
+rtl
margin-left: $icon-text-spacing
&:not(:first-child)
margin-left: $icon-text-spacing
+ltr
margin-left: $icon-text-spacing
+rtl
margin-right: $icon-text-spacing
div.icon-text
display: flex

View File

@ -13,16 +13,6 @@
margin-bottom: 5px
text-transform: uppercase
.highlight
@extend %block
font-weight: $weight-normal
max-width: 100%
overflow: hidden
padding: 0
pre
overflow: auto
max-width: 100%
.loader
@extend %loader

View File

@ -43,8 +43,6 @@ $subtitle-negative-margin: -1.25rem !default
strong
color: $title-strong-color
font-weight: $title-strong-weight
& + .highlight
margin-top: -0.75rem
&:not(.is-spaced) + .subtitle
margin-top: $subtitle-negative-margin
// Sizes

View File

@ -49,6 +49,8 @@ $file-colors: $form-colors !default
// Sizes
&.is-small
font-size: $size-small
&.is-normal
font-size: $size-normal
&.is-medium
font-size: $size-medium
.file-icon

View File

@ -62,9 +62,9 @@ $column-gap: 0.75rem !default
@for $i from 0 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
.columns.is-mobile > &.is-offset-#{$i}
+ltr-property("margin", percentage($i / 12), false)
+ltr-property("margin", percentage(divide($i, 12)), false)
+mobile
&.is-narrow-mobile
flex: none
@ -120,9 +120,9 @@ $column-gap: 0.75rem !default
@for $i from 0 through 12
&.is-#{$i}-mobile
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-mobile
+ltr-property("margin", percentage($i / 12), false)
+ltr-property("margin", percentage(divide($i, 12)), false)
+tablet
&.is-narrow,
&.is-narrow-tablet
@ -199,10 +199,10 @@ $column-gap: 0.75rem !default
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
+ltr-property("margin", percentage($i / 12), false)
+ltr-property("margin", percentage(divide($i, 12)), false)
+touch
&.is-narrow-touch
flex: none
@ -258,9 +258,9 @@ $column-gap: 0.75rem !default
@for $i from 0 through 12
&.is-#{$i}-touch
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-touch
+ltr-property("margin", percentage($i / 12), false)
+ltr-property("margin", percentage(divide($i, 12)), false)
+desktop
&.is-narrow-desktop
flex: none
@ -316,9 +316,9 @@ $column-gap: 0.75rem !default
@for $i from 0 through 12
&.is-#{$i}-desktop
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-desktop
+ltr-property("margin", percentage($i / 12), false)
+ltr-property("margin", percentage(divide($i, 12)), false)
+widescreen
&.is-narrow-widescreen
flex: none
@ -374,9 +374,9 @@ $column-gap: 0.75rem !default
@for $i from 0 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-widescreen
+ltr-property("margin", percentage($i / 12), false)
+ltr-property("margin", percentage(divide($i, 12)), false)
+fullhd
&.is-narrow-fullhd
flex: none
@ -432,9 +432,9 @@ $column-gap: 0.75rem !default
@for $i from 0 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage($i / 12)
width: percentage(divide($i, 12))
&.is-offset-#{$i}-fullhd
+ltr-property("margin", percentage($i / 12), false)
+ltr-property("margin", percentage(divide($i, 12)), false)
.columns
+ltr-property("margin", (-$column-gap), false)

View File

@ -33,4 +33,4 @@ $tile-spacing: 0.75rem !default
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%
width: (divide($i, 12)) * 100%

View File

@ -8,7 +8,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
$spacing-horizontal: "x" !default
$spacing-vertical: "y" !default
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
@each $property, $shortcut in $spacing-shortcuts
@each $name, $value in $spacing-values

View File

@ -72,6 +72,9 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
.is-italic
font-style: italic !important
.is-underlined
text-decoration: underline !important
.has-text-weight-light
font-weight: $weight-light !important

View File

@ -1,9 +1,10 @@
@import "../utilities/mixins"
$hero-body-padding: 3rem 1.5rem !default
$hero-body-padding-tablet: 3rem 3rem !default
$hero-body-padding-small: 1.5rem !default
$hero-body-padding-medium: 9rem 1.5rem !default
$hero-body-padding-large: 18rem 1.5rem !default
$hero-body-padding-medium: 9rem 4.5rem !default
$hero-body-padding-large: 18rem 6rem !default
$hero-colors: $colors !default
@ -55,6 +56,7 @@ $hero-colors: $colors !default
opacity: 1
li
&.is-active a
color: $color !important
opacity: 1
&.is-boxed,
&.is-toggle
@ -147,3 +149,5 @@ $hero-colors: $colors !default
flex-grow: 1
flex-shrink: 0
padding: $hero-body-padding
+tablet
padding: $hero-body-padding-tablet

View File

@ -1,13 +1,15 @@
@import "../utilities/mixins"
$section-padding: 3rem 1.5rem !default
$section-padding-medium: 9rem 1.5rem !default
$section-padding-large: 18rem 1.5rem !default
$section-padding-desktop: 3rem 3rem !default
$section-padding-medium: 9rem 4.5rem !default
$section-padding-large: 18rem 6rem !default
.section
padding: $section-padding
// Responsiveness
+desktop
padding: $section-padding-desktop
// Sizes
&.is-medium
padding: $section-padding-medium

View File

@ -99,6 +99,10 @@ $size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-4 !default
// Effects
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
// Lists and maps
$custom-colors: null !default
$custom-shades: null !default

View File

@ -20,3 +20,6 @@
%overlay
+overlay
%reset
+reset

View File

@ -58,7 +58,7 @@
$value: $value * $number
@else if $exp < 0
@for $i from 1 through -$exp
$value: $value / $number
$value: divide($value, $number)
@return $value
@function colorLuminance($color)
@ -67,11 +67,11 @@
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
@each $name, $value in $color-rgb
$adjusted: 0
$value: $value / 255
$value: divide($value, 255)
@if $value < 0.03928
$value: $value / 12.92
$value: divide($value, 12.92)
@else
$value: ($value + .055) / 1.055
$value: divide(($value + .055), 1.055)
$value: powerNumber($value, 2)
$color-rgb: map-merge($color-rgb, ($name: $value))
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@ -113,3 +113,24 @@
@if type-of($color) != 'color'
@return $color
@return lighten($color, $amount)
// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
// Replaces old slash division deprecated in Dart Sass
@function divide($dividend, $divisor, $precision: 10)
$sign: if($dividend > 0 and $divisor > 0, 1, -1)
$dividend: abs($dividend)
$divisor: abs($divisor)
$quotient: 0
$remainder: $dividend
@if $dividend == 0
@return 0
@if $divisor == 0
@error "Cannot divide by 0"
@if $divisor == 1
@return $dividend
@while $remainder >= $divisor
$quotient: $quotient + 1
$remainder: $remainder - $divisor
@if $remainder > 0 and $precision > 0
$remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
@return ($quotient + $remainder) * $sign

View File

@ -16,11 +16,11 @@ $white-bis: hsl(0, 0%, 98%) !default
$white: hsl(0, 0%, 100%) !default
$orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 67%) !default
$green: hsl(141, 53%, 53%) !default
$yellow: hsl(44, 100%, 77%) !default
$green: hsl(153, 53%, 53%) !default
$turquoise: hsl(171, 100%, 41%) !default
$cyan: hsl(204, 71%, 53%) !default
$blue: hsl(217, 71%, 53%) !default
$cyan: hsl(207, 61%, 53%) !default
$blue: hsl(229, 53%, 53%) !default
$purple: hsl(271, 100%, 71%) !default
$red: hsl(348, 86%, 61%) !default
@ -69,7 +69,7 @@ $easing: ease-out !default
$radius-small: 2px !default
$radius: 4px !default
$radius-large: 6px !default
$radius-rounded: 290486px !default
$radius-rounded: 9999px !default
$speed: 86ms !default
// Flags

View File

@ -9,11 +9,11 @@
=center($width, $height: 0)
position: absolute
@if $height != 0
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$height} / 2))
left: calc(50% - (#{$width} * 0.5))
top: calc(50% - (#{$height} * 0.5))
@else
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$width} / 2))
left: calc(50% - (#{$width} * 0.5))
top: calc(50% - (#{$width} * 0.5))
=fa($size, $dimensions)
display: inline-block
@ -68,6 +68,18 @@
&:#{$placeholder}-placeholder
@content
=reset
-moz-appearance: none
-webkit-appearance: none
appearance: none
background: none
border: none
color: currentColor
font-family: inherit
font-size: 1em
margin: 0
padding: 0
// Responsiveness
=from($device)

View File

@ -3,6 +3,6 @@
bulma@^0.9.2:
version "0.9.2"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.2.tgz#340011e119c605f19b8ca886bfea595f1deaf23c"
integrity sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==
version "0.9.3"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==