Semver is very strict regarding breaking or non breaking, but when it comes to CSS, this is less crystal clear because there is no real "API".

Changing a behavior under the same API (and talking about CSS, a single class is an API) could be seen as a breaking backward compatibility change.

Changing display from block to flex, and setting flex-grow: 1 on it is a dangerous operation, and should not, IMHO, be taken as a minor release.

When upgrading (not manually, but with default npm policy regarding Semver, ^1.0.1) from 1.0.1 to 1.0.4 It broke our layout, and apparently, we're not the only ones in that case

Yes we should be shrinkwrapping, package-locking or using yarn, but that's not a reason not to follow versioning best practises 😄

The NPM module doesn't have the dist folder in it on this version!

if you have 3 columns with 2 vertical dividers, when you make the screen smaller and the columns get stacked, you still see the vertical divider. It would be great if there is a class to make it horizontal on mobile, or just make it dissapear.

Hi!
I ran into problems with installing all the extensions. When I run npm install bulma-extensions, there is only bulma-calendar installed in node_modules folder. However, if I open up packages.json, there is bulma-extensions and not bulma-calendar.
Sass and css from bulma-calendar does not contain stuff like dividers, accordion...
Am I doing something wrong or is this something normal?
UPDATE: I tried installing bulma-divider. Still no traces of Bulma-divider in modules, but importing works :)
Thanks,
Gasper

Just stumbled upon your Bulma extensions and they seem very nice! I was curious though, do you have those switch, radio, or checkbox controls shown in the screenshot of this package? I'm particularly interested in the switch. Do you have any plans to publish it and/or submit to the Bulma extensions list?

Thanks!

Hi,
I recently upgraded from v1.0.1 to v1.0.4 and noticed that the vertical divider behaves completely different than before.
I don't know whether this is desired behavior, but at least I can say that my layouts are broken now and I would like to know how to get back the result as it was.
The gap is way to large and the line also does not go down to the end of the containers it divides.
Hope there is a quick fix or hint how to solve it soon!

Best regards and thanks for the great work!

The title says it all. At first I thought overwriting the font size would also affect the thickness of the divider. So would it be possible to provide a variable for the thickness, or is there a better way?

The background colour of the divider text seems to be stuck at #fff no matter what I do.

This is my base.scss:

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
@import 'variables';
@import '~bulma';
@import '~bulma-divider';

I have this line in variables.scss:

$divider-content-background-color: $body-background-color;

and I've also tried explicitly putting that line immediately before and after

@import '~bulma-divider';

but it ignores me and sets the background colour of the divider text to pure white, which looks ugly when the page background isn't pure white.

It's odd, since bulma-divider sets the variable with !default, so I should be able to override it — the inspector shows that the CSS is coming from bulma-divider.min.css so the only thing I can think of is that it's not actually compiling it but using the dist/bulma-divider.min.css that's in the repo.

This is a Rails app using webpacker and Vue — I can confirm that changing one of Bulma's variables (like $body-background-color) and reloading the page causes webpack-dev-server to compile everything, so I don't think it's an issue with compiles not being triggered.

Please could you tell me how can I get it to compile itself and use the value in the variable, rather than the pre-built version?

(As an aside, would it not be better to default to Bulma's page background colour rather than $white? That would make it work for more people out of the box, as most people won't need to set $divider-content-background-color at all…)

I get that message when I import bulma-divider on Vue

Module build failed:
$divider-background-color: $grey-lighter !default
$divider-font-size: $size-7 !default
$divider-color: $grey-light !default

.is-divider, .is-divider-vertical
  display: block
  position: relative

.is-divider[data-content]::after, .is-divider-vertical[data-content]::after
  background: $white
  color: $divider-color
  content: attr(data-content)
  display: inline-block
  font-size: $divider-font-size
  padding: .5rem .8rem
  -webkit-transform: translateY(-1.1rem)
  -ms-transform: translateY(-1.1rem)
  transform: translateY(-1.1rem)
  text-align: center

.is-divider
  border-top: .1rem solid $divider-background-color
  height: .1rem
  margin: 2rem 0
  text-align: center

.is-divider-vertical
  display: block
  padding: 2rem
  position: relative
  &::before
    border-left: .1rem solid $divider-background-color
    bottom: 1rem
    content: ""
    display: block
    left: 50%
    position: absolute
    top: 1rem
    -webkit-transform: translateX(-50%)
    -ms-transform: translateX(-50%)
    transform: translateX(-50%)
  &[data-content]::after
    left: 50%
    padding: .4rem 0
    position: relative
    top: 50%
    -webkit-transform: translate(-50%, -50%)
    -ms-transform: translate(-50%, -50%)
    transform: translate(-50%, -50%)

                          ^
      Undefined variable: "$grey-lighter".

No problem when using the CSS file, only when importing the .sass file.

I would suggest to allow for different colors like the rest of bulma:

.is-divider, .is-divider-vertical {
    @each $name,
    $pair in mergeColorMaps($colors, $shades) {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &.is-#{$name} {
            border-top-color: $color;

            &[data-content]::after, &[data-content]::after {
                background: $color-invert;
                color: $color;
            }
            
            &::before {
                border-left-color: $color;
            }
        }
    }
}