Skip to content

--bulma-block-spacing CSS variable undefined #4037

@RebekaKovacicHG

Description

@RebekaKovacicHG

Bulma 1.0.4: Found a glitch in our UI after updating to the latest and it looks like CSS variable --bulma-block-spacing is undefined:
Image

Comparing the class .columns:not(:last-child) between versions 0.9.4 and 1.0.4 in sass/grid/columns.scss:

0.9.4:

  • the first value in cal() is hardcoded to 1.5 rem and $column-gap is defined on the top of the page:

$column-gap: 0.75rem !default

...

.columns
+ltr-property("margin", (-$column-gap), false)
+ltr-property("margin", (-$column-gap))
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
&:not(:last-child)
margin-bottom: calc(1.5rem - #{$column-gap})

1.0.4:

  • $column-gap is defined on the top of the page, but block-spacing is missing:

$column-gap: 0.75rem !default;

#{iv.$variables-host} {
@include cv.register-vars(
(
"column-gap": #{$column-gap},
)
);
}

...

.#{iv.$class-prefix}columns {
margin-inline-start: calc(-1 * #{cv.getVar("column-gap")});
margin-inline-end: calc(-1 * #{cv.getVar("column-gap")});
margin-top: calc(-1 * #{cv.getVar("column-gap")});

&:last-child {
margin-bottom: calc(-1 * #{cv.getVar("column-gap")});
}

&:not(:last-child) {
margin-bottom: calc(
#{cv.getVar("block-spacing")} - #{cv.getVar("column-gap")}
);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions